/* ============================================================
   SOLUTION SINGLE — layout specifico per il CPT "solution".
   single-case_study.css e' gia' caricato su queste pagine
   (componenti/griglie condivisi: .cs-single__breadcrumb,
   .cs-single__related, .cs-grid/.cs-card, .mm-blog__grid--scroll…).
   Qui solo le regole proprie delle sezioni "solution-*".

   Ogni sezione ha il breadcrumb in alto (stesso posizionamento
   assoluto di .cs-single__breadcrumb): dato che le sezioni sono
   attivabili/disattivabili singolarmente, una qualsiasi di esse
   puo' trovarsi in cima alla pagina, quindi ognuna riserva lo
   spazio sotto l'header fisso + il breadcrumb stesso.
   ============================================================ */

.solution-single {
    display: block;
}

.solution-section {
    position: relative;
    padding: var(--spacing-40, 40px);
}

/* ── HERO (Figma mockup, node 2118:7490) ─────────────────────────────── */
/* Solo la hero (in cima alla pagina) ha il breadcrumb: riserva lo spazio
   sotto l'header fisso + il breadcrumb stesso, a differenza delle altre
   .solution-section che usano il normale padding-top. */

.solution-hero {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    gap:             var(--spacing-40, 40px);
    min-height:      90vh;
    padding-top:     180px var(--spacing-40, 40px) var(--spacing-40, 40px) var(--spacing-40, 40px);
}

.solution-hero__top {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--spacing-160, 160px);
    padding-top: 200px;
}

.solution-hero__title-col {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--spacing-16, 16px);
   width: 75%;
}

.solution-bu-label {
    margin: 0;
}

.solution-hero__title {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

.solution-hero__action {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--spacing-16, 16px);
width: 25%;}

.solution-hero__action .btn {
    width: 100%;
}

/* "100+ clienti soddisfatti" — riusa .google-rating senza stelle */
.solution-hero__proof.google-rating {
    justify-content: flex-start;
}

/* ── HERO: immagine/video (attivabile/disattivabile) ────────────────── */

.solution-hero__media {
    width:         100%;
    height:        800px;
    box-sizing:    border-box;
    overflow:      hidden;
    padding-bottom: var(--spacing-40, 40px);
}

section.solution-section.solution-hero-media{
    padding-top: 0px;
}
.solution-hero__media img,
.solution-hero__media video {
    width:         100%;
    height: 100%;
    object-fit:    cover;
    border-radius: var(--spacing-16, 16px);
    display:       block;
    border-radius: 16px;
}

.mm-risultati {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-160, 160px);
    padding-bottom: var(--spacing-40, 40px);
    padding-top: var(--spacing-40, 40px);
    background-color: var(--colori-pieni-bianco-default);
    margin-top: 0px;
}
/* ── "I NUMERI CHE GENERIAMO" (Figma mockup, node 2118:7711) ─────────── */

.solution-stats__title {
    text-align: center;
    margin:     0 0 var(--spacing-40, 40px);
}

.solution-stats__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-16, 16px);
}

.solution-stats__card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             var(--spacing-16, 16px);
    flex:            1 1 280px;
    padding:         var(--spacing-40, 40px);
    border-radius:   var(--spacing-12, 12px);
    background:      var(--colori-pieni-bianco-600, #EAE7E3);
    text-decoration: none;
    transition:      background var(--mm-duration) var(--mm-ease);
}

/* Stesso hover della card "Lavori correlati" nella sidebar degli articoli
   (.mm-post__cs-card:hover, vedi single-post.css): solo il background che
   si scurisce leggermente, nessun altro movimento. */
.solution-stats__card:hover {
    background: var(--colori-pieni-bianco-700, #E3DFDA);
}

.solution-stats__card-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--spacing-16, 16px);
}

