/* ============================================================
   Embla Carousel — replaces Slick.js
   DOM structure (created by JS):
     .main_slider_f / .providers_slider / .slot_article_slider  ← slider root (position:relative from JS)
       └─ .embla-inner      ← viewport node passed to EmblaCarousel (replaces .slick-list)
            └─ .embla__container  ← flex track translated by Embla      (replaces .slick-track)
                 └─ slides
       ├─ .slick-prev.slick-arrow  ← prev button (CSS from style.css reused)
       └─ .slick-next.slick-arrow  ← next button
   ============================================================ */

/* --- Viewport: clips overflowing slides --- */
.embla-inner {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* --- Tracks: horizontal flex row --- */
.embla__container {
    display: flex;
    will-change: transform;
    touch-action: pan-y;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin: 0;
    padding: 0;
}

/* --- All slides: no shrink/grow --- */
.embla__container > * {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

/* ============================================================
   Games sliders  (.main_slider_f, .main_slider_s)
   Desktop: 5 slides · Tablet ≤1020px: 3 · Mobile ≤759px: native scroll
   .slick-list on the original had padding: 30px 8px for hover-scale bleed.
   Applied here to .embla-inner so scale(1.1) cards are not clipped.
   ============================================================ */
.main_slider_f > .embla-inner,
.main_slider_s > .embla-inner {
    padding: 30px 8px;
}

/* Desktop: 5 items */
.main_slider_f > .embla-inner > .embla__container > *,
.main_slider_s > .embla-inner > .embla__container > * {
    flex: 0 0 calc(100% / 5);
}

/* Tablet ≤1020px: 3 items */
@media (max-width: 1020px) {
    .main_slider_f > .embla-inner > .embla__container > *,
    .main_slider_s > .embla-inner > .embla__container > * {
        flex: 0 0 calc(100% / 3);
    }
}

/* Mobile ≤759px: "unslick" — native CSS horizontal scroll (Embla not initialized) */
@media (max-width: 759px) {
    .main_slider_f > .embla-inner,
    .main_slider_s > .embla-inner {
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 0 15px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
    }
    .main_slider_f > .embla-inner::-webkit-scrollbar,
    .main_slider_s > .embla-inner::-webkit-scrollbar {
        display: none;
    }
    .main_slider_f > .embla-inner > .embla__container,
    .main_slider_s > .embla-inner > .embla__container {
        scroll-snap-type: x mandatory;
    }
    .main_slider_f > .embla-inner > .embla__container > *,
    .main_slider_s > .embla-inner > .embla__container > * {
        flex: 0 0 280px;
        scroll-snap-align: start;
        padding-right: 15px;
    }
    /* Hide arrows on mobile (Embla not initialized, but safety net) */
    .main_slider_f .slick-prev,
    .main_slider_f .slick-next,
    .main_slider_s .slick-prev,
    .main_slider_s .slick-next {
        display: none !important;
    }
}

/* ============================================================
   Providers slider  (.providers_slider)
   Desktop: 6 · ≤1220px: 5 · ≤1020px: 4 · ≤759px: native scroll
   ============================================================ */
.providers_slider > .embla-inner {
    padding: 20px 5px;         /* Was .providers_slider .slick-list { padding: 20px 5px } */
}

.providers_slider > .embla-inner > .embla__container > * {
    flex: 0 0 calc(100% / 6);
}

@media (max-width: 1220px) {
    .providers_slider > .embla-inner > .embla__container > * {
        flex: 0 0 calc(100% / 5);
    }
}

@media (max-width: 1020px) {
    .providers_slider > .embla-inner > .embla__container > * {
        flex: 0 0 calc(100% / 4);
    }
}

@media (max-width: 759px) {
    .providers_slider > .embla-inner {
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 0 15px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .providers_slider > .embla-inner::-webkit-scrollbar { display: none; }
    .providers_slider > .embla-inner > .embla__container {
        scroll-snap-type: x mandatory;
    }
    .providers_slider > .embla-inner > .embla__container > * {
        flex: 0 0 180px;
        scroll-snap-align: start;
        padding-right: 15px;
    }
    .providers_slider .slick-prev,
    .providers_slider .slick-next {
        display: none !important;
    }
}

/* ============================================================
   Slot article slider  (.slot_article_slider)
   Desktop: 1 slide at a time
   Tablet ≤1020px: peek of adjacent slide (was slick centerMode + centerPadding:15px)
   ============================================================ */
.slot_article_slider > .embla-inner > .embla__container > * {
    flex: 0 0 100%;
}

@media (max-width: 1020px) {
    /* Peek at the next slide — mirror of slick centerMode: true, centerPadding: 15px */
    .slot_article_slider > .embla-inner {
        overflow: visible;   /* Overflow visible so the peeking slide shows */
    }
    .slot_article_slider > .embla-inner > .embla__container > * {
        flex: 0 0 calc(100% - 30px);  /* ~85% → shows ~15px of next slide each side */
        margin-right: 15px;
    }
    .slot_article_slider .slick-prev,
    .slot_article_slider .slick-next {
        display: none !important;
    }
}

/* Mobile ≤759px: Embla IS initialized for .slot_article_slider (photo gallery needs
   swipe/drag on touch devices). Peek effect — active slide ~75% width, neighbours
   visible on both sides. Buttons hidden — finger swipe only. */
@media (max-width: 759px) {
    .slot_article_slider > .embla-inner {
        overflow: visible;           /* Allow peek slides to show outside viewport */
    }
    .slot_article_slider > .embla-inner > .embla__container > * {
        flex: 0 0 calc(100% - 70px); /* ~75% width → ~35px peek on each side */
        margin-right: 10px;
        padding-right: 0;
    }
    .slot_article_slider .slick-prev,
    .slot_article_slider .slick-next {
        display: none !important;   /* No arrows on mobile — finger swipe only */
    }
}