/* =========================================================
   programs.css: styles used ONLY on /programs
   intro (title + rainbow sticker) and the four age-group cards
   ========================================================= */
.pg{--spring:cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;background:linear-gradient(var(--sky) 0,#F3F7FF 420px,#fff 100%);padding:clamp(36px,5vw,64px) 20px clamp(72px,9vw,120px)}

/* ---------- Intro ---------- */
.hd{position:relative;max-width:1240px;margin:0 auto;display:grid;gap:20px;justify-items:center;text-align:center}
.hd h1{position:relative;z-index:2;font:700 clamp(3.4rem,17vw,5.6rem)/.95 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
.ln{display:block;white-space:nowrap}
.m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .06em .2em;margin:-.06em -.06em -.2em}
.m>span{display:block;animation:rise .95s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.2s + var(--i)*.14s)}
.rbw{display:inline-block;width:.85em;height:auto;margin-left:.18em;rotate:-6deg;vertical-align:baseline;overflow:visible;filter:drop-shadow(0 8px 10px rgba(42,27,69,.16))}
.rbw path{stroke-dasharray:1;animation:draw 1.1s cubic-bezier(.5,0,.2,1) calc(.9s + var(--i)*.18s) backwards}
.hd .lead{position:relative;z-index:2;max-width:27rem;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--muted)}
.hd .sp{position:absolute;z-index:1;pointer-events:none}

/* ---------- Age-group cards ---------- */
.grid{max-width:1240px;margin:clamp(52px,7vw,96px) auto 0;display:grid;grid-template-columns:1fr;gap:72px 48px;align-items:start}
.prog{position:relative;display:block;border-radius:44px;rotate:var(--r);translate:0 0;
  transition:rotate .55s var(--spring),translate .55s var(--spring),scale .3s}
.prog:focus-visible{border-radius:44px;outline-offset:8px}
.prog:hover,.prog:focus-visible{rotate:0deg;translate:0 -10px}
.prog:active{scale:.985}

.prog .ph{position:relative;aspect-ratio:16/11;padding:7px;background:#fff;border-radius:44px;box-shadow:0 22px 38px -22px rgba(42,27,69,.55);transition:box-shadow .5s}
.prog:hover .ph{box-shadow:0 36px 52px -24px rgba(42,27,69,.6)}
.prog .ph:hover{rotate:0deg;scale:1}
.prog .ph .in{position:absolute;inset:7px;width:auto;height:auto;border-radius:37px}
.prog .ph .in svg{width:18%;max-width:88px}
.prog .ph img{transition:scale .9s cubic-bezier(.2,.8,.2,1)}
.prog:hover .ph img,.prog:focus-visible .ph img{scale:1.07}

/* title pill hangs off the bottom edge of the photo */
.lbl{position:absolute;z-index:2;left:clamp(14px,2.4vw,28px);bottom:-26px;display:inline-flex;align-items:center;gap:18px;padding:8px 8px 8px 28px;border-radius:999px;background:#fff;rotate:var(--lr,-2deg);box-shadow:0 14px 26px -12px rgba(42,27,69,.5);
  transition:rotate .55s var(--spring),translate .55s var(--spring)}
.nm{font:700 clamp(1.5rem,2.6vw,2.3rem)/1 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.015em}
.go{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cc);transition:rotate .6s var(--spring),scale .6s var(--spring)}
.go svg{width:26px;height:26px}
.prog:hover .lbl,.prog:focus-visible .lbl{rotate:calc(var(--lr,-2deg)*-.5);translate:0 -4px}
.prog:hover .go,.prog:focus-visible .go{rotate:180deg;scale:1.12}

/* sparkle that pops in at the corner on hover */
.pop{position:absolute;z-index:3;top:-16px;right:-6px;width:46px;height:46px;fill:var(--cc);pointer-events:none;scale:0;rotate:-40deg;transition:scale .5s var(--spring),rotate .7s var(--spring)}
.prog:hover .pop,.prog:focus-visible .pop{scale:1;rotate:0deg}

@keyframes rise{from{transform:translateY(115%)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- Desktop ---------- */
@media (min-width:761px){
  .grid{grid-template-columns:1fr 1fr}
  .prog:nth-child(even){margin-top:64px;--lr:2deg}
  .prog:nth-child(even) .lbl{left:auto;right:clamp(14px,2.4vw,28px)}
  .prog:nth-child(even) .pop{right:auto;left:-6px}
}
@media (min-width:901px){
  .hd{grid-template-columns:auto 1fr;gap:0 clamp(32px,5vw,72px);justify-items:start;text-align:left;align-items:end}
  .hd h1{font-size:clamp(5rem,10.5vw,9.4rem)}
  .l2{margin-left:.5em}
  .hd .lead{padding-bottom:1.1rem}
}
@media (max-width:560px){
  .lbl{gap:14px;padding-left:22px}
  .go{width:46px;height:46px}
  .go svg{width:23px;height:23px}
}