/*
 * 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
 * globalmente dal tema via CSS variables standard di Swiper 8+
 * (--swiper-navigation-color, --swiper-pagination-color), oppure per-istanza
 * dai campi ACF del blocco (loop_carousel_nav_color_*/pagination_color_*),
 * che iniettano le stesse variabili nello style inline del wrapper.
 */

.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/la barra. */
.tnd-loop-carousel .tnd-loop-carousel__pagination {
    margin-top: var(--spacing-sm, 8px);
    position: relative;
}

/* Frecce prev/next FUORI da .swiper (loop_carousel_nav_position = above/below,
   template.php): riga flex propria, allineabile. Le due regole sotto
   resettano il posizionamento assoluto che Swiper applica di serie a
   .swiper-button-prev/-next (pensato per stare SOPRA il carosello) — qui
   stanno nel flusso normale della riga. */
.tnd-loop-carousel__nav-row {
    align-items: center;
    display: flex;
    gap: var(--spacing-sm, 8px);
}
.tnd-loop-carousel__nav-row--above {
    margin-bottom: 24px;
}
.tnd-loop-carousel__nav-row--below {
    margin-top: 24px;
}
.tnd-loop-carousel__nav-row--left {
    justify-content: flex-start;
}
.tnd-loop-carousel__nav-row--center {
    justify-content: center;
}
.tnd-loop-carousel__nav-row--right {
    justify-content: flex-end;
}
.tnd-loop-carousel__nav-row .swiper-button-prev,
.tnd-loop-carousel__nav-row .swiper-button-next {
    left: auto;
    margin-top: 0;
    position: static;
    right: auto;
    top: auto;
    transform: none;
}

/* Frecce in basso + paginazione attiva (template.php, $pagination_in_nav_row):
   la paginazione entra come primo elemento della riga invece che dentro
   .swiper. flex:1 le dà lo spazio residuo della riga (necessario soprattutto
   per lo stile "barra di progresso", che senza una larghezza esplicita
   collasserebbe a 0 in un flex item senza contenuto intrinseco); margin-top
   azzerato per non sommarsi al margin-top della riga stessa
   (--nav-row--below). justify-content della riga (--left/--center/--right)
   continua a valere sul gruppo intero paginazione+frecce, non solo le frecce. */
.tnd-loop-carousel__nav-row .tnd-loop-carousel__pagination {
    flex: 1;
    margin-top: 0;
    min-width: 0;
}

/* Sfondo frecce (loop_carousel_nav_bg_type, template.php inietta
   --tnd-lc-nav-bg nello style inline del wrapper). Nessuna var = trasparente,
   comportamento di sempre (solo icona, nessuno sfondo). */
.tnd-loop-carousel .swiper-button-prev,
.tnd-loop-carousel .swiper-button-next {
    background-color: var(--tnd-lc-nav-bg, transparent);
}

/* Icona personalizzata (loop_carousel_nav_icon, template.php): quando presente,
   script.js passa addIcons:false a Swiper cosi' non inietta la propria SVG nel
   pulsante. Dimensione = --swiper-navigation-size (lato del pulsante, stesso
   contenitore quadrato dell'SVG nativa Swiper — vedi navigation.css `svg {
   width:100%; height:100%; object-fit:contain }`): chi sceglie una
   dimensione frecce (loop_carousel_nav_size) la ottiene anche sull'icona
   personalizzata, senza doverla ricalcolare a mano. object-fit:contain
   evita distorsioni se l'immagine caricata non è quadrata. Il pulsante
   "prev" specchia orizzontalmente l'immagine "next" caricata dall'editor —
   vedi istruzioni del campo ACF. */
.tnd-loop-carousel__nav-icon {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}
.tnd-loop-carousel__prev .tnd-loop-carousel__nav-icon {
    transform: scaleX(-1);
}

/* 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;
}