/* ==========================================================================
   HOME v2 — proposta alternativa di homepage
   Usa la stessa palette brand di theme.css (navy, azzurro, arancione):
   qui cambia solo il MODO in cui viene usata — più foto, più respiro,
   blocchi a tutta larghezza invece della sequenza testo+immagine.
   Nessuna regola tocca le altre pagine: tutto è dentro .fh-page.
   ========================================================================== */

.fh-page {
  --fh-radius: 20px;
  --fh-radius-lg: 28px;
  --fh-shadow: 0 24px 60px rgba(0, 32, 84, .18);
  --fh-shadow-sm: 0 10px 28px rgba(0, 32, 84, .12);
}

/* Il colore di contrasto (magenta scenico) è fissato in theme.css: vale su
   tutte le pagine. Qui restavano le alternative di prova e il relativo
   selettore, rimossi una volta scelta la palette. */
/* ===== HERO immersivo ===================================================== */
.fh-hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fh-navy-700);
}
.fh-hero__media { position: absolute; inset: 0; z-index: 0; }
.fh-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo scuro: serve a tenere leggibile il testo bianco, ma prima arrivava al 92%
   in basso e sommato al gradiente laterale cancellava la foto proprio dove sta il
   titolo. Alleggerito, e la leggibilità è recuperata con un'ombra sul testo:
   così la danza — che è il motivo per cui uno è su questa pagina — si vede. */
.fh-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,20,45,.18) 0%, rgba(0,20,45,.38) 45%, rgba(0,20,45,.72) 100%),
    linear-gradient(90deg, rgba(0,30,60,.62) 0%, rgba(0,30,60,.28) 45%, transparent 72%);
}
/* il padding-bottom extra lascia spazio al riquadro dei numeri, che sale
   sopra l'hero con margin negativo e altrimenti coprirebbe gli ultimi tag */
.fh-hero__inner {
  position: relative; z-index: 1; width: 100%;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(5.5rem, 10vw, 7rem);
}
.fh-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--fh-accent-500); color: #12212e;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 999px;
}
.fh-hero__title {
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem); line-height: 1.03;
  margin: 1rem 0 .75rem; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 16, 36, .55);   /* leggibile anche con velo più leggero */
}
.fh-hero__title em { font-style: normal; color: var(--fh-accent-500); }
.fh-hero__lead {
  color: #fff; font-size: clamp(1.02rem, 1.6vw, 1.25rem); max-width: 62ch;
  text-shadow: 0 1px 16px rgba(0, 16, 36, .65);
}
.fh-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* strisce discipline sotto l'hero */
.fh-hero__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.fh-tag {
  display: inline-flex; align-items: center; min-height: 44px;  /* area di tocco adeguata */
  border: 1px solid rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.08);
  padding: .35rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  backdrop-filter: blur(4px); text-decoration: none; transition: background-color .18s ease, border-color .18s ease;
}
.fh-tag:hover, .fh-tag:focus-visible { background: var(--fh-accent-500); border-color: var(--fh-accent-500); color: #12212e; }

/* ===== Testata delle pagine interne ======================================
   Stessa impronta dell'hero della home — foto, velo, occhiello, titolo grande —
   ma alta un terzo: qui il visitatore è già dentro, non va convinto di nuovo.
   Senza foto resta il blu pieno, che è comunque coerente. */
.fh-pagehead {
  position: relative; overflow: hidden;
  background: var(--fh-navy-700);
  display: flex; align-items: flex-end;
  min-height: clamp(260px, 34vh, 380px);
}
.fh-pagehead__media { position: absolute; inset: 0; z-index: 0; }
.fh-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Il blu pieno da solo è piatto: sopra ci passa una notazione coreografica
   — silhouette collegate da tracciati tratteggiati — che dà movimento senza
   rubare la scena. Sta sopra la foto ma sotto il testo, così si intravede
   anche nelle testate che una foto ce l'hanno. */
.fh-pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: url("/assets/img/pattern-danza.svg") repeat;
  background-size: 520px 380px;
  /* sopra una foto resta una texture appena percepibile: le silhouette
     disegnate non devono competere con i ballerini veri */
  opacity: .22;
  pointer-events: none;
}
/* dove non c'è foto il motivo è il protagonista del fondo */
.fh-pagehead:not(:has(.fh-pagehead__media))::after { opacity: .8; }
.fh-pagehead__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,20,45,.28) 0%, rgba(0,20,45,.5) 55%, rgba(0,20,45,.8) 100%),
    linear-gradient(90deg, rgba(0,30,60,.66) 0%, rgba(0,30,60,.3) 50%, transparent 78%);
}
.fh-pagehead__inner {
  /* z-index 2: sopra la foto (0) e sopra il motivo coreografico (1) */
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.fh-pagehead__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: 999px;
}
.fh-pagehead__title {
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.06;
  margin: .9rem 0 .6rem; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,16,36,.5);
}
.fh-pagehead__lead {
  color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 62ch; margin: 0; text-shadow: 0 1px 14px rgba(0,16,36,.6);
}
.fh-pagehead__cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.fh-pagehead .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.55); margin-bottom: .25rem; }
.fh-pagehead .breadcrumb a { color: rgba(255,255,255,.85); }
.fh-pagehead .breadcrumb-item.active { color: rgba(255,255,255,.7); }
.fh-pagehead .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* Le card dei corsi esistenti, portate nello stile della home: stesso raggio,
   stessa ombra, stesso sollevamento al passaggio del mouse. */