.solution-stats__value {
    color: var(--colori-pieni-rosso-default, #D24A5D);
}

.solution-stats__arrow--static {
    pointer-events: none;
}

.solution-stats__desc {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

/* Corpo della card (numero + descrizione): colonna come prima. */
.solution-stats__body {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             var(--spacing-16, 16px);
    flex:            1 1 auto;
    min-width:       0;
}

/* Con logo: colonna a sinistra alta quanto il blocco numero+descrizione,
   poi il corpo a destra. Senza logo la card resta come sempre. */
.solution-stats__card--has-logo {
    flex-direction: row;
    align-items:    stretch;
    gap:            var(--spacing-32, 32px);
    padding:        var(--spacing-16, 16px);
}
.solution-stats__logo {
    flex:            0 0 clamp(80px, 28%, 160px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       0;
    padding:         var(--spacing-16, 16px);
    box-sizing:      border-box;
    border-radius:   var(--spacing-12, 12px);
    background:      var(--colori-pieni-bianco-default);
}
/* Terza colonna (solo con logo): il pulsante a destra, in alto. */
.solution-stats__logo-img {
    display:         block;
    max-width:       100%;
    max-height:      100%;
    width:           auto;
    height:          auto;
    object-fit:      contain;
    object-position: center;
}

/* Hover card con logo: si ingrandisce SOLO il logo (transform, quindi nessun
   cambio di layout); il riquadro bianco resta fermo. */
.solution-stats__logo-img {
    transition: transform var(--mm-duration) var(--mm-ease);
}
@media (hover: hover) {
    .solution-stats__card:hover .solution-stats__logo-img {
        transform: scale(1.1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .solution-stats__logo-img { transition: none; }
}

@media (max-width: 767px) {
    .solution-stats__card {
        flex-basis: 100%;
    }
}

/* ── GALLERY (Figma mockup, node 2118:7705) ───────────────────────────── */

.solution-gallery {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
    padding-top: var(--spacing-80, 80px);
    padding-bottom: var(--spacing-80, 80px);
}

section.solution-section.solution-stats{
    padding-top: var(--spacing-80, 80px);
    padding-bottom: var(--spacing-80, 80px);
}

.solution-gallery__row {
    display: flex;
    align-items: center;
    gap:     var(--spacing-16, 16px);
}

.solution-gallery__img {
    display:       block;
    width:         100%;
    height:        640px;
    object-fit:    cover;
    border-radius: var(--spacing-16, 16px);
    flex:          1 1 0;
    min-width:     0;
}

.solution-gallery__img--full {
    height: 800px;
    flex:   none;
}

@media (max-width: 767px) {
    .solution-gallery__row {
        flex-direction: column;
    }

    .solution-gallery__img {
        height: 400px;
    }

    .solution-gallery__img--full {
        height: 400px;
    }
}

/* ── "COSA OTTIENI CON IL NOSTRO METODO" (Figma mockup, node 2118:8273) ── */

.solution-metodo-section {
    padding: var(--spacing-40, 40px);
    padding-bottom: var(--spacing-80, 80px);
    padding-top: var(--spacing-80, 80px);
}

.solution-metodo {
    position:          relative;
    isolation:         isolate;
    display:           flex;
    flex-direction:    column;
    gap:               var(--spacing-160, 160px);
    padding:           var(--spacing-80, 80px);
    border-radius:     var(--spacing-24, 24px);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
    background-image:  var(--sfondo-hero);
}

/* Grana "noise" sopra il gradiente — stessa texture di .btn--gradiente::before
   e .mm-tag--gradiente::before, qui a piena sezione. */
.solution-metodo::before {
    content:           '';
    position:          absolute;
    inset:             0;
    z-index:           0;
    border-radius:     inherit;
    pointer-events:    none;
    opacity:           0.1;
    background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-repeat: repeat;
    background-size:   120px 120px;
}

.solution-metodo__top,
.solution-metodo__accordion {
    position: relative;
    z-index:  1;
}

.solution-metodo__top {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap: var(--spacing-120, 120px);
}

.solution-metodo__title {
    margin: 0;
    color:  inherit;
    width: 70%;
}

.solution-metodo__action {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--spacing-16, 16px);
    width: 30%;
}

.solution-metodo__action .google-rating__score,
.solution-metodo__action .google-rating__label {
    color: inherit;
}

.solution-metodo__action .btn {
    width: 100%;
}

.solution-metodo__accordion {
    display:     flex;
    align-items: stretch;
    gap:         var(--spacing-16, 16px);
    /* Altezza fissa: nessuno "scatto" verticale quando si passa da un
       elemento all'altro (solo la larghezza cambia, via flex-basis). */
    height:      480px;
}

.solution-metodo__item {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    height:          100%;
    /* La chiusa prende una quota fissa (calcolata in PHP in base al numero
       di elementi chiusi), l'aperta prende sempre il 60% qui sotto. */
    flex:            1 1 var(--solution-metodo-inactive-basis, 0%);
    min-width:       0;
    padding:         var(--spacing-40, 40px);
    border:          0;
    border-radius:   var(--spacing-8, 8px);
    background:      var(--colori-opacizzati-bianco-10, rgba(240, 238, 234, 0.1));
    color:           inherit;
    text-align:      left;
    cursor:          pointer;
    font-family:     inherit;
    overflow:        hidden;
transition: flex-basis 0.55s cubic-bezier(0.65, 0, 0.35, 1), flex-grow 0.55s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;}

.solution-metodo__item-head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--spacing-8, 8px);
    width:          100%;
    min-width:      0;
}

/* Chiusa: titolo in basso. Quando la voce diventa attiva (hover o cambio
   automatico) l'head non e' piu' stirato e il titolo sale in alto. */
.solution-metodo__item:not(.is-active) .solution-metodo__item-head {
    flex:            1 1 auto;
    height:          100%;
    justify-content: flex-end;
}

.solution-metodo__item.is-active {
    flex:       0 0 50%;
    background: var(--colori-opacizzati-bianco-20, rgba(240, 238, 234, 0.2));
    cursor:     default;
}

section.cs-single__related.solution-section.solution-guardaanche{
    margin-top: 0px;
    margin-bottom: var(--spacing-120, 120px);
    padding-top: var(--spacing-80, 80px);
}

/* Layout della sezione "Guarda anche" via CSS Grid Areas: sullo stesso
   markup, su desktop la CTA "Leggi tutti gli articoli" sta accanto al
   titolo (in alto a destra), mentre sotto i 767px scende sotto la
   griglia dei 2 articoli piu' recenti — basta spostare l'area "cta" da
   una riga all'altra, senza duplicare il bottone nel markup. */
section.cs-single__related.solution-section.solution-guardaanche{
    display:               grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:   "header cta"
                            "grid   grid";
    column-gap:            var(--spacing-16, 16px);
    align-items:           center;
}

.cs-single__related-header{
    grid-area: header;
}

.solution-guardaanche__cta{
    grid-area:  cta;
    align-self: center;
}

.solution-guardaanche__grid{
    grid-area: grid;
}

.solution-metodo__item-eyebrow {
    display:        block;
    width:          100%;
    margin-bottom:  var(--spacing-8, 8px);
    font-size:      var(--caption-size);
    line-height:    var(--caption-line);
    text-transform: uppercase;
    color:          var(--colori-pieni-bianco-default, #F0EEEA);
    white-space:    normal;
    overflow-wrap:  break-word;
    word-break:     normal;
}

  .solution-hero__media{
        height: 800px;
        border-radius: 16px;
    }

.solution-metodo__item.is-active .solution-metodo__item-eyebrow {
    color: var(--colori-opacizzati-bianco-70, rgba(240, 238, 234, 0.7));
}

.solution-metodo__item-title {
    display:       block;
    width:         100%;
    color: var(--colori-pieni-bianco-default, #F0EEEA);
    white-space:   normal;
    overflow-wrap: break-word;
    word-break:    normal;
}

.solution-metodo__item.is-active .solution-metodo__item-title {
    color: var(--colori-pieni-bianco-default, #F0EEEA);
}

.solution-metodo__item-desc {
    display:       none;
    width:         100%;
    color:         var(--colori-pieni-bianco-default, #F0EEEA );
    white-space:   normal;
    overflow-wrap: break-word;
    word-break:    normal;
}

.solution-metodo__item.is-active .solution-metodo__item-desc {
    display:    block;
    margin-top: var(--spacing-160, 160px);
}

@media (max-width: 1080px) {
    .solution-metodo__accordion {
        flex-direction: column;
        height:         auto;
    }

    .solution-metodo__item,
    .solution-metodo__item.is-active {
        flex-basis: auto;
        height:     auto;
    }

    .solution-metodo__item-desc,
    .solution-metodo__item.is-active .solution-metodo__item-desc {
        margin-top: var(--spacing-16, 16px);
    }
    .solution-gallery{
        padding-top: var(--spacing-40, 40px);
    }
    section.solution-section.solution-stats{
        padding-top: var(--spacing-40, 40px);
    }
    .solution-metodo-section{
        padding-top: var(--spacing-40, 40px);
    }
    section.solution-section.solution-related{
        padding-top: var(--spacing-40, 40px);
    }
    section.cs-single__related.solution-section.solution-guardaanche{
        margin-bottom: var(--spacing-80, 80px);
    }
}

@media (max-width: 767px) {
    .solution-metodo {
        padding: var(--spacing-40, 40px);
        gap:     var(--spacing-40, 40px);
    }

    .solution-metodo__action {
        flex-basis: 100%;
    }
}

/* ── "LE ALTRE SOLUZIONI" (Figma mockup, node 2158:7026) ──────────────── */

.solution-related__inner {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--spacing-160, 160px);
    padding-bottom:  var(--spacing-40, 40px);
    margin-bottom: 0px;
}

.solution-related__title {
    margin: 0;
    width: 70%;
}

.solution-related__list {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:             var(--spacing-8, 8px);
    margin:          0;
    padding:         0;
    list-style:      none;
    flex:            0 0 auto;
    padding-top: var(--spacing-20, 20px);
}

.solution-related__link {
    color:           var(--colori-pieni-blu-300, #616B7D);
    font-family:     var(--font-body);
    font-size:       var(--body-sm-size);
    line-height:     var(--body-sm-line);
    text-decoration: none;
    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, ease), color 0.2s ease;
}

.solution-related__link:hover {
    color:            var(--colori-pieni-blu-default, #162640);
    background-size:  100% 1.5px;
}

@media (max-width: 767px) {
    .solution-related__inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            var(--spacing-40, 40px);
    }
}


/* ── Guarda anche (Articoli, stessa Business Unit) — Figma node 2159:4129 ──
   Sezione attivabile, sola griglia dinamica (2 card fisse, senza scroll):
   riusa .mm-blog__card/-img-wrap/-tags/-body (blog.css) per la singola card,
   qui solo il layout a griglia 2 colonne dedicato a questa sezione. */

.solution-guardaanche__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--spacing-16, 16px);
    justify-content:       flex-end;
    margin-top:            var(--spacing-40, 40px);
}

/* Un solo articolo correlato trovato: niente colonna vuota accanto,
   la card unica occupa tutta la larghezza disponibile. */
.solution-guardaanche__grid--single {
    grid-template-columns: 1fr;
}

@media(min-width: 2560px){
    .solution-hero{
        padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80, 80px);
    }
    .solution-guardaanche__grid{
        gap: var(--spacing-40, 40px);
    }
    .mm-blog__card > .mm-blog__card-img-wrap{
        height: 800px !important;
    }
    .solution-related__inner{
        padding-bottom: var(--spacing-160, 160px);
        margin-bottom: var(--spacing-120, 120px);
    }
    section.cs-single__related.solution-section.solution-guardaanche{
        margin-top: var(--spacing-120, 120px);
        margin-bottom: var(--spacing-120, 120px);
    }
    section.solution-section.solution-hero-media{
         padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80, 80px);
        padding-bottom: var(--spacing-80, 80px);
    }
    .solution-section{
        padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80, 80px);
    }
    .solution-metodo-section{
        padding-left: var(--spacing-80, 80px);
        padding-right: var(--spacing-80, 80px);
        padding-top: var(--spacing-160, 160px);
        padding-bottom: var(--spacing-160, 160px);
    }
    .mm-risultati{
        padding-top: var(--spacing-120, 120px) !important;
    }
    .solution-gallery__img{
        height: 880px;
    }
    .solution-hero__media{
        height: 1400px !important;
    }
    .solution-gallery__img--full{
        height: 1400px;
    }
    section.solution-section.solution-gallery{
        padding-bottom: var(--spacing-160, 160px);
    }
    .solution-metodo{
        padding: var(--spacing-160, 160px);
    }
}

