/*
 * What is a Mikvah (/what-is-mikvah) — page-specific styles.
 *
 * Built from Figma node 11543:1515 (file CrWxD24hAEtFm5WzpdTxBv).
 *
 * Structure:
 *   .wim-intro     — centered heading block + full-width looping
 *                    video with a "Take a tour" pill overlay (→ #tour)
 *   .wim-tour      — "Tour" section with alternating image/text rows
 *                    (80 px gap desktop, stacked mobile)
 *   .wim-gallery   — slate-green section with wave separator above and
 *                    a 3×3 grid of YouTube video cards (thumbnail →
 *                    autoplay iframe on click, see what-is-mikvah.blade)
 *
 * All selectors live under `.redesign` so legacy pages stay untouched.
 */

/* ── Section 1: Intro + main video ──────────────────────────────── */

/* Override the default .section 112 px top padding — on inner pages
 * with no hero, 112 px between the nav and the tagline reads as a
 * giant empty gap. Keep the full 112 px at the bottom so the rhythm
 * into the Tour section below is preserved. */
.redesign .wim-intro {
    padding-top: 32px;
}

@media (max-width: 768px) {
    .redesign .wim-intro { padding-top: 24px; }
}

.redesign .wim-intro .section-heading--center {
    max-width: 646px;
}

/* The intro media is a button — clicking anywhere on the poster opens
 * the YouTube lightbox. We keep the native button look suppressed so
 * it reads as a visual preview, not a control. */
.redesign .wim-intro__media {
    position: relative;
    width: 100%;
    max-width: 1312px;
    margin: 0 auto;
    /* Aspect ratio comes from --wim-intro-aspect set inline on the
     * button (driven by the PHP $introAspectW/H pair). Defaults to
     * the Figma 1312:738 (~16:9) hero size if the var isn't set. */
    aspect-ratio: var(--wim-intro-aspect, 1312 / 738);
    overflow: hidden;
    background: var(--brand-sea-green-darker);
    padding: 0;
    border: 0;
    cursor: pointer;
    display: block;
    color: inherit;
    font: inherit;
}

.redesign .wim-intro__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Poster zoom on hover is provided by the .media-lift utility applied
 * to .wim-intro__media itself. See media-lift.css. */

/* Subtle dark scrim on hover so the CTA pops more */
.redesign .wim-intro__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0.6;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.redesign .wim-intro__media:hover::after { opacity: 0.9; }

/* "Learn More" chestnut pill, centered over the poster. Visually the
 * primary CTA, but clicking anywhere on the poster opens the modal
 * too, so this is decorative re: behavior. */
.redesign .wim-intro__cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--brand-chestnut);
    color: var(--text-heading);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.03),
        0 12px 16px rgba(0, 0, 0, 0.08);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease;
    z-index: 2;
    pointer-events: none;            /* let the button parent capture the click */
}

.redesign .wim-intro__media:hover .wim-intro__cta {
    transform: translate(-50%, -50%) scale(1.06);
    background: #bb9a82;
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.05),
        0 16px 24px rgba(0, 0, 0, 0.14);
}

.redesign .wim-intro__cta svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .redesign .wim-intro__cta {
        padding: 12px 24px;
        font-size: 16px;
        gap: 8px;
    }
    .redesign .wim-intro__cta svg {
        width: 24px;
        height: 24px;
    }
}

/* ── Video lightbox (shared by intro + gallery) ─────────────────── */

/* Uses the native <dialog> element so we get backdrop, focus-trap,
 * and ESC-to-close for free. We override the default centered box
 * layout with our own 16:9 frame sized to the viewport. */
