/* ==========================================================================
   ADHARVA ACADEMY — mobile layer
   Loaded after adharva.css. Every rule sits inside a max-width query, so at
   1024px and above this file does nothing — desktop renders exactly as v1.

   Three tiers, each aligned to a breakpoint the main sheet already uses:
     ≤ 63.99rem  compact   tap targets, type floor, rhythm, atmosphere cost
     ≤ 55.99rem  rail      below the GSAP pin, the rail becomes a snap carousel
     ≤ 51.99rem  phone     where desktop grids collapse to one column, swap the
                           components that are wrong for a phone
   Classes this layer adds are prefixed `m-` and are only ever created by
   js/adharva-mobile.js.
   ========================================================================== */

/* ---------- Tier 1: compact (< 1024px) --------------------------------- */
@media (max-width: 63.99rem) {
  :root {
    --sect: clamp(4rem, 9vh, 6rem);
    --t-sm: 1rem;               /* .body-sm and check lists carry real copy */
    --tap: 2.75rem;             /* 44px */
  }

  /* Grain: same texture and drift, a third of the layer area. inset:-50% made
     the fixed layer four viewports large — a big GPU texture at DPR 3. The
     drift is at most 3% of its own size, which -8% still covers. */
  .grain { inset: -8%; }

  .btn { font-size: 1rem; }

  /* Tap targets — 44px minimum without changing how the text looks. */
  .nav__brand { min-height: var(--tap); }
  .link-arrow { min-height: var(--tap); }
  .filter { min-height: var(--tap); }
  .crumb a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  .menu__meta a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .info__row a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .footer__col a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  .footer__col { gap: 0.35rem; }
  .footer__col .label { margin-bottom: 0.35rem; }
}

/* ---------- Tier 2: rail (< 896px, below the GSAP pin) ----------------- */
/* In v1 the rail is `overflow: clip` with a max-content strip inside, so below
   the pin breakpoint cards 3–6 were unreachable. Here the strip becomes the
   scroller itself. */
@media (max-width: 55.99rem) {
  .rail__viewport {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    padding-block: 0.25rem;      /* room for the focus ring */
  }
  .rail__viewport::-webkit-scrollbar { display: none; }
  .rail__card {
    width: min(80vw, 22rem);
    scroll-snap-align: start;
  }
  .rail__card .disc { min-height: 0; }
}

