/* =========================================================
   JNIS COMMUNITY VOICES — UPDATED VIDEO POPUP
   Page-scoped styles only.
========================================================= */

.voices-page {
    --jnis-blue: #3dbced;
    --jnis-navy: #0c1c30;
    --white: #ffffff;
    --soft-white: #00285e;
    --line: rgba(12, 28, 48, 0.12);
    --muted: #66717d;
    /* Voice card frame. The thin permanent border, the rounded corners,
       and the fast hover highlight ALL follow the same outer perimeter
       and radius, outside the poster/image. */
    --jnis-card-ring: 2px;
    --jnis-card-radius: 14px;
    --jnis-card-border-color: rgba(61, 188, 237, .38);
    --jnis-card-border-color-hover: rgba(61, 188, 237, .72);
    --serif: "EB Garamond", serif;
    --sans: "Poppins", sans-serif;
    --heading: "Montserrat", sans-serif;
    --body-alt: "Montserrat Alternates", Arial, sans-serif;
    width: 100%;
    overflow: hidden;
}

.voices-page .container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}

.voices-page .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: var(--heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--jnis-blue);
}

.voices-page .eyebrow::before,
.voices-page .eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.voices-page .section-title {
    display: block;
    text-align: center;
    letter-spacing: -.035em;
}

.voices-page .section-intro {
    width: min(570px, 100%);
    margin: 20px auto 0;
    text-align: center;
    font-family: var(--sans);
    font-size: .98rem;
    line-height: 1.7;
    color: var(--muted);
}

.voices-page .voice-section {
    position: relative;
    /* The section owns its own blend group so the floating artwork's
       mix-blend-mode only ever composites against this section's
       background, never against the banner/sections below it. */
    isolation: isolate;
    padding: 145px 0 94px;
    /* Deep links (#student-voices / #teacher-voices / #parent-voices) land the
       section below the fixed header instead of hiding it under it. */
    scroll-margin-top: 120px;
}

.voices-page .voice-section:nth-child(even) {
    background: var(--soft-white);
}

/* Teacher Voices — the middle section gets a deep navy background so it reads
   clearly as a distinct band between the student and parent sections. */
.voices-page .voice-section--teacher {
    background: #00122e;
}

.voices-page .voice-section--teacher .section-title .title-left,
.voices-page .voice-section--teacher .section-title .title-right {
    color: #ffffff;
}

.voices-page .voice-section--teacher .section-title .title-right {
    color: var(--jnis-blue);
}

.voices-page .voice-section--teacher .eyebrow {
    color: var(--jnis-blue);
}

.voices-page .voice-section--teacher .eyebrow::before,
.voices-page .voice-section--teacher .eyebrow::after {
    background: var(--jnis-blue);
}

.voices-page .voice-section--teacher .section-intro,
.voices-page .voice-section--teacher .voice-quote {
    color: rgba(255, 255, 255, .78);
}

.voices-page .voice-section--teacher .voice-name {
    color: #ffffff;
}

.voices-page .voice-section--teacher .voice-role {
    color: var(--jnis-blue);
}