.redesign .wim-lightbox {
    /* Aspect ratio of the iframe inside. Defaults to 16:9 (gallery
     * videos), JS swaps in a cinematic ratio when opening the intro
     * via dialog.style.setProperty('--wim-aspect-w'/'--wim-aspect-h'). */
    --wim-aspect-w: 16;
    --wim-aspect-h: 9;

    /* Width clamps against THREE constraints so the modal never forces
     * vertical overflow on short laptop viewports:
     *   - visual cap of 1100 px on huge screens
     *   - 94 % of viewport width
     *   - whatever width would make the frame (at its current aspect)
     *     + ~56 px for the close button above + ~48 px breathing room
     *     fit inside 100 dvh
     * The third constraint is what fixes "modal is too tall", and now
     * adapts automatically to whichever aspect the caller requested. */
    width: min(
        1100px,
        94vw,
        calc((100dvh - 104px) * var(--wim-aspect-w) / var(--wim-aspect-h))
    );
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    margin: auto;                    /* native <dialog> centering */
    background: transparent;
    color: var(--neutral-white);
    overflow: visible;

    /* Opening animation: scale + fade in. Respects reduced-motion
     * globally (base.css kills keyframe animations, not this
     * transition). */
    animation: wim-lightbox-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.redesign .wim-lightbox::backdrop {
    background: rgba(32, 52, 60, 0.88);
    animation: wim-backdrop-in 220ms ease-out;
}

@keyframes wim-lightbox-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wim-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.redesign .wim-lightbox__frame {
    position: relative;
    width: 100%;
    /* Aspect pulled from the dialog's custom props (set by JS on open). */
    aspect-ratio: var(--wim-aspect-w) / var(--wim-aspect-h);
    background: #000;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.redesign .wim-lightbox__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.redesign .wim-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--neutral-white);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.redesign .wim-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.06);
}

.redesign .wim-lightbox__close svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .redesign .wim-lightbox { width: 94vw; }
    .redesign .wim-lightbox__close {
        top: -44px;
        width: 36px;
        height: 36px;
    }
}

/* ── Section 2: Tour (alternating rows) ─────────────────────────── */

.redesign .wim-tour {
    display: flex;
    flex-direction: column;
    gap: 80px;         /* Figma gap-[80px] between the intro + first row */
}

.redesign .wim-tour__intro {
    max-width: 768px;
    align-self: center;
    text-align: center;
}

/* Figma node 11659:1599: intro body runs at 18 px (medium body),
 * whereas per-row bodies drop to 16 px (regular body). */
.redesign .wim-tour__intro p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-paragraph);
    margin: 0 0 12px;
}

.redesign .wim-tour__intro p:last-child { margin-bottom: 0; }

.redesign .wim-tour__rows {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.redesign .wim-tour__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Reverse modifier — flips image to the right, text to the left. */
.redesign .wim-tour__row--reverse > .wim-tour__media { order: 2; }
.redesign .wim-tour__row--reverse > .wim-tour__text  { order: 1; }

.redesign .wim-tour__media {
    position: relative;
    width: 100%;
    aspect-ratio: 536 / 464;   /* Figma row image 536×464 */
    overflow: hidden;
}

.redesign .wim-tour__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.redesign .wim-tour__text {
    color: var(--text-paragraph);
    /* 18 px to match `.wim-tour__intro p` — keeps the body copy
     * consistent across the tour intro and each row's narrative
     * (user feedback Apr 2026). */
    font-size: 18px;
    line-height: 1.55;
}

.redesign .wim-tour__text p {
    margin: 0 0 14px;
}

.redesign .wim-tour__text p:last-child { margin-bottom: 0; }

.redesign .wim-tour__text a {
    color: var(--brand-sea-green);
    text-decoration: underline;
}

.redesign .wim-tour__text a:hover {
    color: var(--brand-sea-green-darker);
}

/* Closing notes — three short paragraphs after Row 3 that point to
 * the directory, schedule caveat, and "this isn't halachic guidance"
 * disclaimer. Drops to 14 px on a centered narrow column with a
 * peach hairline above so they read as a quiet footnote rather than
 * fighting the main 18 px tour copy. */
.redesign .wim-tour__notes {
    max-width: 720px;
    margin: 16px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--brand-border-peach);
    text-align: center;
    color: var(--text-paragraph);
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
}

.redesign .wim-tour__notes p {
    margin: 0 0 10px;
}

