/* ──────────────────────────────────────────────────────────
   PROGRAM PAGE TEMPLATE
   /templates/program.css

   The design template for program-type pages (Academy, Childcare,
   Aquatics, and any future programs). Each program page links to
   this file and gets the layout, borders, gradients, and animations
   below — without baking them into the page itself.

   To use:
       <link rel="stylesheet" href="../templates/program.css">

   Edit this file once → all pages linking to it update on next
   browser refresh. Per-page colour / detail overrides go in a
   small <style> block on the individual page, AFTER the link.

   Design philosophy: box-and-border driven, not color-fill driven.
   Brand trio carries the design — black (ink), blue (accent),
   white/cream (canvas). Peach reserved for active states + CTAs.
   Sections separated by hairline rules. Cards are bordered frames
   with transparent interiors. Photo placeholders are neutral —
   when real images load via the same slots, they bring the colour.
   ────────────────────────────────────────────────────────── */

/* HERO — kept color-filled for impact + so future photos have a
   strong canvas to land on. Top-of-hero darkening bumped up so
   white title text reads even when a future photo's top is
   naturally bright (sky, snow, etc). */
.subpage-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}
@media (max-width: 700px) { .subpage-hero { min-height: 80vh; } }
.subpage-hero-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
}

/* DARK variants (Academy, Aquatics) — heavier top darkening
   (40% vs the previous 18%) so the title block holds contrast
   against any future photo. Three-stop gradient gives a
   smooth fade from "dark at top" to "very dark at bottom".

   The middle gradient is now a HORIZONTAL sweep with a soft
   white shine in the centre. Same brand color identity as
   before, but the white peak (5–8% opacity) breaks the "solid
   paint block" feel and gives the hero visual lift. */
.subpage-hero-academy { color: #fff; }
.subpage-hero-academy .subpage-hero-image {
    background-image:
        /* Vertical fade — much lighter at top so the nav/logo reads,
           building to deeper darkness around the title and beyond. */
        linear-gradient(180deg,
            rgba(0,0,0,0.18) 0%,
            rgba(0,0,0,0.32) 25%,
            rgba(0,0,0,0.55) 65%,
            rgba(0,0,0,0.70) 100%),
        /* White pocket — top-left. Lights up the brand/logo area
           specifically so even the (transparent-bg) nav has presence. */
        radial-gradient(ellipse 50% 32% at 18% 12%,
            rgba(255,255,255,0.22) 0%,
            rgba(255,255,255,0) 72%),
        /* White pocket — center-left. A soft halo sitting behind the
           title; gives the white headline something atmospheric to
           land against. */
        radial-gradient(ellipse 60% 48% at 32% 56%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0) 75%),
        /* White pocket — upper-right corner. Atmospheric balance so
           the lighter side doesn't feel one-sided. */
        radial-gradient(ellipse 38% 28% at 80% 22%,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0) 72%),
        /* White pocket — lower-right. Finishing glow near where the
           large hero number watermark sits. */
        radial-gradient(ellipse 32% 22% at 78% 80%,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0) 72%),
        /* Charcoal base — softer than before so the pockets register. */
        linear-gradient(135deg,
            rgba(45,49,56,0.38) 0%,
            rgba(45,49,56,0.26) 50%,
            rgba(45,49,56,0.38) 100%),
        var(--bg-academy);
}
.subpage-hero-aquatics { color: #fff; }
.subpage-hero-aquatics .subpage-hero-image {
    background-image:
        linear-gradient(180deg,
            rgba(0,30,60,0.40) 0%,
            rgba(0,30,60,0.50) 40%,
            rgba(0,30,60,0.65) 100%),
        linear-gradient(90deg,
            rgba(30,69,102,0.55) 0%,
            rgba(30,69,102,0.45) 30%,
            rgba(255,255,255,0.08) 50%,
            rgba(30,69,102,0.45) 70%,
            rgba(30,69,102,0.55) 100%),
        var(--bg-aquatics);
}

/* LIGHT variant (Childcare) — cream tint with dark text. The
   white shine in the centre reads as a brighter highlight
   against the surrounding cream, giving the light hero its
   own version of the "lit surface" effect. */
.subpage-hero-childcare { color: var(--ink); }
.subpage-hero-childcare .subpage-hero-image {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.10) 100%),
        linear-gradient(90deg,
            rgba(245,239,226,0.55) 0%,
            rgba(245,239,226,0.45) 30%,
            rgba(255,255,255,0.40) 50%,
            rgba(245,239,226,0.45) 70%,
            rgba(245,239,226,0.55) 100%),
        var(--bg-childcare);
}