.fh-page .course-card {
  border: 0; border-radius: var(--fh-radius); overflow: hidden;
  background: var(--fh-surface-contrast); box-shadow: var(--fh-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fh-page .course-card:hover,
.fh-page .course-card:focus-within { transform: translateY(-4px); box-shadow: var(--fh-shadow); }
.fh-page .course-card img { transition: transform .55s ease; }
.fh-page .course-card:hover img { transform: scale(1.05); }
.fh-page .course-card .card-title { font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .fh-page .course-card, .fh-page .course-card img { transition: none; }
}
html.fh-reduce-motion .fh-page .course-card,
html.fh-reduce-motion .fh-page .course-card img { transition: none !important; }

/* Fascia alternata: .bg-surface coincide col fondo pagina e non separa nulla,
   questa invece stacca davvero, anche in tema scuro. */
.fh-band-alt { background: var(--fh-surface-contrast); }

/* ===== Riquadro generico, nello stesso stile delle card della home ======== */
.fh-box {
  background: var(--fh-surface-contrast);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow-sm);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  height: 100%;
}
.fh-box--flat { box-shadow: none; border: 1px solid rgba(0, 32, 84, .1); }
.fh-box__title { font-weight: 800; font-size: 1.15rem; margin: 0 0 .5rem; }
html[data-fh-theme="dark"] .fh-box--flat { border-color: rgba(233, 241, 250, .16); }

/* ===== A colpo d'occhio: le discipline più riconoscibili ================= */
.fh-glance-band { padding-top: clamp(2rem, 4vw, 2.75rem); }
.fh-glance {
  /* i titoli si allineano in alto: centrandoli, testi di lunghezza diversa
     facevano ballare le quattro card l'una rispetto all'altra */
  display: flex; align-items: flex-start; gap: .9rem; height: 100%;
  padding: .85rem; border-radius: var(--fh-radius);
  background: var(--fh-surface-contrast); box-shadow: var(--fh-shadow-sm);
  color: var(--fh-text); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fh-glance:hover, .fh-glance:focus-visible {
  transform: translateY(-3px); box-shadow: var(--fh-shadow); color: var(--fh-text);
}
.fh-glance__thumb {
  flex: 0 0 72px; width: 72px; height: 72px;
  border-radius: 14px; overflow: hidden; background: var(--fh-navy-700);
}
.fh-glance__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-glance__body { min-width: 0; }
.fh-glance__name { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.fh-glance__age {
  display: block; margin-top: .1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fh-accent-700);
}
.fh-glance__text { display: block; margin-top: .3rem; font-size: .88rem; color: var(--fh-text-muted); }
.fh-glance__more { margin-top: 1.1rem; font-size: .95rem; }
.fh-glance__more a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  color: var(--fh-navy-700); font-weight: 600;
}
/* l'accento scuro serve sul chiaro: su fondo notte va la versione luminosa */
html[data-fh-theme="dark"] .fh-glance__age { color: var(--fh-accent-500); }
html[data-fh-theme="dark"] .fh-glance__more a { color: var(--fh-text); }

/* ===== Barra numeri ====================================================== */
.fh-stats {
  background: var(--fh-navy-700); color: #fff;
  border-radius: var(--fh-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--fh-shadow);
  margin-top: -3.5rem; position: relative; z-index: 2;
}
.fh-stat__value {
  font-family: var(--fh-font-head); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 4.5vw, 3rem); color: var(--fh-accent-500);
}
.fh-stat__label { font-size: .95rem; opacity: .88; margin: .35rem 0 0; }

