/* =============================================================================
   SINGLE: CASE STUDY
   ============================================================================= */

.cs-single {
    width:      100%;
    overflow-x: hidden; /* rete di sicurezza: evita la scrollbar orizzontale
       transitoria mentre la Sezione 2 (pin GSAP) "assesta" l'altezza del
       documento subito dopo il caricamento dei font */
}

/* ── Hero / Titolo ───────────────────────────────────────────────────────────── */

.cs-single__hero {
    position:        relative;
    display:         flex;
    flex-direction:  row;
    justify-content: flex-end;
    align-items:     flex-end;
    align-self:      stretch;
    gap:             var(--spacing-80, 80px);
    padding:         190px var(--spacing-40, 40px) var(--spacing-40, 40px) var(--spacing-40, 40px);
    min-height: 90vh;
}

/* Breadcrumb (Figma mockup, node 2041:16614) — stesso stile/testo di
   quella degli articoli (.mm-post__breadcrumb in single-post.css),
   ripetuta qui identica perche' questo template non carica quel file.
   Ancorata in alto alla stessa altezza del titolo delle altre pagine con
   header fisso (header + spacing-40). */
.cs-single__breadcrumb {
    position:    absolute;
    top:         160px;
    left:        var(--spacing-40, 40px);
    right:       var(--spacing-40, 40px);
    display:        flex;
    align-items:    center;
    flex-wrap:      nowrap;
    gap:            var(--spacing-8, 8px);
    color:          var(--colori-pieni-blu-300, #616B7D);
    font-family:    var(--font-body);
    font-size:      var(--body-sm-size);
    line-height:    var(--body-sm-line);
}

.cs-single__breadcrumb a,
.cs-single__breadcrumb > span[aria-hidden] {
    flex-shrink: 0;
}

.cs-single__breadcrumb a {
    color:           inherit;
    text-decoration: none;
    display:         inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size 0.6s var(--mm-ease), color 0.2s ease;
}

.cs-single__breadcrumb a:hover {
    color:           var(--colori-pieni-blu-default);
    background-size: 100% 1.5px;
}

.cs-single__breadcrumb-current {
    min-width:     0;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 1081px) {
    .cs-single__breadcrumb-current {
        max-width: 40ch;
    }
}

/* Colonna sinistra (titolo): 80% dello spazio disponibile. Contiene il
   titolo (h1) e, sotto, l'elenco etichette delle soluzioni collegate. */
.cs-single__title--col {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-24, 24px);
    flex:           0 1 75%;
    min-width:      0;
}

/* Elenco etichette soluzioni collegate al caso studio (componente
   .mm-tag, Figma Sito-DS node 735:601 / mockup node 2032-11680). */
.cs-single__hero-tags {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--spacing-8, 8px);
    margin:      0;
    padding:     0;
    list-style:  none;
}

.cs-single__hero-tags li {
    display: block;
}

/* Colonna destra: dati cliente (Cliente/Mercato/Dimensioni/Paese),
   spostati qui dalla sezione "Metodo e Performance" — 20% dello spazio,
   stesso stile della lista dati gia' usato altrove (label maiuscolo +
   valore, riga con bordo inferiore). */
