/* =========================================================
   program-detail.css: shared by every page in /programs/ (infants, toddlers, ...)
   title + age group, photo with caption, 3 points, back / previous / next buttons
   ========================================================= */
.pd{--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(80px,10vw,130px)}
.pd>.cloud{left:0;animation:cdrift var(--t) linear var(--dl) infinite backwards}   /* clouds always glide in from off-screen */
.i{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Title + age group ---------- */
.hd{position:relative;z-index:2;max-width:1240px;margin:0 auto;text-align:center}
.hd h1{position:relative;display:block;width:fit-content;max-width:100%;margin-inline:auto;font:700 clamp(2.6rem,12.5vw,5rem)/.95 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
.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) .2s backwards}
.age{display:inline-block;margin-top:22px;padding:11px 24px;border-radius:999px;background:#fff;color:#B30F74;font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);box-shadow:0 12px 24px -14px rgba(42,27,69,.5);rotate:-1.5deg}
.hd .sp4{position:absolute;pointer-events:none;width:max(.3em,22px);height:auto}
.hd .sp4.a{left:-.34em;top:-.04em}
.hd .sp4.b{right:-.3em;top:.3em;width:max(.24em,18px)}

/* ---------- Photo with caption ---------- */
.shot{position:relative;z-index:2;max-width:940px;margin:clamp(44px,6vw,76px) auto 0;rotate:-1deg;transition:rotate .55s var(--spring),translate .55s var(--spring)}
.shot:hover{rotate:0deg;translate:0 -8px}
.pd .ph{position:relative;aspect-ratio:16/10;padding:8px;background:#fff;border-radius:44px;box-shadow:0 30px 50px -26px rgba(42,27,69,.55)}
.pd .ph:hover{rotate:0deg;scale:1}
.pd .ph .in{position:absolute;inset:8px;width:auto;height:auto;border-radius:37px}
.pd .ph .in svg{width:12%;max-width:72px}
.cap{position:relative;z-index:2;width:fit-content;max-width:min(470px,92%);margin:-34px 0 0 clamp(14px,3vw,34px);padding:18px 28px;border-radius:28px;background:var(--pink);color:#fff;
  font:600 clamp(1.15rem,2vw,1.55rem)/1.3 var(--serif);font-variation-settings:"SOFT" 100;rotate:-2deg;box-shadow:0 18px 30px -16px rgba(179,15,116,.7);transition:rotate .5s var(--spring)}
.shot:hover .cap{rotate:1deg}

/* ---------- 3 points ---------- */
.pts{list-style:none;padding:0;position:relative;z-index:2;max-width:1100px;margin:clamp(80px,10vw,120px) auto 0;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.pt{padding:clamp(24px,3.2vw,32px);background:#fff;border-radius:32px;box-shadow:0 22px 40px -26px rgba(42,27,69,.45);rotate:var(--r);transition:rotate .45s var(--spring),translate .45s var(--spring)}
.pt:hover{rotate:0deg;translate:0 -6px}
.bd{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--pinkt);color:var(--pink)}
.pt:nth-child(2) .bd{background:var(--sky);color:var(--blue)}
.pt h2{margin-top:18px;font:700 1.45rem/1.15 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.01em}
.pt p{margin-top:10px;font-size:1.08rem;line-height:1.65;color:var(--muted)}

/* ---------- Back / previous / next ---------- */
.pager{position:relative;z-index:2;max-width:1100px;margin:clamp(64px,8vw,96px) auto 0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"prev next" "back back";gap:28px 16px;align-items:center}
.pager .prev{grid-area:prev;justify-self:start}
.pager .next{grid-area:next;justify-self:end;flex-direction:row-reverse;text-align:right}
.pager .back{grid-area:back;justify-self:center}
.pn{display:flex;align-items:center;gap:12px;padding:8px 22px 8px 8px;border-radius:999px;background:#fff;box-shadow:0 14px 26px -16px rgba(42,27,69,.5);transition:transform .3s var(--spring)}
.pn.next{padding:8px 8px 8px 22px}
.pn:hover{transform:translateY(-3px)}
.pn .ar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;transition:translate .3s var(--spring)}
.pn .ar .i{width:24px;height:24px;stroke-width:2.8}
.pn.prev:hover .ar{translate:-4px 0}
.pn.next:hover .ar{translate:4px 0}
.pn small{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}
.pn b{display:block;font:700 1.1rem/1.15 var(--serif);font-variation-settings:"SOFT" 100}
.back.btn{margin-top:0}

@keyframes rise{from{transform:translateY(115%)}}
@keyframes cdrift{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}

@media (min-width:901px){
  .hd h1{font-size:clamp(5rem,10vw,9rem)}
  .pts{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .pager{grid-template-columns:1fr auto 1fr;grid-template-areas:"prev back next"}
}
@media (max-width:420px){
  .pn{padding-right:16px}
  .pn.next{padding-left:16px}
  .pn b{font-size:1rem}
}