/* =========================================================
   Ciné Aalst - laadstabiliteit & kleine aanvullingen (nov 2026)
   Wordt na style.css geladen. Bewust apart gehouden zodat dit
   bij de redesign eenvoudig mee te nemen of te schrappen is.
   ========================================================= */

/* ---------- 1. HERO: vaste hoogte + placeholder ---------- */

/* svh = hoogte zonder de in-/uitschuivende adresbalk op gsm.
   Met gewone vh verandert de hero-hoogte telkens je scrolt -> pagina verspringt. */
#hero,
#hero .carousel-inner,
#hero .carousel-inner .item {
    height: 90vh;
    height: 90svh;
}

/* Donkere placeholder i.p.v. effen zwart terwijl de afbeelding laadt */
#hero .carousel-inner .item .hero-bg-layer {
    background-color: #15161c;
    background-image: linear-gradient(110deg, #15161c 30%, #23252f 50%, #15161c 70%);
    background-size: 220% 100%;
}

#hero .carousel-inner .item.bg-loading .hero-bg-layer {
    animation: heroShimmer 1.8s linear infinite;
}

#hero .carousel-inner .item.bg-loaded .hero-bg-layer {
    animation: none;
}

@keyframes heroShimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    #hero .carousel-inner .item.bg-loading .hero-bg-layer { animation: none; }
}

/* Content headers (filminfo, tickets, ...) hebben al een min-height; zelfde placeholderkleur */
#content_hero {
    background-color: #15161c;
}

/* ---------- 2. jQuery UI tabs (programma) vóór initialisatie ---------- */

/* Zonder dit staan alle dag-panelen even ONDER elkaar tot custom.js .tabs()
   uitvoert, waarna alles inklapt -> grote sprong. Toon enkel het eerste paneel. */
.tabs:not(.ui-tabs) > div[id] ~ div[id] {
    display: none;
}

/* ---------- 3. Slick-carrousels (Nieuw / Verwacht) vóór initialisatie ---------- */

/* Zonder dit staan alle posters eerst groot onder elkaar tot slick start.
   Zelfde aantal per rij als de slick-instellingen in custom.js. */
#newIn:not(.slick-initialized),
#newIn2:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    margin: 0 -12px;
}

#newIn:not(.slick-initialized) > .movie-slide,
#newIn2:not(.slick-initialized) > .movie-slide {
    flex: 0 0 calc(100% / 6 - 24px);
    max-width: calc(100% / 6 - 24px);
    margin: 0 12px;
    min-width: 0;
}

@media (max-width: 1200px) {
    #newIn:not(.slick-initialized) > .movie-slide,
    #newIn2:not(.slick-initialized) > .movie-slide {
        flex-basis: calc(100% / 5 - 24px);
        max-width: calc(100% / 5 - 24px);
    }
}

@media (max-width: 992px) {
    #newIn:not(.slick-initialized) > .movie-slide,
    #newIn2:not(.slick-initialized) > .movie-slide {
        flex-basis: calc(100% / 4 - 24px);
        max-width: calc(100% / 4 - 24px);
    }
}

@media (max-width: 768px) {
    #newIn:not(.slick-initialized) > .movie-slide,
    #newIn2:not(.slick-initialized) > .movie-slide {
        flex-basis: calc(100% / 3 - 24px);
        max-width: calc(100% / 3 - 24px);
    }
}

@media (max-width: 600px) {
    #newIn:not(.slick-initialized) > .movie-slide,
    #newIn2:not(.slick-initialized) > .movie-slide {
        flex-basis: calc(100% / 2 - 24px);
        max-width: calc(100% / 2 - 24px);
    }
}

@media (max-width: 400px) {
    #newIn:not(.slick-initialized) > .movie-slide,
    #newIn2:not(.slick-initialized) > .movie-slide {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

/* ---------- 4. Logo: ruimte reserveren ---------- */
.navbar .logo img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* ---------- 5. Vertoning < 30 min: enkel nog aan de kassa ---------- */
.showchip.kassa-only {
    cursor: default;
    opacity: .7;
    border-style: dashed !important;
    height: auto !important;
    min-height: 44px;
}

.showchip .kassa-only-label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #b45309;
    white-space: nowrap;
}