/* Belt-and-suspenders: text-shadow on white-text titles so a
   bright spot in a future photo can't fully erase the type. */
.subpage-hero-academy .subpage-hero-title,
.subpage-hero-aquatics .subpage-hero-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.subpage-hero-academy .subpage-hero-tagline,
.subpage-hero-aquatics .subpage-hero-tagline {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.subpage-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: currentColor;
    opacity: 0.75;
    margin-bottom: var(--sp-6);
    transition: opacity var(--t), gap var(--t);
}
.subpage-back:hover { opacity: 1; gap: 12px; }

.subpage-hero-eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
    opacity: 0.92;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.subpage-hero-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.subpage-hero-title {
    font-size: clamp(3.2rem, 10vw, 8rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 0 0 var(--sp-5);
    font-variation-settings: "opsz" 144, "SOFT" 80;
    max-width: 16ch;
    color: currentColor;
}
.subpage-hero-tagline {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    margin: 0 0 var(--sp-7);
    opacity: 0.92;
    font-variation-settings: "opsz" 36;
}

.subpage-hero-action {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.subpage-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.subpage-hero-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--peach);
    box-shadow: 0 0 0 4px rgba(255,145,102,0.25);
    animation: status-pulse 2.5s ease-in-out infinite;
}
/* HERO CTA — base layout. Per-program colour rules below override
   background + colour to match each program's identity. Peach is
   retired from actions; it survives only as status-pulse and
   timeline indicators. */
.subpage-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: transform var(--t), box-shadow var(--t),
                background var(--t), color var(--t);
}
.subpage-hero-cta:hover {
    transform: translateY(-2px);
}
.subpage-hero-cta svg { transition: transform var(--t); }
.subpage-hero-cta:hover svg { transform: translateX(4px); }

/* Academy — sky-blue button on charcoal hero (matches italic accent) */
.subpage-hero-academy .subpage-hero-cta {
    background: var(--blue);
    color: var(--ink);
    box-shadow: 0 8px 24px -8px rgba(124, 196, 240, 0.55);
}
.subpage-hero-academy .subpage-hero-cta:hover {
    background: var(--blue-deep);
    color: #fff;
    box-shadow: 0 14px 32px -8px rgba(74, 155, 216, 0.65);
}

/* Childcare — charcoal button on cream hero (decisive contrast) */
.subpage-hero-childcare .subpage-hero-cta {
    background: var(--ink);
    color: var(--cream);
    box-shadow: 0 8px 24px -8px rgba(31, 47, 38, 0.4);
}
.subpage-hero-childcare .subpage-hero-cta:hover {
    background: #000;
    color: #fff;
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.5);
}

/* Aquatics — cream button on navy hero (light pops on dark) */
.subpage-hero-aquatics .subpage-hero-cta {
    background: var(--cream);
    color: var(--blue-anchor);
    box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.3);
}
.subpage-hero-aquatics .subpage-hero-cta:hover {
    background: #fff;
    color: var(--blue-anchor);
    box-shadow: 0 14px 32px -8px rgba(255, 255, 255, 0.5);
}

