/* programs-hero.css — the seven /programs/* heroes.
 *
 * Three problems this solves, all reported from the live site:
 *
 * 1. THE PHOTOS DID NOT MATCH. Six pages used one wide band; the kindergarten
 *    page had been reframed separately and ended up as a tall photo letterboxed
 *    inside a wide tan frame, which reads as broken rather than deliberate.
 *    All seven are back on one rule, and ~40% taller so more of each picture
 *    shows. That part is in the markup, not here.
 *
 * 2. NOWHERE TO GO IF YOU LANDED ON THE WRONG AGE. A parent who wants the twos
 *    room and lands on Pre-K had to go back up to the menu. The switcher fills
 *    the empty top-right of the hero on wide screens, and drops to a scrolling
 *    row above the headline on narrow ones.
 *
 * 3. YOU COULD NOT TELL WHICH PAGE YOU WERE ON. The eyebrow was 14px uppercase
 *    letterspaced text that read as a breadcrumb, so "PROGRAMS · PRESCHOOL ·
 *    AGE 3" hid the one word that matters. The programme name is now a solid
 *    pill: after the headline it is the loudest thing in the hero.
 *
 * WHY A SEPARATE FILE: body.html and design.css are generated by
 * convert:design, so a rule written into either is reverted by the next run.
 */

