/* ============================================================
   FOGLIO DI STILE PRINCIPALE
   Struttura: reset -> layout base -> componenti -> pagine -> utility
   ============================================================ */

/* ---------- Reset minimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: var(--font-testo);
  font-size: var(--testo-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transizione-base), color var(--transizione-base);
  /* Il sito non ha campi di testo: se compare comunque il cursore
     lampeggiante cliccando in giro (di solito è la "navigazione con
     cursore" del browser, attivabile per sbaglio con F7), almeno non
     si vede più. */
  caret-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Anello azzurro netto quando si naviga da tastiera (Tab), invece del
   contorno di default del browser (spesso appena visibile o assente
   sui bottoni con sfondo/bordo personalizzati). Solo da tastiera,
   niente contorno quando si clicca col mouse — ":focus-visible" lo
   distingue da solo. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--colore-accento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Link "salta al contenuto" ---------- */
/* Invisibile (spostato fuori schermo) finché non riceve il focus da
   tastiera: chi naviga con Tab può saltare menu e bottoni della
   navbar e arrivare dritto al contenuto, invece di doverli tabbare
   tutti ad ogni pagina. Chi usa il mouse non lo vede mai. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--spazio-md);
  z-index: 300;
  background: var(--colore-accento);
  color: var(--colore-accento-testo);
  padding: 0.6rem 1.1rem;
  border-radius: var(--raggio-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transizione-rapida);
}

.skip-link:focus-visible {
  top: var(--spazio-sm);
}

/* ---------- Layout base ---------- */
.contenitore {
  width: 100%;
  max-width: var(--larghezza-contenuto);
  margin-inline: auto;
  padding-inline: var(--spazio-md);
}

section {
  padding-block: var(--spazio-2xl);
}

/* Le sezioni sono ancore di scroll: questo evita che la navbar
   fissa copra il titolo quando si clicca un link del menu. Il valore
   è volutamente vicino ai 64px della navbar (poco margine in più),
   così il titolo atterra più in alto sullo schermo. */
[data-sezione] {
  scroll-margin-top: 68px;
}

.sezione-titolo {
  font-size: var(--testo-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: var(--spazio-xl);
}

/* Piccolo segmento azzurro sotto il titolo: dà un punto di
   riferimento visivo e un po' di personalità a ogni sezione. */
.sezione-titolo::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: var(--raggio-badge);
  background: var(--colore-accento);
  margin: var(--spazio-sm) auto 0;
}

.sezione-intro {
  color: var(--colore-testo-secondario);
  max-width: 60ch;
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--spazio-xl);
}

/* Avvolge il "primo blocco" di una sezione (titolo + intro + eventuale
   card in evidenza) e gli riserva uno spazio minimo pari quasi a uno
   schermo intero: cliccando una voce del menu, il titolo compare
   sempre alla stessa altezza (scroll-margin-top qui sotto) e quello
   che segue nella sezione resta sotto al bordo inferiore, così non si
   vede mai un riquadro tagliato a metà — basta scorrere un po' per
   trovarlo. 210px approssima navbar + padding della sezione + titolo:
   è un minimo, il contenuto reale può comunque superarlo. */
.blocco-iniziale {
  min-height: calc(100vh - 210px);
}

/* In Esperienze il "primo blocco" (titolo + sottotitolo + box Tutor)
   è già corposo di suo: il minimo generico da solo lo spingerebbe
   oltre il bordo dello schermo su schermi non altissimi, tagliando il
   box Tutor. Qui basta un minimo più basso, tarato sull'altezza reale
   del blocco, così il box resta sempre visibile per intero. */
#esperienze .blocco-iniziale {
  min-height: calc(100vh - 350px);
}

/* Sezione Contatti: è l'ultima prima del footer, quindi la pagina ha
   poco margine di scroll oltre di essa. Senza un'altezza minima, il
   browser non riesce sempre ad allineare il titolo alla stessa altezza
   delle altre sezioni (finisce lo spazio per scorrere) e il footer
   rischia di comparire tagliato a metà sotto. */
.contatti--alta {
  min-height: calc(100vh - 80px);
}

/* 1024px: soglia unica di "modalità mobile" per tutto il sito — telefono
   (sia verticale sia orizzontale) e iPad verticale. Non è legata
   all'orientamento dello schermo ma solo alla larghezza: nella pratica
   ogni iPad in orizzontale è largo 1080px o più (quindi resta fuori,
   vede il sito "da computer"), mentre ogni telefono anche in
   orizzontale e ogni iPad in verticale restano sotto 1024px. Vedi anche
   il blocco "MODALITÀ MOBILE" più in basso, nella sezione RESPONSIVE,
   per i cambiamenti di impaginazione veri e propri (card, menu, hero...). */
@media (max-width: 1024px) {
  /* Su mobile lo scroll extra pesa di più che il vantaggio estetico:
     meglio contenuti compatti che grandi vuoti da scorrere. */
  .blocco-iniziale,
  .contatti--alta {
    min-height: 0;
  }
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--colore-sfondo) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--colore-bordo);
}

.navbar__interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.navbar__logo {
  font-weight: 700;
  font-size: var(--testo-base);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}

.navbar__logo img {
  height: 28px;
  width: auto;
  border-radius: 5px;
}

/* Coppia di immagini chiaro/scuro (logo, loghi acquisto, ecc.): solo
   una delle due è visibile per volta, in base al tema attivo. Nessuno
   sfarfallio al caricamento perché l'attributo data-theme viene già
   impostato prima del primo render (vedi lo script in cima a ogni
   pagina HTML). */
.tema-scuro-mostra {
  display: none;
}

[data-theme="dark"] .tema-chiaro-mostra {
  display: none;
}

[data-theme="dark"] .tema-scuro-mostra {
  display: inline-block;
}

/* Centrato sull'intera barra (non solo "spinto" tra logo e azioni):
   posizionato in assoluto al 50%, indipendente da quanto sono larghi
   logo e azioni sui due lati. */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: var(--raggio-badge);
  font-size: var(--testo-sm);
  font-weight: 500;
  color: var(--colore-testo-secondario);
  transition: color var(--transizione-rapida), background var(--transizione-base), box-shadow var(--transizione-base);
}

.navbar__link:hover {
  color: var(--colore-accento);
}

/* Sezione attiva: una "bolla" piena, non solo il testo colorato —
   in stile "liquid glass" (sfondo semitrasparente sfocato con un
   sottile riflesso in alto), per capire subito dove ci si trova. */
.navbar__link[aria-current="page"] {
  color: var(--colore-accento);
  background: color-mix(in srgb, var(--colore-accento) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent), 0 1px 3px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}

.navbar__azioni {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
}

/* Icona a goccia della posizione, vedi ".contatti__luogo" sotto. */
.icona-luogo {
  display: inline-flex;
  color: var(--colore-accento);
}

.icona-luogo svg {
  width: 14px;
  height: 14px;
}

/* "Milano, Italia": non più in navbar, sta sotto Email/LinkedIn nei
   Contatti, sempre (non solo su mobile). Aspetto/hover condivisi con
   la bolla "Portfolio personale" della hero, vedi ".badge-pillola" più
   sotto — "contatti__luogo" ormai serve solo da aggancio nel markup,
   niente CSS proprio: la centratura è sul guscio ".fade-in" che la
   avvolge (vedi "#contatti .fade-in:has(...)"). */

