/* MOBILE — overrides for HEADER + HERO at <=1024px
   Loaded LAST so all rules win specificity battles via media query.
   Pattern per claude-html §3.8 mobile breakpoint + §KK (reset transforms on mobile).

   Mobile Figma reference: 375 × 681 (MAIN section, see figma-refs/06-mobile-hero.png).
   Layout: logo+hamburger top bar → photo half → dark area with title+stats. */

@media (max-width: 1024px) {

    /* ========== Universal reset for scaled-stage children on mobile ==========
       Per claude-html §KK: when going from absolute (desktop) → relative (mobile),
       must explicitly reset position/transform/left/right or absolute coords leak. */
    .site-header__stage,
    .hero__stage {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* ===== HEADER (mobile) =====
       Bar: logo LEFT, hamburger RIGHT (LTR flex order). Height 70px. */
    .site-header {
        height: 70px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
    }
    /* Soft gradient backdrop for readability over photo (per claude-html §FF) */
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 110px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
        pointer-events: none;
        z-index: -1;
    }
    .site-header.is-scrolled {
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .site-header.is-scrolled::before {
        opacity: 0;
    }
    .site-header__stage {
        direction: ltr;                       /* claude-html §Z — flex order LTR for explicit left/right */
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        height: 70px !important;
    }
    /* Hide desktop-only nav, phone, CTA */
    .site-header__nav,
    .site-header__phone,
    .site-header__cta {
        display: none !important;
    }
    /* Logo (LEFT edge — order: 1) */
    .site-header__logo {
        position: static !important;
        order: 1;
        width: 86px;
        height: 46px;
        padding: 0;
    }
    /* Hamburger (RIGHT edge — order: 3) */
    .site-header__hamburger {
        display: inline-flex !important;
        order: 3;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: #fff;                          /* hamburger SVG uses currentColor */
        position: relative;
    }
    .site-header__hamburger img {
        width: 24px;
        height: 18px;
    }

    /* ===== HERO (mobile) =====
       Stack vertically: top half = photo+gradient, bottom half = title+stats on dark bg.
       Total ~680px to match Figma MAIN. */
    .hero {
        height: auto !important;              /* not 100vh on mobile — auto by content */
        min-height: 860px;
        background: var(--c-bg);              /* dark bg for the bottom text area */
    }
    /* Video bg: only covers top portion of hero (~430px) */
    .hero__bg-video {
        height: 430px;                        /* fixed photo height per Figma */
        bottom: auto;
    }
    /* Top fade overlay (mobile shade-top): gradient from black at top to transparent */
    .hero__shade-top {
        height: 100px;
        z-index: 2;
    }
    /* Hide desktop left-edge gradient — not used on mobile */
    .hero__shade-left {
        display: none;
    }
    /* Bottom fade (photo → dark area transition) */
    .hero__shade-bottom {
        position: absolute;
        top: 330px;                            /* starts 100px above photo bottom */
        left: 0;
        right: 0;
        height: 120px;
        bottom: auto;
        background: linear-gradient(to bottom, rgba(14, 14, 16, 0), var(--c-bg) 90%);
        z-index: 3;
    }

    /* ========== Stage on mobile — vertical flow ==========
       Becomes a static container with relative children. */
    .hero__stage {
        position: relative !important;
        padding: 0;
        min-height: 860px;
        pointer-events: auto;
    }
    .hero__stage > * {
        pointer-events: auto;
    }

    /* ===== Title block (mobile) — under the photo, centered, white on dark ===== */
    .hero__titles {
        position: absolute !important;
        top: 366px !important;                /* below photo (430) - some overlap into gradient */
        right: auto !important;
        left: 0 !important;
        width: 100%;
        padding: 0 16px;
        text-align: center;
        z-index: 4;
    }
    .hero__title {
        font-size: 36px;
        line-height: 40px;
        text-align: center !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    }
    .hero__rule {
        width: calc(100% - 32px) !important;
        max-width: 344px;
        margin: 14px auto 16px !important;
        height: 4px;
    }
    .hero__subtitle {
        width: auto !important;
        max-width: 330px;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 20px;
        line-height: 28px;
    }

    /* ===== Stats (mobile) — 3 columns flex row, RTL.
       Build as 3 inline clusters with dividers between them.
       Avoid `inset: auto` (§YY) — set each side individually. */
    .hero__stats {
        position: absolute !important;
        top: 500px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: auto !important;
        width: 100%;
        padding: 0 22px;
        display: flex;
        flex-direction: row-reverse;             /* RTL: רק cluster on RIGHT, 20 on LEFT */
        align-items: flex-end;
        justify-content: space-between;
        z-index: 4;
    }

    /* Outer dividers hidden, middle 2 shown */
    .hero__divider--1,
    .hero__divider--4 {
        display: none;
    }
    .hero__divider--2,
    .hero__divider--3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 1px !important;
        height: 70px;
        opacity: 0.85;
        align-self: flex-end;
        margin: 0 0 18px;
        order: 0;
    }
    .hero__divider--3 { order: 2; }            /* between cluster 1 (רק) and cluster 2 (350) */
    .hero__divider--2 { order: 4; }            /* between cluster 2 (350) and cluster 3 (20) */

    /* ----- Cluster 1 (rightmost): רק + ייצוג + בעלי דירות ----- */
    .hero__stat-rak {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        font-size: 56px;
        line-height: 1;
        text-align: center !important;
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
    }
    /* "ייצוג" small text — render INLINE inside the רק cluster via ::before */
    .hero__stat-mid {
        display: none;                         /* hide on mobile; we'll show via cluster restructure */
    }
    .hero__stat-rak-label {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        font-size: 13px;
        line-height: 1;
        text-align: center !important;
        margin-top: 8px;
        order: 1;                              /* same order as רק — flex sub-stacks via wrap... but use rak cluster wrap */
    }
    /* Trick: wrap רק + label visually by absolute positioning the label below the רק */
    /* Actually cleaner: use a flex column for the cluster. Mark it with .hero__stat-rak parent.
       Since we can't change DOM, use a span+span approach: rak label is absolute positioned below rak. */
    /* Forget the cluster approach — use simple grid for 3 columns each with num+label stacked */
}

