/* ==========================================================================
   The Ambulance — cinematic longform memorial documentary
   One continuous narrative; no card grids.
   ========================================================================== */

:root {
    --amb-bg-warm: #F4F0E3;
    --amb-bg-soft: var(--color-warm-light);
    --amb-ink: #2C2C2C;
    --amb-ink-muted: rgba(44, 44, 44, 0.74);
    --amb-ink-faint: rgba(44, 44, 44, 0.52);
    --amb-cream: #F4F0E3;
    --amb-accent: var(--color-accent-on-light);
    --amb-prose: min(38rem, 100%);
    --amb-gutter: min(6vw, 3.5rem);
    --amb-max: min(90vw, 1160px);
}

body.no-hero.story-page.ambulance-doc-page {
    background: var(--amb-bg-warm);
    color: var(--amb-ink);
}

/* --------------------------------------------------------------------------
   Intro — dark cinematic
   -------------------------------------------------------------------------- */

.ambulance-doc__intro {
    position: relative;
    padding:
        calc(var(--header-height) + clamp(3.5rem, 10vw, 6.25rem))
        var(--amb-gutter)
        clamp(4rem, 11vw, 6.5rem);
    background: #2C2C2C;
    color: var(--amb-cream);
}

.ambulance-doc__intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 12% 18%, rgba(189, 173, 123, 0.07), transparent 52%),
        radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.03), transparent 35%);
    pointer-events: none;
}

.ambulance-doc__intro-inner {
    position: relative;
    z-index: 1;
    max-width: var(--amb-max);
    margin-inline: auto;
}

.ambulance-doc__lede {
    margin: 0 0 clamp(1.15rem, 2.8vw, 1.65rem);
    max-width: var(--amb-prose);
    color: rgba(189, 173, 123, 0.92);
    font-size: clamp(0.74rem, 0.2vw + 0.68rem, 0.84rem);
    font-weight: 650;
    letter-spacing: 0.18em;
    line-height: 1.62;
}

.ambulance-doc__intro h1 {
    margin: 0 0 clamp(1.35rem, 3.5vw, 2rem);
    max-width: var(--amb-prose);
    color: var(--amb-cream);
    font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-wrap: balance;
}

.ambulance-doc__intro-body > p {
    margin: 0;
    max-width: var(--amb-prose);
    color: rgba(244, 240, 227, 0.78);
    font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.12rem);
    font-weight: 400;
    line-height: 1.82;
}

.ambulance-doc__intro-body > p + p {
    margin-top: 1rem;
}

.ambulance-doc__intro-coda {
    margin: clamp(1.35rem, 3vw, 1.85rem) 0 0;
    max-width: var(--amb-prose);
    color: rgba(244, 240, 227, 0.88);
    font-size: clamp(1.02rem, 0.32vw + 0.94rem, 1.18rem);
    font-weight: 500;
    line-height: 1.72;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Film — memorial installation (split editorial + portrait cinematic)
   -------------------------------------------------------------------------- */

.ambulance-doc__film {
    margin: 0;
    position: relative;
    overflow: hidden;
    padding:
        clamp(3.75rem, 10vw, 6.75rem)
        var(--amb-gutter)
        clamp(4rem, 11vw, 7rem);
    background: var(--color-primary-dark);
    color: var(--amb-cream);
}

.ambulance-doc__film-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1280px);
    margin-inline: auto;
}

.ambulance-doc__film-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 70% at 18% 72%, rgba(189, 173, 123, 0.07) 0%, transparent 52%),
        radial-gradient(circle at 88% 18%, rgba(244, 240, 227, 0.05) 0%, transparent 38%),
        linear-gradient(165deg, #343434 0%, var(--color-primary-dark) 52%, #2a2826 100%);
    filter: saturate(0.92);
}

.ambulance-doc__film-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.ambulance-doc__film-inner {
    position: relative;
    z-index: 2;
}

.ambulance-doc__film-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.95fr);
    gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.ambulance-doc__film-context {
    position: relative;
    z-index: 2;
    max-width: 22rem;
    padding-right: clamp(0.5rem, 3vw, 2rem);
}

.ambulance-doc__film-label,
.ambulance-doc__film-sub {
    margin: 0;
    font-weight: 650;
    letter-spacing: 0.16em;
    line-height: 1.45;
    text-transform: uppercase;
}

.ambulance-doc__film-label {
    font-size: clamp(0.72rem, 0.18vw + 0.66rem, 0.8rem);
    color: rgba(189, 173, 123, 0.82);
}

.ambulance-doc__film-sub {
    margin-top: 0.65rem;
    font-size: clamp(0.7rem, 0.16vw + 0.64rem, 0.76rem);
    color: rgba(244, 240, 227, 0.48);
}

.ambulance-doc__film-reflection {
    margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
    padding-top: clamp(1.25rem, 2.8vw, 1.75rem);
    border-top: 1px solid rgba(244, 240, 227, 0.12);
    color: rgba(244, 240, 227, 0.78);
    font-size: clamp(1.02rem, 0.28vw + 0.95rem, 1.2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.62;
    letter-spacing: 0.008em;
    text-wrap: balance;
}

.ambulance-doc__film-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    margin-right: clamp(-0.75rem, -1.5vw, -1.5rem);
    margin-left: clamp(-0.25rem, -1vw, -0.75rem);
    padding-block: clamp(0.25rem, 1.2vw, 0.75rem);
}

.ambulance-doc__film-visual::before {
    content: "";
    position: absolute;
    right: 8%;
    top: 50%;
    z-index: 0;
    width: min(76%, 420px);
    aspect-ratio: 9 / 16;
    transform: translateY(-50%) scale(1.03);
    border-radius: 1.08rem;
    background: radial-gradient(ellipse 70% 55% at 45% 40%, rgba(255, 240, 220, 0.12), rgba(30, 26, 22, 0.85));
    opacity: 0.52;
    filter: blur(34px);
    pointer-events: none;
}

