/* ==========================================================================
   responsive.css — every media query in the §4 ladder order, lifted
   verbatim from the approved prototypes (index.html RESPONSIVE section).
   Narrow-screen protection queries included. Page-specific responsive
   rules from the other three prototypes are appended in their phases.
   ========================================================================== */

/* ==========================================================================
   7. RESPONSIVE
   Mobile-first. Each breakpoint changes composition, not just scale.
   ========================================================================== */

/* ---- Up to 480px — pagers tighten their spacing, never their controls ---- */
@media (max-width:479.98px){
  .carousel__pager,.schedule__pager{gap:var(--sp-2)}
  .carousel__pager .dots,.schedule__pager .dots{gap:6px}
  .schedule__pager .dots{min-width:0}
}

/* ---- Up to 360px — the tightest header the identity can take ------------ */
@media (max-width:359.98px){
  .brand__prefix,.brand__mid{display:none}
  .brand__name{font-size:.98rem}
  .brand__emblem{width:50px;height:50px}
  .header__actions{gap:6px}
  .donate-btn{padding:10px 12px;font-size:.8rem}
}

/* 361-419px keeps the full short name but needs a little breathing room. */
@media (min-width:360px) and (max-width:419.98px){
  .brand__name{font-size:.98rem;line-height:1.2}
  .donate-btn{padding:10px 14px;font-size:.82rem}
}

/* ---- 480px — small mobile refinements ----------------------------------- */
@media (min-width:480px){
  .appeal__panel{padding:var(--sp-5) var(--sp-6)}
  .appeal__cta{width:auto}
  .appeal__cta .btn{min-width:230px}
}

/* ---- 640px — large mobile / small tablet -------------------------------- */
@media (min-width:640px){
  .carousel__viewport{--visible:2}
  .hero__actions{flex-direction:row;flex-wrap:wrap}
  .hero__actions .btn{min-width:200px}
  .appeal__panel{
    grid-template-columns:auto 1fr;
    align-items:center;
    column-gap:var(--sp-5);
  }
  .appeal__icon{width:84px;height:84px}
  .appeal__icon svg{width:44px;height:44px}
  .appeal__cta{grid-column:1/-1;justify-self:start}
  .support__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
  .support__intro{grid-column:1/-1}
  .support__cta{grid-column:1/-1;text-align:left}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5)}
  .footer__brand{grid-column:1/-1}
}

/* ---- 768px — tablet portrait -------------------------------------------- */
@media (min-width:768px){
  .player__art{width:48px;height:48px}
  .player__by{display:block}
  .player__pulse{display:grid}
  .player__step{display:grid}
  .brand__emblem{width:84px;height:84px}
  .brand__name{font-size:1.24rem}
  .brand__name .brand__short{display:none}
  .brand__name .brand__full{display:block}
  .brand__est{display:block}
  .hero__inner{align-items:center}
  .hero__scrim{
    background:linear-gradient(96deg,
      rgba(20,6,5,.95) 0%,
      rgba(20,6,5,.88) 26%,
      rgba(20,6,5,.6) 46%,
      rgba(20,6,5,.16) 64%,
      rgba(20,6,5,0) 78%);
  }
  .hero__lede{max-width:44ch}
  /* Carousel arrows overlay the track edges until there is a page margin */
  .visit__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1;max-width:none}
  /* Footer groups stop being accordions — initFooterAccordions() keeps them open */
  .footer__col{border-top:0;padding-top:0}
  .footer__col>summary{cursor:default;padding-block:0 var(--sp-3)}
  .footer__col>summary::after{display:none}
}

/* ---- 900px — small laptop ----------------------------------------------- */
@media (min-width:900px){
  .carousel__viewport{--visible:3}
  .section-head__icon{width:38px;height:38px}
}