.cs-single__hero-dati {
    display:        flex;
    flex-direction: column;
    flex:           0 0 25%;
    gap:            var(--spacing-24, 24px);
    min-width:      0;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.cs-single__hero-dato {
    display:         flex;
    flex-direction:  row;
    gap:             var(--spacing-8, 8px);
    padding-bottom:  var(--spacing-8, 8px);
    border-bottom:   1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.cs-single__hero-dato-label {
    /* Larghezza fissa: tutti i valori a destra partono dallo stesso
       punto, indipendentemente dalla lunghezza della label
       (CLIENTE/SETTORE/DIMENSIONI/PAESE). */
    flex:           0 0 96px;
    width:          96px;
    color:          var(--colori-pieni-blu-300, #616B7D);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    align-items:    center;
    display:        flex;
}

.cs-single__hero-dato-value {
    color:          var(--colori-pieni-blu-default);
    letter-spacing: 0;
}



.cs-single__title {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--spacing-40, 40px);
    font-family:    var(--font-heading), sans-serif;
    font-weight:    var(--weight-regular);
    font-size:      var(--h1-size);
    line-height:    var(--h1-line);
    letter-spacing: -0.4px;
    color:          var(--colori-pieni-blu-default);
    margin:         0;
}

/* Numero in evidenza ("+167%"): stesse dimensioni esatte del Figma —
   numero in number-large (var(--num-lg-size), 224px su desktop = "Numbers
   Large"), prefisso/suffisso in number-medium (var(--num-md-size), 112px
   su desktop = "Numbers Medium"). Font JetBrains Mono (var(--font-mono)).
   line-height:1 forzato per allinearli sulla stessa baseline nonostante le
   due dimensioni diverse — stessa tecnica gia' usata da .mm-cs-feature__stat
   nella card Caso Studio (components.css), stesso motivo li' spiegato. */
.cs-single__title-stat {
    display:     inline-flex;
    align-items: baseline;
    gap:         var(--spacing-8, 8px);
    font-family: var(--font-mono);
    color:       var(--colori-pieni-blu-default);
}

.cs-single__title-stat .number-large,
.cs-single__title-stat .number-medium {
    line-height: 1;
}

/* Descrizione: NON eredita piu' la dimensione H1 del titolo — nel Figma e'
   uno stile a parte (Lota Grotesque/H2/as-h4: stessa dimensione del corpo
   H4 del design system, var(--h4-size)/var(--h4-line) — 48px/56px su
   desktop), volutamente piu' piccolo del numero in evidenza accanto. */
.cs-single__title-desc {
    font-family:  var(--font-heading), sans-serif;
    font-weight:  var(--weight-regular);
    font-size:    var(--h4-size);
    line-height:  var(--h4-line);
    color:        inherit;
}

/* ── Correlati ───────────────────────────────────────────────────────────────── */

.cs-single__related {
    width: 100%;
    margin-top: var(--spacing-80);
}


.cs-single__related-title {
    font-family: var(--font-heading), sans-serif;
    font-weight: var(--weight-regular);
    font-size: var(--h2-size);
    line-height: var(--h2-line);
    letter-spacing: -0.4px;
    color: var(--colori-pieni-blu-default);
    margin: 0;
}

/* ── Sezione 1: Immagine / Video ─────────────────────────────────────────────── */

.cs-single__section-image {
    display:       flex;
    width:         100%;
    align-self:    stretch;
    height:        800px;
    border-radius: var(--spacing-16, 16px);
    padding:       0 var(--spacing-40, 40px) var(--spacing-80, 80px) var(--spacing-40, 40px);
    box-sizing:    border-box;
    overflow:      hidden;
    /* L'immagine e' molto piu' alta del riquadro visibile e all'inizio si
       trova quasi del tutto fuori dallo schermo (sopra al viewport): in
       questo caso Chrome a volte non disegna correttamente l'arrotondamento
       degli angoli finche' l'elemento non viene promosso a un livello di
       rendering separato — cosa che succede "per caso" quando la pagina
       scrolla e la sezione entra meglio in vista. Forziamo qui quel livello
       di rendering fin da subito, cosi' il bordo e' arrotondato fin dal
       primo istante, in ogni condizione di scroll. */
    transform:     translateZ(0);
    will-change:   transform;
    isolation:     isolate;
}

.cs-single__section-image img,
.cs-single__section-image video {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: var(--spacing-16, 16px);
    display:       block;
}

/* ── Sezione 3: Immagine / Video (fondo pagina) ──────────────────────────────── */
/* Struttura a due livelli come da specifica Figma: una sezione esterna con
   padding (80px sopra/sotto, 40px ai lati) che contiene il riquadro vero e
   proprio dell'immagine/video, alto 800px con angoli arrotondati 16px. */

.cs-single__section-image-3 {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    align-self:      stretch;
    width:           100%;
    padding:         var(--spacing-80, 80px) var(--spacing-40, 40px);
    box-sizing:      border-box;
}

.cs-single__section-image-3-inner {
    width:           100%;
    height:          800px;
    align-self:      stretch;
    border-radius:   var(--spacing-16, 16px);
    overflow:        hidden;
    /* Stessa correzione della Sezione 1: forza un livello di rendering
       separato cosi' l'arrotondamento degli angoli e' corretto fin da
       subito, indipendentemente dalla posizione di scroll. */
    transform:       translateZ(0);
    will-change:     transform;
    isolation:       isolate;
}

.cs-single__section-image-3-inner img,
.cs-single__section-image-3-inner video {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: var(--spacing-16, 16px);
    display:       block;
}

/* ── Sezione 2: Galleria & Testo ─────────────────────────────────────────────── */

.cs-single__body-section {
    display:    flex;
    align-items: flex-start;
    gap:        var(--spacing-40, 40px);
    width:      100%;
    padding:    0 var(--spacing-40, 40px);
    box-sizing: border-box;
    position:   relative; /* ancora per le mascherine d'angolo del taglio in fondo alla Galleria */
}

@media (min-width: 1081px) {
    /* Frame di altezza pari alla viewport per il pin dello scroll (vedi
       cs-single-scroll.js): usare vh via CSS invece di un'altezza fissata
       da JS fa si' che un ridimensionamento della finestra si rifletta da
       solo, senza bisogno di alcun intervento in JavaScript. */
    .cs-single__body-section {
        height:   100vh;
        overflow: hidden;
    }
}

/* Quando il testo finisce e la sezione e' bloccata, l'immagine (o la coppia)
   che si trova esattamente sul bordo inferiore del frame viene tagliata
   dall'overflow:hidden della sezione, mostrando uno spigolo netto invece di
   un angolo arrotondato. Queste mascherine (colore = sfondo pagina, con un
   radial-gradient che "morde" un quarto di cerchio da 16px) ricreano
   visivamente l'arrotondamento esattamente nel punto del taglio, senza
   toccare l'overflow/border-radius della sezione (che aveva causato un bug
   di rendering sui bordi esterni) e senza clippare le immagini stesse (che
   le tagliava anche a meta' scroll). Sono nascoste di default e diventano
   visibili solo negli ultimissimi istanti dello scroll, quando il testo e'
   davvero arrivato in fondo (classe aggiunta via JS in cs-single-scroll.js). */
.cs-single__gallery-cut-mask {
    position:   absolute;
    width:      var(--spacing-16, 16px);
    height:     var(--spacing-16, 16px);
    pointer-events: none;
    opacity:    0;
    z-index:    2;
}

.cs-single__body-section--gallery-cut .cs-single__gallery-cut-mask {
    opacity: 1;
}

.cs-single__gallery-cut-mask--left {
    background: radial-gradient( circle at 100% 0%, transparent var(--spacing-16, 16px), var(--colori-pieni-bianco-default, #F0EEEA) var(--spacing-16, 16px) );
}

.cs-single__gallery-cut-mask--right {
    background: radial-gradient( circle at 0% 0%, transparent var(--spacing-16, 16px), var(--colori-pieni-bianco-default, #F0EEEA) var(--spacing-16, 16px) );
}

/* ── Colonna Galleria ─────────────────────────────────────────────────────────── */

.cs-single__gallery {
    display:      flex;
    flex-wrap:    wrap;
    flex:         1 0 0;
    min-width:    0;
    gap:          var(--spacing-16, 16px);
}

.cs-single__gallery-item {
    border-radius: var(--spacing-16, 16px);
    overflow:      hidden;
}

.cs-single__gallery-item img {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    cover;
}

/* 1. Immagine grande verticale — piena larghezza, spezza la riga */
.cs-single__gallery-item--vert {
    width:  100%;
    height: 800px;
}

/* 2. Coppia di immagini affiancate — riga dedicata, meta' larghezza ciascuna */
.cs-single__gallery-pair {
    display: flex;
    width:   100%;
    gap:     var(--spacing-16, 16px);
}

.cs-single__gallery-item--double {
    flex:   1 0 0;
    min-width: 0;
    height: 400px;
}

/* 3. Immagine grande orizzontale — piena larghezza, spezza la riga */
.cs-single__gallery-item--horiz {
    width:  100%;
    height: 400px;
}

/* 4. Ultima immagine inserita in admin: alta quanto tutto il frame (100vh)
   invece dell'altezza fissa degli altri blocchi. object-fit e' gia' cover
   su .cs-single__gallery-item img, quindi resta invariato. */
.cs-single__gallery-item--last {
    width:  100%;
    height: 100vh;
}

/* Se l'ultima immagine fa parte di una coppia affiancata, evitiamo che il
   flex-stretch di default costringa anche l'altra foto della coppia a
   diventare 100vh: solo quella marcata --last cresce, l'altra resta alla
   sua altezza normale (400px). */
.cs-single__gallery-pair--last {
    align-items: flex-start;
}

/* ── Colonna Testo ────────────────────────────────────────────────────────────── */

.cs-single__testo {
    display:        flex;
    flex-direction: column;
    flex:           1 0 0;
    min-width:      0;
    gap:            var(--spacing-80, 80px);
}

.cs-single__intro,
.cs-single__blocco-text {
    color:  var(--colori-pieni-blu-300, #616B7D);
    margin: 0;
}

.cs-single__numeri {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-40, 40px);
    width:          100%;
}

.cs-single__numeri-row {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--spacing-16, 16px);
    padding-bottom:  var(--spacing-40, 40px);
    border-bottom:   var(--spacing-1, 1px) solid var(--colori-opacizzati-blu-10);
}

.cs-single__numeri-value {
    display:      inline-flex;
    align-items:  baseline;
    font-family:  var(--font-mono);
    color:        var(--colori-pieni-blu-default);
    white-space:  nowrap;
}

.cs-single__numeri-value .number-small,
.cs-single__numeri-value .number-medium {
    line-height: 1;
}

.cs-single__numeri-label {
    color:         var(--colori-pieni-blu-default);
    text-transform: uppercase;
    text-align:    right;
    /* Se la descrizione e' troppo lunga per il box va a capo (prima nowrap
       la faceva uscire). Il numero resta intero, l'etichetta si restringe. */
    white-space:   normal;
    overflow-wrap: break-word;
    min-width:     0;
    flex:          0 1 auto;
}

.cs-single__numeri-value {
    flex: 0 0 auto;
}

.cs-single__blocco {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
    width:          100%;
}

.cs-single__blocco-title {
    color:  var(--colori-pieni-blu-default);
    margin: 0;
}

.cs-single__blocco-text p {
    margin: 0 0 var(--spacing-16, 16px);
}

.cs-single__blocco-text p:last-child {
    margin-bottom: 0;
}

/* ── Canali attivati ─────────────────────────────────────────────────────────── */

.cs-single__metodo {
    display:         flex;
    justify-content: center;
    width:           100%;
    padding:         80px var(--spacing-40, 40px) var(--spacing-40, 40px) var(--spacing-40, 40px);
}

/* Titolo + testo centrati, senza padding proprio (segue quello della
   sezione, gia' coerente con le altre — 80px sopra/sotto, 40px ai lati). */
.cs-single__metodo-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--spacing-16, 16px);
    flex:           1 0 0;
    min-width:      0;
    padding:        0;
}

section.solution-section.solution-related{
    padding-top: var(--spacing-80, 80px);
}
.cs-single__metodo-title {
    color:  var(--colori-pieni-blu-default);
    margin: 0;
}

.cs-single__metodo-text {
    margin: 0;
    color:  var(--colori-pieni-blu-300, #616B7D);
}

.cs-single__metodo-dati {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-40, 40px);
    width:          100%;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.cs-single__metodo-dato {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--spacing-40, 40px);
    width:           100%;
    padding-bottom:  var(--spacing-8, 8px);
    border-bottom:   1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.cs-single__metodo-dato-label {
    flex:           0 0 160px;
    width:          160px;
    color:          var(--colori-pieni-blu-300, #616B7D);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.cs-single__metodo-dato-value {
    flex:   1 0 0;
    min-width: 0;
    color:  var(--colori-pieni-blu-default);
    letter-spacing: 1.8px;
}

.cs-single__step {
    display:        flex;
    align-items:    flex-start;
    width:          100%;
    padding:        0 var(--spacing-40, 40px) var(--spacing-80, 80px) var(--spacing-40, 40px);
}

.cs-single__step-item {
    flex:         1 0 0;
    min-width:    0;
    padding-top:  calc(var(--spacing-80, 80px) * var(--step-i, 0));
}

.cs-single__step-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-40, 40px);
    border-left:    1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
    padding:        var(--spacing-80, 80px) var(--spacing-40, 40px) var(--spacing-40, 40px);
}

.cs-single__step-title {
    color:  var(--colori-pieni-blu-default);
    margin: 0;
}

.cs-single__step-text {
    margin:         0;
    color:          var(--colori-pieni-blu-300, #616B7D);
    letter-spacing: 1.8px;
}

.cs-single__canali {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--spacing-40, 40px);
    width:          100%;
    padding:        80px var(--spacing-40, 40px) var(--spacing-80, 80px) var(--spacing-40, 40px);
}

/* Banner numeri (Figma Mockup 2562:2513): gradiente blu -> rosso con la
   stessa grana (.mm-bg-grain) di hero/footer, testo bianco, righe
   numero + etichetta separate da una linea sottile. */
.cs-single__banner-wrap {
    width:   100%;
    padding: 0 var(--spacing-40, 40px);
    padding-top: 80px;
}

.cs-single__banner {
    position:       relative;
    isolation:      isolate;
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-80, 80px);
    padding:        var(--spacing-160, 160px);
    border-radius:  var(--mm-radius-xl, 24px);
    overflow:       hidden;
    color:          var(--colori-pieni-bianco-default, #F0EEEA);
    background:     linear-gradient(56deg, var(--colori-pieni-blu-default, #162640) 25%, var(--colori-pieni-rosso-default, #D24A5D) 100%);
}

.cs-single__banner > .mm-bg-grain { z-index: -1; }

.cs-single__banner-text {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
    text-align:     center;
}

.cs-single__banner-title,
.cs-single__banner-desc { margin: 0; }

.cs-single__banner-desc { letter-spacing: 0.05em; }

.cs-single__banner-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-40, 40px);
    width:          100%;
}

.cs-single__banner-row {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--spacing-24, 24px);
    padding-bottom:  var(--spacing-40, 40px);
    border-bottom:   1px solid var(--colori-opacizzati-bianco-10, rgba(240, 238, 234, 0.1));
}

.cs-single__banner-number {
    display:     flex;
    align-items: flex-end;
    margin:      0;
}

.cs-single__banner-label {
    margin:         0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align:     right;
}

/* Variante "contatti": stesso banner, padding laterale piu' largo e
   bottone a tutta larghezza (Figma 2549:20895). */
.cs-single__banner--cta {
    gap:     var(--spacing-40, 40px);
    padding: var(--spacing-160, 160px) var(--spacing-320, 320px);
}

.cs-single__banner-btn { width: 100%; }

@media (max-width: 1080px) {
    .cs-single__banner       { padding: var(--spacing-80, 80px) var(--spacing-40, 40px); gap: var(--spacing-40, 40px); }
    .cs-single__banner--cta  { padding: var(--spacing-80, 80px) var(--spacing-80, 80px); }
    .cs-single__banner-row   { padding-bottom: var(--spacing-40, 40px); }
}

@media (max-width: 767px) {
    .cs-single__banner-wrap  { padding-left: var(--spacing-20, 20px); padding-right: var(--spacing-20, 20px); }
    .cs-single__banner,
    .cs-single__banner--cta  { padding: var(--spacing-40, 40px); }
    .cs-single__banner-row   { flex-direction: column; align-items: flex-start; gap: var(--spacing-16, 16px); }
    .cs-single__banner-label { text-align: left; }
}

/* Recensione: solo spaziatura del contenitore, la card e' il componente
   .mm-review (components.css) invariato, come in home. */
.cs-single__review {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-40, 40px);
    width:   100%;
    padding: 0 var(--spacing-40, 40px) var(--spacing-80, 80px) var(--spacing-40, 40px);
}

.cs-single__canali-title {
    color:  var(--colori-pieni-blu-default);
    margin: 0;
    width:  100%;
}

.cs-single__canali-list {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-end;
    width:           100%;
    padding-left:    280px;
    margin:          0;
    list-style:      none;
}

.cs-single__canali-row {
    display:       flex;
    align-items:   flex-end;
    gap:           var(--spacing-80, 80px);
    width:         100%;
    padding:       var(--spacing-80, 80px) var(--spacing-40, 40px) var(--spacing-40, 40px);
    border-bottom: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.cs-single__canali-row:first-child {
    padding-top: var(--spacing-40, 40px);
}

.cs-single__canali-name {
    flex:   0 0 240px;
    width:  240px;
    color:  var(--colori-pieni-blu-default);
    margin: 0;
}

.cs-single__canali-desc {
    flex:           1 0 0;
    min-width:      0;
    margin:         0;
    color:          var(--colori-pieni-blu-300, #616B7D);
    letter-spacing: 1.8px;
}

/* ── Guarda anche (correlati) ────────────────────────────────────────────────── */
/* Riusa esattamente il componente .mm-cs-feature (render_case_study_card()) —
   stessa card grande di home/archivio, stessa altezza (vedi components.css):
   nessuno stile proprio qui, solo il wrapper di sezione (titolo + spaziature),
   come da Figma (Mockup, node 1741:1649 "Correlati"). */

.cs-single__correlati {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--spacing-40, 40px);
    width:          100%;
    padding:        var(--spacing-80, 80px) var(--spacing-40, 40px) var(--spacing-160, 160px) var(--spacing-40, 40px);
}

.cs-single__correlati-title {
    color:  var(--colori-pieni-blu-default);
    margin: 0;
    width:  100%;
}

.cs-single__correlati-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
    width:          100%;
}

/* Card piu' basse solo qui (.mm-cs-feature e' condivisa con home/archivio
   casi studio, dove resta 80vh di default). */
.cs-single__correlati-list .mm-cs-feature {
    height: 70vh;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cs-single__title {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }
    .cs-single__canali{
        padding-bottom: var(--spacing-40, 40px);
        padding-top: var(--spacing-40, 40px);
    }
}

@media (min-width: 2560px){
    .cs-single__hero{
        padding: 250px var(--spacing-80, 80px) var(--spacing-80, 80px) var(--spacing-80, 80px);
    }
    .cs-single__breadcrumb{
        left: var(--spacing-80, 80px);
        right: var(--spacing-80, 80px);
    }
    .cs-single__hero-dati{
        flex: 0 0 30%;
    }
    .cs-single__hero-dato{
        padding-bottom: var(--spacing-16, 16px);
    }
    .cs-single__hero-dato-label{
        flex: 0 0 200px
    }
    .cs-single__title--col{
        flex: 0 1 70%;
    }
    .cs-single__section-image{
        padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80,80px);
        height: auto;
        
    }
    .cs-single__section-image-3-inner{
height: 1400px;
    }
    .cs-single__body-section{
        padding: 0 var(--spacing-80, 80px);
    }
    .cs-single__section-image-3{
        padding: var(--spacing-80, 80px);
        height: 1400px;
    }
    .cs-single__metodo{
        padding: var(--spacing-80, 80px);
        padding-top: var(--spacing-160, 160px);
    }
    .cs-single__step{
    padding: var(--spacing-80, 80px);
    padding-top: 0px;
    }
    .cs-single__canali{
        padding: 0 var(--spacing-80, 80px);
        padding-bottom: var(--spacing-160, 160px);
        padding-top: var(--spacing-160, 160px);
    }
    .cs-single__correlati{
        padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80, 80px);
    }
    .cs-single__canali-row{
        padding-top: var(--spacing-80, 80px);
    }
    .cs-single__canali-row:first-child{
        padding-top: var(--spacing-80, 80px);
    }
    .cs-single__section-image img, .cs-single__section-image video{
        height: 1400px;
    }
    .cs-single__canali-name{
            flex: 0 0 500px;
            width: 500px;
    }
}