/* ===== Re-do mobile stats with cleaner grid approach ===== */
@media (max-width: 1024px) {
    .hero__stats {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        grid-template-rows: auto auto;
        align-items: end;
        justify-items: center;
        column-gap: 14px;
        row-gap: 6px;
    }

    /* Cluster 3 (LEFT visual in RTL): 20 + שנות פעילות */
    .hero__stat-num--20 {
        grid-column: 1;
        grid-row: 1;
        font-size: 44px !important;
        line-height: 1 !important;
        width: auto !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
    .hero__stat-label--20 {
        grid-column: 1;
        grid-row: 2;
        font-size: 13px !important;
        line-height: 1 !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* Divider between 20 and 350 */
    .hero__divider--3 {
        grid-column: 2;
        grid-row: 1 / 3;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 1px !important;
        height: 64px;
        align-self: end;
        margin-bottom: 10px;
        opacity: 0.85;
    }

    /* Cluster 2 (MIDDLE): 350 + פרויקטים */
    .hero__stat-num--350 {
        grid-column: 3;
        grid-row: 1;
        font-size: 44px !important;
        line-height: 1 !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
    }
    .hero__stat-label--350 {
        grid-column: 3;
        grid-row: 2;
        font-size: 13px !important;
        line-height: 1 !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* Divider between 350 and רק cluster */
    .hero__divider--2 {
        grid-column: 4;
        grid-row: 1 / 3;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 1px !important;
        height: 64px;
        align-self: end;
        margin-bottom: 10px;
        opacity: 0.85;
    }

    /* Cluster 1 (RIGHT visual in RTL): רק + ייצוג (small overlay) + בעלי דירות
       Stack vertically using flex column on the parent cluster.
       Since DOM has רק/ייצוג/בעלי-דירות as 3 siblings, lay each in its own grid cell. */
    .hero__stat-rak {
        grid-column: 5;
        grid-row: 1;
        font-size: 50px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        display: inline-block;
    }
    /* ייצוג small text overlays the top-left of רק (per Figma at x=93 just left of רק) */
    .hero__stat-mid {
        grid-column: 5;
        grid-row: 1;
        font-size: 12px !important;
        line-height: 1 !important;
        text-align: center !important;
        position: absolute !important;
        top: 0 !important;
        right: 6px !important;
        left: auto !important;
        white-space: nowrap;
        display: block !important;
    }
    .hero__stat-rak-label {
        grid-column: 5;
        grid-row: 2;
        font-size: 13px !important;
        line-height: 1 !important;
        text-align: center !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* ===== Awards strip (mobile) — RIGHT side of header, much smaller than desktop ===== */
    .hero__awards {
        position: absolute !important;
        top: 80px !important;
        left: auto !important;
        right: 0 !important;
        width: 84px !important;
        height: 200px !important;
        border-radius: 7px 0 0 7px;
        background: rgba(29, 29, 27, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 5;
    }
    /* Show only 3 awards on mobile (madad, bdi, duns-b), hide the rest */
    .hero__award--duns-a,
    .hero__award--getstatus {
        display: none;
    }
    .hero__award-line--3,
    .hero__award-line--4,
    .hero__award-line--5 {
        display: none;
    }
    /* Reposition the 3 mobile awards within the 200h strip */
    .hero__award--madad {
        top: 12px !important;
        left: 15px !important;
        width: 54px !important;
        height: 48px !important;
    }
    .hero__award-line--1 {
        top: 65px !important;
        left: 8px !important;
        width: 68px !important;
    }
    .hero__award--bdi {
        top: 75px !important;
        left: 15px !important;
        width: 56px !important;
        height: 49px !important;
    }
    .hero__award-line--2 {
        top: 130px !important;
        left: 8px !important;
        width: 68px !important;
    }
    .hero__award--duns-b {
        top: 138px !important;
        left: 1px !important;
        width: 82px !important;
        height: 35px !important;
    }

    /* ===== WhatsApp widget (mobile) — hide, will be replaced by bottom bar in future ===== */
    .hero__wa {
        display: none !important;
    }

    /* ===== NEW (Figma 2072-3181): overline + stats row (mobile) ===== */
    .hero__overline {
        font-size: 18px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
        margin: 0 0 8px !important;
    }
    /* badge "ייצוג רק בעלי דירות" is desktop-only (not in mobile design) */
    .hero__badge { display: none !important; }

    /* Stats: 3-column flex row (RTL), 2 dividers between — Figma node 1676-18249 */
    .hero__statbox {
        position: absolute !important;
        top: 596px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 17px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        direction: rtl !important;
        z-index: 4;
    }
    .hero__stat {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        flex: 1 1 0 !important;
        text-align: center !important;
    }
    .hero__stat--years     { order: 1; }
    .hero__statdiv--b      { order: 2; }
    .hero__stat--residents { order: 3; }
    .hero__statdiv--a      { order: 4; }
    .hero__stat--projects  { order: 5; }
    .hero__statdiv--c { display: none !important; }
    .hero__statdiv--a,
    .hero__statdiv--b {
        position: static !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 1px !important;
        height: 57.6px !important;
        align-self: center !important;
        margin-top: 6px !important;
    }
    .hero__statnum { font-size: 42px !important; line-height: 49px !important; font-weight: 500 !important; }
    .hero__statlabel { font-size: 12px !important; line-height: 1.4 !important; }

} /* /max-width: 1024px */


/* ===== SMALL MOBILE (<=480) — extra tightening ===== */
@media (max-width: 480px) {
    /* Figma mobile artboard is 375px → keep titles at the design sizes (36/20).
       Numbers shrink slightly to avoid 3-col overflow on ~360px phones. */
    .hero__title {
        font-size: 34px;
        line-height: 39px;
    }
    .hero__subtitle {
        font-size: 18px;
        line-height: 26px;
    }
    .hero__statnum { font-size: 38px !important; line-height: 44px !important; }
    .hero__statlabel { font-size: 11px !important; }
}

/* ===== Mobile menu OPEN state (when body.menu-open) ===== */
@media (max-width: 1024px) {
    /* Mobile menu panel — fixed overlay below header */
    .site-menu {
        position: fixed;
        top: 70px;                          /* below header bar */
        left: 0;
        right: 0;
        bottom: 56px;                       /* above bottom bar */
        background: #fff;
        z-index: 95;
        display: flex;
        flex-direction: column;
        padding: 12px 0 24px;
        overflow-y: auto;
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s 0.3s;
        direction: rtl;
    }
    body.menu-open .site-menu {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s;
    }

    /* Menu items: vertical list with dividers */
    .site-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: 1 1 auto;
    }
    .site-menu__item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .site-menu__link {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        font-family: var(--ff-he);
        font-weight: 400;
        font-size: 18px;
        line-height: 1;
        color: #1d1d1b;
        text-decoration: none;
        text-align: right;
    }
    .site-menu__link img {
        width: 18px;
        height: 18px;
        opacity: 0.6;
    }

    /* Mobile bottom action bar — 3 buttons */
    .mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        display: flex;
        direction: ltr;
        z-index: 90;
    }
    @media (min-width: 1025px) {
        .mobile-bar { display: none; }
    }
    .mobile-bar__btn {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        font-family: var(--ff-he);
        font-weight: 400;
        font-size: 13px;
        color: #fff;
        border: 0;
    }
    .mobile-bar__btn--callback {
        background: #f6f6f6;
        color: #1d1d1b;
    }
    .mobile-bar__btn--wa {
        background: #27d045;
    }
    .mobile-bar__btn--call {
        background: var(--c-gold-flat);
    }
    .mobile-bar__btn img {
        width: 20px;
        height: 20px;
    }
    .mobile-bar__btn--callback img,
    .mobile-bar__btn--call img,
    .mobile-bar__btn--wa img {
        filter: invert(0);
    }
    .mobile-bar__btn--callback img {
        filter: none;
    }
    .mobile-bar__btn--wa img,
    .mobile-bar__btn--call img {
        filter: brightness(0) invert(1);
    }

    /* When menu open, hamburger transforms to X */
    body.menu-open .site-header__hamburger img {
        opacity: 0;
    }
    .site-header__hamburger::before,
    .site-header__hamburger::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 2px;
        background: #fff;
        opacity: 0;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    }
    body.menu-open .site-header__hamburger::before {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    body.menu-open .site-header__hamburger::after {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    /* Header BG dark when menu open (per claude-html §HH) */
    body.menu-open .site-header {
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    body.menu-open .site-header::before {
        opacity: 0;
    }
    /* Hamburger color: white in dark header */
    body.menu-open .site-header__hamburger {
        color: #fff;
    }
    body.menu-open .site-header__hamburger::before,
    body.menu-open .site-header__hamburger::after {
        background: #1d1d1b;                /* dark X over light header bar in menu open per Figma */
    }
    /* Actually menu shows light header → hamburger X in dark */
    body.menu-open .site-header {
        background: #fff;
    }
    body.menu-open .site-header .site-header__logo img {
        filter: none;
    }

    /* Mobile floating accessibility — keep visible above bottom bar */
    .site-footer__floating {
        bottom: 72px;
    }
}

/* Hide menu when in desktop */
@media (min-width: 1025px) {
    .site-menu,
    .mobile-bar {
        display: none !important;
    }
}