/* Hero Section - Minimal */
.section-hero {
    position: relative;
    min-height: var(--hero-height-desktop, 70vh);
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .section-hero {
        min-height: var(--hero-height-mobile, var(--hero-height-desktop, 70vh));
    }
}

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

.section-hero__bg img,
.section-hero__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__bg picture img {
        object-fit: var(--mobile-image-fit, cover);
        object-position: var(--mobile-image-position, center);
    }
}

/* Responsive Video: Mobile video hidden by default, shown on small screens */
.hero-video-mobile {
    display: none;
}

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

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

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

.section-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /*background: rgba(0,0,0,0.5);*/
}

/* Video with controls - ensure controls are clickable */
.section-hero__bg video[controls] {
    z-index: 2;
    position: relative;
    object-fit: contain;
    background: #000;
}

/* Disable pointer events on overlay when video has controls */
.section-hero__bg:has(video[controls]) .section-hero__overlay {
    pointer-events: none;
}