/*
 * Portrait embed: width + aspect-ratio define the box; max-height caps vertical size
 * so the used width shrinks automatically when viewport is short (no squashed iframe).
 */
.ambulance-doc__film-frame {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: min(420px, 100%);
    aspect-ratio: 9 / 16;
    max-height: min(88dvh, 760px);
    height: auto;
    border-radius: 1.08rem;
    overflow: hidden;
    border: 1px solid rgba(244, 240, 227, 0.11);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.34),
        0 44px 88px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transform: translateX(clamp(0.35rem, 2vw, 1.5rem));
}

.ambulance-doc__film-frame-surface {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: #000;
}

.ambulance-doc__film-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    background: #000;
}

@media (max-width: 860px) {
    .ambulance-doc__film-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 2.75rem);
    }

    .ambulance-doc__film-context {
        max-width: 38rem;
        padding-right: 0;
    }

    .ambulance-doc__film-reflection {
        margin-top: clamp(1.25rem, 4vw, 1.75rem);
    }

    .ambulance-doc__film-visual {
        justify-content: center;
        margin-right: 0;
        margin-left: 0;
        padding-inline: clamp(0.75rem, 5vw, 2rem);
    }

    .ambulance-doc__film-visual::before {
        right: 50%;
        transform: translate(50%, -50%) scale(1.05);
        width: min(88vw, 420px);
        filter: blur(28px);
    }

    .ambulance-doc__film-frame {
        width: min(420px, 100%);
        max-height: min(88dvh, 760px);
        transform: none;
    }
}

@media (max-width: 520px) {
    .ambulance-doc__film {
        padding:
            clamp(3rem, 12vw, 4rem)
            var(--amb-gutter)
            clamp(3.25rem, 12vw, 4.5rem);
    }

    .ambulance-doc__film-frame {
        max-height: min(85dvh, 720px);
        border-radius: 1.02rem;
    }
}

/* --------------------------------------------------------------------------
   Longform — one continuous flow
   -------------------------------------------------------------------------- */

.ambulance-doc__narrative {
    margin: 0;
    padding:
        clamp(4.25rem, 11vw, 7.5rem)
        0
        clamp(5rem, 14vw, 9rem);
    background:
        radial-gradient(circle at 14% 0%, rgba(189, 173, 123, 0.08), transparent 40%),
        linear-gradient(180deg, var(--color-warm-light) 0%, var(--amb-bg-warm) 14%, var(--amb-bg-warm) 100%);
    color: var(--amb-ink);
}

.ambulance-doc__segment {
    max-width: var(--amb-max);
    margin-inline: auto;
    padding-left: var(--amb-gutter);
    padding-right: var(--amb-gutter);
}

.ambulance-doc__segment + .ambulance-doc__segment {
    margin-top: clamp(2.75rem, 7.5vw, 4.75rem);
    padding-top: clamp(2.75rem, 7.5vw, 4.75rem);
    border-top: 1px solid rgba(44, 44, 44, 0.07);
}

.ambulance-doc__marker {
    margin: 0 0 0.85rem;
    max-width: var(--amb-prose);
    color: var(--amb-ink-faint);
    font-size: clamp(0.7rem, 0.18vw + 0.65rem, 0.78rem);
    font-weight: 650;
    letter-spacing: 0.17em;
    line-height: 1.45;
    text-transform: uppercase;
}

.ambulance-doc__chapter-title {
    margin: 0 0 clamp(1.15rem, 2.8vw, 1.6rem);
    max-width: var(--amb-prose);
    font-size: clamp(1.42rem, 1.1vw + 1.12rem, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.026em;
    line-height: 1.18;
    color: var(--amb-ink);
}

.ambulance-doc__prose > p {
    margin: 0;
    max-width: var(--amb-prose);
    font-size: clamp(0.98rem, 0.28vw + 0.92rem, 1.08rem);
    line-height: 1.82;
    color: var(--amb-ink-muted);
}

.ambulance-doc__prose > p + p {
    margin-top: 1.05rem;
}

.ambulance-doc__prose blockquote {
    margin: clamp(1.15rem, 3vw, 1.5rem) 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid rgba(189, 173, 123, 0.75);
    max-width: var(--amb-prose);
}

.ambulance-doc__prose blockquote p {
    margin: 0;
    color: var(--amb-ink);
    font-size: clamp(1.02rem, 0.3vw + 0.95rem, 1.12rem);
    font-weight: 500;
    line-height: 1.68;
}

.ambulance-doc__attribution {
    margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
    max-width: var(--amb-prose);
    padding-top: clamp(1.5rem, 4vw, 2rem);
    border-top: 1px solid rgba(44, 44, 44, 0.09);
    color: var(--amb-ink-faint);
    font-size: clamp(0.86rem, 0.2vw + 0.8rem, 0.94rem);
    font-style: italic;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.story-footer.ambulance-doc-footer {
    border-top: 1px solid rgba(44, 44, 44, 0.1);
    padding: 2.25rem var(--amb-gutter);
    background: var(--color-warm-light);
    color: rgba(44, 44, 44, 0.62);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.ambulance-doc-footer .story-container {
    width: var(--amb-max);
    margin-inline: auto;
}

.ambulance-doc-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ambulance-doc-footer a:hover,
.ambulance-doc-footer a:focus-visible {
    color: var(--color-accent-on-light);
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
    }

    .ambulance-doc__film-frame {
        transform: none;
    }
}