/* ── /programs age picker ──────────────────────────────────────────────────
   Seven cards under "My child is…", one per room.

   Each card names the room EXACTLY as the header dropdown and the page it
   links to name it. It did not before: the picker ran a third vocabulary of
   its own ("Six or older → Kindergarten & elementary" for the room the nav
   calls "5–7: Kindergarten & 1st", "Two → Twos" for the one it calls "2–3"),
   so a parent could not tell that the card and the menu item were the same
   room, and two of the age ranges flatly contradicted each other.

   The colours are a deliberate ramp from the palest ground to the darkest,
   so the row reads left to right as the ladder it is, with gold marking the
   year CAPE starts. Summer is the odd one out and is drawn as such: the
   paper ground and a gold border, because it is a season, not a room.

   Its own file rather than design.css, which is generated from design-source/
   and would drop these rules on the next convert:design run. */

.agepick{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:14px;
}

.agepick-card{
  position:relative;
  display:grid;
  grid-template-rows:auto auto;
  gap:4px;
  justify-items:center;
  align-content:center;
  text-align:center;
  min-height:104px;
  padding:20px 12px 22px;
  border:2px solid #22301E;
  border-radius:18px;
  text-decoration:none;
  font-family:'Figtree',sans-serif;
  color:#22301E;
  background:#FAF6EC;
  box-shadow:0 4px 0 #22301E;
  overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.3,1),
             box-shadow .24s cubic-bezier(.2,.8,.3,1);
}

/* The rule across the top is the "border" that animates: a 4px bar in the
   card's own accent, drawn from the left edge on hover and on keyboard focus. */
.agepick-card::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:4px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}

.agepick-age{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.05;
  letter-spacing:-.01em;
}

.agepick-room{
  font-weight:600;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.01em;
}

/* The arrow is hidden until the card is pointed at, so seven of them do not
   compete with the labels. It occupies no space either way. */
.agepick-go{
  position:absolute;right:12px;bottom:8px;
  font-size:15px;font-weight:700;line-height:1;
  opacity:0;transform:translateX(-6px);
  transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.3,1);
}

.agepick-card:hover,
.agepick-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 9px 0 #22301E;
}
.agepick-card:hover::before,
.agepick-card:focus-visible::before{transform:scaleX(1)}
.agepick-card:hover .agepick-go,
.agepick-card:focus-visible .agepick-go{opacity:1;transform:translateX(0)}
.agepick-card:active{transform:translateY(-1px);box-shadow:0 3px 0 #22301E}

.agepick-card:focus-visible{
  outline:3px solid #F5C531;
  outline-offset:3px;
}

/* ── The ramp ────────────────────────────────────────────────────────────
   Ground, text and accent per rung. Every pairing was measured against the
   4.5:1 body-text floor rather than eyeballed; the lowest is the sage rung
   at 4.93:1. */
.agepick-card--1{background:#EBDFC7}
.agepick-card--2{background:#CBD4B2}
.agepick-card--3{background:#8FA073}
.agepick-card--4{background:#F5C531}
.agepick-card--5{background:#56663F;color:#FAF6EC;border-color:#22301E}
.agepick-card--6{background:#22301E;color:#FAF6EC;border-color:#22301E}
.agepick-card--summer{background:#FAF6EC;border-color:#B8811A;box-shadow:0 4px 0 #B8811A}
.agepick-card--summer:hover,
.agepick-card--summer:focus-visible{box-shadow:0 9px 0 #B8811A}
.agepick-card--summer:active{box-shadow:0 3px 0 #B8811A}

/* The two dark rungs need a light accent bar, or it disappears into the
   ground it is drawn on. */
.agepick-card--5::before,
.agepick-card--6::before{background:#F5C531}
.agepick-card--summer::before{background:#B8811A}

/* The year the four-step cycle starts is worth marking, and it is the one
   fact on this row a parent asks about. */
.agepick-note{
  display:block;
  margin-top:2px;
  font-family:'Caveat',cursive;
  font-size:16px;
  line-height:1;
}

/* ── Entrance ────────────────────────────────────────────────────────────
   Scroll-driven, the same mechanism design.css uses for [data-rv], and inside
   the same @supports guard so a browser without it simply shows the finished
   row instead of an invisible one. The stagger walks the ladder left to
   right. */
   The entrance animates the INDEPENDENT translate/rotate properties, never
   `transform`. An animation wins over a transition on the same property, so
   animating `transform` here would have left the hover lift dead for the
   whole time the card is on screen — the card would rise on scroll and then
   refuse to move under the pointer. translate and rotate compose with the
   hover's transform instead of fighting it. */
@keyframes agepick-in{
  from{opacity:0;translate:0 18px;rotate:-1.5deg}
  to{opacity:1;translate:0 0;rotate:0deg}
}
@supports (animation-timeline: view()){
  .agepick-card{
    animation:agepick-in .6s cubic-bezier(.2,.8,.3,1) both;
    animation-timeline:view();
    animation-range:entry 6% entry 46%;
  }
}

@media (prefers-reduced-motion: reduce){
  .agepick-card{animation:none !important;transition:none}
  .agepick-card::before{transition:none}
  .agepick-go{transition:none}
}