/* ---------- Tier 3: phone (< 832px) ----------------------------------- */
@media (max-width: 51.99rem) {
  :root {
    --t-mega: clamp(2.6rem, 16.2vw, 6rem);
    --t-xxl:  clamp(2.3rem, 10.4vw, 4.4rem);
    --t-xl:   clamp(2.1rem, 9.2vw, 3.6rem);
    --sect: clamp(3rem, 7.5vh, 4.5rem);
  }

  /* -- Nav: with JS the CTA moves to the thumb dock (adharva-mobile.js sets
     `hidden` on it); without JS it stays, on one line. ------------------- */
  .nav__pill > .btn { white-space: nowrap; }
  .nav__pill { gap: 0.75rem; justify-content: space-between; min-width: min(20rem, calc(100vw - 2rem)); }
  .nav { transition: transform var(--med) var(--ease); }
  .m-nav-away .nav { transform: translateY(calc(-100% - 2rem)); }
  .menu .menu__text { font-size: clamp(2.6rem, 12.5vw, 4.5rem); }

  /* -- Hero: one screen — headline fills the width, CTAs in thumb reach -- */
  .hero {
    min-height: 0;
    align-content: start;
    padding-block: 6.5rem 3rem;
  }
  .hero__inner { gap: 1.25rem; }
  .hero__title { margin-block: 0.15rem 0.1rem; }
  .eyebrow {
    /* The pill can't hold 46 characters at 390px, so on a phone it becomes a
       mono kicker: same dot, same tracking, allowed to wrap cleanly. */
    border: 0;
    background: none;
    backdrop-filter: none;
    padding: 0;
    align-items: baseline;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    line-height: 1.7;
  }
  .eyebrow::before { flex: 0 0 auto; transform: translateY(-0.1em); }
  .hero .lede { font-size: 1.0625rem; }
  .hero__cols { gap: 2.5rem; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__cta .btn { justify-content: space-between; }
  .hero__scroll { display: none; }        /* it sat on top of the 50+ stat */
  .ghost-word { bottom: -2vh; }

  /* -- Section heads ---------------------------------------------------- */
  .sect-head { gap: 1rem; margin-bottom: 2rem; }

  /* -- Stats: 2 × 2 scoreboard, not four full-width slabs ---------------- */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.25rem 1.1rem 1.35rem; gap: 0.35rem; }
  .stat__num { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .stat__k { font-size: 0.9375rem; line-height: 1.35; }

  /* -- Method: number in a gutter beside the step ------------------------ */
  .method__row {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding-block: 1.5rem;
  }
  .method__n { grid-row: span 2; font-size: 2.75rem; padding-top: 0.15rem; }

  /* -- Shared snap carousel (champions, coaches, facilities) ------------- */
  .champ-cascade,
  .m-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    padding-block: 0.25rem;
  }
  .champ-cascade::-webkit-scrollbar,
  .m-carousel::-webkit-scrollbar { display: none; }
  .champ-cascade > *,
  .m-carousel > * { flex: 0 0 min(76vw, 20rem); scroll-snap-align: start; }
  /* Ratio is set on the slot, so it holds when the .ph becomes an <img>. */
  .champ__media > .ph,
  .champ__media > img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }

  /* -- Coaches: bios always visible, no hover (decision 2026-10-07) ------ */
  .coach { gap: 0.9rem; }
  .coach__media .ph { transition: none; }
  .coach:hover .coach__media .ph { transform: none; }
  .coach__overlay {
    position: static;
    padding: 0;
    background: none;
    transform: none;
  }
  /* Head coach feature portrait: shorter crop than the 4:5 desktop frame. */
  #head-coach .ph--4x5 { aspect-ratio: 4 / 3; }

  /* -- Info rows: label | value even at phone width ---------------------- */
  .info__row {
    grid-template-columns: 6.25rem 1fr;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.85rem 0;
  }

  /* -- Champions: compact honour-roll rows -------------------------------- */
  .roll__row {
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding-block: 0.85rem;
  }
  .roll__row .body-sm { grid-column: 1 / -1; }
  .roll__name { font-size: 1.15rem; }
  .roll__tag { justify-self: end; }

  /* -- Disciplines: overview bento becomes a 2-col tile index ------------- */
  #overview .grid-3 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  #overview .bezel__core.pad { padding: 1.1rem; gap: 0.6rem; }
  #overview .disc__ic svg { width: 26px; height: 26px; }

  /* -- Disciplines: the five detail sections become accordions on phones.
     The desktop grid-2 sections are additive markup the mobile layer hides;
     the accordion is a parallel block the mobile layer reveals. Using the
     `hidden` attribute (not a bare display rule) for the reveal direction
     keeps this symmetric with the known nav-CTA gotcha — see CLAUDE.md. --- */
  .m-disc-detail { display: none; }
  .m-disc-acc[hidden] { display: block !important; }
  .m-disc-acc .acc__panel-inner { max-width: none; }
  .m-disc-acc .acc__photos { display: grid; gap: 0.75rem; margin-bottom: 1.1rem; }
  .m-disc-acc .acc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* -- Carousel position: segmented track, 01 / 06, prev / next ---------- */
  .m-pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .rail .m-pager { padding-inline: var(--gut); }
  .m-pager__track { display: flex; flex: 1; gap: 0.3rem; }
  .m-pager__seg {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--hair-2);
    transition: background var(--fast) var(--ease);
  }
  .m-pager__seg.is-on { background: var(--gold); }
  .m-pager__count {
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: 0.18em;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .m-pager__count b { color: var(--chalk); font-weight: 500; }
  .m-pager__btn {
    flex: 0 0 auto;
    width: var(--tap); height: var(--tap);
    border-radius: 50%;
    border: 1px solid var(--hair-2);
    background: rgba(244, 241, 234, 0.04);
    color: var(--chalk);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), opacity var(--fast) var(--ease);
  }
  .m-pager__btn svg { width: 14px; height: 14px; }
  .m-pager__btn:active { border-color: var(--gold); color: var(--gold); }
  .m-pager__btn:disabled { opacity: 0.3; cursor: default; }
  .m-pager__btns { display: flex; gap: 0.5rem; }

  /* -- Quote + CTA band --------------------------------------------------- */
  .quote { padding: 1.6rem 1.4rem 1.5rem; gap: 1.25rem; border-radius: var(--r-md); }
  .cta-band { padding: 2.75rem 1.4rem; border-radius: var(--r-lg); }
  .cta-band .lede { font-size: 1.0625rem; }
  /* A touch smaller than the shared --t-xxl: the cta-band's own padding
     leaves less width than a sect-head, and the longest heading here
     (champions.html) wraps past its own <br> at the --t-xxl size. */
  .cta-band .display.t-xxl { font-size: clamp(2.1rem, 9.6vw, 4rem); }

  /* -- Footer: brand, then two link columns side by side, then contact ---- */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1rem;
    padding-block: 3rem 1.5rem;
  }
  .footer__col:first-child,
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__logo { height: 2.5rem; }
  .footer__word {
    font-size: 27vw;
    line-height: 0.74;
    padding-bottom: 0.25rem;
  }
  .footer__base { flex-direction: column; gap: 0.5rem; padding-block: 1.25rem 1.5rem; }

  /* -- Thumb dock --------------------------------------------------------- */
  /* Safari 26 tints its floating toolbar from the background-color and
     backdrop-filter of fixed elements near the screen edge, so the fixed
     wrapper stays transparent and the glass lives on its child. */
  .m-dock {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 8300;                /* under the menu (8400) and nav (8500) */
    padding: 0 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    pointer-events: none;
    transform: translateY(calc(100% + 1rem));
    transition: transform var(--med) var(--ease);
  }
  .m-dock.is-on { transform: translateY(0); }
  .m-dock__pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 30rem;
    margin-inline: auto;
    padding: 0.4rem;
    border: 1px solid var(--hair-2);
    border-radius: 999px;
    background: rgba(13, 15, 19, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.95);
  }
  .m-dock__pill .btn { flex: 1; justify-content: space-between; min-height: 3.25rem; }
  .m-dock__call {
    flex: 0 0 auto;
    width: 3.25rem; height: 3.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--chalk);
    background: rgba(244, 241, 234, 0.07);
    border: 1px solid var(--hair);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .m-dock__call:active { background: rgba(230, 181, 74, 0.2); color: var(--gold); }
  .m-dock__call svg { width: 1.2rem; height: 1.2rem; }
}