/* Karuzela produktów (slick) — scope: .leki-carousel na grupie z karuzelą.
   Ładowane site-wide przez $jt_css_files (jt-functions.php), bo ticss grupy
   opakowującej blok ACF query-carousel nie renderuje stylu. */

/* równa wysokość slajdów */
.leki-carousel .slick-track { display: flex !important; }
.leki-carousel .slick-slide { height: auto !important; }

/* odstęp między slajdami (10px = 5px z każdej strony) */
.leki-carousel .slick-slide {
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
}
.leki-carousel .slick-slide > .wp-block-group { height: 100%; }
/* tylko "karta" z ramką rozciąga się na pełną wysokość (Moduł 23);
   zwykłe kolumny układu (np. wiersz ze zdjęciem w Moduł 25) zostawiamy w spokoju */
.leki-carousel .slick-slide .wp-block-columns.has-border-color { height: 100%; }

/* karta w slajdzie max 500px, wyśrodkowana (gdy slajd jest szerszy) */
.leki-carousel .slick-slide > .wp-block-group {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* "rynna" po bokach — slajdy nie dochodzą do krawędzi, jest miejsce na strzałki.
   Dzięki temu strzałki nie nachodzą na slajdy, a ostatni slajd nie jest ucięty. */
.leki-carousel .wp-block-post-template {
    padding-left: 50px;
    padding-right: 50px;
}
/* nagłówek karuzeli (kolumny nad pętlą) wyrównany do pierwszego slajdu,
   a nie do strzałki w lewej rynnie — to samo wcięcie 50px co slajdy */
.leki-carousel > .wp-block-columns {
    padding-left: 50px;
    padding-right: 50px;
}
/* strzałki w rynnie (poza obszarem slajdów), zawsze widoczne */
.leki-carousel .slick-prev { left: 5px !important; z-index: 5; }
.leki-carousel .slick-next { right: 5px !important; z-index: 5; }

/* strzałki — własna ikona (okrągły ciemny przycisk ze strzałką) */
.leki-carousel .slick-prev::before,
.leki-carousel .slick-next::before {
    content: "" !important;
    display: block;
    width: 33px;
    height: 33px;
    opacity: 1 !important;
    background: url(/wp-content/themes/lemmony/jt/assets/icons/carousel-arrow.svg) center / contain no-repeat !important;
}
.leki-carousel .slick-prev::before { transform: rotate(180deg); }

/* paginacja — kropki bliżej siebie, wypełnione, aktywna jako pill.
   Ujemne marginesy kasują "rynnę" 50px z post-template, żeby kropki były
   wyśrodkowane względem CAŁEGO modułu, a nie wciętego obszaru slajdów. */
.leki-carousel .slick-dots {
    position: relative;              /* kontekst dla nakładkowego pilla */
    display: flex !important;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin-top: 12px;
    /* rynna jest symetryczna (50px z obu stron), więc content-box już jest
       wyśrodkowany względem modułu — bez ujemnych marginesów (te dawały offset -50px). */
    margin-left: 0;
    margin-right: 0;
}
.leki-carousel .slick-dots li { margin: 0; width: auto; height: auto; }
.leki-carousel .slick-dots li button {
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #b9d2dd !important;  /* wszystkie kropki jasne kółka */
    font-size: 0 !important;          /* ukryj numerki 1–10 */
}
.leki-carousel .slick-dots li button::before { display: none !important; }

/* NAKŁADKOWY PILL — jeden ciemny pasek nad kropkami, pozycjonowany przez
   carousel-dots.js (left/width = od pierwszej do ostatniej widocznej kropki).
   Płynny transition na left/width = pasek fizycznie przesuwa się i rozciąga,
   wypełniając przerwy, zawsze w stronę przewijania. */
.leki-carousel .slick-dots .dots-pill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
    background: #1d5070;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;                       /* nad jasnymi kropkami */
    transition: left 0.3s ease, width 0.3s ease;
}

/* === PODGLĄD W EDYTORZE ============================================
   W edytorze slick się NIE inicjuje, więc post-template renderuje kafle
   jeden pod drugim na pełną szerokość (ogromne). Pokazujemy je jako
   poziomy, przewijalny rząd — tylko w edytorze (.editor-styles-wrapper).
   Na froncie te reguły są nieaktywne (brak .editor-styles-wrapper). */
.editor-styles-wrapper .leki-carousel .wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.editor-styles-wrapper .leki-carousel .wp-block-post-template > .wp-block-post,
.editor-styles-wrapper .leki-carousel .wp-block-post-template > li {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    margin: 0 !important;
}