/* ============================================================
   GONENIM WEBSITE — MOBILE-ONLY RESPONSIVE LAYER
   ------------------------------------------------------------
   Every rule here is scoped inside a mobile media query, so the
   DESKTOP layout is never affected. This is the single home for
   all responsive fixes from the mobile QA audit (2026-06-24).

   Loaded LAST (after styles.css + _ds_bundle.js) so its rules
   win cascade order; `!important` is used only where it must beat
   a component's inline style (React inline styles otherwise win).
   ============================================================ */

/* ============================================================
   1 · MOBILE TYPE SCALE  (audit #1 — hero headings crop)
   The fluid clamp() minimums are sized for desktop and are far
   too large on a 320–390px screen, cropping hero titles. Re-declaring
   the type tokens inside the mobile query cascades automatically into
   every `.t-display` / `.t-mega` AND every inline `var(--text-mega)`
   used by the page heroes (CSS vars resolve at computed-value time).
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --text-mega:    clamp(2.05rem, 10.5vw, 3.4rem);
    --text-display: clamp(1.7rem, 7.5vw, 2.7rem);
    --text-h1:      clamp(1.65rem, 6.5vw, 2.4rem);
    --text-h2:      clamp(1.35rem, 5vw, 1.95rem);
    --text-h3:      clamp(1.2rem, 4vw, 1.55rem);
  }
}

/* ============================================================
   1b · CONTAIN DECOR BLEED  (root cause of the "fidgety" mobile shift)
   `.gn-bleed` sections use `overflow: clip` with a generous
   `overflow-clip-margin: 180px` so decorative blobs/lines may softly cross
   section boundaries on DESKTOP. On a phone that 180px bleed spills past the
   viewport edge, making #app ~23px wider than the screen. The page's
   overflow-x:hidden then merely CLIPS it — so content gets cut off / drifts
   right depending on load timing & touch-pan (the intermittent breakage).
   On mobile, clip the bleed flat at the section edge (== the viewport edge,
   since sections are full-bleed here) so there is zero horizontal overflow.
   Desktop keeps the soft 180px bleed untouched.
   ============================================================ */
@media (max-width: 768px) {
  .gn-bleed { overflow-clip-margin: 0px !important; }
}

/* ============================================================
   1d · HOME HERO VIDEO SHADE
   Keep the desktop hero's generous readability gradient, but on phones make
   the dark feather occupy roughly the first quarter of the video edge instead
   of about a third, so the moving image stays visible.
   ============================================================ */
@media (max-width: 768px) {
  html[dir="rtl"] .gn-home-hero-shade {
    background: linear-gradient(to left, rgba(25, 16, 18, 0.92) 0%, rgba(31, 20, 22, 0.78) 24%, rgba(43, 26, 28, 0.46) 43%, rgba(60, 36, 38, 0.14) 62%, rgba(70, 44, 46, 0) 78%) !important;
  }

  html[dir="ltr"] .gn-home-hero-shade {
    background: linear-gradient(to right, rgba(25, 16, 18, 0.92) 0%, rgba(31, 20, 22, 0.78) 24%, rgba(43, 26, 28, 0.46) 43%, rgba(60, 36, 38, 0.14) 62%, rgba(70, 44, 46, 0) 78%) !important;
  }
}

/* ============================================================
   1c · DECOR BEHIND BODY COPY
   The line/wave/stroke motifs are readable brand texture on desktop, but
   on narrow screens there is no side gutter for them to live in; they cross
   paragraphs and reduce contrast. Hide only those linear motifs on mobile.
   ============================================================ */
@media (max-width: 768px) {
  .gn-decor-field .gn-decor-item[data-kind="lines"],
  .gn-decor-field .gn-decor-item[data-kind="wave"],
  .gn-decor-field .gn-decor-item[data-kind="stroke"] {
    display: none !important;
  }
}

/* ============================================================
   2 · COLLAPSE TWO-COLUMN GRIDS  (audit #5, #7 — horizontal overflow)
   `.gn-2col` and `.gn-coord-grid` set their column template via INLINE
   style (1fr 1fr / 0.8fr 1.2fr …) which a normal stylesheet rule can't
   override — hence `!important`. Without this they stay 2-up on phones
   and push content off-screen (contact page overflowed to 500px wide).
   ============================================================ */
@media (max-width: 768px) {
  .gn-2col,
  .gn-coord-grid,
  .gn-hero-videos,
  .gn-form-grid {
    grid-template-columns: 1fr !important;
  }
  /* contact form fields: full-width single column on mobile */
  .gn-form-grid > * { grid-column: 1 / -1 !important; }
}

