/* Hero polaroid — overlaps the story block on desktop; mobile stays clean.
 *
 * Mobile layout (top → bottom):
 *   copy + Watch Wedding Video → EXPLORE → line → polaroid → green section
 *   (no green overlap, signature always visible)
 *
 * Desktop: the green story block rises (negative margin) so its top edge
 * overlays the hero + the polaroid's bottom-left corner. On scroll the
 * polaroid lags (main.js) and appears to slip UNDER the green. EXPLORE + its
 * line are anchored ABOVE the green's top edge so they can never be buried.
 *
 * --polaroid-green-lift: how far (px) the green box rises past the banner
 * bottom. There is NO padding-top spacer on .video-intro — a spacer pushes the
 * green PAINT back down and reopens the gap (that was the bug). */

/* Defined on :root — .video-intro is a SIBLING of .banner, so a var scoped to
   .banner would NOT cascade to it (that bug made margin-top calc() fall back to
   0 and the green never rose). :root is visible to both. */
:root {
    --polaroid-green-lift: 120px;
    --nino-green-bar: #96c89b;
}

.banner {
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* --- Hero parallax background layer --- */
.banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.banner__bg-media {
    position: absolute;
    top: -16%;
    left: 0;
    right: 0;
    height: 132%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.banner .container {
    position: relative;
    z-index: 1;
}

.banner__img {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    will-change: transform;
}

.banner__img img {
    width: min(92vw, 360px);
    max-width: none;
    height: auto;
    display: block;
}

@media (max-width: 991.98px) {
    .banner__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .banner__text {
        order: 1;
        width: 100%;
        margin-bottom: 32px;
    }

    .banner__btn {
        margin-top: 28px;
    }

    .banner__scroll-down {
        order: 2;
        position: relative;
        z-index: 4;
        width: 100%;
        margin-bottom: 0;
        padding-top: 26px;
        padding-bottom: 14px;
    }

    /* Short green tick tight above EXPLORE — not a long line down to the polaroid. */
    .banner__scroll-down::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        width: 2px;
        height: 18px;
        margin: 0 auto;
        background-color: var(--nino-green-bar);
    }

    .banner__scroll-down::after {
        display: none;
    }

    .banner__img {
        order: 3;
        z-index: 3;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .banner__img img {
        margin-left: auto;
        margin-right: auto;
    }

    /* Green rises slightly behind the polaroid bottom; scroll parallax tucks the photo under. */
    .video-intro {
        position: relative;
        z-index: 4;
        margin-top: -36px !important;
        padding-top: 0 !important;
    }

    .video-intro__blank-space {
        display: none !important;
        height: 0 !important;
    }

    .video-intro__inner {
        padding-top: 32px;
    }
}

@media (min-width: 992px) {
    .banner__img {
        margin-bottom: 0;
        margin-right: 10px;
        padding-left: 24px;
        /* below the green so it slips under it on scroll */
        z-index: 1;
    }

    .banner__img img {
        width: 420px;
        transform: rotate(-5deg);
    }

    /* EXPLORE + line live in the hero, just ABOVE the green top edge (which
       sits at banner-bottom minus --polaroid-green-lift). Anchored 140px up
       from the hero content bottom so the green can never bury it. */
    .banner__scroll-down {
        bottom: 140px;
    }

    .banner__scroll-down::after {
        background-color: var(--nino-green-bar);
    }

    /* Green rises so its TOP edge overlays the hero + the polaroid's bottom.
       No padding-top here — the green fill must start at this box's top. */
    .video-intro {
        position: relative;
        z-index: 3;
        margin-top: calc(-1 * var(--polaroid-green-lift));
        padding-top: 0;
    }

    .video-intro__inner {
        padding-top: 64px;
        box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, 0.35);
    }
}

@media (min-width: 1200px) {
    .banner__img img {
        width: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner__bg-media,
    .banner__img {
        transform: none !important;
        will-change: auto;
    }
}