/* ==========================================================================
   Grid Icon — variante con divisori verticali (.grid_icon--dividers, attivata
   dal campo ACF "divider_lines") e rendering del sub-field "value".

   Riferimento prototipo pagine-centri-tls, sezione 1 "Barra logistica":
     .tls-logistics-bar__col { padding: 0.75rem 1.5rem; }
     .tls-logistics-bar__col + .tls-logistics-bar__col { border-left: 1px solid var(--tls-border); }
     @media (max-width: 991.98px) { .tls-logistics-bar__col + .tls-logistics-bar__col { border-left: none; } }
   Token del tema: var(--bs-border-color) al posto di --tls-border,
   var(--bs-secondary-color) al posto di #555555.

   Tutto scoped su .grid_icon--dividers / .grid_icon__*: senza "divider_lines"
   attivo il blocco non riceve queste classi (e resta sul carosello Slick
   `data-carousel`), quindi il rendering storico dello shop non cambia.
   ========================================================================== */

/* --- Valore (sub-field "value", prototipo .tls-logistics-bar__val) --- */

.grid_icon__value {
    font-weight: 300;
    color: var(--bs-secondary-color);
    line-height: 1.35;
}

/* ==========================================================================
   DIVISORI — la variante con divisori è una griglia statica (vedi nota nel
   template), quindi le colonne possono andare a capo come nel prototipo.
   Colonne del template: .col-12 .col-sm-6 .col-md-3 →
     - da 768px: 4 colonne per riga → linea su tutte tranne la prima di riga
       (1°, 5°, 9° …): se gli item sono più di 4 la riga che si crea non parte
       mai con un divisore;
     - 768px–991.98px: linea solo fra le coppie della stessa riga (mai
       sull'item che apre la riga, sia con 4 in linea sia con 2 per riga —
       es. .col-md-6 come nel prototipo);
     - sotto i 768px: nessuna linea verticale (colonne a 2 per riga da 576px,
       impilate sotto).
   Se cambiasse il numero di colonne per riga va allineato il modulo :nth-child
   della regola desktop (4n+1).
   ========================================================================== */

@media (min-width: 768px) {

    /* azzera i gutter negativi del .row: gli spazi interni sono solo il
       padding delle colonne, come il "row g-0" del prototipo */
    .grid_icon--dividers .row {
        --bs-gutter-x: 0;
    }

    /* respiro orizzontale comune (prototipo: padding 0.75rem 1.5rem) */
    .grid_icon--dividers .row > .grid_icon__item {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Tablet 768px–991.98px: linea solo fra le colonne della stessa coppia, mai su
   quella che apre la riga (primo/ultimo item di riga senza divisore). */
@media (min-width: 768px) and (max-width: 991.98px) {

    .grid_icon--dividers .row > .grid_icon__item:nth-child(even) {
        border-left: 1px solid var(--bs-border-color);
    }
}

/* Desktop da 992px: linea su ogni colonna tranne la prima di riga. */
@media (min-width: 992px) {

    .grid_icon--dividers .row > .grid_icon__item:not(:nth-child(4n+1)) {
        border-left: 1px solid var(--bs-border-color);
    }
}