/* =========================================================================
   /corsi/ — Image & Beauty Academy
   Caricato solo su questa pagina (enqueue condizionale in functions.php).

   Regole del progetto rispettate qui:
   - mobile-first, verificato a 375px;
   - l'ARANCIONE PIENO e' solo della CTA demo: i bottoni delle schede corso
     hanno il solo bordo, o la pagina cannibalizza la conversione del sito;
   - icone SVG o pseudo-elementi, mai emoji;
   - contrasto AA (per il testo su chiaro si usa --orange-text, non --orange);
   - una riga di testo con icone non si fa MAI in flex: i nodi di testo
     diventano flex-item e vanno a capo dove capita (gia' successo su .ftrust).
   ========================================================================= */

/* Il tema ha section{padding:clamp(56px,8vw,94px) 0} globale: va bene per le
   sezioni normali, ma i blocchi con foto di sfondo gestiscono da soli il padding. */

/* ---------- HERO ---------- */
.co-hero{position:relative;background:var(--ink);color:#fff;padding:0;overflow:hidden}
.co-hero-bg{position:absolute;inset:0;z-index:0}
.co-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Due gradienti sovrapposti: il verticale garantisce la leggibilita' in basso,
   quello orizzontale protegge il testo sul lato sinistro anche quando la foto
   e' chiara proprio li' (la sala e' illuminata a sinistra). */
.co-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,8,6,.78) 0%,rgba(10,8,6,.55) 45%,rgba(10,8,6,.90) 100%),
             linear-gradient(90deg,rgba(10,8,6,.72),transparent 70%)}
