/*
 * Hero — Figma homepage hero frame.
 * Dark water-tile photo background with soft sea-green overlay.
 * Large IvyJournal display headline (56px), italic accent phrase,
 * Manrope sub, pair of pill CTAs.
 *
 * Background image: /images/redesign/hero-water.jpg — drop the
 * exported Figma asset here. Until then, a sea-green gradient serves
 * as a graceful fallback.
 */

.redesign .hero {
    position: relative;
    isolation: isolate;
    height: 994px;            /* fixed height from Figma (main image frame) */
    max-height: 100vh;        /* but never taller than the viewport on short windows,
                               * so the hero's own sticky bar stays on-screen and the
                               * content below the hero isn't pushed far below the fold */
    padding: 0 0 32px;        /* only bottom padding; nav overlay handles the top */
    color: var(--neutral-white);
    overflow: hidden;
    background: linear-gradient(135deg, #1e4a66 0%, #0f2a44 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;  /* push sticky bar to bottom; content centers via flex */
}

@media (max-width: 1280px) {
    .redesign .hero { height: 900px; }
}

@media (max-width: 768px) {
    .redesign .hero {
        /* Hero collapses to content-driven height so the sticky bar's
         * actions tuck under the subtext instead of floating at the
         * bottom of a fixed 900 px box. Bottom padding gives the video
         * background some space to breathe below the action buttons —
         * without it the pill sits flush against the next section. */
        height: auto;
        padding: 0 0 64px;
        justify-content: flex-start;
    }
}

/* Poster image layer — shown until the video loads, and as a fallback
 * on browsers / connections where the video won't play. */
.redesign .hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

/* Background video — autoplayed, muted, loops silently. */
.redesign .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

/* Scrim — Figma uses a thin offwhite-seagreen tint (rgba(194,210,216,0.16))
 * over the nav area plus a subtle darken at the bottom for sticky-bar
 * legibility. We keep the bottom darken and a very light top wash so the
 * white nav links stay readable without muddying the water photo. */
.redesign .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(8, 30, 58, 0.55) 0%,
            rgba(8, 30, 58, 0.18) 28%,
            rgba(8, 30, 58, 0)    55%,
            rgba(8, 30, 58, 0.40) 100%);
    z-index: -1;
    pointer-events: none;
}

.redesign .hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 32px;
    width: 646px;       /* Figma hero content width */
    max-width: 100%;
    flex: 1 0 auto;     /* grows to fill the space above the sticky bar */
    padding-inline: 20px;
}

.redesign .hero__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 56px;
    line-height: 1.2;
    color: var(--neutral-white);
    margin: 0;
}

.redesign .hero__title em {
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);   /* Figma exact: white at 60% */
}

.redesign .hero__sub {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--neutral-white);
    margin: 0;
    padding-inline: 64px;
    text-align: center;
}

/* Mobile vs desktop line-break control for the hero title.
 * Desktop (>=769px) wrap per Figma 1920:
 *     Trusted guidance for
 *     every stage of the
 *     Mikvah journey.
 * Mobile (<=768px) wrap per user feedback — two words on line 1:
 *     Trusted guidance
 *     for every stage of the
 *     Mikvah journey.
 * The .hero__br--mobile / .hero__br--desktop classes toggle which <br>
 * fires at each size; the unclassed third <br> runs in both. */
.redesign .hero__br--mobile  { display: none; }
.redesign .hero__br--desktop { display: inline; }

@media (max-width: 768px) {
    .redesign .hero__inner {
        width: 100%;
        gap: 24px;
        padding: 120px 20px 0;     /* 80 nav + 40 breathing above title */
        flex: 0 0 auto;            /* don't grow — let the sticky-bar flow below */
    }
    .redesign .hero__title {
        font-size: 34px;           /* Figma mobile exact */
        line-height: 1.2;
    }
    .redesign .hero__br--mobile  { display: inline; }
    .redesign .hero__br--desktop { display: none; }
    .redesign .hero__sub { font-size: 16px; padding-inline: 0; }
}

/* Wave separator — Figma node 11372:34796, 32px tall, full-width, sitting
 * right below the nav row as a subtle "water surface horizon".
 *
 * Treatment: rather than a flat semi-transparent band sitting on top of
 * the photo (which reads as a stripe regardless of opacity), we use
 * mix-blend-mode: soft-light so the wave brightens/darkens the underlying
 * pixels organically — like a glint on the water, not a sticker.
 * A horizontal gradient mask fades the wave at the edges so it doesn't
 * cut hard against the viewport sides, and a 0.5px blur softens the
 * SVG's pixel edges so the wave reads as light, not geometry. */
.redesign .hero__wave {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    height: 32px;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    filter: blur(0.5px);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%);
}

.redesign .hero__wave img {
    display: block;
    width: 100%;
    height: 100%;
}

/* The tighter `top: 64px` value only applies at phone widths where the
 * logo (and therefore the nav row) is shorter — 44 px logo + 32 px row
 * padding = 76 px nav. Above 640 px the logo stays at 56 px and the
 * nav reaches 88 px, so we keep the desktop top: 80 px which leaves
 * the wave a clean 8 px overlap with the bottom of the nav instead of
 * cutting through the logo's `g` descender. */
/* Hide the wave at the hamburger breakpoint (≤640 px) — the phone nav
 * row is dense (logo + Donate + hamburger) and the wave was crowding
 * the wordmark's `g` descender. The hero looks cleaner without it. */
@media (max-width: 640px) {
    .redesign .hero__wave {
        display: none;
    }
}

.redesign .hero__eyebrow {
    color: var(--brand-offwhite-seagreen);
}

/* Figma has no dot-grid ornament on the hero — the Main image frame is
 * just the water photo + subtle offwhite-seagreen wash. The old radial
 * dot grid was added as a placeholder and is now removed. */