.navbar__icona-btn {
  background: none;
  border: 1px solid var(--colore-bordo);
  color: var(--colore-testo-secondario);
  width: 36px;
  height: 36px;
  border-radius: var(--raggio-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transizione-rapida), color var(--transizione-rapida);
}

.navbar__icona-btn:hover {
  border-color: var(--colore-accento);
  color: var(--colore-accento);
}

.navbar__icona-btn svg {
  width: 17px;
  height: 17px;
}

.navbar__hamburger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  color: var(--colore-testo);
}

/* Tre barre disegnate in CSS invece dell'icona SVG statica: così
   possiamo animarle singolarmente e farle diventare una "X" quando il
   menu è aperto (vedi [aria-expanded="true"] sotto), invece di uno
   scambio secco. */
.navbar__hamburger-linea {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 250ms ease, opacity 200ms ease, top 250ms ease;
}

.navbar__hamburger-linea:nth-child(1) {
  top: 4px;
}

.navbar__hamburger-linea:nth-child(2) {
  top: 10px;
}

.navbar__hamburger-linea:nth-child(3) {
  top: 16px;
}

.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-linea:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
}

.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-linea:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-linea:nth-child(3) {
  top: 10px;
  transform: rotate(-45deg);
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Larghezza minima fissa (misurata su "Get in touch", il testo più
     lungo tra i due bottoni/lingue): stessa dimensione sempre, sia
     tra i due bottoni sia tra IT ed EN, testo sempre centrato. */
  min-width: 230px;
  padding: 0.88rem 1.5rem;
  border-radius: var(--raggio-sm);
  font-size: var(--testo-base);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transizione-rapida), border-color var(--transizione-rapida),
    transform var(--transizione-rapida), color var(--transizione-rapida), box-shadow var(--transizione-rapida);
}

/* Si sollevano leggermente al passaggio del cursore, come i link
   Email/LinkedIn nei Contatti. */
.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primario {
  background: var(--colore-accento);
  color: var(--colore-accento-testo);
  box-shadow: var(--ombra-bottone);
}

.btn--primario:hover {
  background: var(--colore-accento-hover);
}

.btn--secondario {
  background: var(--colore-sfondo-card);
  border-color: var(--colore-bordo);
  color: var(--colore-testo);
}

.btn--secondario:hover {
  border-color: var(--colore-accento);
  color: var(--colore-accento);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-xl);
  padding-block: var(--spazio-2xl);
}

.hero__testo {
  flex: 1;
  min-width: 0;
}

.parola-chiave {
  color: var(--colore-accento);
  font-weight: 700;
}

/* Foto profilo: bordo pulito + ombra morbida, semplice e diretto
   (niente cornici sfalsate). */
.hero__avatar-wrap {
  flex: none;
  width: 280px;
  height: 280px;
  border-radius: 32px;
  overflow: hidden;
  border: 5px solid var(--colore-accento);
  box-shadow: var(--ombra-card);
  transition: box-shadow var(--transizione-base), transform var(--transizione-base);
}

/* Stesso bagliore azzurrino sfocato delle altre box al passaggio del
   cursore. */
.hero__avatar-wrap:hover {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
}

.hero__avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transizione-base);
}

/* Stesso zoom leggero delle altre box al passaggio del cursore. */
.hero__avatar-wrap:hover img {
  transform: scale(1.08);
}

/* ---------- Pillola condivisa (bolla hero + "Milano, Italia") ----------
   Bolla con la dicitura "Portfolio personale" prima del titolo. Aveva
   un pallino animato (azzurro/verde, pulsante) quando diceva
   "Benvenuto": lì aveva senso, un tocco "vivo" a fare da saluto. Come
   etichetta statica il pallino pulsante non comunicava più niente di
   coerente — un indicatore lampeggiante convenzionalmente vuol dire
   "online adesso"/"live", non descrive una categoria di contenuto —
   quindi è stato tolto. Ora usa la stessa identica pillola/hover di
   ".contatti__luogo" ("Milano, Italia" nei Contatti), tramite la
   classe condivisa ".badge-pillola": un'iconcina "account" (testa +
   spalle) al posto della goccia di posizione, stesso trattamento.
   Sono gli unici due elementi del sito che si sollevano in hover senza
   essere cliccabili — scelta stilistica deliberata, non un'incoerenza:
   fanno da "bordo" decorativo coerente in cima e in fondo alla pagina. */
.badge-pillola {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  font-weight: 600;
  color: var(--colore-testo-secondario);
  transition: color var(--transizione-rapida), border-color var(--transizione-rapida), transform var(--transizione-rapida);
}

/* Hover ancorato a ".fade-in" (guscio esterno immobile), non alla
   pillola stessa: stesso motivo/meccanismo del commento su
   ".fade-in:hover > .card" più sopra — niente zona d'ombra in cui
   l'hover potrebbe accendersi e spegnersi in loop. */
.fade-in:hover > .badge-pillola {
  color: var(--colore-accento);
  border-color: var(--colore-accento);
  transform: translateY(-3px);
}

/* ".fade-in" normalmente è un div a piena larghezza (va bene per le
   card, che sono già larghe quanto il loro contenitore) — ma una
   pillola è larga solo quanto il suo contenuto: senza questa regola,
   il guscio non combacerebbe con la pillola dentro a riposo, e il
   meccanismo anti-tremolio (vedi commento su ".fade-in" più in basso)
   perderebbe la sua base — il cursore fuori dalla pillola ma dentro al
   guscio ormai troppo largo risulterebbe comunque "in hover". */
.fade-in:has(> .badge-pillola) {
  display: flex;
  width: fit-content;
}

/* Solo "Milano, Italia" va centrata nei Contatti (stesso spazio sopra
   che aveva prima). La bolla "Portfolio personale" nella hero resta
   allineata a sinistra, di default — non è centrata qui apposta. */
#contatti .fade-in:has(> .badge-pillola) {
  margin: var(--spazio-xl) auto 0;
}

/* Spazio sotto la bolla, prima del titolo "Tommaso": va sul GUSCIO
   (".fade-in"), non sulla pillola stessa (".hero__badge") — un margine
   sull'elemento interno farebbe "gonfiare" il guscio oltre la pillola
   (i margini di un flex item non collassano, quindi il guscio
   diventerebbe più alto della pillola), rompendo la corrispondenza
   esatta a riposo richiesta dal meccanismo anti-tremolio. */
.hero__testo > .fade-in:has(> .badge-pillola) {
  margin-bottom: var(--spazio-md);
}

.icona-account {
  display: inline-flex;
  color: var(--colore-accento);
}

.icona-account svg {
  width: 14px;
  height: 14px;
}

.hero__nome {
  /* Il testo combinato "Ciao, sono Tommaso" deve stare su una riga
     sola nel layout a due colonne: dimensione più contenuta di un
     classico titolo hero a piena larghezza. */
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--spazio-md);
  color: var(--colore-testo);
}

