/* ============================================================
   Inner pages: About, Teachers, Programs
   Every rule is scoped to body.page-about / .page-teachers /
   .page-programs or to a class only these pages use, so nothing
   here leaks into the homepage or the other page sheets.
   Builds on decor.css (doodles, dividers, frames, polaroids).
   ============================================================ */

/* --- Shared ------------------------------------------------- */
:is(.page-about, .page-teachers, .page-programs) .inner-lead {
    max-width: 46rem;
    margin: 0 auto;
    font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem);
    line-height: 1.8;
    text-align: center;
    color: var(--color-text-light);
    text-wrap: pretty;
}
:is(.page-about, .page-teachers, .page-programs) .inner-lead strong { color: var(--color-brown); }
/* Long centred blocks are hard to read on phones */
@media (max-width: 600px) {
    :is(.page-about, .page-teachers, .page-programs) .inner-lead {
        text-align: left;
        line-height: 1.75;
    }
}
/* Section title straight to content: at least 2rem everywhere on these pages */
:is(.page-about, .page-teachers, .page-programs) .section-title { margin-bottom: max(2rem, var(--space-2xl)); }
:is(.page-about, .page-teachers, .page-programs) .section-title + .section-subtitle { margin-top: calc(var(--space-md) - max(2rem, var(--space-2xl))); }

/* Page heroes (page_hero()): balanced subtitle lines, no one-word orphans */
:is(.page-about, .page-teachers, .page-programs) .page-hero__subtitle { text-wrap: balance; }
/* These photos are bright (white shirts, blue rug, lit ceilings): a soft extra scrim behind the
   text keeps white subtitles >= 4.5:1 and titles >= 3.5:1 at the brightest pixel (measured). */
:is(.page-about, .page-teachers, .page-programs) .page-hero__overlay {
    background:
        radial-gradient(ellipse 50% 42% at 50% 60%, rgba(10, 26, 48, .3) 0%, rgba(10, 26, 48, 0) 100%),
        linear-gradient(rgba(10, 26, 48, .12), rgba(10, 26, 48, .12)),
        var(--overlay-warm-navy);
}

/* CTA with two buttons */
:is(.page-about, .page-teachers, .page-programs) .cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

/* ============================================================
   ABOUT
   ============================================================ */
