/* YOU — single post (articolo del Toolkit).
   Grafica: quella della pagina "Nuove Generazioni" (template-articolo.php/articolo.css), portata
   a FLUSSO. Il canvas assoluto 1920x4147 non è riusabile: i suoi blocchi stanno a coordinate fisse
   (.intro top:983, .body top:1931...) e gli articoli veri vanno da 3k a 11k caratteri → si
   sovrapporrebbero, e overflow:hidden li taglierebbe. Qui restano identici colori, font, banda teal
   con texture, featured r35 e box ESPLORA azzurro r65; il box è un float (com'era nel Figma:
   testo che gli scorre accanto), che però si adatta a qualsiasi lunghezza. I fili SVG sono esclusi:
   erano path cuciti su quelle coordinate. */
:root{--teal:#008b95;--ink:#1d1d1b;--azzurro:#bbdde6;--white:#fff;--col:1320px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
/* Astra dipinge il body con --ast-global-color-5 (#F0F5FA) via .ast-separate-container, che per
   specificità (0,1,0) batte 'body' (0,0,1). Le altre pagine non se ne accorgono — sono canvas a
   tutta pagina — l'articolo sì, perché lo sfondo si vede. Il design lo vuole bianco. */
body.ast-separate-container{background:#fff}

/* HEADER = quello della home: stesse metriche del canvas 1920 (.hd/.hd-logo/.hd-nav) scalate
   con --s. Il resto della pagina resta a flusso; --s serve solo qui (script in single.php). */
.sa-hd{position:relative;width:100%;max-width:1920px;margin:0 auto;height:calc(185px*var(--s,1))}
.sa-hd .sa-logo{position:absolute;left:calc(116px*var(--s,1));top:calc(50px*var(--s,1))}
.sa-hd .sa-logo img{display:block;width:calc(157px*var(--s,1));height:auto}
.sa-nav{position:absolute;right:calc(96px*var(--s,1));top:calc(66px*var(--s,1));display:flex;align-items:center;gap:calc(14px*var(--s,1));font-size:calc(20px*var(--s,1))}
.sa-nav a{color:var(--teal);text-decoration:none;font-weight:500}
.sa-nav a.active{font-weight:700}
.sa-nav span{color:var(--teal);opacity:.6}

/* HEADER MOBILE = quello delle altre pagine (logo + hamburger) */
.m-hd{display:none}
.m-hd img{width:118px;height:auto}
.m-hd details{position:relative}
.m-hd summary{list-style:none;cursor:pointer;font-size:26px;color:var(--teal);line-height:1;padding:4px 8px}
.m-hd summary::-webkit-details-marker{display:none}
.m-hd nav{position:absolute;right:0;top:40px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);border-radius:12px;padding:16px 22px;display:flex;flex-direction:column;gap:14px;min-width:190px;z-index:5}
.m-hd nav a{color:var(--teal);text-decoration:none;font-weight:500;font-size:17px}
.m-hd nav a.active{font-weight:700}
@media(max-width:1023px){
  .sa-hd{display:none}
  .m-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
}

/* HERO — banda teal + texture (come .bands .b-hero di articolo.css) */
.sa-hero{background:var(--teal);position:relative;overflow:hidden;padding:108px 0 92px}
.sa-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center top/cover no-repeat;opacity:.4}
.sa-hero-in{position:relative;max-width:var(--col);margin:0 auto;padding:0 24px}
.sa-cat{display:inline-block;color:#fff;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.6px;opacity:.95;margin-bottom:18px}
.sa-hero h1{color:#fff;font-family:"Madimi One";font-weight:400;font-size:48px;line-height:1.1;max-width:896px}
/* cuore = marker del sottotitolo (era .hero-heart a x160, sub a x221) */
.sa-sub{display:flex;align-items:flex-start;gap:26px;margin-top:22px;max-width:900px}
.sa-sub img{width:35px;height:auto;flex-shrink:0;margin-top:2px}
.sa-sub p{color:#fff;font-weight:400;font-size:24px;line-height:1.3}
/* .sa-meta (data del post) rimossa col feedback 3: il cliente non vuole la data sugli articoli */

/* CORPO */
.sa-wrap{max-width:var(--col);margin:0 auto;padding:0 24px 84px}
/* La featured si appoggia sotto la banda, come nel Figma: lì l'immagine è alta 459 e sta a 443-902,
   ma i suoi primi 112px sono banda teal → la FOTO visibile era 555-902, cioè 1304×347 a partire dal
   bordo inferiore della banda (misurato sul live). Non scavalcare la banda evita di coprire il
   sottotitolo.
   feedback7: 347 era troppo schiacciata per le immagini del feedback 6 (3:2). A cover ne restava
   visibile il 40% in altezza e il soggetto veniva tagliato → alzata a 560 (2.33), 66% visibile.
   Scelta dell'utente fra 459 (misura Figma) e 3:2 pieno: 560 è la via di mezzo.
   feedback10: il cliente ha chiuso la questione — niente crop (a 2.33 «vengono tagliate le teste»,
   es. l'articolo sui miti familiari) e un piccolo stacco dalla banda teal, che con gli angoli
   arrotondati sta meglio staccata che appoggiata. Via aspect-ratio e object-fit: l'immagine esce
   nel suo rapporto nativo (3:2 → 1304×869) e il margine sopra la separa dalla banda. L'<img> è
   stampata a mano senza attributi width/height, quindi height:auto basta (≠ .art-card, vedi lessons). */
.sa-featured{display:block;width:100%;max-width:1304px;height:auto;margin:28px auto 44px;border-radius:35px;position:relative;z-index:2;background:#cfe6ee}
.sa-content{color:var(--ink);font-weight:300;font-size:20px;line-height:35px}
.sa-content::after{content:"";display:block;clear:both}
.sa-content>*{margin-bottom:22px}
.sa-content>*:last-child{margin-bottom:0}
.sa-content h2{color:var(--teal);font-family:"Madimi One";font-weight:400;font-size:30px;line-height:1.15;margin-top:14px}
.sa-content h3{color:var(--teal);font-weight:700;font-size:22px}
.sa-content b,.sa-content strong{color:var(--ink);font-weight:700}
/* overflow-wrap: il corpo di "Dare valore alle proprie esperienze" chiude con un URL di vivoscuola
   lungo 78 caratteri, cioè una parola sola che a 390px sfonderebbe la colonna. */
.sa-content a{color:var(--teal);text-decoration:underline;overflow-wrap:anywhere}
.sa-content ul,.sa-content ol{padding-left:1.3em}
.sa-content li{margin-bottom:8px}
.sa-content img{max-width:100%;height:auto;border-radius:16px}
.sa-content blockquote{border-left:4px solid var(--azzurro);padding-left:20px;color:var(--teal);font-style:italic}
.sa-content blockquote cite{display:block;margin-top:8px;font-style:normal;font-weight:600;font-size:16px}

/* BOX "ESPLORA ANCORA" (azzurro r65). Nel Figma è affiancato al testo: qui float, così scorre
   accanto e rientra da solo quando il testo lo supera. Reso solo se ci sono davvero risorse. */
.sa-esplora{float:left;width:371px;background:var(--azzurro);border-radius:65px;padding:44px 40px 40px;margin:6px 48px 32px 0;shape-margin:20px}
.sa-esplora h3{font-family:"Madimi One";font-weight:400;font-size:36px;color:var(--teal);line-height:1.05;margin-bottom:24px}
.sa-esplora a{display:flex;align-items:center;gap:12px;color:var(--teal);font-family:"Poppins";font-weight:400;font-size:20px;text-decoration:none;margin-bottom:16px}
.sa-esplora a:last-child{margin-bottom:0}
.sa-esplora a:hover{text-decoration:underline}
.sa-esplora a .ic{width:25px;height:25px;border-radius:6px;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
/* feedback5 F2: avviso "contenuti generati con l'AI" — nota in fondo al box (e sotto la playlist di
   Generation BOH), piccola per non competere con le voci ma leggibile. */
.sa-ai{margin-top:22px;font-size:15px;line-height:1.45;color:var(--teal);opacity:.8}
/* feedback12: le etichette UE (AI Act art. 50) vanno una per riga, testo + icona del cliente.
   L'icona sta a 2.4em, non all'altezza del testo: dentro il PNG il glifo occupa poco piu di meta
   della placca, e a 1.5em "AI MODIFIED" era illeggibile — nel documento del cliente le icone sono
   ~2,5x il corpo del testo, ed e la proporzione che rende leggibile l'etichetta.
   Riga a flex: allinea icona e testo al centro senza dipendere dalla baseline del font. */
.sa-ai-riga{display:flex;align-items:center;gap:8px}
.sa-ai-riga+.sa-ai-riga{margin-top:8px}
.sa-ai-riga img{height:2.4em;width:auto;flex-shrink:0}
.gb-videos .sa-ai{margin-top:18px}
/* feedback7: la copia del box in coda (feedback3 F3, resa flottante dal feedback5 F5) è stata
   rimossa — con gli articoli corti del feedback 6 i due box finivano quasi a contatto. Con lei se
   ne vanno .sa-esplora-flot / -coda / .sa-solo-mobile e il calcolo del punto d'inserimento. */

/* INFOGRAFICA + PLAYER (i media citati dalle schede, in pagina e non solo come link) */
/* Popup video/audio dal box "Esplora ancora" (T8a) */
.sa-modal[hidden]{display:none}
.sa-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.sa-modal-bg{position:absolute;inset:0;background:rgba(10,25,28,.72)}
.sa-modal-box{position:relative;width:min(880px,100%);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sa-modal-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--teal);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sa-modal-body video{display:block;width:100%;max-height:80vh;border-radius:16px;background:#000}
/* Il padding NON va sull'<audio>: col box-sizing:border-box del reset, 28+28 si mangiavano tutti i
   56px di altezza dell'elemento → al pannello dei controlli restava 0px e la barra di riproduzione
   spariva (il file suonava lo stesso). Lo spazio si dà con margin, che non tocca il content box. */
.sa-modal-body audio{display:block;width:calc(100% - 56px);margin:28px}
/* feedback12: documento e slide non si scaricano più, si consultano nel popup. `#toolbar=0`
   nasconde la barra col download su Chrome ed Edge; Firefox e Safari iOS la tengono comunque —
   limite noto, messo a verbale nel report al cliente. */
.sa-modal-body iframe{display:block;width:100%;height:80vh;border:0;border-radius:16px;background:#f4f7f8}
.sa-modal-body img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:16px}
/* Generation BOH: player unico + playlist (T6) */
.gb-videos{clear:both;margin-top:56px}
.gb-videos>h2{color:var(--teal);font-family:"Madimi One";font-weight:400;font-size:30px;line-height:1.15;margin-bottom:22px}
.gb-wrap{display:flex;gap:28px;align-items:flex-start}
.gb-player{flex:1 1 62%;position:sticky;top:20px}
.gb-player video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:16px;background:#000}
.gb-list{flex:1 1 38%;list-style:none;margin:0;padding:0}
.gb-list button{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:12px 14px;margin:0;cursor:pointer;font-family:"Poppins";font-weight:400;font-size:18px;line-height:1.3;color:var(--ink);border-radius:12px}
.gb-list button:hover{background:#eef6f7;color:var(--teal)}
.gb-list button.active{background:var(--azzurro);color:var(--teal);font-weight:600}
.gb-n{flex-shrink:0;color:var(--teal);font-weight:700;font-size:15px;min-width:22px}
@media(max-width:760px){
  .gb-videos>h2{font-size:25px}
  .gb-wrap{flex-direction:column;gap:18px}
  .gb-player{position:static}
}

.sa-back{display:inline-block;margin-top:44px;color:var(--teal);font-weight:600;text-decoration:none}
.sa-back:hover{text-decoration:underline}

/* footer .ft* → chrome.css (header resta .sa-*) */

/* sotto i 1100 il box affiancato non ha più spazio: torna a blocco pieno */
@media(max-width:1100px){
  .sa-esplora{float:none;width:100%;max-width:520px;margin:0 auto 32px;border-radius:44px}
}
@media(max-width:760px){
  .sa-hero{padding:34px 0 30px}
  .sa-hero-in{padding:0 26px}
  .sa-hero h1{font-size:34px}
  .sa-sub{gap:14px;margin-top:14px}
  .sa-sub img{width:26px}
  .sa-sub p{font-size:17px}
  .sa-wrap{padding:0 26px 60px}
  .sa-featured{margin:26px auto;border-radius:16px}
  .sa-content{font-size:16px;line-height:1.6}
  .sa-content h2{font-size:25px}
  .sa-esplora{border-radius:30px;padding:30px 28px}
  .sa-esplora h3{font-size:26px}
  .sa-esplora a{font-size:17px}
  .sa-modal{padding:12px}
  .sa-modal-x{top:8px;right:8px}
}