.redesign .wim-tour__notes p:last-child {
    margin-bottom: 0;
    font-style: italic;
}

.redesign .wim-tour__notes a {
    color: var(--brand-sea-green-darker);
    text-decoration: underline;
    font-weight: 500;
}

.redesign .wim-tour__notes a:hover {
    color: var(--brand-sea-green);
}

@media (max-width: 900px) {
    .redesign .wim-tour { gap: 64px; }
    .redesign .wim-tour__rows { gap: 48px; }
    .redesign .wim-tour__row {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* On mobile all rows stack image-on-top, text-below — override the
     * reverse-order flip so content reads naturally. */
    .redesign .wim-tour__row--reverse > .wim-tour__media { order: 1; }
    .redesign .wim-tour__row--reverse > .wim-tour__text  { order: 2; }
    .redesign .wim-tour__media { aspect-ratio: 16 / 11; }
}

/* ── Section 3: Video Gallery (slate bg) ────────────────────────── */

/* Wave divider sitting flush on top of the slate section. Same pattern
 * as the homepage's app-download section — transparent top fading into
 * slate at the bottom, so we just render the PNG at natural aspect
 * ratio with no extra background. */
.redesign .wim-gallery-divider {
    position: relative;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    margin-bottom: -1px;          /* kiss the slate section below */
    background: transparent;
}

.redesign .wim-gallery-divider img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 170px;
    object-fit: cover;
    object-position: center bottom;
}

@media (max-width: 768px) {
    .redesign .wim-gallery-divider img { max-height: 80px; }
}

.redesign .wim-gallery {
    background: var(--brand-slate);
    color: var(--neutral-white);
    padding-block: 112px;
    overflow: hidden;
}

.redesign .wim-gallery__heading .section-heading__title,
.redesign .wim-gallery__heading .section-heading__sub {
    color: var(--neutral-white);
}

.redesign .wim-gallery__heading .section-heading__sub {
    color: var(--text-paragraph-white);
    opacity: 0.92;
}

.redesign .wim-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;                 /* 48 px row gap, 32 px col gap per Figma */
    margin-top: 80px;
}

/* Each card: button (thumbnail on top, title below). Clicking swaps
 * the thumbnail for a YouTube iframe (handled in page script). */
.redesign .wim-gallery__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: center;             /* titles centered under thumbnails */
    cursor: pointer;
    text-decoration: none;
}

.redesign .wim-gallery__card-media {
    width: 100%;
    aspect-ratio: 416 / 226;         /* Figma card image ratio */
    background: var(--brand-sea-green-darker);
    /* .media-lift (in HTML) supplies position/overflow + the hover
     * shadow + image-zoom transitions. See media-lift.css. */
}

.redesign .wim-gallery__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.redesign .wim-gallery__card-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Centered play-button overlay on the thumbnail */
.redesign .wim-gallery__card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-sea-green-darker);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    transition: transform 180ms ease, background-color 180ms ease;
    pointer-events: none;              /* the whole card is the click target */
}

.redesign .wim-gallery__card-play svg {
    width: 24px;
    height: 24px;
    margin-left: 2px;
}

/* Hover shadow + image zoom on .wim-gallery__card-media come from
 * .media-lift (see media-lift.css). Only the play-button pop stays
 * local to this component. */
.redesign .wim-gallery__card:hover .wim-gallery__card-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--neutral-white);
}

/* Hide the play button & zoom once the iframe has replaced the thumbnail */
.redesign .wim-gallery__card.is-playing .wim-gallery__card-play,
.redesign .wim-gallery__card.is-playing img { display: none; }

.redesign .wim-gallery__card-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: var(--neutral-white);
    margin: 0;
}

@media (max-width: 900px) {
    .redesign .wim-gallery { padding-block: 80px; }
    .redesign .wim-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
        margin-top: 64px;
    }
    .redesign .wim-gallery__card-title { font-size: 20px; }
}

@media (max-width: 600px) {
    .redesign .wim-gallery { padding-block: 64px; }
    .redesign .wim-gallery__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 48px;
    }
}