@media (max-width: 1080px) {
    .cs-single__hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-40, 40px);
        padding-bottom: var(--spacing-40, 40px);
        padding-top: var(--spacing-320, 320px);
    }

    .cs-single__body-section{
        flex-direction: column-reverse;
    }
    .cs-single__title--col,
    .cs-single__hero-dati {
        flex-basis: auto;
        width: 100%;
    }
    .cs-single__hero-dati {
        flex-direction: column;
        flex-wrap: wrap;
        gap: var(--spacing-24, 24px);
    }
    .cs-single__hero-dato {
        flex: none;
        justify-content: space-between;
    }
    .cs-single__section-image{
        padding-bottom: var(--spacing-40, 40px);
        height: 480px;
    }
    .cs-single__numeri-row{
        flex-direction: column;
        align-items: flex-start !important;
        padding-bottom: var(--spacing-40, 40px) !important;
    }
    /* Le etichette dei numeri (desktop: nowrap) devono andare a capo quando
       non ci stanno, altrimenti escono dallo schermo sotto i ~520px. */
    .cs-single__numeri-label{
        white-space: normal;
        overflow-wrap: break-word;
        text-align: left;
        max-width: 100%;
    }
    .cs-single__section-image-3-inner{
        height: 480px;
    }
    .cs-single__section-image-3{
        padding-bottom: 0;
        padding-top: var(--spacing-16, 16px);
    }
    .cs-single__metodo{
        padding-top: var(--spacing-40, 40px);
    }
    .cs-single__metodo-col{
        gap: var(--spacing-16, 16px);
    }
    .cs-single__canali-list{
        padding-left: 0px;
    }
    .cs-single__canali-name{
        flex: 0 0 200px;
        width: 200px;
    }
    .cs-single__canali-row:first-child{
        padding: var(--spacing-24, 24px);
    }
    .cs-single__canali-row{
        padding-left: var(--spacing-24, 24px);
        padding-right: var(--spacing-24, 24px);
        padding-bottom: var(--spacing-24, 24px);
    }
    .cs-single__step-title{
        word-break: normal;
    overflow-wrap: normal;
    }
    .cs-single__hero-dato-value{
        text-align: right;
    }

    .cs-single__gallery-item--double{
        height: 320px;
        width: 100%;

    }
    .cs-single__gallery-item--horiz{
        height: 480px;
        width: 100%;

    }
    .cs-single__gallery-item--vert{
        height: 800px;
        width: 100%;
    }
    .cs-single__gallery-item--last{
        height: 800px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .cs-single__hero{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .cs-single__breadcrum{
        left: var(--spacing-20, 20px);
        right: var(--spacing-20, 20px);
    }
    .cs-single__section-image{
        height: 320px;
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .cs-single__body-section{
        flex-direction: column-reverse;
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .cs-single__testo{
        gap: var(--spacing-40, 40px);
    }

    .cs-single__gallery-item--last{
        height: 320px;
    }
    .cs-single__gallery-item--double{
        height: 160px;
    }
    .cs-single__gallery-item--horiz{
        height: 240px;
    }
    .cs-single__gallery-item--vert{
        height: 320px;
    }
    .cs-single__section-image-3{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
        padding-top: var(--spacing-8, 8px);
        padding-bottom: 0px;
    }
    .cs-single__section-image-3-inner{
        height: 240px;
    }
    .cs-single__metodo{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
        padding-bottom: 0px;
        padding-top: var(--spacing-40, 40px);
    }
    .cs-single__metodo-col{
        align-items: flex-start;
        text-align:  left;
    }
    .cs-single__step{
        display: flex;
        flex-direction: column;
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
        padding-bottom: var(--spacing-40, 40px);
    }
    .cs-single__step-card{
        padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-24, 24px);
    }
    .cs-single__step-item{
        padding-top: var(--spacing-40, 40px);
    }
    .cs-single__canali{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .cs-single__canali-row:first-child {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
        align-items: flex-start;
       padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-24, 24px);
        border-bottom: none;
        border-left: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
        margin-top: 0px;
        }
        .cs-single__canali-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
        align-items: flex-start;
        margin-top: var(--spacing-40, 40px);
         padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-24, 24px);
        border-bottom: none;
        border-left: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
        }
        .cs-single__canali-name{
        flex: 0 0 auto;
        width: auto;
        }
        .cs-single__canali-list{
            padding-left: 0px;
        }
        .cs-single__correlati{
            padding-left: var(--spacing-20, 20px);
            padding-right: var(--spacing-20, 20px);
            padding-bottom: var(--spacing-80, 80px);
            padding-top: var(--spacing-40, 40px);
            gap: 16px;
        }
        /* Su mobile il breadcrumb puo' essere piu' largo dello schermo:
           invece di andare a capo o sfondare il layout, diventa
           scorrevole in orizzontale su una riga sola. Il testo corrente
           perde il troncamento con ellissi (raggiungibile comunque
           scorrendo) e i figli non si restringono. */
        .cs-single__breadcrumb{
            left: var(--spacing-20, 20px);
            right: var(--spacing-20, 20px);
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .cs-single__breadcrumb::-webkit-scrollbar{
            display: none;
        }
        .cs-single__breadcrumb-current{
            flex-shrink: 0;
            overflow: visible;
            text-overflow: clip;
            max-width: none;
        }
        .cs-single__gallery{
            width: 100%;
            gap: var(--spacing-8, 8px);
        }
        .cs-single__metodo-title{
            align-items: flex-start;
        }
        .cs-single__gallery-pair{
            gap: var(--spacing-8, 8px);
        }
        .cs-single__step-card{
             gap: var(--spacing-16, 16px);
        }
}

@media(min-width:1820px){
    .cs-single__hero{
        min-height: 95vh;
        gap: var(--spacing-240, 240px);
        padding-bottom: var(--spacing-40, 40px);
    }
    .cs-single__title-desc {
    font-family: var(--font-heading), sans-serif;
    font-weight: var(--weight-regular);
    font-size: var(--h5-size);
    line-height: var(--h5-line);
    color: inherit;
}
}

@media(min-width:1820px) and (max-width:2559px){
  
}
/* Letter-spacing +5% su tutti i paragrafi della pagina Caso Studio
   (richiesta esplicita), scoped a .cs-single per non toccare altre
   pagine che riusano gli stessi componenti/classi. */
.cs-single p {
	letter-spacing: 0.05em;
}

/* Esclusa la sezione "Guarda anche" (.cs-single__correlati): usa le
   card condivise render_case_study_card()/.mm-cs-feature (riusate
   anche su home/archivio), che non devono avere il letter-spacing
   extra — su richiesta esplicita. Deve stare DOPO la regola sopra
   (stessa specificita', vince per ordine in cascata). */
.cs-single__correlati p {
	letter-spacing: normal;
}

/* ──────────────────────────────────────────────────────────────
   VIDEO (slider ad auto-scroll, card 9:16) — tra "Canali attivati" e
   "Corpo" (stessa posizione della vecchia sezione "Galleria" rimossa
   il 30/09). Stessa architettura visiva dello slider team
   (page-agenzia.css/.mm-team-slider): track scrollabile + layer
   .cs-video-slider__auto animato via JS (assets/js/cs-video-slider.js).
   A differenza delle card team, qui NON c'e' l'effetto zoom/riflesso
   all'hover — su richiesta esplicita, l'hover qui ha un solo effetto:
   la copertina sparisce e il video sottostante parte. */
.cs-video-slider {
	width: 100%;
	/* Niente padding orizzontale: come lo slider team (page-agenzia.css/
	   .mm-team-slider), lo scroll arriva a filo bordo. Il padding
	   laterale vive invece su .cs-video-slider__track (padding-inline),
	   cosi' la prima/ultima card restano allineate al container ma il
	   drag/scroll puo' comunque uscire visivamente dal bordo. */
	padding-block: var(--spacing-80, 80px);
}

.cs-video-slider__track {
	position: relative; /* offsetParent stabile per le misure in cs-video-slider.js */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	cursor: grab;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-inline: var(--mm-container-pad);
}
.cs-video-slider__track::-webkit-scrollbar { display: none; }
.cs-video-slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.cs-video-slider__auto {
	display: flex;
	align-items: stretch;
	gap: var(--spacing-16, 16px);
	width: max-content;
}

@media (max-width: 1080px) {
	.cs-video-slider__track {
		touch-action: pan-x pan-y;
	}
	/* Tablet/mobile: si scorre di una card alla volta (vedi team-slider.css). */
	.cs-video-slider__track {
		scroll-snap-type: x mandatory !important;
		scroll-padding-inline: var(--mm-container-pad);
	}
	.cs-video-slider__card { scroll-snap-stop: always; }
}

.cs-video-slider__card {
	flex: 0 0 auto;
	/* Larghezza calcolata via JS (cs-video-slider.js): 4 card intere da
	   768px in su (desktop e tablet), 1 e mezza sotto i 768px (mobile).
	   Il valore fisso resta solo come fallback finche' il JS non e'
	   ancora girato (o e' disabilitato). */
	width: var(--cs-video-card-width, 220px);
	scroll-snap-align: start;
	user-select: none;
}

.cs-video-card {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	overflow: hidden;
	background: #1a1a1a;
}

.cs-video-card__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.cs-video-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Copertina che sparisce mostrando il video sottostante — nessuno zoom
   ne' riflesso qui, a differenza delle card team (su richiesta esplicita). */
.cs-video-card.is-playing .cs-video-card__cover {
	opacity: 0;
}

@media (max-width: 767px) {
	.cs-video-slider {
		padding-block: var(--spacing-40, 40px);
	}
	/* Larghezza card sotto i 767px: gestita via JS (cs-video-slider.js,
	   VISIBLE_CARDS_MOBILE = 1.5, 1 card intera + meta' della successiva),
	   qui nessun valore fisso per non entrare in conflitto con la custom
	   property. */
}

/* Icona "play", solo mobile/tablet (<=1080px): su queste dimensioni le
   card video non partono all'hover (non esiste hover reale) ma al tocco
   (vedi initCardHover in cs-video-slider.js), quindi serve un'indicazione
   visiva che la card e' cliccabile. Sparisce quando il video e' in
   riproduzione (.is-playing), insieme alla copertina. Le card statiche
   non hanno questo elemento nel markup, quindi non sono coinvolte. */
.cs-video-card__playicon {
	display: none;
}

@media (max-width: 1080px) {
	.cs-video-card__playicon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset: 0;
		margin: auto;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.45);
		z-index: 2;
		pointer-events: none;
	}
	.cs-video-card__playicon::before {
		content: '';
		border-style: solid;
		border-width: 10px 0 10px 16px;
		border-color: transparent transparent transparent #fff;
		margin-left: 4px;
	}
	.cs-video-card.is-playing .cs-video-card__playicon {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-video-card__cover { transition: none; }
}

