/* IraqMDb Final UAT responsive/home fixes — 2026-10-02 */

/* Desktop hero intro: keep the editorial sentence on one line when room exists. */
@media (min-width: 901px) {
    .m2-editorial-kicker p {
        width: 100% !important;
        max-width: none !important;
        white-space: nowrap;
    }
}

/* Stronger visual separation between home sections without leaving the dark identity. */
.ix-home-block {
    position: relative;
    border-top: 1px solid rgba(255,255,255,.035);
    border-bottom: 1px solid rgba(255,255,255,.075);
}
.ix-home-block:nth-of-type(4n+1) {
    background:
        radial-gradient(circle at 82% 12%, rgba(40,190,214,.075), transparent 34%),
        #061117 !important;
}
.ix-home-block:nth-of-type(4n+2) {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,179,38,.065), transparent 31%),
        #081319 !important;
}
.ix-home-block:nth-of-type(4n+3) {
    background:
        radial-gradient(circle at 78% 82%, rgba(44,124,157,.075), transparent 34%),
        #050d12 !important;
}
.ix-home-block:nth-of-type(4n+4) {
    background:
        radial-gradient(circle at 22% 76%, rgba(255,179,38,.045), transparent 30%),
        #071017 !important;
}

/* Compact account affordance. */
.ix-account-entry {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
}
.ix-account-entry svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Header search suggestions must always open below the actual search field. */
.global-search .ix-search-suggestions.is-open {
    position: absolute !important;
    inset-inline: 0 !important;
    top: calc(100% + 6px) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Keep section action links readable on one line. */
.ix-home-section-heading > a {
    white-space: nowrap;
}
.ix-mobile-title-line {
    display: inline;
}

/* Keep homepage category pills horizontal on tablet/mobile. */
@media (max-width: 900px) {
    .ix-cinema-categories {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .ix-cinema-categories a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 40px !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
    }

    /* Keep the live feed compact on tablet: six items = 3 rows x 2 columns. */
    .m2-now-feed__grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 620px) {
    .m2-now-feed__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Weekly community strip: compact motivation, not a dashboard takeover. */
.m6-community-leaders {
    background:
        radial-gradient(circle at 72% 40%, rgba(40,190,214,.08), transparent 34%),
        #071218 !important;
}
.m6-community-leaders__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}
.m6-community-leader {
    display: grid;
    grid-template-columns: 28px 48px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(6,18,24,.88);
}
.m6-community-leader__rank {
    color: var(--gold);
    font-size: 1.05rem;
    text-align: center;
}
.m6-community-leader__avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #102630;
    color: var(--gold);
    font-weight: 900;
}
.m6-community-leader__avatar img,
.m6-community-leader__avatar .iraqmdb-person-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m6-community-leader__copy {
    min-width: 0;
}
.m6-community-leader__copy a,
.m6-community-leader__copy small {
    display: block;
}
.m6-community-leader__copy a {
    overflow: hidden;
    color: #f5f7f8;
    font-weight: 850;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m6-community-leader__copy small {
    margin-top: 3px;
    color: #8fa5ae;
    font-size: .72rem;
}
.m6-community-leader__movement {
    min-width: 42px;
    text-align: center;
    color: #9babb2;
    font-size: .78rem;
    font-weight: 900;
}
.m6-community-leader__movement.is-up { color: #6ad49b; }
.m6-community-leader__movement.is-down { color: #ef8c83; }
.m6-community-leaders__empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(5,14,19,.7);
}
.m6-community-leaders__empty strong,
.m6-community-leaders__empty p { display:block; }
.m6-community-leaders__empty p {
    margin: 4px 0 0;
    color: #91a6ae;
    font-size: .84rem;
}

@media (max-width: 900px) {
    .m6-community-leaders__rail {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 620px) {
    .m6-community-leaders__rail {
        grid-template-columns: 1fr;
    }
    .m6-community-leaders__empty {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Mobile header/footer/menu and poster geometry. */
@media (max-width: 560px) {
    .site-header .header-actions {
        flex-wrap: nowrap !important;
        gap: 7px !important;
        align-items: center;
    }
    .site-header .header-actions .gold-button {
        min-width: 0;
        padding-inline: 11px;
        font-size: .78rem;
        white-space: nowrap;
    }

    .ix-home-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: start !important;
        gap: 8px 10px !important;
    }
    .ix-home-section-heading > div {
        min-width: 0;
    }
    .ix-home-section-heading h2 {
        font-size: clamp(1.48rem, 7.2vw, 1.9rem) !important;
        line-height: 1.28 !important;
    }
    .ix-home-section-heading > a {
        align-self: center;
        font-size: .74rem !important;
        line-height: 1.35;
        white-space: nowrap !important;
    }
    .ix-home-section-heading .ix-mobile-title-line {
        display: block;
    }

    .ix-home-poster-rail,
    .m16-full-movie-rail {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 12px 10px !important;
        justify-items: stretch !important;
    }
    .ix-home-poster-card,
    .ix-home-poster-card .work-poster {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .mega-menu-grid,
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 22px 16px !important;
        align-items: start;
    }
    .footer-grid .footer-brand {
        grid-column: 1 / -1;
    }
    .mega-menu section,
    .footer-grid section {
        min-width: 0;
    }
    .mega-menu a,
    .site-footer a {
        overflow-wrap: anywhere;
    }

    /* Reserve safe visual space so fixed feedback never covers footer copy. */
    .site-footer {
        padding-bottom: 118px !important;
    }
    .ix-floating-feedback {
        right: auto !important;
        left: calc(10px + env(safe-area-inset-left, 0px)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .ix-floating-feedback a {
        width: 124px !important;
        min-height: 36px !important;
        height: auto !important;
        padding: 7px 9px !important;
        justify-content: flex-start !important;
        border-radius: 9px !important;
        font-size: .7rem !important;
        line-height: 1.2 !important;
    }
    .ix-floating-feedback a span {
        width: 19px !important;
        height: 19px !important;
        flex: 0 0 19px !important;
        font-size: .72rem !important;
    }

    .m2-editorial-kicker p {
        width: 100% !important;
        white-space: normal !important;
    }
}

/* Override the older icon-only rule at the narrowest widths: labels stay visible. */
@media (max-width: 420px) {
    .ix-floating-feedback a {
        width: 118px !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 7px 8px !important;
        border-radius: 9px !important;
        font-size: .67rem !important;
    }
    .ix-floating-feedback a span {
        display: grid !important;
    }
}

/* Keep tablet poster sizing consistent with all other homepage shelves. */
@media (min-width: 561px) and (max-width: 900px) {
    .ix-home-poster-rail,
    .m16-full-movie-rail {
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
        gap: 14px !important;
    }
}


/* FINAL UAT VISUAL OVERRIDES — 2026-10-02 */
@media (min-width: 901px) {
    .m2-editorial-kicker p {
        display:block !important;
        width:100% !important;
        max-width:none !important;
        white-space:nowrap !important;
        font-size:clamp(.86rem,.95vw,.98rem) !important;
    }
}

/* Make section boundaries unmistakable while preserving the dark cinema identity. */
.ix-home-block {
    position:relative;
    isolation:isolate;
    border-top:1px solid rgba(255,255,255,.07) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.ix-home-block:nth-of-type(4n+1) {
    background:
        radial-gradient(circle at 84% 16%,rgba(34,184,210,.12),transparent 35%),
        linear-gradient(180deg,#07151c,#061117) !important;
}
.ix-home-block:nth-of-type(4n+2) {
    background:
        radial-gradient(circle at 16% 22%,rgba(255,179,38,.10),transparent 32%),
        linear-gradient(180deg,#09151b,#071218) !important;
}
.ix-home-block:nth-of-type(4n+3) {
    background:
        radial-gradient(circle at 80% 82%,rgba(45,115,168,.12),transparent 34%),
        linear-gradient(180deg,#061018,#050d12) !important;
}
.ix-home-block:nth-of-type(4n+4) {
    background:
        radial-gradient(circle at 20% 74%,rgba(255,179,38,.075),transparent 30%),
        linear-gradient(180deg,#081219,#061017) !important;
}

/* Search suggestions always belong below the search field. */
.site-header .global-search { position:relative !important; overflow:visible !important; }
.site-header .ix-search-suggestions {
    position:absolute !important;
    inset-inline:0 !important;
    top:calc(100% + 6px) !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    z-index:50000 !important;
}

/* Compact login/account affordance across every viewport. */
.site-header .ix-account-entry {
    width:42px !important;
    min-width:42px !important;
    height:40px !important;
    padding:0 !important;
    display:inline-grid !important;
    place-items:center !important;
}
.site-header .ix-account-entry svg { width:20px !important; height:20px !important; }

@media (max-width: 760px) {
    .site-header .header-actions {
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:7px !important;
        min-width:0;
    }
    .site-header .header-actions .gold-button {
        width:auto !important;
        min-width:0 !important;
        max-width:calc(100vw - 88px) !important;
        padding-inline:12px !important;
        white-space:nowrap !important;
    }

    .mega-menu-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px 16px !important;
    }

    .footer-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:24px 16px !important;
    }
    .footer-grid .footer-brand { grid-column:1 / -1 !important; }
    .footer-bottom {
        padding-bottom:104px !important;
        gap:8px !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .ix-floating-feedback {
        left:10px !important;
        right:auto !important;
        bottom:10px !important;
        width:auto !important;
        grid-template-columns:1fr !important;
    }

    .ix-home-section-heading {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:start !important;
        gap:8px 10px !important;
    }
    .ix-home-section-heading > a {
        display:inline-flex !important;
        align-items:center !important;
        white-space:nowrap !important;
        font-size:.72rem !important;
        line-height:1.25 !important;
    }
}

@media (max-width: 560px) {
    .ix-home-poster-rail,
    .m16-full-movie-rail {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px 10px !important;
        width:100% !important;
        margin:0 !important;
    }
    .ix-home-poster-card {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
    }
    .ix-home-poster-card .work-poster {
        width:100% !important;
        max-width:none !important;
    }

    .ix-home-section-heading h2 {
        font-size:clamp(1.42rem,7vw,1.82rem) !important;
        line-height:1.3 !important;
    }
    .ix-home-section-heading .ix-mobile-title-line {
        display:block !important;
    }

    .mega-menu {
        max-height:calc(100vh - 116px) !important;
    }
    .mega-menu-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px 14px !important;
        padding-block:18px !important;
    }
    .mega-menu a {
        font-size:.84rem !important;
        line-height:1.45 !important;
        padding:5px 0 !important;
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .ix-home-poster-rail,
    .m16-full-movie-rail {
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px !important;
        width:100% !important;
    }
}