/* ==========================================================================
   Jorik Carousel Styles  (v1.5.0)
   ========================================================================== */

/* --- Značkový font Grandstander (bundlovaný v plugine) -------------------- */
@font-face {
    font-family: 'Grandstander';
    src: url('fonts/Grandstander.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- Cuprum Bold (bundlovaný v plugine) ----------------------------------- */
@font-face {
    font-family: 'Cuprum';
    src: url('fonts/Cuprum-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.jorik-carousel {
    /* karta Jorik používa značkový font */
    font-family: 'Cuprum', 'Grandstander', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.jorik-carousel .slick-slide {
    background: #fff !important;
    display: flex !important;
    margin-right: 12px !important;
    flex-direction: column !important;
}

.jorik-carousel .slide-image {
    position: relative !important;
    /* Klient: "potrebujeme pod tou hlavnou fotkou taketo obdlznikove fotky.
       Je to aj format, na ktorom fotia castejsie fotografi. Terajsi stvorcovy
       by bol byval problem."
       Preto uz nie pevna vyska 420 px (pri sirke karty ~400 px z toho vysiel
       skoro stvorec), ale pomer 3:2 na sirku - klasicky fotograficky format.
       Vyska sa dopocitava zo sirky, takze pomer drzi na kazdej sirke okna. */
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #000;
}

.jorik-carousel .slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- Vekový trojuholník v rohu plagátu ----------------------------------- */
.jorik-carousel .age-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 5 !important;
    width: 84px !important;
    height: 84px !important;
    pointer-events: none !important;
    line-height: 0 !important;
}

.jorik-carousel .age-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)) !important;
}

.jorik-carousel .slide-info {
    padding: 0.5rem 0 !important;
    background: #fff !important;
    color: #000 !important;
    flex-grow: 1 !important;
}

.jorik-carousel h3 {
    font-family: 'Cuprum', 'Grandstander', system-ui, sans-serif !important;
    font-size: 2.4rem !important;
    margin: 0 0 .5rem !important;
    font-weight: 700 !important;
    color: #112233 !important;
    line-height: 1.05 !important;
}

.jorik-carousel .subtitle,
.jorik-carousel .date {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin: 0 0 1rem !important;
}

.jorik-carousel .date {
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

.jorik-carousel .bottom-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
}

.jorik-carousel .btn-more {
    background: #AA0000 !important;
    color: #fff !important;
    padding: .75rem 1.8rem !important;
    border-radius: .25rem !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-family: 'Cuprum', 'Grandstander', system-ui, sans-serif !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,.2) !important;
    cursor: pointer !important;
}

.jorik-carousel .btn-more:hover {
    background: #c00 !important;
}

.jorik-carousel .location {
    font-size: 1rem !important;
    opacity: .85 !important;
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
}

.jorik-carousel .location::before {
    content: "◎";
    font-size: 1.2rem !important;
}

.jorik-carousel .credit {
    margin-top: 1rem !important;
    font-size: .85rem !important;
    opacity: .7 !important;
}

/* ==========================================================================
   Slick Carousel Arrows - Vlastné PNG šípky (bundlované v plugine)
   ========================================================================== */

.jorik-carousel .slick-prev,
.jorik-carousel .slick-next {
    width: 60px !important;
    height: 60px !important;
    z-index: 100 !important;
    background-color: transparent !important;
    border: none !important;
    transition: transform 0.3s ease !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.jorik-carousel .slick-prev:hover { transform: translate(-4px, -50%) !important; }
.jorik-carousel .slick-next:hover { transform: translate( 4px, -50%) !important; }

.jorik-carousel .slick-prev:focus,
.jorik-carousel .slick-next:focus {
    outline: none !important;
}

.jorik-carousel .slick-prev:before,
.jorik-carousel .slick-next:before {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 1 !important;
}

.jorik-carousel .slick-prev:before {
    background-image: url('img/sipka_lava.png') !important;
}

.jorik-carousel .slick-next:before {
    background-image: url('img/sipka_prava.png') !important;
}

/* --- Hover stav šípok: čierna (default) -> červená (hover) --------------- */
.jorik-carousel .slick-prev:hover:before {
    background-image: url('img/sipka_lava_red.png') !important;
}

.jorik-carousel .slick-next:hover:before {
    background-image: url('img/sipka_prava_red.png') !important;
}

.jorik-carousel .slick-prev { left: -8px !important; }
.jorik-carousel .slick-next { right: -8px !important; }

@media (max-width: 1200px) {
    .jorik-carousel .slick-prev { left: 0px !important; }
    .jorik-carousel .slick-next { right: 0px !important; }
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 900px) {
    .jorik-carousel .age-badge { width: 70px !important; height: 70px !important; }
}

@media (max-width: 840px) {
    /* pomer 3:2 drzi aj na uzkej obrazovke - pevnu vysku uz netreba */
    .jorik-carousel .slide-image {
        height: auto !important;
    }

    .jorik-carousel .bottom-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .jorik-carousel .slick-prev,
    .jorik-carousel .slick-next {
        width: 45px !important;
        height: 45px !important;
    }

    .jorik-carousel .slick-prev:before,
    .jorik-carousel .slick-next:before {
        width: 45px !important;
        height: 45px !important;
    }

    .jorik-carousel .slick-prev { left: 5px !important; }
    .jorik-carousel .slick-next { right: 5px !important; }
}


/* --- Šípka doľava sa zobrazí až po prekliknutí doprava (Slick automaticky pridá .slick-disabled na prvej karte) --- */
.jorik-carousel .slick-prev.slick-disabled {
    display: none !important;
}

/* ==========================================================================
   Mriezka namiesto slidera (v1.7.0)
   Klient: "zrusme slider nech su tam 3 polozky a potom po scrolle nech sa
   robia dalsie". Trieda .jorik-carousel zostava, aby vsetky doterajsie styly
   kariet (vratane bloku JORIK_VYPIS_PREDSTAVENI v Prisposobit -> Dodatocne CSS)
   platili dalej; meni sa len rozlozenie kontajnera.
   ========================================================================== */
.jorik-carousel.jorik-mriezka {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 24px !important;
    row-gap: 48px !important;
    align-items: start !important;
}

.jorik-carousel.jorik-mriezka > .slide {
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    min-width: 0 !important;   /* aby dlhy text nerozstrelil stlpec mriezky */
}

/* Karta, na ktoru este nedoscrollovalo. Neuklada sa cez [hidden], lebo
   pravidlo vyssie ma display:flex !important a to by hidden prebilo. */
.jorik-carousel.jorik-mriezka > .slide.jorik-skryta {
    display: none !important;
}

/* Sledovaci bod na konci mriezky - neviditelny, cez cely riadok. */
.jorik-carousel.jorik-mriezka > .jorik-koniec {
    grid-column: 1 / -1 !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1200px) {
    .jorik-carousel.jorik-mriezka { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
    .jorik-carousel.jorik-mriezka {
        grid-template-columns: 1fr !important;
        row-gap: 36px !important;
    }
}