/* ==========================================================================
   Megunit (October 7 Stories)
   Builds on Truth by the Hour: same rhythm, tokens, and video frame.
   ========================================================================== */

@import url('../story-chapters.css');
@import url('../stories-nav.css');

/* --------------------------------------------------------------------------
   Documentary hero — Megunit panoramic collage
   -------------------------------------------------------------------------- */

.megunit-doc-hero .story-doc-hero__bg {
    object-position: 40% center;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .megunit-doc-hero .story-doc-hero__bg {
        object-position: 42% center;
    }

    .megunit-doc-hero .story-doc-hero__inner {
        padding-inline: 2rem;
    }
}

@media (max-width: 768px) {
    body.megunit-story-page .megunit-doc-hero .story-doc-hero__bg {
        object-fit: cover;
        /* Keep the doorway wreath, candles and flowers; crop the right-hand wall first */
        object-position: 42% 50%;
    }
}

@media (max-width: 767px) {
    .megunit-doc-hero .story-doc-hero__inner {
        padding-inline: clamp(1.25rem, 5vw, 1.5rem);
    }
}

.megunit-doc-hero .story-doc-hero__title,
.megunit-doc-hero .megunit-hero-title {
    text-transform: none;
    font-weight: 500;
    letter-spacing: -0.035em;
    max-width: min(100%, 20rem);
    margin-inline: auto;
    white-space: normal;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .megunit-doc-hero .story-doc-hero__title,
    .megunit-doc-hero .megunit-hero-title {
        max-width: min(100%, 26rem);
    }
}

@media (min-width: 1024px) {
    .megunit-doc-hero .story-doc-hero__title,
    .megunit-doc-hero .megunit-hero-title {
        max-width: none;
        white-space: nowrap;
        text-wrap: nowrap;
    }
}

body.megunit-story-page.has-immersive-hero .site-header .site-nav__link,
body.megunit-story-page.has-immersive-hero .site-header .site-action {
    color: rgba(244, 240, 227, 0.98);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
}

body.megunit-story-page.has-immersive-hero .site-header .site-action--donate {
    border-color: rgba(244, 240, 227, 0.52);
}

body.megunit-story-page .story-chapter-section--after-hero.megunit-lede-section {
    padding-top: clamp(5.5rem, 9vw, 8.5rem);
}

@media (max-width: 768px) {
    body.megunit-story-page .story-chapter-section--after-hero.megunit-lede-section {
        padding-top: max(clamp(5.5rem, 14vw, 6.5rem), calc(var(--header-height) + 1.25rem));
    }
}

/* Shelter 1 / Blue Bird — clean white full-bleed section */
body.megunit-story-page .megunit-shelter-section--white {
    background: #FFFFFF;
}

body.megunit-story-page .megunit-shelter-section--white::before,
body.megunit-story-page .megunit-shelter-section--white::after {
    content: none;
    display: none;
}

body.megunit-story-page .megunit-shelter-section--white .story-video::before {
    content: none;
    display: none;
    background: none;
    filter: none;
    animation: none;
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Spacing and typography tokens (Megunit page only)
   -------------------------------------------------------------------------- */

body.megunit-story-page {
    --meg-space-2xs: clamp(0.5rem, 0.9vw, 0.65rem);
    --meg-space-xs: clamp(0.65rem, 1.2vw, 0.85rem);
    --meg-space-sm: clamp(1rem, 2vw, 1.35rem);
    --meg-space-md: clamp(1.35rem, 2.8vw, 1.85rem);
    --meg-space-lg: clamp(2rem, 4vw, 2.75rem);
    --meg-space-xl: clamp(2.5rem, 5vw, 3.5rem);
    --meg-space-2xl: clamp(3.5rem, 7vw, 5.5rem);
    --meg-prose-max: 38rem;
    --meg-body-size: clamp(0.98rem, 0.42vw + 0.92rem, 1.1rem);
    --meg-body-line: 1.78;
    --meg-name-size: clamp(1rem, 0.35vw + 0.95rem, 1.12rem);
    --meg-name-line: 1.65;
}

body.megunit-story-page .story-chapter-section__copy {
    max-width: min(42rem, 100%);
}

body.megunit-story-page .story-chapter-section__copy h1,
body.megunit-story-page .story-chapter-section__copy h2:not(.megunit-shelter-heading) {
    max-width: min(100%, 17rem);
    line-height: 1.06;
}

/* Opening text + portrait video (intro after hero) */
.megunit-lede {
    max-width: min(42rem, 100%);
    margin-inline: auto;
}

.megunit-lede--with-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    max-width: var(--story-max);
}

@media (min-width: 901px) {
    .megunit-lede--with-video {
        align-items: center;
    }
}

.megunit-lede__prose {
    margin-top: 0;
    text-align: left;
}

.megunit-lede--with-video .megunit-lede__prose {
    max-width: var(--meg-prose-max);
}

.megunit-lede__prose p {
    margin: 0;
    max-width: var(--meg-prose-max);
    font-size: var(--meg-body-size);
    line-height: var(--meg-body-line);
    color: rgba(44, 44, 44, 0.74);
}

