/* =========================================================
 * Carousel Slider — frontend styles
 *  1) cover képek
 *  2) lapozó nyilak a képen belül
 *  3) 0px térköz (nincs gap)
 *  4) responsive: 4K / 3K / 2K / 1080p / laptop / tablet / mobil
 * ========================================================= */

/* --- Fallback amíg a Splide JS nem inicializálta ----------
 * A splide.min.css alapból "visibility: hidden"-re állítja
 * a .splide elemet, amíg nincs rajta .is-initialized/.is-rendered
 * (pl. Elementor szerkesztő iframe, ahol a footer JS nem fut le).
 * Ez a fallback látszó, görgethető, töréspontoknak megfelelő
 * elrendezést ad JS nélkül is; ha a Splide lefut, ezek a
 * szabályok érvénytelenné válnak (.is-initialized felülírja). */
.carousel-slider:not(.is-initialized) {
    visibility: visible;
}

.carousel-slider:not(.is-initialized) .splide__list {
    display: flex;
    overflow-x: auto;
}

.carousel-slider:not(.is-initialized) .splide__slide {
    flex: 0 0 25%;
}

@media (max-width: 1280px) {
    .carousel-slider:not(.is-initialized) .splide__slide { flex-basis: 33.3333%; }
}

@media (max-width: 1024px) {
    .carousel-slider:not(.is-initialized) .splide__slide { flex-basis: 50%; }
}

@media (max-width: 640px) {
    .carousel-slider:not(.is-initialized) .splide__slide { flex-basis: 100%; }
}

/* --- Konténer: teljes szélesség, nincs külső margó --------- */
.carousel-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Egységes aspektarány – ezt felül lehet bírálni inline style-lal */
    --cs-aspect: 16 / 9;
    --cs-arrow-size: 44px;
    --cs-arrow-bg: rgba(0, 0, 0, 0.45);
    --cs-arrow-bg-hover: rgba(0, 0, 0, 0.75);
    --cs-arrow-color: #ffffff;
}

/* --- Splide track / list: 0 gap, nincs margin/padding ------ */
.carousel-slider .splide__track,
.carousel-slider .splide__list {
    margin: 0 !important;
    padding: 0 !important;
}

.carousel-slider .splide__slide {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    overflow: hidden;
    aspect-ratio: var(--cs-aspect);
    background: #000;
}

/* --- 1) Cover képek ---------------------------------------- */
.carousel-slider .splide__slide img,
.carousel-slider .splide__slide picture,
.carousel-slider .splide__slide a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.carousel-slider .splide__slide img {
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease;
}

.carousel-slider .splide__slide:hover img {
    transform: scale(1.03);
}

/* --- 2) Nyilak a képen belül ------------------------------- */
.carousel-slider .splide__arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.carousel-slider .splide__arrow {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--cs-arrow-size);
    height: var(--cs-arrow-size);
    background: rgb(17 185 129 / 58%);
    border: 0;
    border-radius: 50%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.carousel-slider .splide__arrow:hover {
    background: var(--cs-arrow-bg-hover);
    transform: translateY(-50%) scale(1.08);
}

.carousel-slider .splide__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.carousel-slider .splide__arrow svg {
    width: 45%;
    height: 45%;
    fill: var(--cs-arrow-color);
}

.carousel-slider .splide__arrow--prev {
    left: 16px;
    right: auto;
}

.carousel-slider .splide__arrow--next {
    right: 16px;
    left: auto;
}

/* --- 4) Responsive ---------------------------------------- */

/* 4K (≥ 2560px) — magasabb képi terület, nagyobb nyilak */
@media (min-width: 2560px) {
    .carousel-slider {
        --cs-aspect: 14 / 9;
        --cs-arrow-size: 44px;
    }
    .carousel-slider .splide__arrow--prev { left: 32px; }
    .carousel-slider .splide__arrow--next { right: 32px; }
}

/* 2K / 1440p (1920–2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .carousel-slider {
        --cs-aspect: 14 / 9;
        --cs-arrow-size: 38px;
    }
    .carousel-slider .splide__arrow--prev { left: 24px; }
    .carousel-slider .splide__arrow--next { right: 24px; }
}

/* 1080p / nagy laptop (1440–1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .carousel-slider {
        --cs-aspect: 16 / 9;
        --cs-arrow-size: 34px;
    }
}

/* Standard laptop (1280–1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    .carousel-slider {
        --cs-aspect: 16 / 9;
        --cs-arrow-size: 30px;
    }
}

/* Kis laptop / tablet landscape (1024–1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .carousel-slider {
        --cs-aspect: 16 / 9;
        --cs-arrow-size: 28px;
    }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .carousel-slider {
        --cs-aspect: auto;
        --cs-arrow-size: 48px;
    }
    .carousel-slider .splide__slide {
        aspect-ratio: auto;
        height: 320px;
    }
    .carousel-slider .splide__arrow--prev { left: 12px; }
    .carousel-slider .splide__arrow--next { right: 12px; }
}

/* Nagy mobil (480–767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .carousel-slider {
        --cs-aspect: auto;
        --cs-arrow-size: 46px;
    }
    .carousel-slider .splide__slide {
        aspect-ratio: auto;
        height: 320px;
    }
    .carousel-slider .splide__arrow--prev { left: 10px; }
    .carousel-slider .splide__arrow--next { right: 10px; }
}

/* Kis mobil (≤ 479px) */
@media (max-width: 479px) {
    .carousel-slider {
        --cs-aspect: auto;
        --cs-arrow-size: 44px;
    }
    .carousel-slider .splide__slide {
        aspect-ratio: auto;
        height: 320px;
    }
    .carousel-slider .splide__arrow--prev { left: 8px; }
    .carousel-slider .splide__arrow--next { right: 8px; }
}

/* --- Touch-eszközökön a hover-zoom kikapcsolása ----------- */
@media (hover: none) {
    .carousel-slider .splide__slide:hover img {
        transform: none;
    }
}