/* Solo il nome è colorato, con un leggero sfumato azzurro. */
.hero__nome-colorato {
  background: linear-gradient(100deg, var(--colore-accento), var(--colore-accento-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__frase {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-lg);
  max-width: 55ch;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spazio-sm);
  margin-top: var(--spazio-lg);
}

/* ---------- Pagina vuota (404) ---------- */
.pagina-vuota {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--spazio-2xl);
}

.pagina-vuota__eyebrow {
  color: var(--colore-accento);
  font-family: var(--font-mono);
  font-size: var(--testo-sm);
  margin-bottom: var(--spazio-sm);
}

.pagina-vuota__titolo {
  font-size: var(--testo-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--spazio-md);
}

.pagina-vuota__testo {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-lg);
  margin-bottom: var(--spazio-lg);
}

/* ---------- Card generiche ---------- */
.card {
  position: relative;
  /* Riempie ".fade-in" (il guscio esterno immobile, vedi il commento
     lì): senza, in una griglia con "align-items: stretch" (default) il
     guscio si allunga per pareggiare le righe ma questa card, essendo
     un blocco normale alto quanto il suo contenuto, non lo seguirebbe. */
  height: 100%;
  background: var(--colore-sfondo-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
  padding: var(--spazio-md);
  transition: box-shadow var(--transizione-base), transform var(--transizione-base), border-color var(--transizione-base);
}

/* L'hover che solleva la card è ancorato a ".fade-in" (il guscio
   ESTERNO, immobile), non a ".card" stessa (che si sposta). Se fosse
   ".card:hover" a scatenare il proprio "transform: translateY(-3px)",
   il cursore fermo esattamente sul bordo potrebbe uscire dall'area
   appena la card si sposta — la card perde l'hover, torna giù, il
   cursore ci "rientra", l'hover riscatta, e così via: un tremolio
   rapidissimo. ".fade-in" invece non si sposta MAI (nessuna regola gli
   applica "transform" in hover): a riposo il suo riquadro combacia
   esattamente con quello di ".card" (nessun padding/bordo/margine
   proprio), quindi il cursore fermo dentro l'area originale della card
   resta "dentro" anche a card sollevata — non serve nessuna zona
   cuscinetto, l'ambiguità è eliminata alla radice.
   Stessa tecnica per ".card-orizzontale" e ".riquadro-verticale". */
.fade-in:hover > .card {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--colore-accento) 40%, var(--colore-bordo));
}

/* ---------- Interessi (sotto Chi sono) ---------- */
/* Spazio sopra dato dall'etichetta ".eyebrow-mini" che la precede,
   non da un margin-top qui (vedi .card-orizzontale). */
.griglia-interessi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spazio-md);
}

.interesse-card__icona {
  color: var(--colore-accento);
  margin-bottom: var(--spazio-sm);
}

.interesse-card__icona svg {
  width: 26px;
  height: 26px;
  transition: transform var(--transizione-base);
}

.interesse-card__titolo {
  font-weight: 700;
  margin-bottom: 0.35rem;
  transition: color var(--transizione-rapida);
}

.interesse-card__descrizione {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
}

/* Card orizzontale condivisa: usata sia per il percorso di studi
   (Chi sono) sia per l'esperienza in evidenza (Tutor) — la stessa
   identica struttura in entrambi i casi (data, titolo, sottotitolo,
   breve descrizione, "Espandi"), cambiano solo i testi. Lo spazio
   sopra è dato dall'etichetta ".eyebrow-mini" che la precede (vedi
   index.html), non da un margin-top qui.
   L'immagine è ferma: copre solo la "riga" in alto (data→descrizione,
   escluso "Espandi"), che sta sempre alla stessa altezza a sinistra;
   la parte "Espandi" si apre sotto, a piena larghezza. */
.card-orizzontale {
  position: relative;
  padding: var(--spazio-lg);
  background: var(--colore-sfondo-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
  transition: box-shadow var(--transizione-base), transform var(--transizione-base), border-color var(--transizione-base);
}

/* Hover ancorato a ".fade-in" (guscio esterno immobile), non a
   ".card-orizzontale" stessa: vedi il commento su ".fade-in:hover > .card". */
.fade-in:hover > .card-orizzontale {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--colore-accento) 40%, var(--colore-bordo));
}

.card-orizzontale__riga {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-xl);
}

/* 130px: misurata dal vero, è l'altezza esatta delle quattro righe di
   testo a fianco (data, titolo, sottotitolo, descrizione), così
   l'immagine è un quadrato con lo stesso "lato lungo" di quel blocco.
   Niente cornice bianca — il logo riempie tutto il quadrato ad angoli
   smussati (stesso trattamento del badge Career Service nelle
   iniziative). "align-items: flex-start" sopra allinea il riquadro in
   alto: la distanza dal bordo superiore della card è quindi identica
   a quella dal bordo sinistro (lo stesso padding, .card-orizzontale). */
.card-orizzontale__media {
  flex: none;
  width: 130px;
  height: 130px;
  border-radius: var(--raggio-sm);
  /* Bianco fisso (non l'azzurrino-grigio "--colore-sfondo-alt"): i
     loghi come quello del Liceo (vv-logo.png) non riempiono tutto il
     riquadro alla loro dimensione naturale, e sullo sfondo grigino il
     margine vuoto intorno al logo si vedeva chiaramente. */
  background: #ffffff;
  border: 1px solid var(--colore-bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-orizzontale__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transizione-base);
}

/* Il logo Politecnico ha molto margine vuoto intorno alla scritta nel
   file originale: già da fermo lo ingrandiamo un po' (a differenza
   degli altri loghi, che vanno bene alla loro dimensione naturale) —
   0.9× rispetto a prima (1.3 → 1.17). Lo zoom all'hover segue poi lo
   stesso rapporto (+18%) di tutti gli altri loghi della pagina,
   applicato a questa base più piccola. Riguarda solo il primo titolo
   di studio (la laurea): ":first-child" lo esclude dal Liceo sotto.
   Nota: ":first-child"/":nth-child" sono su ".fade-in" (il guscio
   esterno, vedi il commento su ".fade-in:hover > .card"), non più
   direttamente su ".card-orizzontale" — è ".fade-in" ad essere il
   figlio diretto di "#istruzione-lista" ora, ".card-orizzontale" è
   sempre l'unico figlio di ciascun ".fade-in". */
#istruzione-lista > .fade-in:first-child .card-orizzontale__media img {
  transform: scale(1.17);
}

#istruzione-lista > .fade-in:first-child:hover .card-orizzontale__media img {
  transform: scale(1.38);
}

/* Il logo del Liceo (Vittorio Veneto) è un cerchio pieno che, alla sua
   dimensione naturale, riempie il riquadro in modo troppo "invasivo"
   rispetto agli altri loghi: lo rimpiccioliamo a 0.9× da fermo. Lo
   zoom all'hover segue lo stesso rapporto (+18%) di tutti gli altri
   loghi, applicato a questa base più piccola (0.9 × 1.18 ≈ 1.06). */
#istruzione-lista > .fade-in:nth-child(2) .card-orizzontale__media img {
  transform: scale(0.9);
}

#istruzione-lista > .fade-in:nth-child(2):hover .card-orizzontale__media img {
  transform: scale(1.06);
}

.card-orizzontale__iniziali {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--testo-xl);
  color: var(--colore-accento);
}

.card-orizzontale__corpo {
  flex: 1;
  min-width: 0;
}