/* I pulsanti secondari usavano l'azzurro del brand su fondo chiaro: 4.1 di
   contrasto, appena sotto la soglia. Il navy lo porta oltre 7 restando in palette.
   L'altezza minima 44px è la dimensione minima raccomandata per il tocco. */
.fh-page .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.fh-page .btn-outline-primary {
  --bs-btn-color: var(--fh-navy-700);
  --bs-btn-border-color: var(--fh-navy-700);
  --bs-btn-hover-bg: var(--fh-navy-700);
  --bs-btn-hover-border-color: var(--fh-navy-700);
  --bs-btn-hover-color: #fff;
}
html[data-fh-theme="dark"] .fh-page .btn-outline-primary {
  --bs-btn-color: #cfe3f7;
  --bs-btn-border-color: #cfe3f7;
  --bs-btn-hover-bg: #cfe3f7;
  --bs-btn-hover-color: #071626;
}

/* ===== Titoli di sezione ================================================= */
/* accent-700 invece di 600: a 13px il tono medio restava esattamente sulla soglia
   minima di contrasto, quindi illeggibile per chi ha vista ridotta */
.fh-eyebrow {
  display: inline-block; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .82rem; color: var(--fh-accent-700); margin-bottom: .5rem;
}
.fh-title { font-weight: 800; letter-spacing: -.015em; font-size: clamp(1.8rem, 3.4vw, 2.7rem); text-wrap: balance; }

/* ===== Griglia discipline (card foto) ==================================== */
.fh-disc { position: relative; display: block; border-radius: var(--fh-radius); overflow: hidden;
  text-decoration: none; color: #fff; box-shadow: var(--fh-shadow-sm); background: var(--fh-navy-700); height: 100%; }
.fh-disc__media { position: relative; aspect-ratio: 4 / 5; }
.fh-disc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.fh-disc::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,20,45,0) 35%, rgba(0,20,45,.55) 62%, rgba(0,20,45,.93) 100%);
}
.fh-disc__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.15rem 1.25rem 1.25rem; }
.fh-disc__age {
  display: inline-block; background: var(--fh-accent-500); color: #12212e;
  font-size: .74rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; margin-bottom: .5rem;
}
.fh-disc__name {
  font-size: 1.22rem; font-weight: 800; margin: 0;
  overflow-wrap: anywhere; hyphens: auto;   /* "Danza Contemporanea" non deve uscire dalla card */
}
@media (max-width: 575.98px) { .fh-disc__name { font-size: 1.02rem; } }
/* bianco invece dell'accento: sul fondo scuro della card l'accento a 14px
   restava sotto la soglia di contrasto (3.1 contro 4.5 richiesto) */
.fh-disc__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  font-weight: 700; font-size: .92rem; color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.fh-disc__more i { color: var(--fh-accent-500); }
.fh-disc:hover .fh-disc__media img,
.fh-disc:focus-visible .fh-disc__media img { transform: scale(1.07); }
.fh-disc:hover .fh-disc__more,
.fh-disc:focus-visible .fh-disc__more { opacity: 1; transform: none; }
.fh-disc:focus-visible { outline: 3px solid var(--fh-accent-500); outline-offset: 3px; }