/* ── Popup video (mobile/tablet): al tocco su una card si apre qui il
   video a schermo, invece che inline nella card (vedi initCardHover in
   cs-video-slider.js). Un solo popup condiviso, creato/appeso al body
   da JS al primo utilizzo. ────────────────────────────────────────── */

.cs-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Spazio tra il video e i bordi dello schermo, su richiesta esplicita. */
	padding: 40px;
	box-sizing: border-box;
}

.cs-video-lightbox[hidden] {
	display: none;
}

.cs-video-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.cs-video-lightbox__dialog {
	position: relative;
	z-index: 1;
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 80px);
	display: flex;
}

.cs-video-lightbox__video {
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 80px);
	border-radius: 10px;
	background: #000;
	display: block;
	/* Nascosto finche' cs-video-slider.js non aggiunge .is-ready (dopo
	   "loadedmetadata"), per evitare lo scatto dal formato di default
	   del browser (2:1) a quello reale del video. */
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cs-video-lightbox__video.is-ready {
	opacity: 1;
}

.cs-video-lightbox__close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cs-video-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Evita lo scroll della pagina sotto mentre il popup e' aperto. */
body.cs-video-lightbox-open {
	overflow: hidden;
}

/* ── GALLERIA FOTO (variante alternativa della sezione Video, radio
   button in backend): stesso slider ad auto-scroll/drag/loop di
   .cs-video-slider sopra, ma card in formato 4:5 con sole foto, senza
   hover/popup. ─────────────────────────────────────────────────────── */