@media (max-width: 767px) {
    .solution-hero {
        min-height: auto;
    }

    .solution-hero__title-col,
    .solution-hero__action {
        flex-basis: 100%;
        max-width:  100%;
    }

    .solution-hero__media {
        height: 400px;
    }
    
}

@media(max-width:1080px){
    .solution-hero__top{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 220px;
        gap: var(--spacing-16, 16px);
    }
    .solution-metodo__action .btn{
        width: auto;
    }
    .solution-hero__title-col{
        width: 100%;
    }
    .solution-hero__action{
        width: 100%;
    }
    .solution-hero__media{
        height: 480px;
        padding-bottom: 0px;
    }
    .mm-risultati{
        gap: var(--spacing-40, 40px);
    }
    /* Su tablet/mobile .mm-risultati__title diventa display:contents (vedi
       homepage.css) e i pulsanti, senza order esplicito, finiscono PRIMA di
       tutto (order:0 di default) invece che sotto il titolo. Stessa
       correzione gia' applicata alla sezione Risultati della pagina
       Agenzia (vedi page-agenzia.css). */
    .mm-risultati__buttons {
        order: 4;
    }
    .mm-risultati__heading {
        text-align: center;
    }
    .solution-gallery__img{
        height: 300px;
    }
    .solution-gallery__img--full{
        height: 480px;
    }
    .solution-metodo{
        gap: var(--spacing-40, 40px);
    }
    /* Come per .mm-risultati__buttons sopra: display:contents sul wrapper
       "top" rende titolo e review+bottone fratelli diretti dell'accordion,
       cosi' possiamo spostare la review DOPO l'accordion (order) invece di
       lasciarla sempre subito sotto il titolo. */
    .solution-metodo__top{
        display: contents;
    }
    .solution-metodo__title{
        order: 1;
        width: 100%;
        text-align: center;
    }
    .solution-metodo__accordion{
        order: 2;
    }
    .solution-metodo__action{
        order: 3;
        width: auto;
        display: flex;
        align-items: center;
    }
    .solution-related__inner{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40, 40px);
    }
    .solution-related__title{
        width: 100%;
    }
    .solution-related__list{
        padding-top: 0px;
    }
    .solution-metodo > .solution-hero__proof.google-rating{
        justify-content: center;
        align-items: center;
    }