/* ---- 1024px — desktop: navigation, split layouts, horizontal schedule ---- */
@media (min-width:1024px){
  .header__actions{gap:var(--sp-4)}

  /* Player: secondary controls return to the bar */
  .player{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
    grid-template-rows:var(--player-h) auto auto;
    column-gap:var(--sp-5);
  }
  .player__transport{grid-column:2;gap:var(--sp-4)}
  .player__play{width:52px;height:52px}
  .player__play svg{width:20px;height:20px}
  .player__right{
    grid-column:3;grid-row:1;
    display:flex;flex-wrap:nowrap;justify-content:flex-end;
    padding-block:0;border-top:0;
  }
  .player__expand{grid-column:4;grid-row:1}
  .player__volume{flex:0 1 200px}
  .player__divider{display:block}

  /* Schedule becomes a horizontal activity row */
  .schedule-wrap{position:relative}
  .schedule__tab{font-size:var(--fs-small);min-height:48px}
  .schedule__panel{padding:0}
  .schedule__panel-inner{
    display:grid;
    grid-template-columns:minmax(190px,230px) minmax(0,1fr);
    align-items:stretch;
  }
  .schedule__day{
    flex-direction:row;align-items:center;
    padding:var(--sp-5) var(--sp-4);
    border-bottom:0;border-right:1px solid var(--line-gold);
  }
  /* OWNER 2026-08-07: with the real weekly programme (one to four rows per
     day, plus day notes) the placeholder-era horizontal columns become a
     vertical row list inside one .schedule__body wrapper. Rows keep their
     hairline separators from the base rules; the panel grows with content. */
  .schedule__body{padding:var(--sp-3) var(--sp-5) var(--sp-4)}
  .activity{padding-block:var(--sp-4)}

  /* Educational gateways side by side */
  .gateways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gateway{min-height:340px}

  /* Legacy split */
  .legacy{grid-template-columns:52% 48%;align-items:stretch}
  .legacy__media{aspect-ratio:auto;min-height:440px}
  .legacy__content{
    padding-block:var(--sp-8);
    padding-left:clamp(32px,4vw,64px);
    /* Aligns with the container's right edge: the gutter until the content
       hits its 1440px cap, the centring margin after that. */
    padding-right:max(var(--gutter),calc((100vw - var(--container)) / 2));
    justify-content:center;
  }
  .legacy__lotus{right:2%;bottom:6%;width:min(360px,44%)}

  /* Visit strip: three columns with hairline dividers */
  .visit__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .visit__col{padding-inline:var(--sp-5)}
  .visit__col+.visit__col{border-left:1px solid rgba(39,27,24,.12)}
  .visit__col:first-child{padding-left:0}
  .visit__col:last-child{padding-right:0}
}

/* ---- 1200px — full desktop composition ----------------------------------
   The eight-item main navigation only fits from here; 1024-1199px keeps the
   drawer, which suits tablet landscape anyway. -------------------------- */
@media (min-width:1200px){
  .nav{display:block}
  .menu-btn{display:none}
  .brand{flex:none}
  .carousel__viewport{--visible:4}
  .appeal__panel{
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:var(--sp-6);
    padding:var(--sp-6) var(--sp-7);
  }
  .appeal__icon{width:112px;height:112px}
  .appeal__icon svg{width:58px;height:58px}
  .appeal__cta{
    grid-column:3;grid-row:1;
    justify-self:end;text-align:center;
    padding-left:var(--sp-6);
    border-left:1px solid var(--line-gold);
  }
  .appeal__title{font-size:clamp(1.35rem,1rem + .9vw,1.72rem)}

  .support{padding-block:var(--sp-7)}
  .support__grid{
    grid-template-columns:1.55fr 1fr 1fr 1fr auto;
    align-items:center;gap:0;
  }
  .support__intro{grid-column:1;padding-right:var(--sp-6)}
  .support__option{
    margin-inline:0;
    padding:var(--sp-3) var(--sp-5);
    border-left:1px solid var(--line-gold);
    border-radius:0;
    align-items:center;
  }
  .support__cta{
    grid-column:5;text-align:center;
    padding-left:var(--sp-6);
    border-left:1px solid var(--line-gold);
  }
  .support__cta .btn{min-width:220px}

  .footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr .9fr 1.5fr;gap:0}
  .footer__brand{grid-column:1;padding-right:var(--sp-6)}
  .footer__col{padding-inline:var(--sp-5);border-left:1px solid var(--line-light)}
  .footer__col:last-of-type{padding-right:0}
  .footer__signup{padding-left:var(--sp-5);border-left:1px solid var(--line-light)}
}

/* Seven nav items fit at full size from 1280px up; only the 1200-1279 band
   still needs to tighten, and it tightens gently. */
@media (min-width:1200px) and (max-width:1279.98px){
  .nav__list{gap:0}
  .nav__link,.nav__toggle{font-size:.9rem;padding:8px 8px}
  .nav__link[aria-current="page"]::after{left:8px;right:8px}
  .brand__emblem{width:73px;height:73px}
  .brand__name{font-size:1.12rem}
}

/* ---- 1440px+ — large desktop -------------------------------------------- */
@media (min-width:1440px){
  /* Enough page margin for the arrows to sit outside the cards */
  .hero__lede{font-size:1.1rem}
  .gateway__content{padding:var(--sp-6) var(--sp-7)}
  .legacy__media{min-height:520px}
}