.cs-photo-gallery-slider {
	width: 100%;
	padding-block: var(--spacing-80, 80px);
}

.cs-photo-gallery-slider__track {
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	cursor: grab;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-inline: var(--mm-container-pad);
}
.cs-photo-gallery-slider__track::-webkit-scrollbar { display: none; }
.cs-photo-gallery-slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.cs-photo-gallery-slider__auto {
	display: flex;
	align-items: stretch;
	gap: var(--spacing-16, 16px);
	width: max-content;
}

@media (max-width: 1080px) {
	.cs-photo-gallery-slider__track {
		touch-action: pan-x pan-y;
	}
	/* Tablet/mobile: si scorre di una card alla volta (vedi .cs-video-slider). */
	.cs-photo-gallery-slider__track {
		scroll-snap-type: x mandatory !important;
		scroll-padding-inline: var(--mm-container-pad);
	}
	.cs-photo-gallery-slider__card { scroll-snap-stop: always; }
}

.cs-photo-gallery-slider__card {
	flex: 0 0 auto;
	/* Larghezza calcolata via JS (cs-photo-gallery-slider.js): 4 card
	   intere da 768px in su (desktop e tablet), 1 e mezza sotto i 768px
	   (mobile). Il valore fisso resta solo come fallback finche' il JS
	   non e' ancora girato (o e' disabilitato). */
	width: var(--cs-photo-gallery-card-width, 220px);
	scroll-snap-align: start;
	user-select: none;
}