/* ===== Percorsi per età ================================================== */
.fh-path {
  border-radius: var(--fh-radius); overflow: hidden; height: 100%;
  background: var(--fh-surface-contrast); box-shadow: var(--fh-shadow-sm);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.fh-path:hover { transform: translateY(-4px); box-shadow: var(--fh-shadow); }
.fh-path__media { aspect-ratio: 16 / 10; overflow: hidden; }
.fh-path__media img { width: 100%; height: 100%; object-fit: cover; }
.fh-path__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.fh-path__age { font-weight: 800; color: var(--fh-accent-700); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.fh-path__title { font-size: 1.3rem; font-weight: 800; margin: .25rem 0 .5rem; }
.fh-path__lead { color: var(--fh-text-muted); font-size: .95rem; margin: 0 0 1rem; }

/* I corsi della fascia, ciascuno cliccabile sulla propria scheda: sostituiscono
   il vecchio pulsante unico "Vedi i corsi" ripetuto identico su tutte e tre le card. */
.fh-path__courses { list-style: none; margin: 0; padding: 0; margin-top: auto; }
.fh-path__courses li + li { border-top: 1px solid var(--bs-border-color, rgba(0,0,0,.08)); }
.fh-path__courses a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 44px;                     /* area di tocco adeguata su mobile */
  padding: .55rem .25rem;
  text-decoration: none; color: inherit; font-weight: 600;
  /* transform invece di padding: animare il padding fa ricalcolare il layout
     a ogni fotogramma e produce scatti; transform gira sulla scheda grafica */
  transition: color .15s ease, transform .15s ease;
}
.fh-path__courses a::after { content: "›"; color: var(--fh-accent-700); font-weight: 800; }
.fh-path__courses a em { font-style: normal; font-size: .82rem; color: var(--fh-text-muted); font-weight: 500; margin-left: auto; }
.fh-path__courses a:hover, .fh-path__courses a:focus-visible { color: var(--fh-accent-700); transform: translateX(4px); }
.fh-path__courses a:focus-visible { outline: 3px solid var(--fh-accent-500); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .fh-path__courses a { transition: none; } }

/* ===== Blocco scuro "il metodo" ========================================== */
.fh-method { background: var(--fh-navy-700); color: #fff; border-radius: var(--fh-radius-lg); overflow: hidden; }
.fh-method__media { min-height: 320px; height: 100%; }
.fh-method__media img { width: 100%; height: 100%; object-fit: cover; }
.fh-method__body { padding: clamp(1.75rem, 4vw, 3.25rem); }
/* sul navy del blocco l'accento a 13px dava 3.1 di contrasto: qui va il bianco */
.fh-method .fh-eyebrow { color: rgba(255,255,255,.92); }
.fh-step { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.fh-step__num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--fh-accent-500); color: #12212e;
}
.fh-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; }
.fh-step p { margin: 0; color: rgba(255,255,255,.85); font-size: .96rem; }

/* ===== Insegnanti ======================================================== */
.fh-teacher { text-decoration: none; color: inherit; display: block; }
.fh-teacher__media { aspect-ratio: 1; border-radius: var(--fh-radius); overflow: hidden; background: var(--fh-neutral-0); }
.fh-teacher__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fh-teacher:hover .fh-teacher__media img { transform: scale(1.06); }
.fh-teacher__name { font-weight: 800; margin: .7rem 0 .1rem; font-size: 1.02rem; }
/* i ruoli lunghi (es. "Danza Moderna • Propedeutica • Baby Class") verrebbero su
   4 righe e sfalserebbero l'allineamento delle card: li limito a 2 righe */
.fh-teacher__role {
  font-size: .88rem; color: var(--fh-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}

/* ===== Mosaico foto ====================================================== */
.fh-mosaic { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .fh-mosaic { grid-template-columns: repeat(4, 1fr); } }
.fh-mosaic a { display: block; border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 1; }
.fh-mosaic a img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.fh-mosaic a:hover img { transform: scale(1.08); }
@media (min-width: 768px) {
  .fh-mosaic a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
}

/* ===== "Ti riconosci?" — blocco problema/desiderio ======================= */
/* Niente barra di colore spessa sul bordo della card: con gli angoli arrotondati
   stona, ed è uno degli stilemi più riconoscibili delle interfacce fatte in serie.
   L'accento sta nelle virgolette della domanda, dove serve davvero. */
.fh-need {
  background: var(--fh-surface-contrast); border-radius: var(--fh-radius);
  padding: 1.4rem 1.5rem; height: 100%; box-shadow: var(--fh-shadow-sm);
}
.fh-need__q {
  font-weight: 800; font-size: 1.05rem; margin: 0 0 .5rem;
  color: var(--fh-accent-700);
}
.fh-need__a { margin: 0; color: var(--fh-text-muted); font-size: .96rem; }
.fh-need__a strong { color: var(--fh-text); }

/* ===== Cosa ti porti a casa (benefici) =================================== */
.fh-gain { display: flex; gap: .9rem; align-items: flex-start; }
.fh-gain__icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: color-mix(in oklab, var(--fh-accent-500) 22%, transparent);
  color: var(--fh-accent-700);
}
.fh-gain h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .2rem; }
.fh-gain p { margin: 0; color: var(--fh-text-muted); font-size: .95rem; }

