/* ==========================================================
   _06-HERO-SECTIONS.CSS - Globala Stilar för Hero Bildspel
   ========================================================== */

/* --- 1. Grundläggande layout för hero-sektionen --- */
/* Använder klassen .hero-slideshow-wrapper nu */
.hero-slideshow-wrapper {
    position: relative !important; /* Måste vara relativ för absolut positionering inuti */
    width: 100%;
    height: 100vh; /* Standardhöjd */
    overflow: hidden; /* Dölj överflöd */
    padding: 0 !important; /* Nollställ padding */
    box-sizing: border-box;
    z-index: 1; /* Standard z-index */
}

.hero-slideshow-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

.hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* --- 2. Container för INNEHÅLL (t.ex. logga på startsidan) --- */
/* Denna behöver finnas globalt om andra hero-sektioner har centrerat innehåll */
.hero-slideshow-wrapper .hero-content {
    position: relative; /* För z-index */
    z-index: 2;         /* Ovanpå slider-bilderna */
    padding: 20px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrera innehåll vertikalt som standard */
    flex-grow: 1;
    height: 100%; /* Viktigt för vertikal centrering */
}

/* --- 3. Zoom-animation (Global) --- */
.hero-slide.active.zoom-active {
    animation: zoom-pan 25s infinite alternate;
}

@keyframes zoom-pan {
    0% { transform: scale(1) translateX(0); }
    100% { transform: scale(1.1) translateX(-5%); }
}

/* Lägg till andra globala hero-stilar här vid behov */