.card-orizzontale__periodo {
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  color: var(--colore-accento);
  font-weight: 600;
}

.card-orizzontale__titolo {
  font-size: var(--testo-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.2rem 0 0.15rem;
  transition: color var(--transizione-rapida);
}

.card-orizzontale__sottotitolo {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
}

.card-orizzontale__descrizione {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  margin-top: 0.4rem;
}

/* "Espandi" è ora fuori dalla riga superiore (sotto, a piena
   larghezza) — senza questa regola resterebbe incollato alla riga
   sopra. Stessa regola per il libro (".progetto-evidenza"), che
   riusa la stessa struttura. */
.card-orizzontale > .link-toggle,
.progetto-evidenza > .link-toggle {
  margin-top: 2rem;
  /* Spostato a destra rispetto al bordo sinistro della card (Laurea,
     Liceo, Tutor, libro): l'ancoraggio del bottone si sposta, non il
     testo (niente spazi scritti davanti a "Espandi") — hover e
     scivolamento al passaggio del cursore restano gli stessi, si
     spostano solo insieme al bottone dalla nuova posizione di riposo. */
  margin-left: 1.4rem;
}

/* Da aperto, la linea di separazione (bordo sopra) deve stare più
   staccata sia dall'immagine sopra sia dalla descrizione sotto —
   stesso spazio da entrambi i lati della linea. */
.card-orizzontale > .blocco-dettaglio,
.progetto-evidenza > .blocco-dettaglio {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

/* Nel libro la riga sopra (foto+testo) è più alta: la linea scende
   un po' di più, per starne più staccata. */
.progetto-evidenza > .blocco-dettaglio {
  margin-top: 2rem;
}

/* Piccola etichetta blu, stile "eyebrow": usata sopra un blocco per
   introdurlo senza il peso di un titolo di sezione vero e proprio
   (es. "Percorso di studi", "Interessi", "Altre iniziative"). */
.eyebrow-mini {
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colore-accento);
  font-weight: 600;
  margin-top: var(--spazio-lg);
  margin-bottom: var(--spazio-sm);
}

/* "Percorso di studi" in Chi sono ha bisogno di un po' più di respiro
   dalla descrizione sopra, rispetto alle altre due etichette che
   riusano ".eyebrow-mini" (che già hanno lo spazio della sezione
   "blocco-iniziale" a fare da cuscinetto in modo diverso). */
.blocco-iniziale + .eyebrow-mini {
  margin-top: var(--spazio-xl);
  margin-bottom: var(--spazio-md);
}

/* "Interessi", tra il box laurea e la griglia delle 6 card: stesso
   spazio sotto di "Percorso di studi" sopra. */
#istruzione-lista + .eyebrow-mini {
  margin-top: var(--spazio-xl);
  margin-bottom: var(--spazio-md);
}

/* Elenco dei titoli di studio: stessa card ripetuta, con un po' di
   distacco tra un titolo e l'altro (stesso principio di
   ".griglia-esperienze" per il box Tutor). */
.lista-istruzione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-md);
}

/* Stesso spazio sopra/sotto di "#istruzione-lista + .eyebrow-mini" qui
   sopra, per il passaggio successivo (Interessi -> Riconoscimenti,
   che ora è l'ultimo blocco di "Chi sono"). */
.griglia-interessi + .eyebrow-mini {
  margin-top: var(--spazio-xl);
  margin-bottom: var(--spazio-md);
}

/* ---------- Riconoscimenti ----------
   Una sola ".card-orizzontale" (stesso stile di Laurea/Tutor) senza
   ".card-orizzontale__riga"/media: qui non c'è un singolo logo da
   mostrare, solo un elenco di righe testuali. */
.riconoscimenti-lista {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.riconoscimento-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

/* "riconoscimento-dettaglio" ora è fatto di più <span> separati
   ("riconoscimento-parte": ente, luogo, uno o più anni), non più una
   sola frase — vedi renderizzaRiconoscimenti in js/main.js. Su schermi
   larghi restano una riga unica: "inline-flex" li tiene affiancati, e
   ogni pezzo tranne il primo si porta dietro un "·" via ::before,
   ricostruendo lo stesso aspetto della frase di prima. */
.riconoscimento-dettaglio {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Gli anni (uno o più) stanno in un guscio a parte nel markup, per
   poterli raggruppare su una riga a sé su telefono/iPad verticale (vedi
   media query più in basso) — ma "display: contents" li rende invisibili
   come contenitore su schermi larghi: i loro figli si comportano come
   se fossero ".riconoscimento-parte" dirette dentro ".riconoscimento-dettaglio",
   nessuna differenza visiva rispetto a prima. */
.riconoscimento-anni {
  display: contents;
}

.riconoscimento-parte:not(.riconoscimento-parte--primo)::before {
  content: " · ";
}

/* Separatore leggero tra una riga e l'altra, tranne sopra la prima. */
.riconoscimento-riga:not(:first-child) {
  border-top: 1px solid var(--colore-bordo);
  padding-top: 0.85rem;
}

.riconoscimento-titolo {
  font-weight: 600;
  /* Nero fisso, niente cambio colore in hover: a differenza dei
     titoli delle altre card, queste righe non aprono/chiudono nulla —
     colorarle in hover suggerirebbe un'interazione che non c'è (lo
     stesso motivo per cui le competenze non scivolano più in hover). */
  color: var(--colore-testo);
}

.riconoscimento-dettaglio {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
}

/* Anche "Altre iniziative", sotto la griglia delle esperienze
   compatte, ha bisogno di un po' più di respiro del solito 3rem. */
.griglia-esperienze-compatte + .eyebrow-mini {
  margin-top: var(--spazio-xl);
}

.griglia-esperienze {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-md);
  margin-top: var(--spazio-sm);
}

/* Meno spazio tra titolo e sottotitolo, e tra sottotitolo e il box
   Tutor, rispetto alle altre sezioni. */
#esperienze .sezione-titolo {
  margin-bottom: var(--spazio-lg);
}

#esperienze .sezione-intro {
  margin-bottom: var(--spazio-xl);
}

/* Due iniziative extracurricolari affiancate, sotto le esperienze di
   lavoro, con un piccolo distacco (vedi margin-bottom su
   "#esperienze .sezione-intro" qui sopra). Stessa card
   ".riquadro-verticale" delle esperienze compatte, solo su 2 colonne
   invece di 3. */
.griglia-iniziative {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--spazio-md);
}

/* ---------- Card verticale condivisa (esperienze compatte + progetti) ----------
   Più alta che larga: logo/immagine su tutta la larghezza in alto,
   testo sotto che occupa l'intero riquadro. "align-items: start" sui
   contenitori evita che i riquadri vicini si allunghino insieme a
   quello espanso. */
.griglia-esperienze-compatte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--spazio-md);
  margin-top: var(--spazio-md);
}