.voices-page .voice-section--teacher .voice-image-wrap {
    background: rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------
   FLOATING BACKGROUND ARTWORK

   Decorative images hover in each section's background behind
   the content: Student gets two (left + right), Teacher one
   (left), Parent two (left + right). They are z-index:-1 inside
   an isolated section, so they never sit on top of cards/text
   and never affect layout/scroll. Their straight PNG edges are
   feathered with a radial mask so each one reads as a soft,
   floating illustration rather than a pasted rectangle.
   --------------------------------------------------------- */

/* Student + Parent stay light; Teacher is the deep-navy band and is
   tinted to exactly match books-pen-holder.png, so that artwork's
   baked-in background melts into the section with no seam. */
.voices-page .voice-section--student {
    background: #ffffff;
}

.voices-page .voice-section.voice-section--teacher {
    background: #012f5b;
}

.voices-page .voice-section--parent {
    background: #f2fbfd;
}

.voices-page .voice-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.voices-page .voice-bg-art {
    position: absolute;
    bottom: 0;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(125% 130% at 50% 100%, #000 42%, transparent 84%);
    mask-image: radial-gradient(125% 130% at 50% 100%, #000 42%, transparent 84%);
}

/* Section 1 — Student Voices: books left, flowing line right. */
.voices-page .voice-section--student .voice-bg-art--books {
    left: 0;
    width: clamp(190px, 22vw, 330px);
    mix-blend-mode: multiply;
}

.voices-page .voice-section--student .voice-bg-art--divider {
    right: 0;
    width: clamp(150px, 17vw, 250px);
    mix-blend-mode: multiply;
    opacity: .8;
}

/* Section 2 — Teacher Voices: the desk illustration; its baked-in navy
   background is identical to the band, so no blending is required. */
.voices-page .voice-section--teacher .voice-bg-art--books-pen-holder {
    left: 0;
    width: clamp(230px, 26vw, 400px);
}

/* Section 3 — Parent Voices: family left, house right. */
.voices-page .voice-section--parent .voice-bg-art--parent-left {
    left: 0;
    width: clamp(190px, 22vw, 330px);
    mix-blend-mode: multiply;
}

.voices-page .voice-section--parent .voice-bg-art--parent-right {
    right: -57px;
    width: clamp(180px, 21vw, 310px);
    mix-blend-mode: multiply;
}

/* At the 1300 × 649 desktop viewport, keep the left artwork clear of the
   first voice card without changing its placement at any other viewport. */
@media screen and (width: 1300px) and (height: 649px) {
    .voices-page .voice-section--student .voice-bg-art--books,
    .voices-page .voice-section--teacher .voice-bg-art--books-pen-holder,
    .voices-page .voice-section--parent .voice-bg-art--parent-left {
        left: -9px;
        top: 97px;
    }
}

.voices-page .voice-header {
    margin-bottom: 65px;
}

.voices-page .voices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.voices-page .voice-card {
    position: relative;
    border-radius: var(--jnis-card-radius);
    /* Permanent, subtle border on the card's own outer perimeter —
       a 1px box-shadow so it never covers the poster or shifts layout. */
    box-shadow: 0 0 0 1px var(--jnis-card-border-color);
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;
}

.voices-page .voice-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   PERMANENT BORDER + TRAVELLING HIGHLIGHT (voice cards)

   Every card keeps a thin, subtle JNIS-blue border around its
   whole outer perimeter (the 1px box-shadow on .voice-card, so
   it sits OUTSIDE the poster and never shrinks or overlays the
   card). On hover/keyboard-focus the border brightens slightly
   and a fast highlight (~0.85s) sweeps once around the same
   edge — a bright head with a soft trailing tail, like light
   running along the frame. The head returns to the top-centre
   and rests there while the card stays hovered; when the pointer
   leaves it fades out, and the next hover restarts from the same
   point. No JS, no markup, no layout shift.

   Technique: the highlight is a masked conic-gradient ring on a
   pseudo-element that extends just beyond the card (inset: -ring),
   so the strip hugs the outer edge without covering the image.
   The wedge angle is the registered custom property --sweep, which
   CSS interpolates from 0deg to 360deg while the card is hovered.
   --------------------------------------------------------- */

@property --sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 180deg;
}

.voices-page .voice-card::before {
    content: "";
    position: absolute;
    inset: calc(var(--jnis-card-ring) * -1);
    z-index: 2;
    pointer-events: none;
    padding: var(--jnis-card-ring);
    border-radius: var(--jnis-card-radius);
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent calc(var(--sweep) - 45deg),
        var(--jnis-blue) var(--sweep),
        transparent calc(var(--sweep) + 25deg),
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
}

/* Brighten the permanent border, then sweep the highlight — limited to
   devices with real hover so touch taps (which play the video) are not
   followed by a stuck ring. */
@media (hover: hover) {
    .voices-page .voice-card:hover {
        box-shadow: 0 0 0 1.5px var(--jnis-card-border-color-hover);
    }

    .voices-page .voice-card:hover::before {
        opacity: 1;
        animation: voice-border-sweep .85s cubic-bezier(.5, .05, .6, .99) forwards;
    }
}

/* Keyboard: the image-wrap is the focusable trigger inside the card,
   so :focus-within mirrors the hover treatment for focus users. */
.voices-page .voice-card:focus-within {
    box-shadow: 0 0 0 1.5px var(--jnis-card-border-color-hover);
}

.voices-page .voice-card:focus-within::before {
    opacity: 1;
    animation: voice-border-sweep .85s cubic-bezier(.5, .05, .6, .99) forwards;
}

@keyframes voice-border-sweep {
    from { --sweep: 0deg; }
    to   { --sweep: 360deg; }
}

.voices-page .voice-card:nth-child(2) {
    margin-top: 28px;
}

.voices-page .voice-card:nth-child(3) {
    margin-top: 8px;
}

.voices-page .voice-card:nth-child(4) {
    margin-top: 40px;
}

/* Video poster/card */

.voices-page .voice-image-wrap {
    position: relative;
    overflow: hidden;
    /* Match the card's rounded frame so the border/highlight follow the
       exact same corners as the poster, with no over/under hang. */
    border-radius: var(--jnis-card-radius);
    aspect-ratio: 3 / 4;
    background: #dfe8ed;
    cursor: pointer;
    isolation: isolate;
}

.voices-page .voice-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(12, 28, 48, .22)
    );
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.voices-page .voice-image-wrap:hover::after,
.voices-page .voice-image-wrap:focus-visible::after {
    opacity: 1;
}

.voices-page .voice-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s ease;
}

.voices-page .voice-image-wrap:hover .voice-image,
.voices-page .voice-image-wrap:focus-visible .voice-image {
    transform: scale(1.055);
}

