/* Guidotarricone — ritocchi per le pagine case study costruite con Lay Theme.
   Agisce SOLO su righe con classe gtcs-* (impostata nelle opzioni di riga di Lay)
   e sui Text Formats CS_*. Il resto del sito non viene toccato.
   Valori ricavati dal prototipo v8. */

/* Numero di sezione "01", "02"… con il quadratino colorato */
h2._CS_Numero::before{
  content:'';display:inline-block;width:12px;height:12px;
  background:#5421ce;margin-right:15px;vertical-align:1px;
}
.row.gtcs-numero-lime h2._CS_Numero::before{background:#baff28;outline:1px solid #111;outline-offset:-1px}

/* Riquadro del risultato */
.row.gtcs-risultato p._CS_Risultato{background:#baff28;padding:22px 28px;margin:0}

/* Schermate degli highlights: misura, angoli e ombra come nel v8 */
.row.gtcs-momento .type-img .img{
  max-width:235px;border-radius:17px;overflow:hidden;
  box-shadow:0 6px 20px rgba(25,20,45,.10);
}
.row.gtcs-momento .type-text .text{max-width:687px}
.row.gtcs-lime .type-img .img{max-width:208px}

/* Citazione seguita subito dal testo, senza nota: stesso stacco delle altre */
.row.gtcs-momento p._CS_Citazione + p._CS_Testo{margin-top:24px}

/* Pannelli colorati: margine interno. Il viola è largo 1000 px, il lime tutta la colonna. */
.row.gtcs-pannello > .row-inner{padding:48px}
.row.gtcs-viola > .row-inner{padding:52px}
.row.gtcs-viola:not(.gtcs-largo) > .lay-row-bg-content-width .lay-row-bg-content-area{max-width:1000px}
.row.gtcs-viola:not(.gtcs-largo) .type-text .text{max-width:603px}
.row.gtcs-viola ._CS_Citazione,.row.gtcs-viola ._CS_Nota,.row.gtcs-viola ._CS_Testo,
.row.gtcs-viola ._CS_Nota strong{color:#fff}

/* Sezione del flusso completo: un unico riquadro lilla a tutta larghezza.
   Gli elementi escono dai margini (opzione "frame overflow" di Lay) e il
   margine laterale lo dà questo padding, come nel v8. */
.row.gtcs-flusso-testo > .row-inner{padding-top:58px}
.row.gtcs-flusso-img > .row-inner{padding-bottom:58px}
.row.gtcs-flusso .frame-overflow-both .text{padding:0 4vw}
.row.gtcs-flusso .frame-overflow-both .img{margin:0 4vw}
.row.gtcs-flusso-testo p._CS_Testo{max-width:820px}
.row.gtcs-flusso-testo{margin-top:272px}
.row.gtcs-flusso-img > .row-inner{padding-top:19px}

/* Layout mobile: un pannello è fatto di più righe consecutive (classi aggiunte
   da chi costruisce la pagina). Lo spazio interno resta solo ai bordi del riquadro. */
.row.gtcs-continua-sotto > .row-inner{padding-bottom:0!important}

/* Lightbox di Lay (clic su un'immagine, es. il flusso completo): nelle case
   study lo sfondo copre la pagina e la croce di chiusura è un pulsante ben
   visibile. Esc la chiude già (comportamento di Lay). */
body:has(.row[class*="gtcs-"]) #lightbox-region .lightbox-bg{background-color:#fff!important;opacity:1!important}
body.lightbox-css-on:has(.row[class*="gtcs-"]) .close-lightbox{
  top:16px;right:16px;padding:0;width:48px;height:48px;border-radius:50%;
  background:#fff;border:2px solid #5421ce;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(25,20,45,.15);
}
body.lightbox-css-on:has(.row[class*="gtcs-"]) .close-lightbox.standard-close::before{font-size:20px;color:#34127e}
body.lightbox-css-on:has(.row[class*="gtcs-"]) .close-lightbox:hover{background:#5421ce}
body.lightbox-css-on:has(.row[class*="gtcs-"]) .close-lightbox:hover::before{color:#fff}


/* ---- elementi aggiunti con il Referral (valgono per tutte le case study) ---- */
/* titolo di sezione (gruppo di highlight) */
.row.gtcs-sezione .type-text .text{border-top:1px solid #111;padding-top:18px;padding-bottom:44px}
/* testi di errori, notifiche, SMS: tutti della stessa dimensione */
.row.gtcs-viola p._CS_Elenco{color:#fff}
/* pannello corallo: testo nero (6,6:1); tendina in nero */
/* composizione con ombra già disegnata (es. ritagli degli errori): niente ombra né angoli in più */
.row.gtcs-ritagli .col.type-img + .col.type-img .img{box-shadow:none;border-radius:0;overflow:visible;max-width:none}


/* ---- link nei testi di tutto il sito: viola a riposo, verde e sottolineati al passaggio del mouse
        e con la tastiera (il verde sul bianco è poco leggibile, 1,3:1: la sottolineatura rende il
        cambio visibile anche senza il colore). Il menu in alto non cambia. ---- */
.no-touchdevice .lay-textformat-parent a:not(.laybutton):not(.lay-ignore-linktext-style):hover,
.no-touchdevice .lay-textformat-parent a:not(.laybutton):not(.lay-ignore-linktext-style).hover,
.lay-textformat-parent a:not(.laybutton):not(.lay-ignore-linktext-style):focus-visible{
  color:#7fff00!important;text-decoration:underline!important;text-decoration-thickness:.08em!important;text-underline-offset:.14em!important;
}
.no-touchdevice .lay-textformat-parent a:not(.laybutton):not(.lay-ignore-linktext-style):hover span,
.no-touchdevice .lay-textformat-parent a:not(.laybutton):not(.lay-ignore-linktext-style).hover span{color:#7fff00!important}
.lay-textformat-parent a:not(.laybutton):focus-visible{outline:2px solid #8224e3;outline-offset:3px;border-radius:2px}

/* ---- home: racconto e nomi delle sezioni più grandi; il brand nella riga «Tate Onboarding, …» in nero ---- */
.row.gtcs-home-racconto .lay-textformat-parent :is(h1,h2,p),.row.gtcs-home-sezione .lay-textformat-parent ._CategoryTitle{font-size:46px!important;line-height:1.12!important}
.row.gtcs-home-riga .gtcs-home-brand{color:#111}
.row.gtcs-home-sezione + .row:has(.lay-hr){display:none!important}   /* nessuna linea sotto il nome della sezione */
@media (max-width:600px){
  .row.gtcs-home-racconto .lay-textformat-parent :is(h1,h2,p),.row.gtcs-home-sezione .lay-textformat-parent ._CategoryTitle{font-size:30px!important}
}

/* ---- tabella vera dentro un highlight (es. network features EE) ---- */
body .lay-textformat-parent table.gtcs-tabella{width:100%;border-collapse:collapse;margin:24px 0 0;font-family:NHaasGroteskTXPro-55Rg,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4}
body .lay-textformat-parent table.gtcs-tabella th{font-family:NHaasGroteskTXPro-75Bd,Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:0 10px 8px 0;border-bottom:2px solid currentColor}
body .lay-textformat-parent table.gtcs-tabella td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(127,127,127,.35);vertical-align:top}
.row.gtcs-viola table.gtcs-tabella{color:#fff}

/* ---- highlight a quattro livelli: titolo · titolo e testo della schermata · spiegazione ---- */
body .lay-textformat-parent .gtcs-schermata{margin:22px 0 0;padding:2px 0 2px 16px;border-left:2px solid #c9b8f5}
body .lay-textformat-parent .gtcs-schermata p{margin:0;letter-spacing:0;text-transform:none}
body .lay-textformat-parent .gtcs-schermata .gtcs-s-etichetta{font-family:NHaasGroteskTXPro-75Bd,Helvetica,Arial,sans-serif!important;font-size:11px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:#7a7a7a;margin:0 0 6px}
body .lay-textformat-parent .gtcs-schermata .gtcs-s-titolo{font-family:NHaasGroteskTXPro-65Md,Helvetica,Arial,sans-serif!important;font-size:18px;line-height:1.35;color:#111}
body .lay-textformat-parent .gtcs-schermata .gtcs-s-testo{font-family:NHaasGroteskTXPro-55Rg,Helvetica,Arial,sans-serif!important;font-size:16px;line-height:1.45;color:#595959;margin-top:4px}
body .lay-textformat-parent .gtcs-schermata + p._CS_Testo{margin-top:22px}
.row.gtcs-viola .gtcs-schermata{border-left-color:rgba(255,255,255,.55)!important}
.row.gtcs-viola .gtcs-schermata .gtcs-s-etichetta{color:#d9cdfb!important}
.row.gtcs-viola .gtcs-schermata .gtcs-s-titolo{color:#fff!important}
.row.gtcs-viola .gtcs-schermata .gtcs-s-testo{color:#e9e3ff!important}

/* ---- elementi aggiunti con Homepage e Spiegabolletta ---- */
/* testo della schermata (sotto il titolo citato): attaccato al titolo e in grigio,
   così si distingue dalla spiegazione, che resta nera e più staccata */
body .lay-textformat-parent p._CS_Citazione + p._CS_Nota{margin-top:6px!important}
body .lay-textformat-parent p._CS_Nota{color:#595959}
body .lay-textformat-parent p._CS_Nota + p._CS_Testo,body .lay-textformat-parent p._CS_Nota + p._CS_Elenco{margin-top:30px}
/* testi di spiegazione un pelo più piccoli, in tutte le case study */
body .lay-textformat-parent p._CS_Testo{font-size:17px}
/* schermate da computer: immagine larga, testo accanto */
.row.gtcs-largo .type-img .img{border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(25,20,45,.12)}
.row.gtcs-largo .type-text .text{padding-top:36px}
.row.gtcs-viola.gtcs-largo .type-text .text{padding-top:0}
/* pagina impilata (homepage): una colonna continua costruita da galleria.js */
.row.gtcs-pila .type-img .img{border-radius:0;box-shadow:none}
.gtcs-pila-colonna{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 18px rgba(25,20,45,.13))}
.gtcs-pila-colonna img{display:block;width:100%;height:auto}
.gtcs-pila-colonna img:first-child{border-radius:12px 12px 0 0}
.gtcs-pila-colonna img:last-child{border-radius:0 0 12px 12px}
.row.gtcs-pila-attiva .col.type-img{visibility:hidden;height:0!important;min-height:0!important;overflow:hidden}
/* numeri che legano ogni sezione della colonna al suo testo (solo computer) */
.gtcs-pila-colonna .gtcs-num{position:absolute;left:14px;width:30px;height:30px;margin-top:14px;border-radius:50%;background:#5421ce;color:#fff;border:2px solid #fff;
  font:700 14px/26px NHaasGroteskTXPro-75Bd,Helvetica,Arial,sans-serif;text-align:center;box-sizing:border-box}
.lay-textformat-parent .gtcs-num-testo,.gtcs-num-testo{display:block!important;width:30px!important;height:30px!important;border-radius:50%;background:#5421ce!important;color:#fff!important;margin:0 0 12px!important;padding:0!important;
  font:700 14px/30px NHaasGroteskTXPro-75Bd,Helvetica,Arial,sans-serif!important;letter-spacing:0!important;text-align:center}
/* elenco numerato dei riquadri (Spiegabolletta): i numeri sono gli stessi disegnati sull'immagine */
ol.gtcs-riquadri{list-style:none;counter-reset:gtcs-r;margin:52px 0 0;padding:0}
ol.gtcs-riquadri li{counter-increment:gtcs-r;position:relative;padding:2px 0 0 44px;margin:0 0 16px;min-height:30px}
ol.gtcs-riquadri li::before{content:counter(gtcs-r);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:#5421ce;color:#fff;
  font:700 14px/28px NHaasGroteskTXPro-75Bd,Helvetica,Arial,sans-serif;text-align:center}
ol.gtcs-riquadri .gtcs-r-titolo{display:block;font-family:NHaasGroteskTXPro-65Md,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.4;color:#111}
ol.gtcs-riquadri .gtcs-r-testo{display:block;font-family:NHaasGroteskTXPro-55Rg,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;color:#333;margin-top:3px}

/* ------------------------------------------------------------------
   Griglia da 601 px in su (tablet e desktop), come nel v8.
   Lay calcola i margini laterali in percentuale (11%): a 768 px
   diventano 84 px, nel v8 sono 38. Qui il margine è "38 px, oppure
   quanto serve per centrare 1124 px": a 1440 px vale 158, come l'11%.
   Le righe di Lay hanno 25 tracce: margine, 12 colonne con 11 spazi,
   margine. Ridefiniamo solo la larghezza delle tracce, non la posizione
   degli elementi, che resta quella impostata nell'editor.
   Vale solo nelle pagine che contengono la galleria del case study.
   ------------------------------------------------------------------ */
@media (min-width:601px){
  .grid:has(.row[class*="gtcs-"]){
    --gtcs-f:max(38px, calc((100% - 1124px) / 2));
    --gtcs-p:clamp(22px, 4vw, 52px);
  }
  .grid:has(.row[class*="gtcs-"]) .row{--lay-row-bg-frame-left:var(--gtcs-f)!important;--lay-row-bg-frame-right:var(--gtcs-f)!important}
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-lime{--gtcs-p:clamp(22px, 4vw, 48px)}
  .grid:has(.row[class*="gtcs-"]) .row .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:var(--gtcs-f) repeat(11, minmax(0,1fr) 1%) minmax(0,1fr) var(--gtcs-f)!important;
  }
  /* highlight: schermata 235 px a sinistra, testo subito dopo */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-momento:not(.gtcs-pannello) .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:var(--gtcs-f) 235px 0 0 0 0 clamp(48px, calc(5.08vw + 9px), 78px) minmax(0,1fr) repeat(16, 0) var(--gtcs-f)!important;
  }
  /* pannello viola: largo al massimo 1000 px, margine interno fluido */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-viola:not(.gtcs-largo) .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:calc(var(--gtcs-f) + var(--gtcs-p)) 235px 0 0 0 0 clamp(24px, calc(4vw + 9px), 58px) minmax(0,1fr) repeat(14, 0) var(--gtcs-p) 0 var(--gtcs-f)!important;
  }
  /* pannello lime: due schermate da 213 px affiancate, testo a destra */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-lime .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:calc(var(--gtcs-f) + var(--gtcs-p)) 213px 0 0 0 0 14px 213px 0 0 0 0 clamp(24px, calc(4vw + 9px), 68px) minmax(0,1fr) repeat(10, 0) calc(var(--gtcs-f) + var(--gtcs-p))!important;
  }
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-pannello > .row-inner{padding:var(--gtcs-p) 0}
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-lime .type-img .img{max-width:213px}
  /* due immagini affiancate da 235 px, testo a destra (anche dentro un pannello) */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-due:not(.gtcs-pannello) .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:var(--gtcs-f) 235px 0 0 0 0 20px 235px 0 0 0 0 clamp(48px, calc(5.08vw + 9px), 78px) minmax(0,1fr) repeat(10, 0) var(--gtcs-f)!important;
  }
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-due.gtcs-pannello .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:calc(var(--gtcs-f) + var(--gtcs-p)) 235px 0 0 0 0 20px 235px 0 0 0 0 clamp(24px, calc(4vw + 9px), 58px) minmax(0,1fr) repeat(10, 0) calc(var(--gtcs-f) + var(--gtcs-p))!important;
  }
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-due .type-img .img{max-width:235px}
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-corallo{--gtcs-p:clamp(22px, 4vw, 48px)}
  /* immagine larga dentro un pannello (es. banda viola): griglia a 12 colonne con il margine interno */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-largo.gtcs-pannello .column-wrap:not(._100vh):not(.rowcustomheight){
    grid-template-columns:calc(var(--gtcs-f) + var(--gtcs-p)) repeat(11, minmax(0,1fr) 1%) minmax(0,1fr) calc(var(--gtcs-f) + var(--gtcs-p))!important;
  }
  /* highlight + tendina "prima" nello stesso pannello: un solo riquadro */
  .grid:has(.row[class*="gtcs-"]) .row.gtcs-pannello.gtcs-continua-sopra > .row-inner{padding-top:0}
  /* testi fluidi come nel v8 (Lay su questo sito non usa le misure tablet) */
  .grid:has(.row[class*="gtcs-"]) h1._CS_Titolo{font-size:min(132px, 11vw)}
  .grid:has(.row[class*="gtcs-"]) p._CS_Apertura{font-size:min(34px, 3vw);max-width:900px}
  .grid:has(.row[class*="gtcs-"]) p._CS_Risultato{font-size:clamp(23px, 2.6vw, 32px);max-width:900px;box-sizing:border-box}
  .grid:has(.row[class*="gtcs-"]) p._CS_Citazione{font-size:clamp(21px, 2.5vw, 29px)}
}

/* Sotto i 1440 px il margine è più stretto dell'11% e il testo finirebbe
   sotto il logo del sito (che occupa 3–11% in larghezza e fino al 9vw in
   altezza): la pagina comincia subito sotto il logo. */
@media (min-width:601px) and (max-width:1439px){
  .grid:has(.row[class*="gtcs-"]){padding-top:calc(9vw + 24px)!important}
}

@media (max-width:600px){
  /* titolo grande: sta nello schermo anche con parole lunghe (es. «Spiegabolletta») */
  body .lay-textformat-parent h1._CS_Titolo{font-size:min(64px, 13.5vw)}
  .row.gtcs-risultato p._CS_Risultato{padding:20px}
  .row.gtcs-momento .type-img .img{max-width:none;border-radius:16px}
  .row.gtcs-pannello > .row-inner,.row.gtcs-viola > .row-inner{padding:24px}
  .row.gtcs-viola > .lay-row-bg-content-width .lay-row-bg-content-area{max-width:none}
  .row.gtcs-lime .type-img .img{max-width:none}
  .row.gtcs-flusso-testo{margin-top:189px}
  .row.gtcs-pannello.gtcs-continua-sopra > .row-inner{padding-top:24px}
  .row.gtcs-flusso-testo > .row-inner{padding-top:22px}
  .row.gtcs-flusso-img > .row-inner{padding-bottom:22px}
  .row.gtcs-flusso .frame-overflow-both .text{padding:0 22px}
  .row.gtcs-flusso .frame-overflow-both .img{margin:0 22px}
}


/* ---- un solo colore d'accento per i pannelli: viola con testi bianchi.
        Vale anche per i pannelli nati lime o corallo (anche se il colore era stato messo a mano nell'editor). ---- */
.row.gtcs-corallo .gtcs-schermata *,.row.gtcs-lime .gtcs-schermata *,.row.gtcs-viola .gtcs-schermata *{color:#fff!important}
.row.gtcs-viola ol.gtcs-riquadri li::before,.row.gtcs-corallo ol.gtcs-riquadri li::before{background:#fff;color:#5421ce}
.row.gtcs-numero-lime h2._CS_Numero::before{background:#5421ce;outline:0}
.grid .row.gtcs-corallo .lay-row-bg-color,.grid .row.gtcs-lime .lay-row-bg-color,.grid .row.gtcs-viola .lay-row-bg-color{background-color:#5421ce!important}
.grid .row.gtcs-corallo .lay-textformat-parent *,.grid .row.gtcs-lime .lay-textformat-parent *,.grid .row.gtcs-viola .lay-textformat-parent *{color:#fff!important}
.grid .row.gtcs-corallo .gtcs-schermata,.grid .row.gtcs-lime .gtcs-schermata,.grid .row.gtcs-viola .gtcs-schermata{border-left-color:rgba(255,255,255,.55)!important}
.grid .row.gtcs-corallo .gtcs-prima summary,.grid .row.gtcs-lime .gtcs-prima summary,.grid .row.gtcs-viola .gtcs-prima summary{color:#fff!important}
.no-touchdevice .grid .row.gtcs-corallo .lay-textformat-parent a:hover,.no-touchdevice .grid .row.gtcs-lime .lay-textformat-parent a:hover,.no-touchdevice .grid .row.gtcs-viola .lay-textformat-parent a:hover{color:#7fff00!important}