/*
 * Loop Carousel — stili del blocco bricks/loop-carousel.
 *
 * Integra Swiper (caricato da bricks-swiper-style) con il sistema di token
 * del core. I figli diretti del wrapper sono tnd-loop-item: non hanno la
 * classe swiper-slide di default, quindi script.js la inietta a runtime
 * prima di inizializzare Swiper. Il CSS garantisce che si comportino
 * correttamente come slide flex.
 *
 * Le frecce e la paginazione usano i colori di default Swiper, ridefinibili
 * con i token brand del tema via CSS variables standard di Swiper 8+
 * (--swiper-navigation-color, --swiper-pagination-color).
 */

.tnd-loop-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.tnd-loop-carousel__swiper {
    overflow: visible;
}

/* tnd-loop-item usato come slide: non deve restringersi nel flex container
   di Swiper. La classe swiper-slide viene aggiunta via JS (script.js),
   ma questa regola è un failsafe per i figli diretti del wrapper. */
.tnd-loop-carousel .swiper-wrapper > * {
    flex-shrink: 0;
    height: auto;
}

/* Gap laterale per navigation arrows: evita che le frecce sovrappongano
   le slide. Opzionale — le frecce sono posizionate absolute da Swiper. */
.tnd-loop-carousel--has-navigation {
    padding-inline: 40px;
}

/* Peek padding per breakpoint: quando slidesPerView è decimale, il PHP inietta
   --tnd-lc-peek-{sm|md|lg|xl} nell'inline style del container. Il padding
   viene applicato su .tnd-loop-carousel__swiper: Swiper misura clientWidth
   comprensivo di padding, quindi le slide mantengono le stesse dimensioni ma
   il wrapper (posizionato dopo il padding sinistro) è inset dal bordo. Le slide
   che sforano a destra escono dall'elemento swiper (overflow: visible) e vengono
   tagliate dall'overflow: hidden del container esterno. */
@media (max-width: 767px) {
    .tnd-loop-carousel .tnd-loop-carousel__swiper { padding-inline: var(--tnd-lc-peek-sm, 0px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .tnd-loop-carousel .tnd-loop-carousel__swiper { padding-inline: var(--tnd-lc-peek-md, 0px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .tnd-loop-carousel .tnd-loop-carousel__swiper { padding-inline: var(--tnd-lc-peek-lg, 0px); }
}
@media (min-width: 1280px) {
    .tnd-loop-carousel .tnd-loop-carousel__swiper { padding-inline: var(--tnd-lc-peek-xl, 0px); }
}

/* Paginazione: spazio inferiore per i dots. */
.tnd-loop-carousel .tnd-loop-carousel__pagination {
    margin-top: var(--spacing-sm, 8px);
    position: relative;
}

/* Fade effect: il CSS built-in di Swiper usa .swiper-slide come selettore,
   ma il slideClass del blocco è .tnd-loop-item — le regole native non fanno
   match. Questa replica garantisce transition e pointer-events corretti. */
.swiper-fade .tnd-loop-item {
    pointer-events: none;
    transition-property: opacity;
}
.swiper-fade .tnd-loop-item.swiper-slide-active {
    pointer-events: auto;
}