.voices-page .play-button {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%) scale(1);
    border: 0;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
    pointer-events: none;
}

.voices-page .voice-card:hover .play-button,
.voices-page .voice-image-wrap:focus-visible .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.voices-page .voice-image-wrap:hover .play-button {
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

.voices-page .play-button::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--jnis-navy);
}

.voices-page .voice-info {
    padding-top: 19px;
    text-align: center;
}

.voices-page .voice-name {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--jnis-navy);
}

.voices-page .voice-role {
    margin-top: 7px;
    font-family: var(--heading);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--jnis-blue);
}

.voices-page .voice-quote {
    margin: 12px auto 0;
    max-width: 235px;
    font-family: var(--sans);
    font-size: .88rem;
    line-height: 1.65;
    color: var(--muted);
}

/* =========================================================
   VIDEO MODAL
========================================================= */

body.voice-modal-open {
    overflow: hidden;
}

.voice-video-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.voice-video-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.voice-video-modal .voice-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 20, .88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.voice-video-modal .voice-modal-content {
    position: relative;
    z-index: 2;
    width: min(1000px, 92vw);
    background: #000;
    box-shadow: 0 30px 100px rgba(0,0,0,.45);
    transform: scale(.94);
    transition: transform .35s ease;
}

.voice-video-modal.active .voice-modal-content {
    transform: scale(1);
}

.voice-video-modal video {
    width: 100%;
    max-height: 82vh;
    display: block;
    background: #000;
}

.voice-video-modal .voice-modal-close {
    position: absolute;
    right: -15px;
    top: -15px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--jnis-navy);
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 25px rgba(0,0,0,.25);
    transition: transform .3s ease;
}

.voice-video-modal .voice-modal-close:hover {
    transform: rotate(90deg);
}

.voice-video-modal .voice-modal-close:focus-visible,
.voices-page .voice-image-wrap:focus-visible {
    outline: 2px solid var(--jnis-blue);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .voices-page .container {
        width: min(100% - 50px, 700px);
    }

    .voices-page .voices-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
    }

    .voices-page .voice-card:nth-child(n) {
        margin-top: 0;
    }

    .voices-page .voice-card:nth-child(even) {
        margin-top: 35px;
    }

    /* Keep the floating artwork proportional on tablets. */
    .voices-page .voice-section--student .voice-bg-art--books { width: 200px; }
    .voices-page .voice-section--student .voice-bg-art--divider { width: 160px; }
    .voices-page .voice-section--teacher .voice-bg-art--books-pen-holder { width: 240px; }
    .voices-page .voice-section--parent .voice-bg-art--parent-left { width: 200px; }
    .voices-page .voice-section--parent .voice-bg-art--parent-right { width: 190px; }
}

@media (max-width: 600px) {
    .voices-page .container {
        width: calc(100% - 34px);
    }

    .voices-page .voice-section {
        padding: 100px 0 110px;
    }

    .voices-page .voice-header {
        margin-bottom: 45px;
    }

    .voices-page .section-intro {
        font-size: .92rem;
    }

    .voices-page .voices-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 12px;
    }

    .voices-page .voice-card:nth-child(even) {
        margin-top: 25px;
    }

    /* Smaller phones: shrink and soften the floating artwork so it stays a
       faint whisper behind the two-column cards. */
    .voices-page .voice-bg-art { opacity: .75; }
    .voices-page .voice-section--student .voice-bg-art--books { width: 150px; }
    .voices-page .voice-section--student .voice-bg-art--divider { width: 120px; }
    .voices-page .voice-section--teacher .voice-bg-art--books-pen-holder { width: 180px; }
    .voices-page .voice-section--parent .voice-bg-art--parent-left { width: 150px; }
    .voices-page .voice-section--parent .voice-bg-art--parent-right { width: 140px; }

    .voices-page .voice-name {
        font-size: 1.15rem;
    }

    .voices-page .voice-role {
        font-size: .62rem;
    }

    .voices-page .voice-quote {
        font-size: .85rem;
    }

    .voices-page .play-button {
        width: 44px;
        height: 44px;
    }

    .voices-page .play-button::after {
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 10px;
    }

    .voice-video-modal {
        padding: 18px;
    }

    .voice-video-modal .voice-modal-content {
        width: 100%;
    }

    .voice-video-modal video {
        max-height: 75vh;
    }

    .voice-video-modal .voice-modal-close {
        right: -4px;
        top: -50px;
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voices-page *,
    .voices-page *::before,
    .voices-page *::after,
    .voice-video-modal,
    .voice-video-modal .voice-modal-content {
        transition: none !important;
        animation: none !important;
    }

    /* No travelling highlight under reduced motion — just the static,
       subtle border, which still brightens on hover/focus. The ring
       pseudo-element stays hidden so no sweep animation ever runs. */
    .voices-page .voice-card::before {
        --sweep: 360deg;
        opacity: 0 !important;
    }
}