.cs-photo-gallery-card {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
	background: #1a1a1a;
}

/* Variante quadrata (1:1) della galleria foto: stesso slider, cambia solo il rapporto. */
.cs-photo-gallery-slider--square .cs-photo-gallery-card {
	aspect-ratio: 1 / 1;
}

.cs-photo-gallery-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Oltre a draggable="false" nel markup (inc/template-functions.php):
	   disattiva anche via CSS il drag-and-drop nativo dell'immagine, cosi'
	   il trascinamento con il mouse fa sempre scorrere lo slider, anche
	   partendo da sopra la foto. */
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

@media (max-width: 767px) {
	.cs-photo-gallery-slider {
		padding-block: var(--spacing-40, 40px);
	}
    .cs-single__review{
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: var(--spacing-40, 40px);
        gap: 16px;
    }
    .cs-single__canali{
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
	.cs-photo-gallery-slider__auto { transition: none; }
}

.cs-single__section-image-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--spacing-16, 16px);
  overflow: hidden;
}
/* Hero: link "Sito" nei dati cliente.
   Sottolineatura assente di default; all'hover si "scrive" da sinistra
   a destra, al mouse-out si ritira verso destra. */
.cs-single__hero-dato-link {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	background-image: linear-gradient( currentColor, currentColor );
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 1px;
	padding-bottom: 2px;
	transition: background-size 0.4s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.cs-single__hero-dato-link:hover,
.cs-single__hero-dato-link:focus-visible {
	background-position: 0% 100%;
	background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
	.cs-single__hero-dato-link { transition: none; }
}


/* ── Lightbox foto (Galleria scrollabile) — cs-lightbox.js ─────────────────────
   Solo cursor sulle foto: nessuna modifica a dimensioni/layout. Il popup e'
   appeso a <body>, quindi non interferisce con la sezione pinnata. */
.cs-single__gallery-item img { cursor: zoom-in; }
.cs-single__gallery-item img:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.mm-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         100000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--spacing-64, 64px) var(--spacing-80, 80px);
    background:      rgba(0, 0, 0, 0.88);
    opacity:         0;
    transition:      opacity 0.25s ease;
}
.mm-lightbox[hidden] { display: none; }
.mm-lightbox.is-open { opacity: 1; }

.mm-lightbox__img {
    display:       block;
    max-width:     100%;
    max-height:    100%;
    width:         auto;
    height:        auto;
    object-fit:    contain;
    border-radius: 16px;
}

.mm-lightbox__btn {
    position:        absolute;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    padding:         0;
    border:          0;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.15);
    color:           #fff;
    cursor:          pointer;
    transition:      background 0.2s ease;
}
.mm-lightbox__btn:hover,
.mm-lightbox__btn:focus-visible { background: rgba(255, 255, 255, 0.3); }
.mm-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mm-lightbox__close { top: 16px; right: 16px; }
.mm-lightbox__prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.mm-lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }

.mm-lightbox__counter {
    position:  absolute;
    bottom:    16px;
    left:      50%;
    transform: translateX(-50%);
    color:     #fff;
    font-size: 14px;
}

@media (max-width: 767px) {
    .mm-lightbox { padding: 72px 16px; }
    .mm-lightbox__prev { left: 8px; }
    .mm-lightbox__next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-lightbox { transition: none; }
}