/* ── Metodo: cambio card fluido ───────────────────────────────────────────
   Le card coinvolte in un cambio (quella cliccata e quella che si chiude)
   ricevono .is-anim via JS (solution-metodo-accordion.js). Il cambio di
   .is-active fa ripartire l'animazione (due keyframes identici con nome
   diverso), cosi' titolo/eyebrow/descrizione riappaiono in dissolvenza
   nella nuova posizione invece di saltare. Le altre card non si animano. */
@keyframes mm-metodo-in-a {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mm-metodo-in-b {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
.solution-metodo__item.is-anim.is-active .solution-metodo__item-head {
	animation: mm-metodo-in-a 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.solution-metodo__item.is-anim.is-active .solution-metodo__item-desc {
	animation: mm-metodo-in-a 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.solution-metodo__item.is-anim:not(.is-active) .solution-metodo__item-head {
	animation: mm-metodo-in-b 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
	.solution-metodo__item {
		transition: none;
	}
	.solution-metodo__item.is-anim .solution-metodo__item-head,
	.solution-metodo__item.is-anim .solution-metodo__item-desc {
		animation: none;
	}
}

@media (min-width:1081px){
  .solution-metodo__item:not(.is-active) .solution-metodo__item-title{
    font-size:var(--body-md-size);
    line-height:var(--body-md-line);
  }
}
/* Banner animato "Metodo": nessuna manina e nessun clic da desktop (≥1081px) */
@media (min-width: 1081px) {
  .solution-metodo__item {
    cursor: default;
  }
}

}

@media (max-width: 767px) {
    /* La CTA "Leggi tutti gli articoli" scende sotto i 2 articoli piu'
       recenti (invece che accanto al titolo come su desktop). */
    section.cs-single__related.solution-section.solution-guardaanche{
        grid-template-columns: 1fr;
        grid-template-areas:   "header"
                                "grid"
                                "cta";
        row-gap: var(--spacing-24, 24px);
    }
    .solution-guardaanche__cta{
        justify-self: stretch;
    }
    .solution-guardaanche__cta .btn{
        width: 100%;
    }
    .solution-guardaanche__grid {
        grid-template-columns: 1fr;
        gap:                   var(--spacing-24, 24px);
    }
    .solution-hero__action > .solution-hero__proof.google-rating {
        align-items: flex-start !important;
        padding-left: 10px !important;
    }
    .solution-hero{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    section.solution-section.solution-hero-media{
        padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .solution-section{
         padding-left: var(--spacing-20, 20px);
        padding-right: var(--spacing-20, 20px);
    }
    .google-rating__bottom{
        margin-left: -10px;
    }
    .solution-gallery{
        padding-top: var(--spacing-40, 40px);
        padding-bottom: var(--spacing-40, 40px);
    }
    section.solution-section.solution-stats{
        padding-bottom: var(--spacing-40, 40px);
    }
    section.cs-single__related.solution-section.solution-guardaanche{
        padding-top: 0px;
        margin-top: var(--spacing-80, 80px);
        margin-bottom: var(--spacing-80, 80px);
    }
    .solution-hero__action > div > .google-rating.solution-hero__proof {
        align-items: flex-start;
        display: flex;
        margin-left: 10px;
    }
    .solution-related__list{
        align-items: center;
    }
    .solution-related__inner{
        align-items: center;
    }
    .solution-related__title .mm-split-fade-line {
    text-align: center !important; 
    }
    .cs-single__related-title .mm-split-fade-line {
        text-align: center !important; 

    }
}
.solution-gallery__media {
  flex: 1 1 0;
  min-width: 0;
  height: 640px;
  border-radius: 16px;
  overflow: hidden;
}
.solution-gallery__media--full {
  flex: 0 0 auto;
  width: 100%;
  height: 800px;
}
.solution-gallery__media .solution-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}


@media (max-width: 1080px) {
  .solution-gallery__media       { height: 300px; }
  .solution-gallery__media--full { height: 480px; }
}
@media (max-width: 767px) {
  .solution-gallery__media,
  .solution-gallery__media--full { height: 400px; flex: none; width: 100%; }
}
@media (min-width: 2560px) {
  .solution-gallery__media       { height: 880px; }
  .solution-gallery__media--full { height: 1400px; }
}

/* ── "PERCHÉ NOI" (Figma mockup, node 2585:9140) ─────────────────────────
   Slider a card fisse, SENZA loop né auto-scroll: lo scroll si ferma
   sull'ultima card. Dimensioni card come lo slider del team
   (team-slider.css): 320px, 480px da 1820px, 640px da 2560px, 80vw mobile.
   A sinistra della prima card non si vede nulla (padding iniziale). */
section.solution-section.solution-perche {
    padding-inline: 0;
    padding-bottom: 0;
}
.solution-perche__title {
    margin: 0 0 var(--spacing-40, 40px);
    padding-inline: var(--spacing-40, 40px);
    color: var(--colori-pieni-blu-default, #162640);
}
.solution-perche__slider {
    width: 100%;
    container-type: inline-size; /* 100cqw = larghezza reale dello slider (senza scrollbar) */
    --pn-n: 3;                   /* card intere visibili (+10% della successiva) */
    --pn-pad: var(--spacing-40, 40px);
    --pn-gap: var(--spacing-16, 16px);
}
.solution-perche__track {
    overflow-x: auto;
    scroll-snap-type: none; /* desktop: scorrimento libero, senza scatto card per card */
    scroll-padding-inline: var(--spacing-40, 40px);
    cursor: grab;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.solution-perche__track::-webkit-scrollbar { display: none; }
.solution-perche__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.solution-perche__list {
    display: flex;
    align-items: stretch;
    gap: var(--pn-gap, 16px);
    width: max-content;
    margin: 0;
    list-style: none;
    padding: 0 var(--spacing-40, 40px);
    padding-bottom: 80px;
}
.solution-perche__card {
    flex: 0 0 auto;
    width: 320px;
    height: 500px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-16, 16px);
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
    background: var(--colori-pieni-bianco-600, #EAE7E3);
    border-radius: var(--spacing-12, 12px);
    scroll-snap-align: start;
    user-select: none;
}
.solution-perche__card-title {
    margin: 0;
    color: var(--colori-pieni-blu-default, #162640);
}
.solution-perche__card-text {
    margin: 0;
    font-size: var(--body-md-size);
    line-height: var(--body-md-line);
    color: var(--colori-pieni-blu-400, #3B495F);
}

@media (max-width: 1080px) {
    .solution-perche__track {
        touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory;
    }
    .solution-perche__card { scroll-snap-stop: always; }
}
/* Desktop (>1080px): fino a 1820px 3 card + 10% della successiva; da 1820px 4 + 10%;
   da 2560px resta 4 + 10%. Larghezza = (spazio - padding sx - N gap) / (N + 0,1). */
.solution-perche__card {
    width: calc((100vw - var(--pn-pad) - var(--pn-n) * var(--pn-gap)) / (var(--pn-n) + 0.1));
}
@supports (width: 1cqw) {
    .solution-perche__card {
        width: calc((100cqw - var(--pn-pad) - var(--pn-n) * var(--pn-gap)) / (var(--pn-n) + 0.1));
    }
}
/* Tablet (<=1080px): 2 card + 10%, alte 450px. */
@media (max-width: 1080px) {
    .solution-perche__slider { --pn-n: 2; }
    .solution-perche__card { height: 450px; }
}
/* Mobile (<=767px): 1 card + 10%, alte 400px. */
@media (max-width: 767px) {
    .solution-perche__title { text-align: center; padding-top: 40px;}
    .solution-perche__slider { --pn-n: 1; }
    .solution-perche__card { height: 400px; }
    .solution-perche__list {padding-left:20px; padding-right: 20px;}
    .solution-perche__title {padding-inline: 20px;}
}
@media (min-width: 1820px) {
    .solution-perche__slider { --pn-n: 4; }
    .solution-perche__card {
        height: 650px;
        padding: var(--spacing-32, 32px) var(--spacing-40, 40px);
    }
}

/* Perché noi – hover card con gradiente e grana (solo desktop) */
@media (min-width: 1024px) and (hover: hover) {
  .solution-perche__track {
    padding-top: 24px;
    margin-top: -24px; /* spazio per la parte che sporge, senza spostare nulla */
  }
  .solution-perche__card {
    position: relative;
    isolation: isolate;
  }
  .solution-perche__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9412 0 0 0 0 0.9333 0 0 0 0 0.9176 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat,
      radial-gradient(220% 220% at 100% 0%, #d24a5d -10%, #162640 60%, #162640 100%);
    opacity: 0;
    transition: opacity .45s ease, top .5s cubic-bezier(.22,1,.36,1);
  }
  .solution-perche__card-title,
  .solution-perche__card-text {
    transition: color .35s ease;
  }
  .solution-perche__card:hover::before {
    opacity: 1;
    top: -20px; /* quanto si allunga verso l'alto */
  }
  .solution-perche__card:hover .solution-perche__card-title,
  .solution-perche__card:hover .solution-perche__card-text {
    color: #fff;
  }
}