/* ==========================================================================
   BLOCK: HERO CONGRESS — full-viewport statement hero (index.html)
   Grid-stacked (no absolute), scroll-driven parallax drift, container
   units scale the display type with the block, not the viewport.
   ========================================================================== */

@scope (.block-hero-congress) {
    :scope {
        display: grid;
        grid-template-areas: "stack";
        background: var(--bg-contrast);
        color: var(--text-inverse);
        /* Sticky header is in flow: header + hero = exactly one viewport */
        min-height: calc(100vh - var(--header-h));
        min-height: calc(100dvh - var(--header-h));
        overflow: clip;
        container-type: inline-size;
        container-name: hero;
    }
    :scope > * { grid-area: stack; }

    .hero-bg {
        background-image:
            linear-gradient(to top, rgba(8,8,8,0.95) 8%, rgba(8,8,8,0.25) 60%),
            url('https://www.worldooh.org/banners/london.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.75;
    }
    /* Scroll-driven parallax drift — scroll() timeline */
    @supports (animation-timeline: scroll()) {
        .hero-bg {
            animation: hero-drift linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 100vh;
        }
    }
    @keyframes hero-drift { to { scale: 1.08; translate: 0 6%; } }

    .hero-content {
        z-index: 2;
        align-self: end;
        max-width: var(--content-width);
        margin-inline: auto;
        inline-size: 100%;
        padding: var(--space-sm) var(--space-xs);
    }

    h1 {
        font-weight: 100;
        font-size: clamp(3.5rem, 11cqw, 10rem);
        line-height: 0.88;
        letter-spacing: -0.05em;
        overflow-wrap: break-word;
    }
    h1 strong { font-weight: 900; display: block; }

    .hero-meta {
        margin-block-start: var(--space-sm);
        border-block-start: 1px solid rgba(255,255,255,0.3);
        padding-block-start: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: clamp(24px, 4vw, 60px);
    }
    .hero-meta .kicker { opacity: 0.6; margin-block-end: 6px; }
}