/**
 * Homepage hero background video.
 *
 * Full-cover looping MP4 layered behind the hero text on both the desktop
 * (.is-desktop) and mobile (.is-mobile) hero blocks. Text stays on top; a dark
 * gradient overlay keeps the white headline/buttons readable over any frame.
 *
 * Enqueued only on the front page (see functions.php). See section-hero.php.
 */

.section-hero.has-hero-video {
    /* Video fills the whole hero; blue bg-primary only shows before it paints. */
    background-color: var(--bs-primary);
}

.section-hero.has-hero-video .hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.section-hero.has-hero-video .hero-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    /* Nudge focus toward the upper-middle so faces/subjects stay in frame. */
    -o-object-position: center 30%;
    object-position: center 30%;
}

/* Even dark scrim across the full width, plus a soft bottom fade. Keep this
   uniform left-to-right — a horizontal gradient reads as an unevenly lit video. */
.section-hero.has-hero-video .hero-video__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%),
        rgba(0, 0, 0, 0.4);
}

/* The scrim is lighter than it was on the left, so lean on a text shadow to
   hold the white headline/tagline legible over bright frames. */
.section-hero.has-hero-video .container.inner,
.section-hero.is-mobile.has-hero-video > .inner {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.section-hero.has-hero-video .btn {
    text-shadow: none;
}

/* Keep the existing decorative aesthetic SVG / right media panel from covering
   the video on the front page — the video is the visual now. */
.section-hero.has-hero-video .is-media {
    background-image: none !important;
}

.section-hero.has-hero-video .is-media:before {
    display: none;
}

/* Desktop text is already z-index:10 (.container.inner). Mobile content needs
   to sit above the video layer. */
.section-hero.is-mobile.has-hero-video > .inner {
    position: relative;
    z-index: 2;
}

/* The mobile block's own :before primary tint is redundant with our overlay. */
.section-hero.is-mobile.has-hero-video:before {
    display: none;
}

/* Mobile: shrink the hero CTAs so "View Puppies" and "Upcoming Litters" sit
   side-by-side instead of stacking, easing the crowding over the video. */
@media (max-width: 575.98px) {
    .section-hero.is-mobile.has-hero-video .d-flex.flex-wrap {
        gap: 0.4rem;
    }

    .section-hero.is-mobile.has-hero-video .d-flex.flex-wrap .btn {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
        font-size: 0.85rem;
    }

    .section-hero.is-mobile.has-hero-video .d-flex.flex-wrap .btn svg {
        width: 14px;
        height: 16px;
    }
}

/* Motion-sensitive users: no autoplaying video, just the poster still. */
@media (prefers-reduced-motion: reduce) {
    .section-hero.has-hero-video .hero-video__media {
        display: none;
    }

    .section-hero.has-hero-video .hero-video {
        background-image: url(../images/DogClub-poster.jpg);
        background-size: cover;
        background-position: center 30%;
    }
}