/* ==========================================================================
   Lives Remembered — cinematic category hero (prototype: Nova)
   Shared `.lr-hero` system; activate per page via modifier + stylesheet.
   ========================================================================== */

.lr-hero {
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: 100%;
    min-height: clamp(28rem, 75svh, 78svh);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #1a1917;
    color: var(--color-warm-light);
}

.lr-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.lr-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.lr-hero__bg {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: var(--hero-position-desktop, center center);
    display: block;
    filter: none;
    opacity: 1;
}

.lr-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: visible;
    padding:
        clamp(1.5rem, 4vw, 2.75rem)
        0
        clamp(2.5rem, 6vw, 4.25rem);
}

.lr-hero__inner.container {
    max-width: var(--container-max, 75rem);
}

.lr-hero__content {
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: min(100%, 38.75rem);
    max-width: 38.75rem; /* 620px — text block width */
}

/*
 * Organic readability wash — blurred radial only (no box, no backdrop-filter).
 * Strongest behind headline/body; falls off toward eyebrow, quote, and edges.
 */
.lr-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -48px;
    right: -100px;
    bottom: -52px;
    left: -44px;
    background: radial-gradient(
        ellipse 78% 72% at 38% 46%,
        rgba(12, 12, 12, 0.78) 0%,
        rgba(12, 12, 12, 0.66) 36%,
        rgba(12, 12, 12, 0.4) 58%,
        rgba(12, 12, 12, 0.16) 76%,
        rgba(12, 12, 12, 0) 100%
    );
    filter: blur(20px);
    transform: scale(1.04);
    transform-origin: 38% 46%;
}

.lr-hero__title,
.lr-hero__headline,
.lr-hero__body p,
.lr-hero__quote p,
.lr-hero__eyebrow {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(0, 0, 0, 0.45);
}

.lr-hero__title {
    margin: 0 0 var(--category-hero-gap-name-headline);
    font-family: var(--font-heading), "Figtree", sans-serif;
    font-size: var(--category-hero-name-size);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
}

.lr-hero__headline {
    margin: 0 0 var(--category-hero-gap-headline-body);
    font-family: var(--font-heading), "Figtree", sans-serif;
    font-size: var(--category-hero-headline-size);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
    color: #fefefe;
}

.lr-hero__body {
    margin: 0 0 var(--category-hero-gap-body-quote);
    max-width: 34rem;
    font-size: var(--category-hero-body-size);
    font-weight: 400;
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.94);
    text-wrap: pretty;
}

.lr-hero__body p {
    margin: 0;
}

.lr-hero__body p + p {
    margin-top: 1rem;
}

.lr-hero__quote {
    position: relative;
    margin: 0;
    padding: 0 0 0 clamp(1rem, 2.2vw, 1.35rem);
    max-width: 32rem;
    border: none;
}