/* ===== Academy: blocco serio, tono diverso dal resto ===================== */
.fh-academy {
  border-radius: var(--fh-radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #071626 0%, var(--fh-navy-700) 60%, #0a2c52 100%);
  color: #fff; position: relative;
}
.fh-academy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--fh-accent-500) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.fh-academy__body { position: relative; padding: clamp(1.75rem, 4vw, 3.25rem); }
.fh-academy__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid color-mix(in oklab, var(--fh-accent-500) 60%, transparent);
  color: var(--fh-accent-500); background: color-mix(in oklab, var(--fh-accent-500) 12%, transparent);
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px;
}
.fh-academy h2 { font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 1rem 0 .6rem; }
.fh-academy__lead { color: rgba(255,255,255,.9); max-width: 62ch; }
.fh-academy__list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.fh-academy__list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; color: rgba(255,255,255,.92); }
.fh-academy__list i { color: var(--fh-accent-500); margin-top: .15rem; }

/* ===== "Sentirsi in famiglia" =========================================== */
.fh-family__media { border-radius: var(--fh-radius); overflow: hidden; height: 100%; min-height: 260px; }
.fh-family__media img { width: 100%; height: 100%; object-fit: cover; }
.fh-family__points { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.fh-family__points li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .75rem; }
.fh-family__points i { color: var(--fh-accent-600); margin-top: .2rem; }

/* ===== FAQ ============================================================== */
.fh-page .accordion-button:not(.collapsed) { background: color-mix(in oklab, var(--fh-accent-500) 14%, transparent); color: var(--fh-text); }
.fh-page .accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--fh-accent-500) 35%, transparent); }