.co-hero-in{position:relative;z-index:2;padding-top:clamp(56px,10vw,104px);padding-bottom:clamp(48px,8vw,88px)}
.co-hero h1{color:#fff;max-width:16ch}
.co-hero .ey{color:var(--orange-lt)}
.co-quote{margin:26px 0 0;padding:0 0 0 18px;border-left:3px solid var(--orange);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.45rem);
  line-height:1.3;color:#fff;max-width:34ch;font-style:normal}
.co-quote cite{display:block;margin-top:10px;font-family:'Inter',sans-serif;font-style:normal;
  font-weight:400;font-size:.86rem;color:var(--muted)}
.co-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.co-hero .txtlink{color:#e7ddd0!important;text-decoration:underline;font-weight:500;font-size:.92rem}
.co-hero .txtlink:hover{color:#fff!important}

/* ---------- DEFINIZIONE ---------- */
.co-def{background:var(--cream);padding:clamp(30px,5vw,46px) 0}
.co-def p{max-width:70ch;margin:0;font-size:clamp(1rem,1.9vw,1.14rem);color:var(--ink)}

/* ---------- I DUE BINARI ---------- */
.co-lead{max-width:62ch;margin-top:14px;color:var(--grey)}
.co-due{display:grid;gap:18px;margin-top:32px}
.co-b{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);background:#fff}
.co-b h3{margin:12px 0 10px;font-size:1.16rem}
.co-b p{margin-bottom:10px}
.co-b-incluso{background:var(--card);border-color:#cfe3d4}
.co-b-academy{border-color:rgba(245,132,60,.45)}
/* La foto sta DENTRO la card del binario incluso (prima aveva una sezione tutta sua
   che ripeteva lo stesso contenuto). Margini negativi: tocca i bordi della card. */
.co-b-foto{display:block;margin:calc(-1 * clamp(22px,3vw,30px)) calc(-1 * clamp(22px,3vw,30px)) 20px;
  border-radius:16px 16px 0 0;overflow:hidden}
.co-b-foto img{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 45%}
/* Elenco numerato dei 5 corsi nella card Academy: numeri arancioni, righe cliccabili. */
.co-b-elenco{list-style:none;counter-reset:c;margin:16px 0 0;padding:0}
.co-b-elenco li{counter-increment:c;position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--line)}
.co-b-elenco li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.72rem;color:var(--orange-text)}
.co-b-elenco a{color:var(--ink);font-weight:600;text-decoration:none;font-size:.96rem}
.co-b-elenco a:hover{color:var(--orange-d);text-decoration:underline}
/* Chip: la PAROLA porta l'informazione, non il colore (regola contrasto/daltonismo). */
.co-chip{display:inline-block;font-family:'Archivo',sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:99px;
  background:rgba(245,132,60,.14);color:var(--orange-text)}
/* Verde piu' scuro di --green-d: quel token da' 5,35:1 sul BIANCO, ma qui il fondo
   e' il verde tenue del chip sopra la card crema, e il rapporto scendeva a 4,2:1
   (sotto la soglia AA di 4,5). Misurato sul composito, non sul token. */
.co-chip-ok{background:rgba(47,143,82,.13);color:#15592f}
.co-more a{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.co-more a:hover{color:var(--orange-d)}
.co-more a + a{margin-left:16px}

/* ---------- MANIFESTO ---------- */
.co-manifesto{background:var(--ink);color:#e9ddcf}
.co-man-grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
.co-man-foto img{width:100%;border-radius:16px}
.co-manifesto h2{color:#fff;margin-top:16px}
.co-manifesto .ey{color:var(--orange-lt)}
.co-manifesto p{margin-top:16px}
.co-manifesto b{color:#fff}
.co-firma{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#fff}
.co-firma small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
/* --orange-text e' l'arancione per i fondi CHIARI: qui il fondo e' l'ink del
   manifesto e il link scendeva a 3,37:1. Con --orange-lt siamo a 9,4:1. */
.co-manifesto .co-more a{color:var(--orange-lt)}
.co-manifesto .co-more a:hover{color:#fff}
.co-man-link{margin-top:12px}

/* L'indice ancorato (.co-indice) e' stato rimosso: i cinque nomi sono elencati
   nella card Academy piu' in alto — vedi la nota nel template. */

/* Fatti comuni ai cinque corsi: riga di "pillole" sotto l'intro della sezione.
   E' una UL con display:flex sugli ELEMENTI (i li), mai sul testo dentro. */
.co-fatti{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.co-fatti li{position:relative;padding:8px 14px 8px 30px;background:var(--card);
  border:1px solid var(--line);border-radius:99px;font-size:.86rem;font-weight:600;color:var(--ink)}
/* Spunta disegnata, non emoji (regola del progetto). */
.co-fatti li::before{content:"";position:absolute;left:13px;top:14px;width:8px;height:4px;
  border-left:2px solid var(--green-d);border-bottom:2px solid var(--green-d);transform:rotate(-45deg)}

/* ---------- SCHEDE CORSO ---------- */
.co-lista{display:grid;gap:20px;margin-top:26px}
.co-card{border:1px solid var(--line);border-radius:18px;background:#fff;
  padding:clamp(22px,3.4vw,36px);
  /* header sticky + margine: senza, il titolo della card finisce sotto l'header
     quando si arriva dall'indice. */
  scroll-margin-top:88px}
.co-card:focus{outline:none}
.co-card-h h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,1.9rem);letter-spacing:-.02em;line-height:1.05;margin:12px 0 0}
.co-claim{margin-top:10px;font-size:clamp(1rem,2vw,1.14rem);color:var(--ink);font-weight:600;max-width:46ch}

/* Sintesi: le due righe che fanno scegliere. Griglia e non flex, cosi' i due valori
   restano incolonnati anche quando uno va a capo. */
.co-sint{margin:18px 0 0;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}
/* Mobile-first IMPILATO: a 375px la card e' larga ~330px e una colonna fissa da
   5,4rem per l'etichetta lasciava al testo 230px, cioe' cinque righe da tre parole.
   L'affiancamento parte da 560px, dove lo spazio c'e' davvero. */
.co-sint > div{display:grid;gap:2px}
@media(min-width:560px){
  .co-sint > div{grid-template-columns:5.4rem 1fr;gap:12px;align-items:baseline}
}
.co-sint dt{font-family:'Archivo',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-d)}
.co-sint dd{margin:0;font-size:.95rem;line-height:1.4;color:var(--ink)}

/* Contenuto del dettaglio a scomparsa */
.co-det{padding:0 16px 18px}
.co-det p{margin-bottom:12px}
.co-diverso{padding:14px 16px;background:var(--card);border-radius:10px;border-left:3px solid var(--orange)}
/* La card ponte (CRM) si distingue con fondo e bordo, NON con un terzo tipo di chip:
   i chip devono restare due, o smettono di segnalare gratis/a pagamento. */
/* La card del corso ponte: fondo e bordo diversi, NON un terzo tipo di chip
   (i chip devono restare due, o smettono di segnalare gratis/a pagamento).
   La classe e' .co-w-ponte: .co-ponte da sola appartiene alla sezione scura. */
.co-card.co-w-ponte{background:var(--card);border-color:rgba(245,132,60,.5)}

/* "Cosa imparerai": <details> nativo, chiuso. Niente JS: funziona senza, espone
   aria-expanded da solo e resta ricercabile con Ctrl+F.
   (Il programma modulo-per-modulo non c'e' piu': veniva dalla brochure vecchia.) */
.co-prog{margin-top:24px}
.co-prog details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
.co-prog summary{display:flex;align-items:flex-start;gap:12px;padding:16px 44px 16px 16px;
  cursor:pointer;position:relative;list-style:none;min-height:48px}
.co-prog summary::-webkit-details-marker{display:none}
.co-prog summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;color:var(--orange-text);line-height:1}
.co-prog details[open] summary::after{content:"–"}
.co-m-t{flex:1 1 auto;min-width:0;font-weight:700;line-height:1.3;color:var(--ink)}
.co-m-t small{display:block;font-weight:400;font-size:.86rem;color:var(--muted-d);margin-top:3px}
/* padding-left 16px e non 46: il rientro serviva ad allineare le voci sotto il
   numero del modulo, che non esiste piu'. */
.co-m-v{list-style:none;margin:0;padding:0 16px 16px 16px}
.co-m-v li{position:relative;padding:5px 0 5px 16px;font-size:.94rem;color:var(--grey)}
.co-m-v li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--orange)}

.co-card-f{display:grid;gap:20px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.co-mini h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-d);margin-bottom:10px}
.co-mini ul{list-style:none;margin:0;padding:0}
.co-mini li{position:relative;padding:5px 0 5px 18px;font-size:.94rem}
.co-mini li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--line)}
.co-ok li::before{content:"";width:9px;height:5px;border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(-45deg);top:10px;background:none}
/* Bottone secondario delle schede corso.
   NON si usa .btn-ghost del tema: quello e' testo bianco con bordo bianco, pensato
   per i fondi scuri, e sulle card chiare risultava invisibile (contrasto 1:1).
   Qui: contorno scuro su fondo chiaro (16:1), che resta chiaramente subordinato
   all'arancione della demo senza sparire. */
.co-btn{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink)}
.co-btn:hover{background:var(--ink);color:#fff!important}
.co-card-cta{margin-top:20px;margin-bottom:0}
.co-card-cta .btn{width:100%}

/* ---------- PONTE AL SOFTWARE ---------- */
.co-ponte{background:var(--ink);color:#fff;text-align:center;padding:clamp(40px,6vw,64px) 0}
.co-ponte p{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2.8vw,1.7rem);line-height:1.2;letter-spacing:-.02em;max-width:22ch;margin:0 auto}
.co-ponte-link{display:inline-block;margin-top:20px;color:#fff;font-weight:700;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange);
  text-decoration-thickness:2px}
.co-ponte-link:hover{color:var(--orange-lt)}

/* Le sezioni .co-giornata e .co-docente sono state eliminate (ripetevano contenuti
   gia' presenti — vedi la nota nel template): con loro se ne vanno i rispettivi
   stili, .co-check e .co-giornata-cta compresi. */

/* ---------- FAQ ---------- */
.co-faq .hf-list{margin-top:26px}

/* ---------- NOTA REDAZIONE (solo admin) ---------- */
.co-admin{background:#fff7e8;border-top:2px solid var(--orange);padding:26px 0}
.co-admin p{font-size:.92rem;color:var(--ink)}
.co-admin ul{margin:12px 0 0 18px;font-size:.9rem;color:var(--grey)}
.co-admin li{padding:3px 0}

/* =========================== DESKTOP =========================== */
@media(min-width:900px){
  .co-due{grid-template-columns:1fr 1fr}
  .co-man-grid{grid-template-columns:.85fr 1.15fr}
  .co-card-f{grid-template-columns:1fr 1fr}
  .co-card-cta .btn{width:auto;min-width:280px}
  /* DUE colonne, non tre: le schede ora sono corte e uguali, e quattro corsi in due
     colonne fanno 2+2 pieni. Con tre colonne l'ultima riga resterebbe spaiata.
     Il quinto (CRM) chiude a tutta larghezza: e' il ponte verso il gestionale. */
  .co-lista{grid-template-columns:1fr 1fr;align-items:start}
  .co-w-ponte{grid-column:1 / -1}
  /* La card a tutta larghezza e' larga ~1080px: senza limite la riga di testo del
     dettaglio supererebbe i 120 caratteri (la regola e' 60-75).
     60ch e non 75: per Inter 1ch = 0,63em, mentre il carattere MEDIO sta sotto 0,5em,
     quindi 60ch valgono ~75 caratteri reali. Stesso valore usato da .co-lead. */
  .co-w-ponte .co-det,.co-w-ponte .co-claim{max-width:60ch}
}

/* =========================== MOBILE =========================== */
@media(max-width:520px){
  .co-hero .cta-row .btn{width:100%}
  .co-quote{font-size:1.02rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}