/* ============================================================
   3 · CONTAIN OVERFLOW  (audit #5, #7)
   Cards / buttons / media must never exceed their container. Text gets
   min-width:0 so fl/grid children can shrink and wrap instead of
   forcing the track wider than the viewport.
   ============================================================ */
@media (max-width: 768px) {
  /* allow long buttons (e.g. the schedule deep-link CTA) to wrap */
  .gn-button {
    white-space: normal !important;
    max-width: 100%;
    height: auto;
  }
  /* coordinator / contact / pricing cards never overflow their column */
  .gn-coord-grid > *,
  .gn-coord-grid .gn-wa-btn { max-width: 100%; min-width: 0; }
  /* equalized WhatsApp buttons must not force a fixed min-width on mobile */
  .gn-wa-btn { min-width: 0 !important; }
}

/* ============================================================
   4 · MOBILE MENU  (audit #6 — last item cut, low-contrast close)
   Make the dropdown panel scroll within the viewport and reserve
   safe-area + breathing room at the bottom. (Close-icon contrast is
   fixed by forcing the X dark while the menu is open.)
   ============================================================ */
@media (max-width: 920px) {
  .gn-mobile-menu {
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 2rem) !important;
  }
}
/* very short viewports (landscape phones): tighten nav rows so they fit */
@media (max-width: 920px) and (max-height: 480px) {
  .gn-mobile-menu nav a { padding-block: 0.5rem !important; font-size: 1.25rem !important; }
}

/* ============================================================
   5 · WHATSAPP BOTTOM BAR  (audit #4 — covers content / landscape)
   Reserve scroll-content space for the fixed bar incl. the iOS home
   indicator, and shrink it in landscape so it doesn't eat the viewport.
   ============================================================ */
@media (max-width: 920px) {
  /* override the flat 56px so content clears the bar + safe area */
  #app { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px) !important; }
  .gn-wa-bar a {
    min-height: 48px;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
  }
}
/* landscape phones: compact bar, less vertical real-estate */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 480px) {
  #app { padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important; }
  .gn-wa-bar a { height: 46px !important; font-size: 0.9rem !important; }
  .gn-wa-bar a > div { width: 28px !important; height: 28px !important; }
}

/* ============================================================
   6 · TOUCH TARGETS ≥ 44px  (audit #8)
   Filter chips, sort pills, gallery filters and inline registration
   links are below the 44px minimum. Raise them on touch widths only.
   ============================================================ */
@media (max-width: 768px) {
  .gn-chip,
  .gn-gal-filters button,
  .gn-sortctl button,
  .gn-reg-link,
  .gn-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* narrow single-letter day chips need width too */
  .gn-chip { min-width: 44px; justify-content: center; }
  /* in-content WhatsApp CTAs */
  .gn-wa-btn { min-height: 44px; }
  /* contact-page social round buttons are 42px inline — bump to 44 */
  .social-link-light { width: 44px !important; height: 44px !important; }
  /* selects (teacher filter) also become comfortable tap targets */
  .gn-filterbar select { min-height: 44px; }
  /* carousel dot indicators: keep the 4px visual pill but expand the tap area
     to 44px tall via transparent padding (background painted in content box only) */
  .gn-carousel-dot {
    box-sizing: content-box !important;
    padding-block: 20px !important;
    background-clip: content-box !important;
  }
}

/* ============================================================
   7 · LANDSCAPE VERTICAL RHYTHM  (audit #1 — hero crop in landscape)
   Phone-landscape only (short height): shrink the big vertical spacing
   tokens so tall hero sections + headings fit without being cropped by
   the sticky header. Desktops are never this short, so they're untouched.
   ============================================================ */
@media (orientation: landscape) and (max-height: 480px) {
  :root {
    --space-9: 2.75rem;
    --space-8: 2.25rem;
    --section-y: 2.75rem;
    --section-y-tight: 2rem;
  }
}

/* ============================================================
   7b · SCHEDULE HERO  (audit #1 — title clipped)
   The schedule hero uses a FIXED height + vertical-centering; on mobile the
   wrapped title overflows and is clipped top & bottom. Let it grow to fit.
   ============================================================ */
@media (max-width: 768px) {
  .gn-sched-hero {
    height: auto !important;
    min-height: clamp(220px, 46vw, 360px);
    padding-block: calc(var(--space-7) + 12px) calc(var(--space-7) + 40px);
  }
}

/* ============================================================
   8 · SCHEDULE MOBILE LIST  (audit #3 — unreadable grid)
   The day-by-day card list is rendered on narrow
   screens instead of the proportional WeekGrid. These are its styles.
   ============================================================ */
@media (max-width: 600px) {
  .gn-sched-list { display: flex; flex-direction: column; gap: 1.4rem; }
  /* the hover-only detail bar is dead space on touch — the card list is self-describing */
  .gn-sched-detailbar { display: none; }
}