.riquadro-verticale {
  position: relative;
  /* Riempie ".fade-in" (vedi commento su ".card"): serve nelle griglie
     che allungano le card alla stessa altezza (es. ".griglia-progetti"
     da chiusa), innocuo altrove. */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* "overflow: hidden" qui (non su ".riquadro-media"): tra le due
     posizioni sembrano equivalenti solo in apparenza. Su un elemento
     con "aspect-ratio" che è anche un flex item (".riquadro-media" lo
     è, figlio di questo contenitore flex), "overflow" diverso da
     "visible" azzera la sua "dimensione minima automatica" — che di
     default userebbe il contenuto (il logo) per non far collassare il
     riquadro sotto al proprio aspect-ratio. Mettendolo lì per errore,
     il riquadro (e quindi il logo dentro, in scala) rendeva più
     piccolo del dovuto (205px invece di 247px di altezza, loghi 70px
     invece di 98px). Qui su ".riquadro-verticale" non è un flex item,
     quindi non ha questo effetto collaterale — resta solo il suo scopo
     originale: tagliare gli angoli quadrati dell'immagine in alto su
     quelli arrotondati della card. */
  overflow: hidden;
  background: var(--colore-sfondo-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
  transition: box-shadow var(--transizione-base), transform var(--transizione-base), border-color var(--transizione-base);
}

/* Hover ancorato a ".fade-in" (guscio esterno immobile), non a
   ".riquadro-verticale" stessa: vedi il commento su ".fade-in:hover > .card". */
.fade-in:hover > .riquadro-verticale {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--colore-accento) 40%, var(--colore-bordo));
}

.riquadro-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--colore-sfondo-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spazio-lg);
}

/* Piccolo logo dell'ente che eroga l'iniziativa (es. Career Service),
   in un riquadrino con angoli smussati sull'angolo in basso a destra
   della foto. */
.riquadro-media__badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  /* 0.9× rispetto a prima (100px → 90px). */
  width: 90px;
  height: 90px;
  border-radius: 20px;
  border: 1px solid var(--colore-bordo);
  box-shadow: var(--ombra-card);
  overflow: hidden;
}

/* Niente cornice bianca: il logo riempie tutto il riquadrino, angoli
   smussati compresi (dati da "overflow: hidden" sul contenitore). */
.riquadro-media__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.riquadro-media--logo {
  background: #ffffff;
  border-bottom: 1px solid var(--colore-bordo);
}

/* Figlio diretto, non discendente: esclude il logo dell'ente dentro
   ".riquadro-media__badge", che non deve zoomare insieme alla foto. */
.riquadro-media > img {
  max-width: 65%;
  max-height: 65%;
  object-fit: contain;
  transition: transform var(--transizione-base);
}

/* Foto reale (iniziative extracurricolari): riempie il riquadro a
   piena resa, niente padding né sfondo bianco — come
   ".card-orizzontale__media" ma nel formato verticale. */
.riquadro-media--foto {
  padding: 0;
}

/* Figlio diretto: stesso motivo di ".riquadro-media > img" sopra. */
.riquadro-media--foto > img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le foto (Bootcamp/First Experience) hanno la scritta verso
     sinistra: spostando il ritaglio così, resta un margine anche da
     ingrandite, invece di finire proprio sul bordo. */
  object-position: 30% center;
  transition: transform var(--transizione-base);
}

.riquadro-iniziali {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--colore-accento);
}

.riquadro-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--spazio-md);
}

.riquadro-periodo {
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  color: var(--colore-accento);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.riquadro-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colore-accento);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.riquadro-titolo {
  font-size: var(--testo-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
  transition: color var(--transizione-rapida);
}

.riquadro-sottotitolo {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  margin-bottom: 0.9rem;
}

.riquadro-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: var(--spazio-sm);
}

/* Descrizione breve, visibile senza dover cliccare "Espandi" — usata
   dalle iniziative extracurricolari, sotto titolo/ente. */
.riquadro-descrizione {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  margin-bottom: var(--spazio-sm);
}

/* ---------- Progetto in evidenza (il libro) ----------
   Stessa struttura di ".card-orizzontale" (Tutor/Laurea): riga con
   immagine+testo in alto, "Espandi" fuori sotto a piena larghezza,
   stesso padding/gap. Qui la foto è più grande (non un quadrato) per
   farci stare la copertina del libro. */
.progetto-evidenza {
  padding: var(--spazio-lg);
  margin-bottom: var(--spazio-md);
  /* Niente "overflow: hidden" qui: il ritaglio dello zoom della
     copertina è affidato a ".progetto-evidenza__immagine-riquadro"
     qui sotto, non serve più tagliare tutta la card. */
}

.progetto-evidenza__riga {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-xl);
}

/* Cornice della copertina: dimensione/bordo/angoli fissi, "overflow:
   hidden" solo per far seguire all'immagine dentro gli angoli
   arrotondati (un <img> con i suoi angoli quadrati sporgerebbe da
   quelli smussati della cornice, altrimenti). Lo zoom in hover si
   applica QUI, a tutta la cornice (vedi ".fade-in:hover
   .progetto-evidenza__immagine-riquadro" più sotto), non solo
   all'immagine dentro: così l'ingrandimento fa crescere anche il
   riquadro invece di restare fisso e tagliare parte della copertina. */
.progetto-evidenza__immagine-riquadro {
  flex: none;
  width: 220px;
  /* Alta quanto il blocco di testo a fianco (periodo, eyebrow,
     titolo, link Amazon, descrizione) — il testo è responsive, quindi
     l'altezza reale varia un po' con la larghezza schermo (misurata
     tra 338px e 351px); tenuta verso il basso di quel margine per non
     sporgere oltre la fine della descrizione. */
  height: 320px;
  overflow: hidden;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--colore-bordo);
  transition: transform var(--transizione-base);
}

.progetto-evidenza__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "display: flex" (non solo "flex: 1", che la rende un item ma non un
   contenitore) fa sì che i figli diretti (periodo, eyebrow, titolo...)
   diventino anch'essi elementi di flusso "flex", i cui margini NON si
   accorpano tra loro come farebbero in flusso normale: senza questo,
   ad es. lo <span> ".riquadro-periodo" (inline) non genera affatto lo
   spazio verticale del suo "margin-bottom" (i margini verticali sugli
   elementi inline vengono ignorati), e "2025"/"Pubblicazione"
   risultavano più vicini dello stesso paio periodo/eyebrow nelle card
   compatte (dove ".riquadro-corpo" è già "display:flex"). */
.progetto-evidenza__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.progetto-evidenza__titolo {
  display: flex;
  flex-direction: column;
  font-size: var(--testo-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--spazio-sm);
  transition: color var(--transizione-rapida);
}

.progetto-evidenza__sottotitolo {
  /* Un po' più piccolo del titolo (.progetto-evidenza__titolo usa
     --testo-xl), ma comunque nettamente più leggibile di --testo-base. */
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  color: var(--colore-testo-secondario);
  letter-spacing: normal;
}

.progetto-evidenza__corpo .progetto-evidenza__acquisto {
  /* Alzato (margine sopra ridotto/negativo, misurato via browser)
     perché combaci col bordo inferiore della copertina invece di
     sporgere sotto di esso. */
  margin: -0.2rem 0 var(--spazio-sm);
}

.progetto-evidenza__acquisto svg,
.progetto-evidenza__acquisto img {
  width: 53px;
  height: 53px;
  object-fit: contain;
}

