/* ==========================================================================
   modul: banners — default skin
   Hero karusel: slidy leží na sobě, aktivní se prolne. Bez JS zůstane
   viditelný první slide, takže obsah nikdy nezmizí.
   ========================================================================== */

.banner {
    position: relative;
    margin-bottom: var(--space-7);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-sunken);
}

/* `grid-template-columns` MUSÍ být explicitní. S implicitním `auto` sloupcem
   se mřížka roztáhne na intrinsickou šířku obrázku (u hero fotky ~1600 px),
   přeteče celý dokument a na mobilu pak odteče i menu a přepínač jazyků mimo
   obrazovku. `minmax(0, 1fr)` sloupec drží na šířce kontejneru. */
.banner__slides {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Prolínání bez „díry": odcházející slide má stejnou dobu přechodu, ale se
   zpožděním, takže zůstane plně viditelný pod tím nastupujícím. Kdyby oba
   fadovaly současně, byly by uprostřed přechodu oba poloprůhledné a prosvítalo
   by pozadí — na snímku se to projeví vybledlým bannerem. */
.banner__slide {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.4s;
}

.banner__slide--active,
.banner__slides > .banner__slide:only-child {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s ease 0s;
}

.banner__link { display: block; text-decoration: none; color: inherit; }

.banner__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.banner__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: linear-gradient(to top, var(--color-overlay), transparent);
    color: var(--color-accent-contrast);
}

.banner__title { margin: 0; font-size: var(--font-size-2xl); font-weight: 600; }
.banner__subtitle { margin: var(--space-1) 0 0; font-size: var(--font-size-lg); opacity: 0.9; }

.banner__dots {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    gap: var(--space-2);
}

.banner__dot {
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent-contrast);
    opacity: 0.5;
    cursor: pointer;
}

.banner__dot[aria-current="true"] { opacity: 1; }

@media (max-width: 48rem) {
    .banner__slide img { aspect-ratio: 4 / 3; }
    .banner__caption { position: static; padding: var(--space-4); background: var(--color-fg); }
}