.megunit-lede__prose p + p {
    margin-top: var(--meg-space-sm);
}

.megunit-lede__video {
    width: clamp(280px, 28vw, 340px);
    max-width: 340px;
    justify-self: end;
}

.megunit-lede__video::before {
    content: none;
    display: none;
}

.megunit-lede__video .story-video__frame {
    transform: none;
    box-shadow:
        0 24px 55px rgba(44, 44, 44, 0.18),
        0 8px 20px rgba(44, 44, 44, 0.12);
    transition: box-shadow 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .megunit-lede__video:hover .story-video__frame,
    .megunit-lede__video:focus-within .story-video__frame {
        transform: none;
        box-shadow:
            0 28px 60px rgba(44, 44, 44, 0.2),
            0 10px 24px rgba(44, 44, 44, 0.14);
    }
}

@media (max-width: 900px) {
    .megunit-lede--with-video {
        grid-template-columns: 1fr;
        gap: var(--meg-space-xl);
    }

    .megunit-lede__video {
        width: min(100%, 340px);
        max-width: 340px;
        justify-self: center;
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .megunit-lede-section .story-container {
        padding-inline: 2rem;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .megunit-lede-section .story-container {
        width: 100%;
        max-width: 100%;
        padding-inline: clamp(1.25rem, 5vw, 1.5rem);
        box-sizing: border-box;
    }
}

/* Eyebrow / chapter label to title */
body.megunit-story-page .story-chapter {
    margin-bottom: var(--meg-space-xs);
}

/* Per-shelter titles (longer lines than punchy chapter h2s) */
body.megunit-story-page h2.megunit-shelter-heading {
    max-width: min(100%, 38rem);
    margin: 0 0 var(--meg-space-sm);
    font-size: clamp(1.28rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

body.megunit-story-page .story-chapter-section--light h2.megunit-shelter-heading {
    color: #2C2C2C;
}

body.megunit-story-page .story-chapter-section--dark h2.megunit-shelter-heading {
    color: #F4F0E3;
}

@media (max-width: 640px) {
    body.megunit-story-page .story-chapter-section__copy h2.megunit-shelter-heading {
        font-size: clamp(1.15rem, 5.2vw, 1.52rem);
    }
}

/* Narrative body copy — readable measure (~55–70 characters) */
body.megunit-story-page .story-chapter-section__copy p:not(.story-chapter):not(.story-eyebrow):not(.story-timestamp):not(.megunit-pull):not(.megunit-note) {
    max-width: var(--meg-prose-max);
    margin-top: var(--meg-space-md);
    font-size: var(--meg-body-size);
    line-height: var(--meg-body-line);
}

body.megunit-story-page .story-chapter-section__copy--story p:not(.story-chapter):not(.story-eyebrow):not(.story-timestamp) {
    max-width: var(--meg-prose-max);
}

body.megunit-story-page .story-chapter-section__copy h2.megunit-shelter-heading + p,
body.megunit-story-page .story-chapter-section__copy h2.megunit-shelter-heading + blockquote {
    margin-top: var(--meg-space-sm);
}

body.megunit-story-page .story-chapter-section__copy blockquote + p {
    margin-top: var(--meg-space-md);
}

body.megunit-story-page .story-chapter-section__copy blockquote {
    margin-top: var(--meg-space-md);
    max-width: var(--meg-prose-max);
}

body.megunit-story-page .story-chapter-section__copy blockquote p {
    margin: 0;
    max-width: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Memorial name lists (legacy in-copy; memorial-roll uses --memorial modifier) */
.megunit-names {
    list-style: none;
    margin: var(--meg-space-sm) 0 0;
    padding: 0;
    font-size: var(--meg-name-size);
    line-height: var(--meg-name-line);
}

.megunit-names li {
    text-wrap: pretty;
}

.megunit-story-page .story-chapter-section--light .megunit-names {
    color: rgba(44, 44, 44, 0.82);
}

.megunit-story-page .story-chapter-section--dark .megunit-names {
    color: rgba(244, 240, 227, 0.84);
}

@media (min-width: 640px) {
    .megunit-names:not(.megunit-names--memorial):not(.megunit-names--outside) {
        columns: 2;
        column-gap: clamp(1.5rem, 4vw, 2.5rem);
    }

    .megunit-names:not(.megunit-names--memorial):not(.megunit-names--outside) li {
        break-inside: avoid;
    }
}

@media (max-width: 479px) {
    .megunit-names:not(.megunit-names--outside) {
        columns: 1;
    }
}

.megunit-names:not(.megunit-names--outside) li + li {
    margin-top: 0.45rem;
}

.megunit-note {
    margin-top: var(--meg-space-sm);
    font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.05rem);
    line-height: 1.72;
}

body.megunit-story-page .story-chapter-section--light .megunit-note {
    color: rgba(44, 44, 44, 0.72);
}

body.megunit-story-page .story-chapter-section--dark .megunit-note {
    color: rgba(244, 240, 227, 0.78);
}

/* Refuge interlude (text-only chapter) */
body.megunit-story-page .story-chapter-section--dark-alt .story-chapter-section__copy:only-child {
    max-width: min(42rem, 100%);
}

.megunit-pull {
    margin: 0 0 var(--meg-space-2xs);
    font-size: clamp(1.05rem, 0.5vw + 0.98rem, 1.25rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

body.megunit-story-page .story-chapter-section__copy h2:not(.megunit-shelter-heading) + .megunit-pull,
body.megunit-story-page .story-chapter-section__copy .megunit-pull + h2:not(.megunit-shelter-heading) {
    margin-top: 0;
}

body.megunit-story-page .story-chapter-section__copy h2:not(.megunit-shelter-heading) + p:not(.story-chapter):not(.megunit-pull):not(.megunit-note) {
    margin-top: var(--meg-space-md);
}

body.megunit-story-page .story-chapter-section__copy .megunit-pull + p:not(.megunit-note) {
    margin-top: var(--meg-space-2xs);
}

body.megunit-story-page .story-chapter-section__copy p.megunit-note {
    margin-top: var(--meg-space-lg);
}

body.megunit-story-page .story-chapter-section--light .megunit-pull {
    color: rgba(44, 44, 44, 0.78);
}

body.megunit-story-page .story-chapter-section--dark .megunit-pull {
    color: rgba(244, 240, 227, 0.78);
}

/* --------------------------------------------------------------------------
   Shelter chapters: story + video, then full-width memorial roll
   -------------------------------------------------------------------------- */

.story-chapter-section--memorial-split .story-chapter-section__grid--story-video {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 380px);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
}

.story-chapter-section--memorial-split .story-chapter-section__copy--story {
    max-width: min(42rem, 100%);
}

.story-chapter-section--memorial-split .story-chapter-section__video {
    align-self: start;
}

@media (min-width: 901px) {
    .story-chapter-section--memorial-split.story-chapter-section--reverse .story-chapter-section__grid--story-video {
        grid-template-columns: minmax(260px, 380px) minmax(0, 1.15fr);
    }
}

@media (min-width: 901px) {
    .story-chapter-section--memorial-split:not(.story-chapter-section--reverse) .story-chapter-section__video {
        justify-self: end;
    }

    .story-chapter-section--memorial-split.story-chapter-section--reverse .story-chapter-section__video {
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .story-chapter-section--memorial-split .story-chapter-section__grid--story-video {
        grid-template-columns: 1fr;
    }

    .story-chapter-section--memorial-split .story-chapter-section__video {
        width: min(78vw, 320px);
        margin: var(--meg-space-xl) auto 0;
    }

    .story-chapter-section--memorial-split.story-chapter-section--reverse .story-chapter-section__copy,
    .story-chapter-section--memorial-split.story-chapter-section--reverse .story-chapter-section__video {
        order: initial;
    }
}

/* Memorial roll — separated from narrative by spacing only (no panel box) */
.megunit-memorial-roll {
    margin-top: var(--meg-space-2xl);
    padding: 0;
    border: none;
    background: transparent;
}

.megunit-memorial-heading {
    margin: 0 0 var(--meg-space-sm);
    max-width: min(48rem, 100%);
    font-size: clamp(0.98rem, 0.35vw + 0.92rem, 1.12rem);
    font-weight: 600;
    letter-spacing: 0.045em;
    line-height: 1.5;
    text-transform: uppercase;
    text-wrap: pretty;
}

.story-chapter-section--light .megunit-memorial-heading {
    color: rgba(44, 44, 44, 0.82);
}

.story-chapter-section--dark .megunit-memorial-heading {
    color: rgba(244, 240, 227, 0.86);
}

.megunit-memorial-heading--secondary {
    margin-top: var(--meg-space-xl);
}

.megunit-names--memorial {
    margin-top: 0;
    max-width: min(52rem, 100%);
    font-size: var(--meg-name-size);
    line-height: var(--meg-name-line);
}

.megunit-names--memorial:not(.megunit-names--outside) li + li {
    margin-top: 0.45rem;
}

@media (min-width: 640px) {
    .megunit-names--memorial:not(.megunit-names--outside) {
        columns: 2;
        column-gap: clamp(2rem, 5vw, 3.5rem);
    }

    .megunit-names--memorial:not(.megunit-names--outside) li {
        break-inside: avoid;
    }
}

@media (max-width: 479px) {
    .megunit-names--memorial:not(.megunit-names--outside) {
        columns: 1;
    }
}

.megunit-names--outside {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: baseline;
    justify-content: start;
    gap: 0 clamp(1.75rem, 4vw, 3rem);
    width: max-content;
    max-width: 100%;
    columns: unset;
}

.megunit-names--outside li {
    display: block;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .megunit-names--outside {
        grid-template-columns: 1fr;
        gap: 0.45rem 0;
        width: auto;
    }

    .megunit-names--outside li {
        white-space: normal;
    }
}

/* Captivity / kidnapping updates — spacing only, no divider box */
.megunit-note--captivity,
.megunit-note--after-list {
    margin-top: var(--meg-space-lg);
    padding-top: 0;
    max-width: min(42rem, 100%);
    border: none;
}