/* ---------- Griglia progetti ---------- */
/* Da chiuse, le 3 card restano sempre della stessa altezza
   (align-items di default, "stretch"): è quello che le rende
   allineate anche quando i testi hanno lunghezze leggermente diverse.
   Appena una card viene espansa, js/main.js aggiunge la classe
   ".griglia-progetti--espansa": passa ad "align-items: start" così
   le altre due non si allungano per seguirla, e ogni card espansa
   prende l'altezza del proprio contenuto, non quella della più alta. */
.griglia-progetti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spazio-md);
}

.griglia-progetti--espansa {
  align-items: start;
}

/* Le classi seguenti restano in uso solo dal progetto in evidenza
   (il libro), che ha una fascia orizzontale a parte; le altre card
   progetto riusano ".riquadro-*", condiviso con le Esperienze. */
.progetto-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colore-accento);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.progetto-card__descrizione {
  color: var(--colore-testo-secondario);
  margin-bottom: var(--spazio-md);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  color: var(--colore-testo-secondario);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  padding: 0.25rem 0.75rem;
  transition: color var(--transizione-rapida), border-color var(--transizione-rapida);
}

/* Una bolla per volta, solo quella sotto il cursore — non tutta la
   riga insieme. */
/* Solo cambio di colore, niente più scivolamento a destra: le
   competenze non sono link cliccabili (a differenza di "Espandi" e
   "Acquista su Amazon"), muoversi come loro suggeriva un'interazione
   che non c'è. */
.tag:hover {
  color: var(--colore-accento);
  border-color: var(--colore-accento);
}

/* Link/bottone "Leggi di più", "Competenze principali", ecc.
   Usata sia su <a> (link esterni) sia su <button> (toggle di
   dettagli): per questo azzera i default del browser sul bottone. */
.link-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  margin-top: auto;
  font: inherit;
  font-size: var(--testo-sm);
  font-weight: 600;
  color: var(--colore-accento);
  cursor: pointer;
  text-align: left;
  transition: color var(--transizione-rapida), transform var(--transizione-rapida);
}

/* Diventa più scuro e scivola leggermente a destra — sia passando il
   cursore direttamente su di esso, sia (dove non è un link a sé, come
   "Acquista su Amazon") passando il cursore su tutta la box che lo
   contiene. Hover ancorato a ".fade-in" (guscio esterno immobile),
   vedi il commento su ".fade-in:hover > .card" — una sola regola basta
   per tutti i tipi di card, non serve più ripeterla per ciascuno. */
.link-toggle:hover,
.fade-in:hover .link-toggle:not(.progetto-evidenza__acquisto) {
  color: var(--colore-accento-hover);
  transform: translateX(4px);
}

/* ---------- Effetti hover condivisi da tutte le box con card ----------
   Titolo che passa da nero ad azzurro, e il logo/foto/icona dentro
   che si ingrandisce leggermente — stesso linguaggio su Esperienze,
   Progetti, Iniziative, Percorso di studi/Tutor e Interessi. */
/* Stesso azzurro (leggermente più scuro/acceso) del bottone "Espandi"
   in hover ("--colore-accento-hover", non il normale
   "--colore-accento"): coerente in entrambi i temi, dato che la
   variabile è già definita sia in chiaro sia in scuro. */
.fade-in:hover .riquadro-titolo,
.fade-in:hover .card-orizzontale__titolo,
.fade-in:hover .progetto-evidenza__titolo,
.fade-in:hover .interesse-card__titolo {
  color: var(--colore-accento-hover);
}

/* Cliccabili: aprono/chiudono "Espandi" come il bottone dedicato
   (vedi js/main.js), tranne nelle Interessi che non ne hanno uno. */
.riquadro-titolo,
.card-orizzontale__titolo,
.progetto-evidenza__titolo {
  cursor: pointer;
}

/* Loghi (aziende, Tutor incluso): zoom un po' più marcato. Il logo
   Politecnico ha un suo valore ancora più grande (vedi sopra). */
.fade-in:hover .riquadro-media:not(.riquadro-media--foto) > img,
.fade-in:hover .card-orizzontale__media img {
  transform: scale(1.18);
}

/* Foto reali (iniziative extracurricolari): zoom più leggero — le
   scritte nella foto sono verso il bordo sinistro, uno zoom marcato
   le farebbe finire senza margine (vedi anche object-position). */
.fade-in:hover .riquadro-media--foto > img {
  transform: scale(1.03);
}

/* Zoom sulla CORNICE (".progetto-evidenza__immagine-riquadro"), non
   sull'immagine dentro: così l'intero riquadro cresce insieme alla
   copertina, che quindi si vede sempre per intero, invece di restare
   in un riquadro fisso che ne taglia via i bordi. */
.fade-in:hover .progetto-evidenza__immagine-riquadro {
  transform: scale(1.08);
}

.fade-in:hover .interesse-card__icona svg {
  transform: scale(1.15);
}

/* ---------- Blocco "Espandi" (usato da Istruzione, Esperienze, Progetti) ----------
   Un'unica regola condivisa: il div del testo esteso sta PRIMA del
   bottone nell'HTML, così quando è chiuso (display:none) il bottone
   compare subito sotto il testo breve, e quando si apre il bottone
   "Chiudi" scivola sotto al paragrafo, mai sopra. */
.blocco-dettaglio {
  display: none;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--colore-bordo);
}

.blocco-dettaglio[data-aperto="true"] {
  display: block;
  margin-bottom: 0.75rem;
}

.blocco-dettaglio p {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  margin-bottom: 0.6rem;
}

.blocco-dettaglio p:last-child {
  margin-bottom: 0;
}

/* ---------- Chi sono ---------- */
.chi-sono__testo {
  max-width: 65ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: var(--colore-testo-secondario);
  font-size: var(--testo-base);
  text-align: center;
}

.chi-sono__testo strong {
  color: var(--colore-testo);
  font-weight: 600;
}

/* ---------- Contatti ---------- */
.contatti__lista {
  display: grid;
  /* auto-fit: due colonne quando c'è spazio per starci comode
     (senza andare a capo), una sola colonna sotto quella soglia —
     invece di una larghezza fissa che le stringe. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  gap: var(--spazio-sm);
  margin: var(--spazio-md) auto 0;
  max-width: 60rem;
}

.contatti__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--testo-base);
  color: var(--colore-testo);
  background: var(--colore-sfondo-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra-card);
  padding: var(--spazio-sm) var(--spazio-md);
  transition: color var(--transizione-rapida), border-color var(--transizione-rapida), transform var(--transizione-rapida);
}

.contatti__link:hover {
  color: var(--colore-accento);
  border-color: var(--colore-accento);
  transform: translateY(-2px);
}

.contatti__link-icona {
  flex: none;
  color: var(--colore-accento);
}

.contatti__link-icona svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* "Email" (nome) e l'indirizzo (valore) sono due <span> separati, non
   più una sola frase con " — " in mezzo (vedi renderizzaContatti in
   js/main.js): su schermi larghi restano affiancati sulla stessa riga,
   col trattino ricostruito via ::before; su telefono/iPad verticale
   (vedi media query più in basso) vanno uno sotto l'altro, senza
   trattino. */
.contatti__link-testo {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.contatti__link-valore::before {
  content: " — ";
}

/* ---------- Avviso "Email copiata!" ---------- */
/* Piccola bolla che compare sopra al link cliccato (vedi
   inizializzaCopiaEmail in js/main.js, che ne imposta "left"/"top" in
   linea). Ancorata in alto-centro col link grazie alla "translate":
   così la posizione si calcola dal punto di ancoraggio (bordo
   superiore, centro orizzontale del link) senza dover conoscere in
   anticipo la larghezza della bolla. */
.avviso-copiato {
  position: absolute;
  z-index: 400;
  translate: -50% calc(-100% - 10px);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--colore-accento);
  color: var(--colore-accento-testo);
  font-size: var(--testo-sm);
  font-weight: 600;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra-bottone);
  opacity: 0;
  scale: 0.92;
  pointer-events: none;
  transition: opacity 180ms ease, scale 180ms ease;
}