.subpage-hero-number {
    position: absolute;
    bottom: var(--sp-5);
    right: var(--sp-6);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    font-style: italic;
    opacity: 0.18;
    color: currentColor;
    letter-spacing: -0.04em;
    line-height: 1;
    pointer-events: none;
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.subpage-hero-childcare .subpage-hero-number { opacity: 0.12; }

/* SECTION BACKGROUNDS — unified cream canvas. Visual rhythm
   comes from typography + hairline section dividers, not from
   contrasting background panels. */
.subpage-intro,
.subpage-pillars,
.subpage-day,
.subpage-mission {
    background: var(--cream);
    padding: var(--sp-9) 0;
}
.subpage-pillars,
.subpage-day,
.subpage-mission {
    border-top: 1px solid rgba(31, 47, 38, 0.08);
}

/* INTRO */
.subpage-intro-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}
@media (max-width: 880px) {
    .subpage-intro-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.subpage-intro-text h2 {
    margin: var(--sp-3) 0 var(--sp-5);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
}
.subpage-intro-text p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: var(--sp-4);
    max-width: 38em;
}
.subpage-intro-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}
/* STAT BOX — bordered frame, transparent fill */
.subpage-stat {
    padding: var(--sp-5);
    background: transparent;
    border: 1px solid rgba(31, 47, 38, 0.15);
    border-radius: var(--r-lg);
    transition: border-color var(--t), background var(--t);
}
.subpage-stat:hover {
    border-color: var(--blue-warm);
    background: rgba(124, 196, 240, 0.04);
}
.subpage-stat-num {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2.2rem, 3.8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    margin-bottom: var(--sp-2);
    font-variation-settings: "opsz" 144, "SOFT" 80;
}
.subpage-stat-label {
    font-size: 0.85rem;
    color: var(--ink-mute);
    line-height: 1.4;
}

/* PILLARS */
.subpage-pillars-header { text-align: center; margin-bottom: var(--sp-8); }
.subpage-pillars-header h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin: var(--sp-3) auto var(--sp-4);
    max-width: 18ch;
}
.subpage-pillars-header p {
    max-width: 50ch;
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
}
.subpage-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
}
.subpage-pillars-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
    .subpage-pillars-grid,
    .subpage-pillars-grid.cols-3 { grid-template-columns: 1fr; }
}
/* PILLAR CARD — bordered frame, transparent interior. */
.subpage-pillar {
    background: transparent;
    border: 1px solid rgba(31, 47, 38, 0.15);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.subpage-pillar:hover {
    transform: translateY(-3px);
    border-color: var(--blue-warm);
    box-shadow: 0 16px 40px -16px rgba(30, 69, 102, 0.18);
}
/* PILLAR IMAGE PLACEHOLDER — single neutral treatment. Per-pillar
   classes (e.g. .subpage-pillar-image-music) still exist as empty
   slots — assign background-image to any of them when you have
   real photos to drop in. A 2px blue accent stripe at the top
   gives identity without color-filling the placeholder. */
.subpage-pillar-image {
    aspect-ratio: 16/9;
    background: var(--cream-deep);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(31, 47, 38, 0.08);
    position: relative;
}
.subpage-pillar-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--blue);
    opacity: 0.45;
}
/* All per-pillar slots intentionally empty — set background-image
   on any of these when photos arrive. */
.subpage-pillar-image-friendships,
.subpage-pillar-image-music,
.subpage-pillar-image-outdoors,
.subpage-pillar-image-adventure,
.subpage-pillar-image-daycare,
.subpage-pillar-image-schoolage,
.subpage-pillar-image-camps,
.subpage-pillar-image-confidence,
.subpage-pillar-image-excellence,
.subpage-pillar-image-splash {
    /* intentionally empty — ready for background-image */
}

.subpage-pillar-body {
    padding: var(--sp-6) var(--sp-5);
    flex: 1;
    position: relative;
}
.subpage-pillar-num {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--blue-deep);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-2);
}
.subpage-pillar-body h3 {
    font-size: 1.6rem;
    margin: 0 0 var(--sp-2);
}
.subpage-pillar-subtitle {
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin-bottom: var(--sp-3);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.subpage-pillar-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* DAY TIMELINE */
.subpage-day-header { text-align: center; margin-bottom: var(--sp-8); }
.subpage-day-header h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin-top: var(--sp-3);
}
.subpage-timeline {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    gap: var(--sp-5);
    position: relative;
}
.subpage-timeline::before {
    content: "";
    position: absolute;
    left: 80px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: rgba(0,0,0,0.12);
}
@media (max-width: 600px) {
    .subpage-timeline::before { left: 56px; }
}
.subpage-timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-5);
    align-items: start;
    position: relative;
}
@media (max-width: 600px) {
    .subpage-timeline-item { grid-template-columns: 56px 1fr; gap: var(--sp-4); }
}
.subpage-timeline-time {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--blue-deep);
    font-weight: 500;
    padding-top: 2px;
    position: relative;
    text-align: right;
}
.subpage-timeline-time::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--peach);
    box-shadow: 0 0 0 4px var(--cream);
    z-index: 1;
}
@media (max-width: 600px) {
    .subpage-timeline-time::after { right: -14px; }
}
.subpage-timeline-item strong {
    display: block;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
}
.subpage-timeline-item p {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* MISSION — bordered tiles, transparent interior */
.subpage-mission-header { text-align: center; margin-bottom: var(--sp-7); }
.subpage-mission-header h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-top: var(--sp-3);
}
.subpage-mission-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 880px) {
    .subpage-mission-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .subpage-mission-grid { grid-template-columns: 1fr; }
}
.subpage-mission-item {
    padding: var(--sp-5);
    background: transparent;
    border: 1px solid rgba(31, 47, 38, 0.15);
    border-radius: var(--r-lg);
    transition: border-color var(--t);
}
.subpage-mission-item:hover { border-color: var(--blue-warm); }
.subpage-mission-label {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--blue-deep);
    margin-bottom: var(--sp-3);
    font-weight: 500;
}
.subpage-mission-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

