/* Hero Highlights Section */
.section-hero-highlights {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.section-hero-highlights__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.section-hero-highlights__bg img,
.section-hero-highlights__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile image positioning via CSS variables (set inline from template) */
@media (max-width: 768px) {
    .section-hero-highlights__bg picture img {
        object-fit: var(--mobile-image-fit, cover);
        object-position: var(--mobile-image-position, center);
    }
}

/* Responsive Video */
.section-hero-highlights__bg .hero-video-mobile {
    display: none;
}

/* Mobile Bild Fallback (wenn videoMobile fehlt aber imageMobile existiert) */
.section-hero-highlights__bg .hero-image-mobile {
    display: none;
    width: 100%;
    height: 100%;
}

.section-hero-highlights__bg .hero-image-mobile img {
    width: 100%;
    height: 100%;
    /* Uses inline styles from template for object-fit and object-position */
}

@media (max-width: 768px) {
    .section-hero-highlights__bg .hero-video-desktop:has(~ .hero-video-mobile),
    .section-hero-highlights__bg .hero-video-desktop:has(~ .hero-image-mobile) {
        display: none;
    }
    .section-hero-highlights__bg .hero-video-mobile {
        display: block;
    }
    /* Show mobile image fallback when no mobile video */
    .section-hero-highlights__bg .hero-image-mobile {
        display: block;
    }
}

.section-hero-highlights__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}