/* ── The programme name, as a pill ──────────────────────────────────────── */
.prog-eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-weight:700;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#7C6247;
}
.prog-eyebrow a{color:#7C6247;text-decoration:none}
.prog-eyebrow a:hover{color:#22301E;text-decoration:underline;text-underline-offset:3px}
.prog-eyebrow-sep{opacity:.45}
.prog-eyebrow-name{
  display:inline-block;background:#22301E;color:#FAF6EC;
  padding:9px 18px;border-radius:999px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  /* Bigger than the crumb around it, and letterspacing dialled right back so
     the name reads as a word rather than as more breadcrumb. */
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.02em;text-transform:none;
  box-shadow:0 8px 20px rgba(34,48,30,.18);
  /* Arrives just after the eyebrow's own rise, so the eye is drawn to it. */
  animation:progPillIn .55s .35s cubic-bezier(.2,.8,.3,1) both;
}
.prog-eyebrow-ages{
  font-weight:700;font-size:13px;letter-spacing:.18em;color:#7C6247;text-transform:uppercase;
}
@keyframes progPillIn{
  from{opacity:0;transform:translateY(8px) scale(.94)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.prog-eyebrow-name{animation:none}}

/* ── The age switcher ───────────────────────────────────────────────────── */
/* Absolute on wide screens so it sits in the hero's empty top-right without
   pushing the headline down. The hero is already position:relative. */
.agesw{
  position:absolute;top:150px;right:7vw;z-index:3;width:236px;
  background:rgba(250,246,236,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:2px solid rgba(34,48,30,.14);border-radius:22px;
  padding:16px 14px 12px;
  box-shadow:0 20px 44px rgba(34,48,30,.14);
  animation:rise .9s .2s both;
}
.agesw-title{
  margin:0 0 10px;padding:0 6px;
  font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7C6247;
}
.agesw-list{display:flex;flex-direction:column;gap:2px}
.agesw-item{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 10px;border-radius:12px;
  color:#22301E;text-decoration:none;font-size:14.5px;line-height:1.25;
  transition:background .18s,color .18s;
}
.agesw-item:hover{background:#EBDFC7}
.agesw-age{
  flex:none;min-width:34px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.02em;color:#7C6247;
}
.agesw-label{font-weight:600}
/* The page you are on: filled, so the switcher answers "where am I" as well as
   "where else can I go". aria-current carries the same thing for a screen
   reader, so this is not the only signal. */
.agesw-item.is-here{background:#22301E;color:#FAF6EC}
.agesw-item.is-here .agesw-age{color:#F5C531}
.agesw-item.is-here:hover{background:#22301E}
.agesw-all{
  display:inline-block;margin:10px 6px 0;
  font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#56663F;text-decoration:none;
}
.agesw-all:hover{color:#22301E;text-decoration:underline;text-underline-offset:3px}

/* Below 1150px the hero decorations already stand down and the headline needs
   the full width, so the panel stops floating and becomes a scrolling row
   above the eyebrow — same links, no overlap, no wasted vertical space. */
@media (max-width:1150px){
  .agesw{
    position:static;width:auto;margin:0 0 22px;padding:12px 12px 10px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .agesw-title{margin:0;flex:none}
  .agesw-list{
    flex-direction:row;gap:6px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Padding so a focus ring on the first or last chip is not clipped. */
    padding:2px;margin:-2px;
  }
  .agesw-list::-webkit-scrollbar{display:none}
  .agesw-item{flex:none;flex-direction:column;gap:1px;padding:7px 12px;white-space:nowrap}
  .agesw-all{margin:0 0 0 auto}
}
@media (max-width:640px){
  .agesw-title{width:100%}
  .agesw-all{margin:8px 0 0}
}

/* ── G7 · The age switcher should look like the rail it is ────────────────
   MOBILE_TABLET_AUDIT.md § G7. Phase 5, 2026-09-15.

   G7 names three horizontal strips. Measured at 390px, two of them are
   already right and were left alone:

     · the homepage's six-things carousel — its cards already carry
       `width:min(78vw,320px);scroll-snap-align:start` inline, which is
       exactly the peek-and-snap the order prescribes;
     · `/programs`' stage tabs and the `/campus` day rail — both already
       compute `scroll-snap-type: x`.

   The age switcher is the one that was not: `overflow-x:auto` with
   `scroll-snap-type: none`, on all seven programme pages. It holds eight
   chips in 749px of track inside a 326px window, so it always stops
   mid-chip, and with the last chip flush to the padding edge there is
   nothing to suggest the rail continues.

   `proximity`, never `mandatory`: mandatory snapping on a rail this long
   fights a deliberate flick and can trap the scroll between two chips.

   The end padding is what makes the last chip reachable past the edge, and
   the negative margin cancels it so the rail still lines up with the
   heading above it. */
@media (max-width: 900px), (max-width: 1400px) and (pointer: coarse) {
  .agesw-list {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 12px;
    padding-inline-end: 26px;
    margin-inline-end: -26px;
  }
  .agesw-item { scroll-snap-align: start; }
}

/* ═══════════════════════════════════════════════════════════════
   THE DECORATIVE BLOB WAS PAINTING OVER THE AGE PICKER.

   Every programme hero opens with a `.agesw` switcher — "Programs by
   age", seven rooms, "See all ages →" — and then draws a pale blob
   behind the headline:

     position:absolute; top:-15vh; right:-7vw;
     width:min(46vw,520px); z-index:0

   The switcher is ordinary in-flow content with z-index:auto, and a
   POSITIONED element at z-index:0 paints above in-flow content however
   early it appears in the markup. So the blob sat on top of the picker.
   At 1440 it is far enough right to miss; at 1007 and 768 it covered the
   last room in the row and greyed out "See all ages →" entirely — the
   link a parent uses to find the room they actually want. Confirmed by
   hit-testing at the link's centre on all seven programme pages: the
   blob, not the link, was the element under the pointer.

   The switcher gets its own stacking context above the decoration. It is
   applied at every width — at 1440 nothing overlaps, so nothing moves,
   and the picker stops depending on a blob's size for its own clickability.
   ═══════════════════════════════════════════════════════════════ */
/* Below 1150px the switcher is `position:static`, so it needs a position
   to carry a z-index — and `top`/`right` MUST be reset with it. The base
   rule sets `position:absolute; top:150px; right:7vw` for the wide layout,
   and on a relative element those stop being placement and become
   OFFSETS: a first attempt at this fix wrote `position:relative` alone and
   shoved the whole panel 150px down and 7vw left, straight over the
   headline it was meant to stop covering. Above 1150px the base rule
   already carries z-index:3, so there is nothing to add there. */
@media (max-width: 1150px) {
  main.page nav.agesw {
    position: relative;
    top: auto;
    right: auto;
    z-index: 3;
  }
}