.avviso-copiato.visibile {
  opacity: 1;
  scale: 1;
}

.avviso-copiato svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--colore-bordo);
  padding-block: var(--spazio-lg);
}

.footer__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spazio-md);
}

.footer__copy {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
}

.footer__legale {
  display: flex;
  gap: var(--spazio-md);
}

.footer__legale a {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  transition: color var(--transizione-rapida);
}

.footer__legale a:hover {
  color: var(--colore-accento);
}

.footer__social {
  display: flex;
  gap: var(--spazio-md);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  transition: color var(--transizione-rapida);
}

.footer__social a svg {
  width: 16px;
  height: 16px;
}

.footer__social a:hover {
  color: var(--colore-accento);
}

/* ---------- Pagine legali (Privacy, Termini) ---------- */
.pagina-legale {
  max-width: 68ch;
}

.pagina-legale h2 {
  font-size: var(--testo-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--spazio-xl);
  margin-bottom: var(--spazio-sm);
}

.pagina-legale h2:first-child {
  margin-top: 0;
}

.pagina-legale p {
  color: var(--colore-testo-secondario);
  margin-bottom: var(--spazio-sm);
}

.pagina-legale ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--spazio-sm);
}

.pagina-legale li {
  color: var(--colore-testo-secondario);
  margin-bottom: 0.4rem;
}

.pagina-legale a {
  color: var(--colore-accento);
  text-decoration: underline;
}

.pagina-legale strong {
  color: var(--colore-testo);
  font-weight: 600;
}

.pagina-legale__aggiornamento {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-sm);
  margin-bottom: var(--spazio-lg);
}

/* ---------- Utility: comparsa graduale allo scroll ----------
   Usa la proprietà "translate" (indipendente da "transform") invece di
   transform: translateY(). Se usassimo transform qui, l'hover delle
   card (che imposta anche lui "transform", per sollevarsi o zoomare)
   andrebbe in conflitto — a parità di specificità CSS vince la regola
   scritta più in basso nel file, quindi ".fade-in.visibile" avrebbe
   sempre spento l'effetto hover una volta che la card era comparsa.
   "translate" e "transform" si sommano visivamente senza scavalcarsi,
   quindi le card restano sollevabili al passaggio del mouse anche dopo
   l'animazione di entrata.

   ".fade-in" ha anche un secondo ruolo, per le card che si sollevano
   in hover (interessi, esperienze/progetti, istruzione/tutor, libro):
   è sempre l'elemento ESTERNO che avvolge la card vera (es.
   "<div class='fade-in'><article class='riquadro-verticale'>...").
   Non riceve mai "transform" da nessuna regola, quindi il suo riquadro
   non si sposta MAI — a riposo combacia esattamente con quello della
   card interna (nessun padding/bordo/margine proprio). È lui a
   decidere se la card è "in hover" (vedi ".fade-in:hover > .card" e
   simili più sotto), non la card stessa: così, quando la card interna
   si solleva di qualche px, il cursore fermo dentro l'area ORIGINALE
   (quella di ".fade-in", che non cambia mai) resta "dentro" a
   prescindere da dove si trovi visivamente la card in quel momento —
   niente zona d'ombra in cui l'hover potrebbe accendersi e spegnersi
   in loop. */