.lr-hero__quote::before {
    content: "";
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(212, 196, 138, 0.95);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.lr-hero__quote p {
    margin: 0;
    font-size: var(--category-hero-quote-size);
    font-weight: 400;
    font-style: italic;
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
}

.lr-hero__eyebrow {
    margin: 0 0 var(--category-hero-gap-label-name);
    font-size: var(--category-hero-eyebrow-size);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(212, 196, 138, 0.95);
}

/* 8:3 memorial artwork (3840×1440); container matches image aspect so nothing is cropped */
.lr-hero--nova,
.lr-hero--8x3 {
    min-height: 0;
    height: auto;
    aspect-ratio: 8 / 3;
    overflow: visible;
}

.lr-hero--nova {
    --hero-position-desktop: 50% 50%;
    --hero-position-tablet: 50% 50%;
    --hero-position-mobile: 50% 16%;
}

.lr-hero--8x3 {
    --hero-position-desktop: var(--lr-hero-position-desktop, 50% 50%);
    --hero-position-tablet: var(--lr-hero-position-tablet, var(--lr-hero-position-desktop, 50% 50%));
    --hero-position-mobile: var(--lr-hero-position-mobile, var(--lr-hero-position-desktop, 50% 50%));
}

.lr-hero--nova .lr-hero__media,
.lr-hero--8x3 .lr-hero__media {
    border-radius: 0;
}

.lr-hero--nova .lr-hero__bg {
    object-position: center center;
}

.lr-hero--8x3 .lr-hero__bg {
    object-position: var(--lr-hero-position-desktop, 50% 50%);
}

.lr-hero--nova + .category-grid-section,
.lr-hero--8x3 + .category-grid-section,
.lr-hero--8x3 + .category-pending {
    padding-top: clamp(2rem, 5vw, 3rem);
}

/* Page-specific focal tweaks (faces / composition) */
.lr-hero--fallen-soldiers {
    --lr-hero-position-desktop: 24% 36%;
    --hero-position-mobile: 50% 10%;
}
.lr-hero--hostages-murdered {
    --lr-hero-position-desktop: 50% 44%;
    --hero-position-mobile: 50% 14%;
}
.lr-hero--kibbutz-beeri {
    --lr-hero-position-desktop: 56% 50%;
    --hero-position-mobile: 50% 18%;
}
.lr-hero--kibbutz-kfar-aza {
    --lr-hero-position-desktop: 26% 54%;
    --hero-position-mobile: 50% 22%;
}
.lr-hero--netiv-hasara {
    --lr-hero-position-desktop: 50% 48%;
    --hero-position-mobile: 50% 20%;
}
.lr-hero--kibbutz-holit {
    --lr-hero-position-desktop: 50% 50%;
    --hero-position-mobile: 50% 24%;
}
.lr-hero--nahal-oz {
    --lr-hero-position-desktop: 50% 50%;
    --hero-position-mobile: 50% 18%;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .lr-hero:not(.lr-hero--nova):not(.lr-hero--8x3) {
        min-height: clamp(26rem, 70svh, 74svh);
    }

    .lr-hero__bg {
        object-position: var(--hero-position-tablet, var(--hero-position-desktop));
    }

    /* Narrower oval — less reach into the collage */
    .lr-hero__content::before {
        top: -44px;
        right: -68px;
        bottom: -48px;
        left: -40px;
        background: radial-gradient(
            ellipse 74% 68% at 36% 46%,
            rgba(12, 12, 12, 0.76) 0%,
            rgba(12, 12, 12, 0.62) 34%,
            rgba(12, 12, 12, 0.36) 56%,
            rgba(12, 12, 12, 0.12) 74%,
            rgba(12, 12, 12, 0) 100%
        );
        filter: blur(18px);
        transform: scale(1.03);
        transform-origin: 36% 46%;
    }
}

@media (max-width: 767px) {
    /*
     * Mobile: body.no-hero offsets main below the fixed header.
     * Anchor the full content block in the lower half of the hero —
     * more image above the copy than below — without changing hero height.
     */
    .lr-hero {
        --lr-hero-mobile-content-pad-bottom: clamp(2.25rem, 6.5vw, 3.25rem);
        height: auto;
        min-height: clamp(28rem, 85svh, 40rem);
        margin-top: 0;
        justify-content: flex-end;
        align-items: stretch;
        overflow-x: clip;
        overflow-y: visible;
        box-sizing: border-box;
        max-width: 100%;
    }

    .lr-hero--nova,
    .lr-hero--8x3 {
        aspect-ratio: auto;
        min-height: clamp(32rem, 92svh, 44rem);
    }

    .lr-hero:not(.lr-hero--nova):not(.lr-hero--8x3) {
        min-height: clamp(22rem, 58svh, 65svh);
    }

    .lr-hero__inner {
        position: relative;
        top: auto;
        bottom: auto;
        flex: 0 0 auto;
        width: 100%;
        margin: 0;
        margin-top: auto;
        padding-top: clamp(3rem, 16vh, 7rem);
        padding-bottom: var(--lr-hero-mobile-content-pad-bottom);
        box-sizing: border-box;
    }

    .lr-hero__inner.container {
        padding-inline: var(--container-px);
    }

    .lr-hero__content {
        position: relative;
        top: auto;
        bottom: auto;
        transform: none;
        margin: 0;
        width: 100%;
        max-width: none;
    }

    .lr-hero__bg {
        object-position: var(--hero-position-mobile, var(--hero-position-desktop));
    }

    .lr-hero--8x3 .lr-hero__bg {
        object-position: var(--hero-position-mobile, var(--lr-hero-position-desktop, 50% 50%));
    }

    .lr-hero__content::before {
        top: -36px;
        right: -36px;
        bottom: -40px;
        left: -32px;
        background: radial-gradient(
            ellipse 88% 78% at 42% 54%,
            rgba(12, 12, 12, 0.74) 0%,
            rgba(12, 12, 12, 0.58) 32%,
            rgba(12, 12, 12, 0.32) 54%,
            rgba(12, 12, 12, 0.1) 72%,
            rgba(12, 12, 12, 0) 100%
        );
        filter: blur(16px);
        transform: scale(1.02);
        transform-origin: 42% 54%;
    }

    .lr-hero__headline {
        font-size: clamp(1.85rem, 6vw + 0.4rem, 2.65rem);
    }

    .lr-hero--nova + .category-grid-section,
    .lr-hero--8x3 + .category-grid-section,
    .lr-hero--8x3 + .category-pending {
        padding-top: clamp(1.75rem, 5vw, 2.5rem);
    }
}