/* ==========================================================================
   PLAYER PHASE responsive addendum (2026-08-07).
   The owner-approved expanded control set (seek + shuffle + repeat) cannot
   fit the prototype's 1024px in-bar cluster, so the in-bar milestone moves
   to 1280. 1024-1279 keeps the expand-panel pattern; from 1280 the cluster
   returns to the bar without its seek slider, whose desktop home is the
   full-width strip at the bar's base. Appended here so these rules win the
   cascade over the prototype's 1024 block above.
   ========================================================================== */

/* ---- Strip seek: the 2px progress strip is the visual; the input is a
        slim full-width control on top of it. Desktop only; below 1280 the
        expanded cluster carries the seek slider. ------------------------- */
.player__progress{z-index:1}
.player__strip-seek{
  -webkit-appearance:none;appearance:none;
  position:absolute;left:0;right:0;bottom:-5px;
  width:100%;height:12px;margin:0;padding:0;
  background:transparent;cursor:pointer;
  display:none;
}
.player__strip-seek::-webkit-slider-runnable-track{height:12px;background:transparent}
.player__strip-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:0;
  border-radius:var(--r-pill);background:var(--white);
  border:0;box-shadow:0 1px 3px rgba(0,0,0,.4);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.player__strip-seek::-moz-range-track{height:12px;background:transparent}
.player__strip-seek::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:var(--r-pill);
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.4);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.player__strip-seek:hover::-webkit-slider-thumb,
.player__strip-seek:focus-visible::-webkit-slider-thumb{opacity:1}
.player__strip-seek:hover::-moz-range-thumb,
.player__strip-seek:focus-visible::-moz-range-thumb{opacity:1}

/* ---- 1024-1279: keep the mobile/tablet expand-panel pattern ------------- */
@media (min-width:1024px) and (max-width:1279.98px){
  .player{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-rows:var(--player-h) auto auto;
    column-gap:var(--sp-3);
  }
  .player__transport{grid-column:2;gap:var(--sp-2)}
  .player__play{width:44px;height:44px}
  .player__play svg{width:18px;height:18px}
  .player__right{
    grid-column:1/-1;grid-row:2;
    display:none;
    flex-wrap:wrap;justify-content:flex-start;
    padding-block:var(--sp-3);
    border-top:1px solid var(--line-light);
  }
  .player-bar.is-expanded .player__right{display:flex}
  .player__expand{grid-column:3;grid-row:1}
  .player__volume{flex:1 1 160px;max-width:260px}
  .player__divider{display:none}
}

/* ---- 1280 up: cluster in the bar; seek lives on the strip --------------- */
@media (min-width:1280px){
  .player__right{gap:var(--sp-3)}
  .player__seek{display:none}
  .player__strip-seek{display:block}
  .player__volume{flex:0 1 170px;min-width:90px}
  .player__mute{flex:none}
}

/* ==========================================================================
   OWNER 2026-08-07 (mobile header): below 768px the header Donate button is
   hidden and the FULL two-line Sabha name replaces the shortened variant at
   a larger size (the short name dropped "Suthsung"). Donate remains in the
   drawer foot and page CTAs. Verified live at 320/375: two lines, no clip.
   Placed at end of this file so it wins over the small-width brand rules
   above.
   ========================================================================== */
@media (max-width:767.98px){
  .header__actions .donate-btn{display:none}
  .brand__name{font-size:1.2rem;line-height:1.2}
  .brand__name .brand__short{display:none}
  .brand__name .brand__full{display:block}
}
@media (max-width:359.98px){
  .brand__name{font-size:1.06rem}
}

/* OWNER 2026-08-07 r2 (mobile appeal panel): the icon pairs with ONLY the
   eyebrow + title lockup; the description and CTA sit below at full width.
   The body dissolves into the panel grid (display:contents) so its children
   can be placed individually. */
@media (max-width:639.98px){
  .appeal__panel{grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-2)}
  .appeal__body{display:contents}
  .appeal__icon{grid-column:1;grid-row:1/3;align-self:center}
  .appeal__body>.eyebrow{grid-column:2;grid-row:1;align-self:end}
  .appeal__title{grid-column:2;grid-row:2;align-self:start;margin-top:0}
  .appeal__text{grid-column:1/-1;margin-top:var(--sp-2)}
  .appeal__cta{grid-column:1/-1;margin-top:var(--sp-2)}
}

/* OWNER 2026-08-07 (donations pillars, mobile only): the four pillars sit
   as a 2x2 grid of premium tiles — warm ivory surface, gold hairline,
   soft shadow — instead of a single stacked column. 640px+ unchanged. */
@media (max-width:639.98px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-6)}
  .pillar{
    padding:var(--sp-5) var(--sp-3);
    background:var(--ivory-warm);
    border:1px solid var(--line-gold);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-sm);
  }
}