/* ═══════════════════════════════════════════════════════════════════════
   Blocco "Sezioni numerate" (page builder, tutti i siti, dalla 1.3.37)
   Partial: views/partials/_sezioni_numerate.twig. Colori dal pannello,
   facoltativi: --sn-accento (numeri, icone, pastiglie; spento = l'accento
   del sito), --sn-scuro (fondo scuro e barra; spento = blu notte #1b2a57),
   --sn-chiaro (fondo chiaro; spento = bianco).
   ═══════════════════════════════════════════════════════════════════════ */

.sn {
    --sn-a: var(--sn-accento, var(--color-accent, #b8953e));
    /* fisso come «Schede su fondo scuro» e «Fascia prezzo»: col colore principale
       del sito, se chiaro, testi bianchi e titoli diventavano illeggibili (1,67:1) */
    --sn-s: var(--sn-scuro, #1b2a57);
    --sn-c: var(--sn-chiaro, #ffffff);
    --sn-riga: rgba(15, 23, 42, .1);
    color: #1f2937;
}
.sn-testa {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) 24px 0;
}
.sn .sn-titolo-blocco {
    margin: 0;
    padding: 0;
    color: var(--sn-s);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
}

/* ─── La barra con le voci ─── */
.sn-barra {
    margin-top: clamp(16px, 3vw, 28px);
    background: var(--sn-s);
}
.sn-barra-voci {
    display: grid;
    grid-template-columns: repeat(var(--sn-voci, 4), minmax(0, 1fr));
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
}
.sn-barra-voci li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.sn-barra-voci a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
}
.sn-barra-voci a:hover,
.sn-barra-voci a:focus-visible {
    color: var(--sn-a);
    /* app.css dà a «nav a:hover» il fondo del colore primario (!important): qui no */
    background-color: rgba(255, 255, 255, .06) !important;
}
.sn-barra-numero {
    color: var(--sn-a);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ─── Le sezioni ─── */
.sn-sezione {
    scroll-margin-top: 96px; /* l'intestazione fissa non copre il titolo */
    padding: clamp(40px, 6vw, 80px) 0;
    border-bottom: 1px solid var(--sn-riga);
    background: var(--sn-c);
}
.sn-sezione--scuro {
    --sn-riga: rgba(255, 255, 255, .18);
    background: var(--sn-s);
    color: #fff;
}
.sn-dentro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.sn-sinistra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
    align-items: start;
}
.sn-numero {
    padding-right: clamp(16px, 2.5vw, 32px);
    border-right: 2px solid var(--sn-riga);
    color: var(--sn-a);
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.sn-corpo { min-width: 0; overflow-wrap: anywhere; }
.sn .sn-titolo {
    margin: 0;
    padding: 0; /* app.css dà 10px sopra e sotto a tutti i titoli */
    color: var(--sn-s);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.sn-sezione--scuro .sn-titolo { color: #fff; }
.sn-pastiglia {
    display: inline-block;
    margin: 14px 0 0;
    padding: .3rem .8rem;
    border: 1.5px solid var(--sn-a);
    border-radius: 999px;
    color: inherit;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}
.sn-sezione:not(.sn-sezione--scuro) .sn-pastiglia { color: var(--sn-s); }
.sn-testo {
    max-width: 34em;
    margin: 14px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    opacity: .85;
}
.sn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
.sn-sezione:not(.sn-sezione--scuro) .sn-link { color: var(--sn-s); }
/* sul fondo scuro il link resta bianco anche al passaggio (app.css: a:hover = --color-primary-hover) */
.sn-sezione--scuro .sn-link:hover,
.sn-sezione--scuro .sn-link:focus-visible { color: #fff; }
.sn-link svg { width: 18px; height: 18px; color: var(--sn-a); transition: transform .15s ease; }
.sn-link:hover svg { transform: translateX(3px); }

/* ─── A destra ─── */
.sn-destra { min-width: 0; overflow-wrap: break-word; }
.sn-figura { margin: 0; }
.sn-figura img {
    display: block;
    width: 100%;
    max-height: 340px;
    height: auto;
    object-fit: contain;
}
.sn-nota {
    margin: 12px 0 0;
    font-size: .8rem;
    line-height: 1.5;
    opacity: .7;
}
.sn-icona { display: inline-flex; color: var(--sn-a); }
.sn-icona svg { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
.sn-el-titolo { margin: 0; font-weight: 700; line-height: 1.3; }
.sn-el-testo { margin: 4px 0 0; font-size: .9rem; line-height: 1.5; opacity: .8; }

/* Punti con icona, affiancati con una linea fra l'uno e l'altro */
.sn-punti {
    display: grid;
    grid-template-columns: repeat(var(--sn-n, 3), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.sn-punto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px clamp(12px, 2vw, 24px);
    text-align: center;
}
.sn-punto + .sn-punto { border-left: 1px solid var(--sn-riga); }
.sn-punto .sn-el-testo { margin-top: 0; }
.sn-punto-img { width: 48px; height: 48px; object-fit: contain; }

/* Immagini affiancate con titolo e testo sotto */
.sn-immagini {
    display: grid;
    grid-template-columns: repeat(var(--sn-n, 2), minmax(0, 1fr));
    gap: clamp(16px, 3vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sn-immagine img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}
.sn-immagine .sn-icona { margin-bottom: 8px; }
.sn-immagine + .sn-immagine { padding-left: clamp(16px, 3vw, 32px); border-left: 1px solid var(--sn-riga); }

/* Righe: segno, titolo, testo e pastiglia, una linea fra l'una e l'altra */
.sn-righe {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sn-riga);
    list-style: none;
}
.sn-riga {
    display: grid;
    grid-template-columns: 56px minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, auto);
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--sn-riga);
}
.sn-riga .sn-el-testo { margin: 0; }
.sn-riga-segno { display: flex; align-items: center; justify-content: center; }
.sn-riga-segno img { max-width: 56px; max-height: 48px; object-fit: contain; }
.sn-pastiglia--piccola { margin: 0; max-width: 14em; text-align: center; }

/* Quattro punti o quattro immagini nella colonna di destra: fra il tablet e il
   computer stretto le colonne restano sotto i 120 px (le parole lunghe come
   «Videosorveglianza» uscivano sulle linee): due per riga */
@media (min-width: 641px) and (max-width: 1180px) {
    .sn-punti--n4,
    .sn-immagini--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .sn-punti--n4 .sn-punto:nth-child(3) { border-left: 0; }
    .sn-immagini--n4 .sn-immagine:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ─── Tablet e telefono: tutto in colonna ─── */
@media (max-width: 900px) {
    .sn-dentro { grid-template-columns: minmax(0, 1fr); }
    .sn-barra-voci { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 8px; }
    .sn-barra-voci li + li { border-left: 0; }
    .sn-barra-voci li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .18); }
    .sn-barra-voci li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 640px) {
    .sn-numero { font-size: 3.2rem; }
    .sn-punti,
    .sn-immagini { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sn-punto,
    .sn-immagine { padding: 16px 0; }
    /* il punto in riga: icona a sinistra, titolo e testo accanto */
    .sn-punto {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 2px;
        align-items: start;
        text-align: left;
    }
    .sn-punto > :not(.sn-icona):not(.sn-punto-img) { grid-column: 2; }
    .sn-punto > .sn-icona,
    .sn-punto > .sn-punto-img { grid-column: 1; grid-row: 1 / span 2; }
    .sn-punto + .sn-punto,
    .sn-immagine + .sn-immagine { padding-left: 0; border-left: 0; border-top: 1px solid var(--sn-riga); }
    .sn-riga { grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; }
    .sn-riga-segno { grid-row: 1 / span 3; align-self: start; }
    .sn-riga-segno img { max-width: 100%; }
    .sn-riga > .sn-pastiglia--piccola { justify-self: start; margin-top: 6px; }
}