/* ===== CTA finale ======================================================== */
.fh-cta {
  border-radius: var(--fh-radius-lg); overflow: hidden; position: relative;
  background: linear-gradient(120deg, var(--fh-navy-700) 0%, var(--fh-primary-600) 100%);
  color: #fff; padding: clamp(2rem, 5vw, 3.5rem);
}
.fh-cta::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,167,35,.35), transparent 65%);
  pointer-events: none;
}
.fh-cta h2 { font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* ===== Citazione ========================================================= */
/* Al posto della barra verticale colorata (stilema molto abusato) uso un segno
   tipografico: le virgolette aperte, che è come si cita da sempre in tipografia. */
.fh-quote { position: relative; padding-left: 3.2rem; }
.fh-quote::before {
  content: "\201C";                      /* virgolette aperte */
  position: absolute; left: 0; top: -.35em;
  font-family: var(--fh-font-head); font-size: 4.5rem; line-height: 1;
  color: var(--fh-accent-500);
}
.fh-quote p { font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.45; }
@media (max-width: 575.98px) {
  .fh-quote { padding-left: 2.4rem; }
  .fh-quote::before { font-size: 3.4rem; }
}

/* ===== Dark mode ========================================================= */
html[data-fh-theme="dark"] .fh-path { background: var(--fh-surface-contrast); }
html[data-fh-theme="dark"] .fh-stats,
html[data-fh-theme="dark"] .fh-method { background: #071626; }
html[data-fh-theme="dark"] .fh-teacher__media { background: #16283C; }

/* ===== Animazioni ridotte ================================================ */
@media (prefers-reduced-motion: reduce) {
  .fh-disc__media img, .fh-teacher__media img, .fh-mosaic a img,
  .fh-path, .fh-disc__more { transition: none !important; }
  .fh-path:hover { transform: none; }
}
html.fh-reduce-motion .fh-disc__media img,
html.fh-reduce-motion .fh-teacher__media img,
html.fh-reduce-motion .fh-mosaic a img,
html.fh-reduce-motion .fh-path { transition: none !important; }
html.fh-reduce-motion .fh-path:hover { transform: none !important; }

/* ==========================================================================
   COLORE DI DISCIPLINA
   Ogni disciplina ha il suo colore e il suo logo, gli stessi delle locandine.
   Le variabili --disc* arrivano dall'attributo style della card (vedi
   discipline_style() in includes/functions.php): il CSS non sa quale
   disciplina sta disegnando, sa solo che colore usare.
   Le card senza colore assegnato restano com'erano.
   ========================================================================== */

/* Filo di colore sul bordo. Non una fascia spessa su un lato: tutto il
   contorno, così la card resta un oggetto intero. */
.fh-disc[style*="--disc"],
.fh-page .course-card[style*="--disc"] {
  box-shadow: var(--fh-shadow-sm), inset 0 0 0 2px var(--disc);
}
.fh-disc[style*="--disc"]:hover,
.fh-page .course-card[style*="--disc"]:hover {
  box-shadow: var(--fh-shadow), inset 0 0 0 2px var(--disc);
}

/* Titolo nel colore della disciplina. Usa la variante scurita: il giallo
   ufficiale su bianco sta a 1,46:1 e sarebbe illeggibile. */
.fh-page .course-card[style*="--disc"] .card-title { color: var(--disc-testo); }
html[data-fh-theme="dark"] .fh-page .course-card[style*="--disc"] .card-title { color: var(--disc-testo-scuro); }

/* Filigrana: il logo della disciplina sopra la foto, messo qui e non
   stampato sul file, così cambiando la foto la filigrana resta. */
/* Selettore con img davanti di proposito: dentro le tessere vale
   `.fh-disc__media img { width:100%; height:100% }`, che senza questo
   avrebbe gonfiato la filigrana fino a coprire l'intera foto. */
/* Logo della disciplina accanto al titolo di pagina */
.fh-pagehead__logo {
  width: clamp(44px, 6vw, 68px); height: auto;
  vertical-align: -.12em; margin-right: .5rem;
  filter: drop-shadow(0 2px 8px rgba(0, 16, 36, .45));
}

img.fh-mark {
  position: absolute; z-index: 2;
  /* Bootstrap mette top:0 e left:0 su tutti i figli di .ratio: senza
     riportarli ad auto la filigrana finisce nell'angolo opposto. */
  top: auto; left: auto; right: .6rem; bottom: .6rem;
  width: clamp(38px, 16%, 62px); height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 16, 36, .5));
  pointer-events: none;
}
/* sulle tessere scure della home il logo va schiarito per staccare dal fondo */
.fh-disc .fh-mark { opacity: .95; }
.fh-page .course-card .fh-mark { right: .5rem; bottom: .5rem; }

/* Micro-card della home: qui la foto è un quadratino da 72px e una filigrana
   sopra sarebbe illeggibile. Il colore arriva dal nome e da un filo a sinistra
   del riquadro dell'immagine, che è il punto in cui l'occhio parte. */
.fh-glance[style*="--disc"] .fh-glance__name { color: var(--disc-testo); }
.fh-glance[style*="--disc"] .fh-glance__thumb { box-shadow: inset 0 0 0 2px var(--disc); }
html[data-fh-theme="dark"] .fh-glance[style*="--disc"] .fh-glance__name { color: var(--disc-testo-scuro); }

/* Tessere della home: la foto copre tutta la superficie, quindi un'ombra
   interna resterebbe nascosta sotto di essa. Il contorno va disegnato sopra,
   con un pseudo-elemento: ::after è già occupato dalla velatura. */
.fh-disc[style*="--disc"]::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border: 3px solid var(--disc); border-radius: inherit;
  pointer-events: none;
}

/* Anche il badge dell'età prende il colore della disciplina: lasciarlo
   magenta creerebbe due colori in competizione dentro la stessa card.
   Il magenta resta il colore delle azioni, non delle etichette. */
.fh-page .course-card[style*="--disc"] .badge-accent {
  background: var(--disc-testo); color: #fff;
}
html[data-fh-theme="dark"] .fh-page .course-card[style*="--disc"] .badge-accent {
  background: var(--disc-testo-scuro); color: #12212e;
}

/* Etichetta del nome disciplina, dove serve nominarla */
.fh-disc-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--disc); border-radius: 999px; padding: .2rem .6rem;
}

/* Variante con ritratto accanto al titolo (schede insegnante) */
.fh-pagehead--split { min-height: 0; }
.fh-pagehead--split .fh-pagehead__inner { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.fh-pagehead__portrait { background: rgba(255,255,255,.08); }
.fh-pagehead__portrait img { width: 100%; height: 100%; object-fit: cover; }
.fh-pagehead__fact {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  color: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem;
}