.fade-in {
  opacity: 0;
  /* Più marcato di prima (16px) per notarsi davvero scorrendo. */
  translate: 0 36px;
  /* Rallentata rispetto a prima (700ms): 900ms si nota di più senza
     risultare lenta. */
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), translate 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visibile {
  opacity: 1;
  translate: 0 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .griglia-interessi,
  .griglia-esperienze-compatte,
  .griglia-progetti {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .griglia-progetti,
  .griglia-interessi,
  .griglia-esperienze-compatte,
  .griglia-iniziative {
    grid-template-columns: 1fr;
    gap: var(--spazio-lg);
  }
}

@media (max-width: 600px) {
  .contatti__lista {
    grid-template-columns: 1fr;
  }
}

/* iPad in orizzontale (in pratica sempre largo 1080px o più): il sito
   resta identico a quello da computer (nessuna regola qui sotto lo
   tocca), tranne questo piccolo aggiustamento — lo spazio tra testo e
   foto nella hero, pensato per schermi più larghi, qui risultava
   eccessivo e isolava la foto. Fascia stretta apposta (fino a 1300px):
   sopra quella soglia è quasi sempre un computer vero, che non va
   toccato. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .hero {
    gap: var(--spazio-lg);
  }
}

/* ============================================================
   MODALITÀ MOBILE — telefono (verticale e orizzontale) + iPad verticale
   ============================================================
   Tutto qui sotto vive in un'unica soglia, 1024px, e NON deve toccare
   il sito da computer né da iPad orizzontale (vedi il commento sopra
   ".blocco-iniziale, .contatti--alta" in cima al file per il perché
   1024px è la soglia giusta). Rispetto alla versione desktop, qui il
   sito viene volutamente "snellito": bolle informative in più tolte,
   card diverse tra loro riportate a un'unica tipologia, menu ad
   hamburger reso leggibile. */
@media (max-width: 1024px) {
  /* ---- Navbar: menu ad hamburger ----
     Prima solo la voce attiva (aria-current) aveva uno sfondo — le
     altre, senza alcun contrasto, si confondevano col contenuto della
     pagina sotto. Ora ogni voce ha il proprio riquadro ben visibile,
     testo grande e nero (non più il grigio secondario). Il pannello si
     ferma alla sua altezza naturale (nessun "bottom: 0"): finisce
     subito dopo "Contatti", non copre lo schermo fino in fondo. */
  .navbar__menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--colore-sfondo);
    border-bottom: 1px solid var(--colore-bordo);
    box-shadow: 0 16px 30px -16px rgba(15, 23, 42, 0.25);
    flex-direction: column;
    align-items: stretch;
    padding: var(--spazio-md);
    gap: 0.6rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transizione-base), transform var(--transizione-base);
  }

  .navbar__menu[data-aperto="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .navbar__hamburger {
    display: inline-flex;
  }

  .navbar__menu .navbar__link {
    justify-content: center;
    background: var(--colore-sfondo-alt);
    border: 1px solid var(--colore-bordo);
    color: var(--colore-testo);
    font-size: var(--testo-base);
    font-weight: 700;
    padding: 0.9rem 1rem;
    border-radius: var(--raggio-sm);
  }

  /* La voce della sezione attiva resta distinguibile, ora riempita
     dell'azzurro accento invece della sola bolla semitrasparente
     (che su questo sfondo pieno si vedrebbe troppo poco). */
  .navbar__menu .navbar__link[aria-current="page"] {
    color: var(--colore-accento-testo);
    background: var(--colore-accento);
    border-color: var(--colore-accento);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ---- Hero ----
     La bolla "Portfolio personale" è un'informazione in più: la prima
     schermata deve dare subito l'essenziale (foto, nome, frase,
     bottoni), senza altro sopra. I due bottoni restano centrati come
     tutto il resto del blocco (di default sono allineati a sinistra). */
  .hero {
    min-height: auto;
    flex-direction: column-reverse;
    text-align: center;
    padding-block: var(--spazio-lg);
  }

  .hero__avatar-wrap {
    width: 220px;
    height: 220px;
  }

  .hero__frase {
    max-width: none;
  }

  .hero__testo > .fade-in:has(> .badge-pillola) {
    display: none;
  }

  .hero__azioni {
    justify-content: center;
  }

  /* ---- Competenze (bolle "Coaching", "Adattabilità"...) ----
     Un dettaglio in più che, per restare minimali su schermi piccoli,
     qui non compare — resta comunque nel testo di "Espandi". */
  .riquadro-tag {
    display: none;
  }

  /* ---- Card Laurea / Liceo / Tutor / libro: diventano verticali ----
     Stessa identica struttura delle altre card (es. "Istruttore di
     tennis"): logo/copertina in un riquadro bianco a piena larghezza in
     alto, tutto il resto sotto — invece della riga orizzontale stretta
     (immagine piccola accanto al testo) pensata per schermi larghi. */
  .card-orizzontale,
  .progetto-evidenza {
    padding: 0;
    overflow: hidden;
  }

  .card-orizzontale__riga,
  .progetto-evidenza__riga {
    flex-direction: column;
    gap: 0;
  }

  .card-orizzontale__media,
  .progetto-evidenza__immagine-riquadro {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid var(--colore-bordo);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spazio-lg);
  }

  /* Da "cover" (che ritagliava il logo per riempire un riquadro
     130×130) a "contain" (mostra il logo per intero, centrato nel suo
     margine bianco): qui il riquadro è grande quanto vuole, quindi non
     serve più ritagliare nulla — vedi anche il reset degli scale qui
     sotto, calibrati apposta per il vecchio ritaglio. */
  .card-orizzontale__media img,
  .progetto-evidenza__immagine {
    width: auto;
    height: auto;
    max-width: 65%;
    max-height: 65%;
    object-fit: contain;
    transform: none;
  }

  /* Il logo Politecnico e quello del Liceo (Vittorio Veneto) avevano
     uno zoom su misura per il vecchio riquadro a "cover" (vedi il
     commento su ".card-orizzontale__media img" più sopra nel file):
     qui non serve più, "contain" mostra già il logo intero e centrato
     da solo. Lo zoom in hover resta comunque, uguale a tutti gli altri
     loghi (".fade-in:hover .card-orizzontale__media img", più sopra
     nel file) — va solo ripetuto qui con lo stesso identico selettore
     di quello zoom "vecchio" (che include #istruzione-lista, più
     specifico) per riuscire a sovrascriverlo. */
  #istruzione-lista > .fade-in:first-child .card-orizzontale__media img,
  #istruzione-lista > .fade-in:nth-child(2) .card-orizzontale__media img {
    transform: none;
  }

  #istruzione-lista > .fade-in:first-child:hover .card-orizzontale__media img,
  #istruzione-lista > .fade-in:nth-child(2):hover .card-orizzontale__media img {
    transform: scale(1.18);
  }

  /* La copertina del libro non va mai ritagliata (prima lo era,
     essendo con "object-fit: cover" in un riquadro di proporzioni
     diverse dalla copertina vera): margine bianco un po' più ampio di
     un logo, per farla vedere più grande e leggibile. Lo zoom in hover
     è già su tutto il riquadro (vedi ".fade-in:hover
     .progetto-evidenza__immagine-riquadro" più sopra nel file, non
     cambia qui): scalando l'intero riquadro invece che solo l'immagine
     dentro, il margine bianco resta identico in proporzione anche da
     ingrandita. */
  .progetto-evidenza__immagine-riquadro {
    padding: var(--spazio-md);
  }

  .progetto-evidenza__immagine {
    max-width: 78%;
    max-height: 78%;
  }

  .card-orizzontale__corpo,
  .progetto-evidenza__corpo {
    padding: var(--spazio-md) var(--spazio-md) 0;
  }

  .card-orizzontale > .blocco-dettaglio,
  .progetto-evidenza > .blocco-dettaglio {
    margin-left: var(--spazio-md);
    margin-right: var(--spazio-md);
  }

  /* L'intera card non ha più un padding proprio (tolto qui sopra, per
     far toccare il logo/copertina ai bordi): bottone ed eventuale testo
     esteso hanno bisogno del loro margine orizzontale, e il bottone
     (sempre l'ultimo elemento della card, aperta o chiusa che sia — vedi
     bloccoEspandi in js/main.js) di un margine sotto. */
  .card-orizzontale > .link-toggle,
  .progetto-evidenza > .link-toggle {
    margin-left: var(--spazio-md);
    margin-right: var(--spazio-md);
    padding-bottom: var(--spazio-md);
  }

  .progetto-evidenza__corpo .progetto-evidenza__acquisto {
    margin: 0.3rem 0 var(--spazio-sm);
  }

  /* ---- Riconoscimenti ----
     "Politecnico di Milano" / "Milano" / "2026", ogni pezzo a capo e
     centrato, senza il puntino separatore (che ha senso solo su una
     riga sola) — gli anni restano raggruppati insieme sull'ultima riga
     (vedi ".riconoscimento-anni" più sopra nel file). */
  .riconoscimento-riga {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
  }

  .riconoscimento-dettaglio {
    flex-direction: column;
    align-items: center;
  }

  .riconoscimento-anni {
    display: flex;
    justify-content: center;
    gap: 0.5em;
  }

  .riconoscimento-parte::before {
    content: none !important;
  }

  /* ---- Contatti: "Email"/"LinkedIn" su due righe ----
     Il nome del canale e il suo valore (indirizzo email, link) non
     stanno comodi su una riga sola su schermi stretti: qui vanno uno
     sotto l'altro, centrati, senza il trattino che li univa (aveva
     senso solo in linea). */
  .contatti__link {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
  }

  .contatti__link-testo {
    flex-direction: column;
    align-items: center;
  }

  .contatti__link-nome {
    font-weight: 700;
  }

  .contatti__link-valore::before {
    content: none;
  }
}

/* ---------- Bottone "torna su" ---------- */
/* Nascosto finché non si scorre un po' (classe ".visibile" aggiunta
   da js/main.js), poi compare in basso a destra. */
.torna-su {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--colore-accento);
  color: var(--colore-accento-testo);
  border: none;
  box-shadow: var(--ombra-bottone);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transizione-base), transform var(--transizione-base), background var(--transizione-rapida);
  z-index: 90;
}

.torna-su.visibile {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.torna-su:hover {
  background: var(--colore-accento-hover);
  transform: translateY(-3px);
}

.torna-su svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  .torna-su {
    right: 16px;
    bottom: 16px;
  }
}