.page-about .about-mission .container { max-width: 54rem; }
.page-about .about-mission__whole {
    max-width: 38rem;
    margin: var(--space-2xl) auto 0;
    font-size: var(--fs-md);
    line-height: 1.75;
    text-align: center;
    color: var(--color-text);
    text-wrap: balance;
}
.page-about .about-mission__whole::before {
    content: '';
    display: block;
    width: 88px;
    height: 14px;
    margin: 0 auto var(--space-lg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14' fill='none'%3E%3Cpath d='M3 8.6C8.4 4.2 12.6 3.6 17 7.4s8.8 4.6 13.6.6 9.4-4.2 13.8-.2 9 4.4 13.8.2 9.2-3.8 13.6.4 8.8 3.4 13.2-.8' stroke='%23FFAF1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-about .about-mission__whole strong { color: var(--color-brown); font-weight: 700; }

/* --- Pastors + Vision Sunday video ------------------------ */
/* The video is the star: about 75% of the row on wide screens, with the pastors' note as a slim
   column beside it; below 1100px the note drops underneath the full-width video. */
.page-about .about-vision__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 1100px) {
    .page-about .about-vision > .container { max-width: 1340px; }
    .page-about .about-vision__grid {
        max-width: 1300px;
        grid-template-columns: minmax(0, 4fr) minmax(230px, 1fr);
        gap: clamp(1.75rem, 2.5vw, 2.5rem);
    }
}
.page-about .about-video { margin: 0; }
/* Colour block offset behind the player, like the portrait frames */
.page-about .about-video__stage {
    position: relative;
    isolation: isolate;
    margin: 0 calc(clamp(10px, 1.5vw, 18px) + 4px) calc(clamp(10px, 1.5vw, 18px) + 4px) 0;
}
.page-about .about-video__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-xl);
    background: var(--color-marigold-light);
    translate: clamp(10px, 1.5vw, 18px) clamp(10px, 1.5vw, 18px);
    rotate: 1.5deg;
}
/* The 720p encode and its poster are true 16:9 (letterbox bars cropped off in the encode). */
.page-about .video-embed {
    position: relative;
    height: auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    border: 6px solid #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0F2236;
    box-shadow: 0 14px 30px -12px rgba(16, 36, 59, .45);
}
.page-about .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0F2236;
    border-radius: calc(var(--radius-xl) - 6px);
}
.page-about .about-video__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: radial-gradient(ellipse at center, rgba(10, 26, 48, .05) 0%, rgba(10, 26, 48, .28) 100%);
    cursor: pointer;
    --focus-color: #FFFFFF;
}
.page-about .about-video__play[hidden] { display: none; }
.page-about .about-video__play:focus-visible { outline-offset: -8px; }
.page-about .about-video__play-disc {
    display: grid;
    place-items: center;
    width: clamp(64px, 8vw, 88px);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: var(--color-red-btn, #D2341D);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .38), 0 14px 30px -8px rgba(0, 0, 0, .5);
    transition: scale .25s var(--ease-soft, ease), box-shadow .25s var(--ease-soft, ease);
}
.page-about .about-video__play-disc svg {
    width: 44%;
    height: auto;
    margin-left: 6%;
    fill: currentColor;
}
.page-about .about-video__play:hover .about-video__play-disc,
.page-about .about-video__play:focus-visible .about-video__play-disc {
    scale: 1.07;
    box-shadow: 0 0 0 11px rgba(255, 255, 255, .45), 0 16px 34px -8px rgba(0, 0, 0, .55);
}
.page-about .about-video__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: var(--space-md);
    font-size: var(--fs-sm);
    color: var(--color-text);
}
.page-about .about-video__caption strong { color: var(--color-brown); }
.page-about .about-video__link {
    text-decoration: underline;
    text-decoration-color: var(--color-marigold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.page-about .about-video__link:hover strong,
.page-about .about-video__link:focus-visible strong { color: var(--color-ocean-dark); }
.page-about .about-video__time {
    display: inline-block;
    margin-left: .35rem;
    padding: .05em .65em;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.page-about .pastors-note {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--paper-shadow);
}
.page-about .pastors-note__head {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.page-about .pastors-note__photo { flex: none; width: clamp(92px, 9vw, 112px); margin: 12px; }
.page-about .pastors-note__name {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.7rem + 1vw, 2.6rem);
    line-height: 1.02;
    color: var(--color-brown);
}
.page-about .pastors-note__title {
    margin-top: .3rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-ocean-dark);
}
.page-about .pastors-note__quote {
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 0 2.6rem;
    border-top: 2px dashed var(--color-seafoam-dark);
}
.page-about .pastors-note__quote::before {
    content: '\201C';
    position: absolute;
    left: -.1rem;
    top: .55rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.2rem;
    line-height: 1;
    color: var(--color-marigold);
}
.page-about .pastors-note__quote p {
    font-size: var(--fs-md);
    font-style: italic;
    line-height: 1.75;
    color: var(--color-text);
}
@media (max-width: 480px) {
    .page-about .pastors-note__head { gap: var(--space-md); }
    .page-about .pastors-note__quote { padding-left: 0; padding-top: 3.2rem; }
    .page-about .pastors-note__quote::before { top: .6rem; left: 0; }
}
/* Slim column beside the 75% video: stack the head, centre everything, keep it about video height */
@media (min-width: 1100px) {
    .page-about .pastors-note { padding: 1.6rem 1.35rem 1.75rem; text-align: center; }
    .page-about .pastors-note__head {
        flex-direction: column;
        gap: .35rem;
        margin-bottom: var(--space-md);
    }
    .page-about .pastors-note__photo { width: 88px; margin: 8px auto 6px; }
    .page-about .pastors-note__name { font-size: clamp(1.85rem, 1.2rem + .8vw, 2.2rem); }
    .page-about .pastors-note__quote { padding: 2.6rem 0 0; }
    .page-about .pastors-note__quote::before { top: .2rem; left: 50%; translate: -50% 0; font-size: 3.6rem; }
    .page-about .pastors-note__quote p { font-size: var(--fs-base); line-height: 1.65; }
}

/* --- Standards: aligned titles, one line each from 1100px -- */
.page-about .about-standards__grid { gap: var(--space-xl) var(--space-lg); }
.page-about .about-standards__grid .feature__icon .icon { width: 100%; height: 100%; }
@media (min-width: 601px) {
    .page-about .about-standards__grid .feature { padding: var(--space-lg) var(--space-md); }
    .page-about .about-standards__grid .feature__title { font-size: clamp(2rem, 2.6vw, 2.5rem); }
    @supports (grid-template-rows: subgrid) {
        /* icon / title / text rows line up across the row even if a title wraps */
        .page-about .about-standards__grid .feature {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-content: start;
        }
        .page-about .about-standards__grid .feature__title { align-self: end; }
    }
}
.page-about .about-standards__grid .feature__text { text-wrap: pretty; }

/* --- How We Started: scrapbook mosaic ---------------------- */
.page-about .about-story__intro { max-width: 50rem; margin: 0 auto var(--space-2xl); }
.page-about .about-story__mosaic { max-width: 1040px; margin: 0 auto; }

/* ============================================================
   TEACHERS
   ============================================================ */
.page-teachers .teachers-intro .container { max-width: 62rem; }

/* Face index: jump to anyone on a long page */
.page-teachers .team-jump { margin-top: var(--space-2xl); }
.page-teachers .team-jump__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem clamp(1.1rem, 2.2vw, 2rem);
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 0 0;
}
.page-teachers .team-jump__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 4px 4px 2px;
    border-radius: var(--radius-md);
    color: var(--color-brown);
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1.2;
    text-decoration: none;
}
.page-teachers .team-jump__ring {
    width: clamp(64px, 7vw, 84px);
    transition: translate .25s var(--ease-soft, ease);
}
.page-teachers .team-jump__initial {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-sand);
    font-family: var(--font-display);
    font-size: 2rem;
}
.page-teachers .team-jump__link:hover { color: var(--color-ocean-dark); }
.page-teachers .team-jump__link:hover .team-jump__ring,
.page-teachers .team-jump__link:focus-visible .team-jump__ring { translate: 0 -4px; }
.page-teachers .team-jump__link:hover .team-jump__name {
    text-decoration: underline;
    text-decoration-color: var(--color-marigold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
@media (min-width: 601px) {
    .page-teachers .team-jump__list {
        display: grid;
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        gap: 1.5rem clamp(1.5rem, 3.4vw, 3rem);
    }
}
@media (max-width: 600px) {
    .page-teachers .team-jump__list { gap: 1.25rem .9rem; }
    .page-teachers .team-jump__ring { width: 58px; }
    .page-teachers .team-jump__ring::after { inset: -8px; }
    .page-teachers .team-jump__link { gap: .7rem; font-size: .85rem; }
}

.page-teachers .teachers-intro { padding-bottom: calc(var(--space-3xl) + var(--divider-space, 0px)); }

/* Profiles: full-width alternating rows, bigger framed portraits */
.page-teachers .teacher-section {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: calc(clamp(2.75rem, 4.5vw, 4.25rem) + var(--divider-space, 0px));
}
.page-teachers .teacher-profile {
    max-width: 1040px;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}
.page-teachers .teacher-profile__photo { flex: 0 0 clamp(270px, 30vw, 360px); }
.page-teachers .teacher-profile__photo .frame-offset > img { box-shadow: 0 16px 30px -14px rgba(98, 42, 20, .4); }
.page-teachers .teacher-profile__info { flex: 1; min-width: 0; }
.page-teachers .teacher-profile__name {
    font-size: clamp(2.75rem, 1.9rem + 2.6vw, 4.1rem);
    line-height: 1.02;
    margin-bottom: var(--space-sm);
}
.page-teachers .teacher-profile__title {
    display: inline-block;
    margin-bottom: var(--space-lg);
    padding: .3em 1.05em;
    border-radius: var(--radius-pill);
    background: var(--color-sky);
    color: var(--color-ocean-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.page-teachers .teacher-section--tint .teacher-profile__title {
    background: #fff;
    box-shadow: 0 2px 8px -4px rgba(98, 42, 20, .25);
}
.page-teachers .teacher-profile__bio {
    max-width: 34rem;
    font-size: var(--fs-md);
    line-height: 1.8;
    color: var(--color-text);
}
.page-teachers .teacher-profile__name + .teacher-profile__bio { margin-top: var(--space-md); }
.page-teachers .teacher-profile__bio--soon {
    font-style: italic;
    color: var(--color-text-light);
}
.page-teachers .teacher-profile__placeholder { border-radius: 1.25rem; }
@media (max-width: 768px) {
    .page-teachers .teacher-profile { gap: var(--space-xl); }
    .page-teachers .teacher-profile__photo {
        flex: none;
        width: min(300px, 78vw);
        max-width: none;
        margin: 0 auto;
    }
    .page-teachers .teacher-profile__bio { margin-inline: auto; }
}

/* Moments with the team */
.page-teachers .teachers-moments__mosaic { max-width: 1120px; margin: 0 auto; }

/* ============================================================
   PROGRAMS
   ============================================================ */
.page-programs .programs-intro .container { max-width: 54rem; }

/* --- Class cards with age medallions ---------------------- */
.page-programs .program-grid {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 58px;
    gap: 92px var(--space-xl);
    align-items: stretch;
}
.page-programs .program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 76px clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2rem);
    border-top: 0;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--paper-shadow);
    text-align: center;
}
.page-programs .program-card__medal {
    position: absolute;
    top: -50px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    border-radius: var(--radius-full);
    background: var(--medal-bg, var(--color-ocean));
    color: var(--medal-fg, #fff);
    box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(98, 42, 20, .45);
    rotate: -7deg;
}
.page-programs .program-card__age {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -.02em;
    translate: -2px .02em;
}
.page-programs .program-card__medal .program-card__icon {
    position: absolute;
    right: -46px;
    bottom: -12px;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 4px #fff, 0 8px 16px -8px rgba(98, 42, 20, .45);
    rotate: 14deg;
}
.page-programs .program-card__name {
    font-size: clamp(2.5rem, 2.1rem + 1.1vw, 3.1rem);
    line-height: 1.05;
    margin-bottom: var(--space-sm);
}
.page-programs .program-card__ages {
    display: inline-block;
    margin-bottom: var(--space-lg);
    padding: .28em 1em;
    border-radius: var(--radius-pill);
    background: var(--color-sand);
    color: var(--color-brown);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
}
.page-programs .program-card__desc {
    flex: 1;
    margin-bottom: var(--space-lg);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text);
    text-wrap: pretty;
}
.page-programs .program-card__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    width: 100%;
    margin: 0;
}
.page-programs .program-card__fact {
    padding: .75rem .5rem .7rem;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    box-shadow: inset 0 0 0 1.5px var(--color-gray-200);
}
.page-programs .program-card__fact dt {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.page-programs .program-card__fact dd {
    margin: .2rem 0 0;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-brown);
    font-variant-numeric: tabular-nums;
}
/* Tablet: 2 + 1 centred instead of a lonely card on the left */
@media (min-width: 769px) and (max-width: 1023px) {
    .page-programs .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-programs .program-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - var(--space-xl) / 2);
    }
}
@media (max-width: 768px) {
    .page-programs .program-grid { max-width: 30rem; }
}

/* --- Every class includes (band--squiggle) ---------------- */
.page-programs .includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-lg);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
@media (min-width: 960px) {
    .page-programs .includes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-programs .include-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(98, 42, 20, .1), 0 12px 24px -14px rgba(98, 42, 20, .45);
    rotate: -.5deg;
}
.page-programs .include-card:nth-child(even) { rotate: .6deg; }
.page-programs .include-card:nth-child(3n) { rotate: -.2deg; }
.page-programs .include-card__icon { flex: none; width: 56px; height: 56px; }
.page-programs .programs-includes .include-card__title {
    margin: .15rem 0 .25rem;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-brown);
}
.page-programs .programs-includes .include-card__text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-text);
}
.page-programs .programs-includes__more {
    margin-top: var(--space-xl);
    text-align: center;
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .page-programs .include-card { rotate: none; }
}

/* --- A peek inside ---------------------------------------- */
.page-programs .programs-peek__mosaic { max-width: 1120px; margin: 0 auto; }