/* CTA — kept full-bleed gradient. The impact moment at page end. */
.subpage-cta {
    position: relative;
    padding: var(--sp-9) 0;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.subpage-cta-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-image:
        linear-gradient(135deg, rgba(30,69,102,0.85), rgba(18,46,74,0.9)),
        var(--bg-contact);
}
.subpage-cta-content { text-align: center; max-width: 680px; margin: 0 auto; }
.subpage-cta-content h2 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    color: #fff;
    margin: var(--sp-3) 0 var(--sp-5);
    line-height: 1.05;
}
.subpage-cta-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--sp-7);
}
.subpage-cta-actions {
    display: inline-flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    justify-content: center;
}
/* Page-end CTA primary button — themed per program via the
   body class. Each page's <body class="program-academy"> etc.
   triggers the matching colour treatment. */
.program-academy .subpage-cta .btn-primary {
    background: var(--blue);
    color: var(--ink);
    box-shadow: 0 8px 24px -8px rgba(124, 196, 240, 0.4);
}
.program-academy .subpage-cta .btn-primary:hover {
    background: var(--blue-deep);
    color: #fff;
}
.program-childcare .subpage-cta .btn-primary {
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.25);
}
.program-childcare .subpage-cta .btn-primary:hover {
    background: #fff;
    color: var(--ink);
}
.program-aquatics .subpage-cta .btn-primary {
    background: var(--cream);
    color: var(--blue-anchor);
    box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.25);
}
.program-aquatics .subpage-cta .btn-primary:hover {
    background: #fff;
    color: var(--blue-anchor);
}

.btn-ghost-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 500;
    transition: all var(--t);
}
.btn-ghost-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
}

/* Defensive footer override — the chrome's global `p { color: var(--ink-soft); }`
   rule otherwise wins over the footer's inherited cream text color for any
   unclassed paragraph. Class-styled paragraphs (.footer-blurb etc.) keep their
   own colors via higher specificity; this only catches naked <p> elements. */
footer p {
    color: rgba(251, 246, 238, 0.75);
}

/* Dark-hero programs (Academy, Aquatics): the page-top nav is fully
   transparent until the user scrolls, so the chrome's default dark
   brand text is unreadable against the dark hero. Flip it to cream
   while the nav is at top; once it scrolls and gains its own cream
   background, drop the override and let the chrome's dark text return. */
.program-academy .nav:not(.scrolled) .brand,
.program-academy .nav:not(.scrolled) .brand-text-sub,
.program-academy .nav:not(.scrolled) .nav-links a,
.program-academy .nav:not(.scrolled) .nav-dropdown-trigger,
.program-academy .nav:not(.scrolled) .nav-toggle,
.program-aquatics .nav:not(.scrolled) .brand,
.program-aquatics .nav:not(.scrolled) .brand-text-sub,
.program-aquatics .nav:not(.scrolled) .nav-links a,
.program-aquatics .nav:not(.scrolled) .nav-dropdown-trigger,
.program-aquatics .nav:not(.scrolled) .nav-toggle {
    color: rgba(251, 246, 238, 0.92);
}