/**
 * Section: Hero
 *
 * Renders the full-bleed hero with a video or image background, optional
 * overlay, headline, body copy, and CTA. The wrapper element supplies
 * --hero-overlay-alpha so PHP can vary the overlay opacity per instance.
 *
 * Loaded via trunorth_enqueue_section('hero') from template-parts/hero.php.
 */

.hero-section {
    position: relative;
    display: flex;
    min-height: calc(var(--vw) * 47.8125);
    overflow: hidden;

    video,
    img.hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, var(--hero-overlay-alpha, 0.3));
        z-index: 1;
        pointer-events: none;
    }

    /* 1920-wide inner wrapper — centered inside the full-bleed .hero-section.
       .seo-block is absolutely-positioned INSIDE this wrapper so its
       left:0 = the left edge of the centered 1920 zone. */
    .hero-inner-cap {
        position: absolute;
        inset: 0;
        max-width: 1920px;
        margin: 0 auto;
        left: 0;
        right: 0;
        z-index: 2;
        pointer-events: none;
    }
    .hero-inner-cap > * {
        pointer-events: auto;
    }

    .seo-block {
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        left: 0;
        width: fit-content;
        max-width: 60%;
        height: fit-content;
        color: #fff;
        z-index: 2;
        margin-left: calc(var(--vw) * 5);
        display: flex;
        flex-direction: column;
        gap: calc(var(--vw) * 1);

        h1 {
            font-family: "open sans condensed", sans-serif;
            font-size: clamp(1.5rem, calc(var(--vw) * 3), calc(var(--vw) * 3));
            font-weight: 600;
            text-transform: uppercase;
            line-height: 1;
        }

        p,
        .hero-body-text,
        .hero-body-text ul,
        .hero-body-text li {
            font-family: "Montserrat", sans-serif;
            font-size: var(--font-body);
            font-weight: 500;
            line-height: 1.4;
        }

        .hero-body-text ul {
            padding-left: 1.5em;
        }

        .hero-body-text p,
        .hero-body-text ul {
            margin-bottom: calc(var(--vw) * 0.5);
        }

        .hero-body-text p:last-child,
        .hero-body-text ul:last-child {
            margin-bottom: 0;
        }
    }

    @media (max-width: 768px) {
        & {
            min-height: calc(var(--vw) * 80);
        }
    }

   @media (max-width: 480px) {
        .seo-block {
            max-width: 85%;
        }
    }

    /* Mobile: let the hero grow with content instead of forcing tall
       text into a fixed box. The seo-block flows normally, sits below
       the header via padding-top, and the hero image stays as a
       full-bleed background covering whatever height results. */
    @media (max-width: 768px) {
        & {
            min-height: 0;
            padding: 7rem 1.5rem 2.5rem;
        }
        .seo-block {
            position: relative;
            top: auto;
            left: auto;
            bottom: auto;
            transform: none;
            margin-left: 0;
            max-width: 100%;
            width: 100%;
        }
    }

    .seo-block .hero-cta {
        display: inline-block;
        padding: calc(var(--vw) * 0.75);
        background: #C22127;
        color: #fff;
        text-decoration: none;
        font-size: clamp(0.8rem, calc(var(--vw) * 1.125), calc(var(--vw) * 1.125));
        font-weight: 700;
        letter-spacing: calc(var(--vw) * 0.11);
        text-transform: uppercase;
        border: 1px solid #fff;
        border-radius: 4px;
        font-family: "Open Sans Condensed", sans-serif;
        width: fit-content;
        margin-top: calc(var(--vw) * 1);
    }

    .seo-block .hero-cta:hover {
        background: #8a1719;
    }
}