/* =========================================================
   MEZZAVIA — style.css

   TUTTE le variabili modificabili del sito sono qui sotto, in
   un unico blocco, con un commento breve per ciascuna. Per
   cambiare una dimensione, uno spazio, un colore o la
   posizione di un elemento, basta modificare il valore della
   variabile corrispondente — non serve toccare il resto del
   file. Si può fare con un semplice editor di testo.
   ========================================================= */

@font-face {
  font-family: "Subway Haze";
  src: url("../fonts/Subway_Haze_1.1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colori ---- */
  --color-bg: #ffffff; /* sfondo di tutte le pagine */
  --color-text: #000000; /* colore di tutto il testo del sito (richiesto: sempre nero) */
  --color-muted: #000000; /* colore per testo "secondario" (etichette, ruoli): per ora uguale al nero principale, cambia solo questa se in futuro si vuole schiarirlo */
  --color-border: #000000; /* colore dei bordi rimasti (pulsanti, placeholder) */
  --color-missing-bg: #fff4e0; /* sfondo dei placeholder per contenuti/asset mancanti */
  --color-missing-border: #d99a2b; /* bordo dei placeholder mancanti */
  --color-missing-text: #7a4e00; /* testo dei placeholder mancanti */

  /* ---- Font ---- */
  --font-base: "Subway Haze", Georgia, "Times New Roman", serif; /* un solo font per tutto il sito, corpo compreso */
  --font-weight-base: 300; /* "sottigliezza" del font in tutto il sito. ATTENZIONE: il file attuale (Subway_Haze_1.1.ttf) è un unico peso statico (regular) — il browser NON può assottigliarlo oltre il suo peso reale, quindi questo valore probabilmente non produce differenze visibili finché non arriva un peso "Light" dedicato o una versione variabile dello stesso font. È già pronta per quando arriverà. */

  /* ---- Dimensioni testo per blocco (ogni blocco ha la sua variabile) ---- */
  --fs-body: 17px; /* dimensione testo corpo (bio, paragrafi generici) */
  --fs-claim-esteso: 20px; /* claim esteso in Home e testo introduttivo Open Call */
  --fs-hero-claim: clamp(28px, 4vw, 44px); /* claim breve grande della landing */
  --fs-nav: 26px; /* voci della tendina laterale */
  --fs-heading: 15px; /* titoli di sezione (DESTINATARI, COME PARTECIPARE, ecc.) */
  --fs-timeline: 18px; /* righe della timeline in Home */
  --fs-tutor-name: 24px; /* nomi dei tutor */
  --fs-team-name: 19px; /* nomi del team in Chi siamo */
  --fs-contact-text: 19px; /* testo della pagina Contatti */

  /* ---- Spaziatura tra le lettere (letter-spacing), per blocco ---- */
  --ls-body: 0; /* corpo del testo generico */
  --ls-nav: 0; /* voci della tendina */
  --ls-heading: 0.08em; /* titoli di sezione maiuscoli */
  --ls-eyebrow: 0.06em; /* data/luogo in cima a Open Call */

  /* ---- Interlinea (line-height), per blocco ---- */
  --lh-body: 1.6; /* corpo del testo generico */
  --lh-nav: 1.15; /* voci della tendina */
  --lh-hero-claim: 2.4; /* claim breve della landing — tarata insieme a --landing-icon-size perché la prima riga tocchi la cima della casetta e la penultima riga ("la loro opera / più") tocchi il suo angolo più basso */
  --lh-claim-esteso: 1.5; /* claim esteso Home / intro Open Call */
  --lh-base: 1.5; /* interlinea di base del sito (body) */

  /* ---- Layout: larghezze e margini ---- */
  --sidebar-width: 300px; /* larghezza della colonna della tendina laterale */
  --content-max-width: 600px; /* larghezza massima della colonna di contenuto (più stretta di prima) */
  --gutter: 48px; /* margine orizzontale standard (sidebar, contenuto) */
  --gutter-mobile: 24px; /* margine orizzontale su schermi stretti */

  /* ---- Nav: logo + posizione della lista ---- */
  --logo-size: 58px; /* dimensione del logo nella tendina (sostituisce la voce "Casa") */
  --logo-size-mobile: 44px; /* dimensione del logo su schermi stretti */
  --nav-top-offset: 40px; /* distanza del logo dal bordo superiore della pagina */
  --nav-list-gap: 20px; /* spazio tra il logo e la prima voce della lista sotto di esso */
  --nav-list-top: calc(
    var(--nav-top-offset) + var(--logo-size) + var(--nav-list-gap)
  ); /* punto in cui la lista si "aggancia" sotto al logo — calcolato dai tre valori sopra, non serve modificarlo a mano */

  /* ---- Spaziature verticali tra blocchi ---- */
  --section-gap: 64px; /* spazio sotto ogni sezione principale */
  --section-block-gap: 48px; /* spazio sotto ogni blocco (Open Call) */
  --footer-margin-top: 96px; /* spazio sopra il footer (+50% rispetto al valore precedente di 64px) */

  /* ---- Timeline (Home) ---- */
  --timeline-top-gap: 144px; /* spazio tra il claim esteso e la timeline sotto di esso (1,5 volte il valore precedente di 96px) */
  --timeline-item-gap: 3px; /* spazio verticale tra i singoli punti della timeline (ridotto dell'80% rispetto ai 16px di partenza) */

  /* ---- Tutors / Chi siamo — spazio tra blocchi "a coppia" ---- */
  --paired-block-gap: 192px; /* spazio tra i due tutor in Tutors, e stesso spazio usato tra il team e il blocco Alchemica in Chi siamo (+100% rispetto al valore precedente di 96px) */

  /* ---- Open Call — immagine in cima ---- */
  --open-call-image-gap: 10px; /* spazio minimo tra l'immagine in cima e la scritta data/luogo sotto di essa */
  --open-call-body-gap: 80px; /* ampio spazio tra la scritta data/luogo e l'inizio del testo del corpo pagina */

  /* ---- Landing (Home) — posizione di claim breve e casetta ----
     Tutti i valori di posizione sono spostamenti (offset), non
     coordinate assolute: 0px = posizione naturale/centrata attuale.
     Valori negativi spostano su/a sinistra, positivi giù/a destra. */
  --landing-shift-x: 0px; /* sposta INSIEME casetta+testo, orizzontalmente */
  --landing-shift-y: 0px; /* sposta INSIEME casetta+testo, verticalmente */
  --landing-col-gap: 28px; /* spazio orizzontale tra le due colonne di testo e la casetta */
  --landing-row-gap: 0px; /* spazio verticale tra le righe di testo della landing (molto stretto, come nella reference) */
  --landing-icon-offset-x: 98px; /* sposta SOLO la casetta, orizzontalmente, indipendente dal testo — tarata per ricentrarla tra le due colonne dopo l'ingrandimento */
  --landing-icon-offset-y: 0px; /* sposta SOLO la casetta, verticalmente, indipendente dal testo */
  --landing-icon-gap: 32px; /* distanza tra la casetta e il testo del claim breve */
  --landing-icon-size: 375px; /* dimensione della casetta nella landing. Nota: il disegno vero e proprio dentro il file occupa solo dal 7,5% al 79% dell'immagine (c'è margine bianco sopra/sotto per gli uccellini e la sediolina) — le altre variabili qui sotto tengono conto di questo */
  --landing-personale-gap: 53px; /* spazio extra sopra "personale." — la sposta più in basso del 50% rispetto alla spaziatura normale tra le righe */

  /* ---- Landing (Home) — SOLO MOBILE, sotto i 900px ----
     Su mobile la casetta e il testo non sono più disposti come
     nella reference (sparsi ai lati), ma il testo va in
     sovrapposizione sulla casetta, una riga alla volta in ordine
     di lettura. Queste variabili controllano SOLO questa versione
     mobile, quella desktop resta invariata. */
  --landing-icon-size-mobile: 260px; /* dimensione della casetta in sovrapposizione, solo mobile */
  --fs-hero-claim-mobile: 27px; /* dimensione del testo del claim breve, solo mobile (180% della misura originale) */
  --landing-mobile-text-house-gap: 8px; /* spazio verticale tra il blocco di testo e la casetta sotto, solo mobile */
  --lh-hero-claim-mobile: 1.5; /* interlinea tra le righe del claim breve, solo mobile */

  /* ---- Landing — posizione dei singoli pezzi del claim breve ----
     Il claim breve è spezzato in righe indipendenti, ognuna
     spostabile per conto suo con la propria coppia di variabili X
     (orizzontale) e Y (verticale), IN AGGIUNTA alla posizione di
     base (colonna sinistra/destra allineata al profilo della
     casetta). 0px = solo la posizione di base, nessuno spostamento
     ulteriore. Negativo = sposta a sinistra/su, positivo = destra/giù.
     "su misura" e "perché scrivano" — insieme nel testo del bando —
     qui sono due righe separate (colonna sinistra e destra) per
     seguire esattamente la disposizione della reference: da qui il
     "salto" nella numerazione (5 e 9 sono le due metà). */
  --claim1-x: 22px; /* "MEZZAVIA è uno" — orizzontale, rientro verso destra per seguire la linea del tetto (max che sta senza toccare la casa) */
  --claim1-y: 0px; /* "MEZZAVIA è uno" — verticale */
  --claim2-x: -22px; /* "spazio pensato" — orizzontale, rientro verso sinistra per seguire la linea del tetto (max che sta senza toccare la casa) */
  --claim2-y: 0px; /* "spazio pensato" — verticale */
  --claim3-x: 0px; /* "per giovani autori" — orizzontale */
  --claim3-y: 0px; /* "per giovani autori" — verticale */
  --claim4-x: 0px; /* "con un programma" — orizzontale */
  --claim4-y: 0px; /* "con un programma" — verticale */
  --claim5-x: 0px; /* "su misura" — orizzontale */
  --claim5-y: 0px; /* "su misura" — verticale */
  --claim6-x: 0px; /* "la loro opera" — orizzontale */
  --claim6-y: 0px; /* "la loro opera" — verticale */
  --claim7-x: 0px; /* "più" — orizzontale */
  --claim7-y: 0px; /* "più" — verticale */
  --claim8-x: 0px; /* "personale." — orizzontale */
  --claim8-y: 0px; /* "personale." — verticale */
  --claim9-x: 0px; /* "perché scrivano" — orizzontale */
  --claim9-y: 0px; /* "perché scrivano" — verticale */

  /* ---- Footer ---- */
  --footer-logo-size: 60px; /* logo nel footer ripetuto (+50% rispetto al giro precedente) */
  --contact-closing-logo-size: 220px; /* logo grande a chiusura pagina Contatti */

  /* ---- Loader ---- */
  --loader-logo-size: 120px; /* logo pulsante del loader */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-base);
}

a {
  color: inherit;
}

/* Link ai nomi dei tutor dentro un testo (es. Open Call): stesso
   colore del testo circostante, solo la sottolineatura li segnala
   come link. */
.tutor-link {
  color: inherit;
  text-decoration: underline;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 1em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -----------------------------------------------------------
   Placeholder per asset/contenuti mancanti — mai contenuto
   inventato, sempre segnalato visivamente.
   ----------------------------------------------------------- */
.placeholder {
  display: block;
  border: 1px dashed var(--color-missing-border);
  background: var(--color-missing-bg);
  color: var(--color-missing-text);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: center;
}

.placeholder--photo {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.placeholder--inline {
  display: inline-block;
  text-transform: none;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* -----------------------------------------------------------
   Loader
   ----------------------------------------------------------- */
.loader-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.loader-wrap.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  width: var(--loader-logo-size);
  height: auto;
  animation: pulse-opacity 1.4s ease-in-out infinite;
}

@keyframes pulse-opacity {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* -----------------------------------------------------------
   Logo — sostituisce la voce "Casa" nella tendina. È un
   elemento indipendente e fisso, sempre visibile su ogni
   pagina fin dal primo istante, mai coinvolto nello scroll o
   nel reveal della lista qui sotto.
   ----------------------------------------------------------- */
.site-logo {
  position: fixed;
  top: var(--nav-top-offset);
  left: var(--gutter);
  z-index: 600;
  display: block;
}

.site-logo img {
  width: var(--logo-size);
  height: auto;
}

.site-logo:hover,
.site-logo:focus-visible {
  font-style: italic;
}

/* -----------------------------------------------------------
   Layout generale: colonna nav + colonna contenuto.
   La lista (.sidebar) è "sticky" con un top-offset che la
   aggancia esattamente sotto al logo fisso. Su tutte le pagine
   normali, senza nulla sopra nel flusso, questo la fa comparire
   già agganciata lì fin dall'inizio. Sulla Home, preceduta dalla
   hero a piena altezza, resta invisibile finché non si scorre
   abbastanza da raggiungere quel punto — è così che si ottiene
   "logo sempre visibile, lista che compare scrollando e lo
   raggiunge" senza alcun JS.
   ----------------------------------------------------------- */
.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: var(--nav-list-top);
  align-self: flex-start;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  max-height: calc(100vh - var(--nav-list-top));
  overflow-y: auto;
  padding: 0 var(--gutter);
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.nav-list {
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
}

.nav-item {
  margin-bottom: 2px;
}

.nav-item a {
  display: inline-block;
  text-decoration: none;
  font-style: normal;
  color: var(--color-text);
}

/* hover-target = l'intera riga (il link), come su rupert.lt.
   Cambio a corsivo istantaneo: nessuna transition. */
.nav-item a:hover,
.nav-item a:focus-visible {
  font-style: italic;
}

.nav-item.is-current a {
  font-style: italic;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 40px var(--gutter) 0;
}

.content-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

@media (max-width: 900px) {
  /* Sotto il breakpoint non c'è più una colonna sidebar a
     riservare spazio al logo fisso: un logo "fixed" finirebbe
     per sovrapporsi al testo scorrevole. Più semplice e sicuro
     renderlo anch'esso statico, nel flusso, in cima alla pagina
     — coerente con la lista nav, che sotto il breakpoint è già
     statica per lo stesso motivo. */
  .site-logo {
    position: static;
    display: inline-block;
    margin: 16px 0 0 var(--gutter-mobile);
  }

  .site-logo img {
    width: var(--logo-size-mobile);
  }

  .layout {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    max-height: none;
    flex-basis: auto;
    padding: 16px var(--gutter-mobile) 0;
  }

  .content {
    padding: 24px var(--gutter-mobile) 0;
  }

  /* Nav visibile fin da subito nella landing mobile: niente
     reveal a scroll qui (quello resta solo su desktop). ".layout"
     diventa "trasparente" al layout (display:contents) così la
     sidebar smette di essere intrappolata dopo la hero a piena
     altezza e può essere riordinata insieme agli altri elementi
     di primo livello del body — nessuna modifica all'HTML. */
  body.page-home {
    display: flex;
    flex-direction: column;
  }

  body.page-home .site-logo {
    order: 1;
  }

  body.page-home .layout {
    display: contents;
  }

  body.page-home .sidebar {
    order: 2;
  }

  body.page-home .hero {
    order: 3;
  }

  body.page-home .content {
    order: 4;
  }

  /* Sotto il breakpoint la casetta si rimpicciolisce e il testo
     del claim breve va in sovrapposizione su di essa, una riga
     alla volta, in ordine di lettura (l'ordine nel markup è già
     quello corretto: 1,2,3,4,5,9,6,7,8). Le regole vere e proprie
     sono ripetute più sotto, DOPO le regole desktop di .hero-inner
     ecc. — vedi commento lì per il perché. */
  .hero {
    min-height: auto;
    padding: 8px var(--gutter-mobile) 40px;
  }

  :root {
    --fs-nav: 22px;
  }
}

/* -----------------------------------------------------------
   Hero (solo Home)
   ----------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  text-align: center;
}

/* La composizione (casetta al centro, testo disposto in due
   colonne ai suoi lati) è una griglia: colonna sinistra | casetta
   | colonna destra. .hero-claim usa display:contents — significa
   "non contare come blocco tuo, lascia che i tuoi pezzi di testo
   dentro di te si comportino come se fossero direttamente nella
   griglia del genitore" — così ogni singolo segmento può avere la
   sua casella nella griglia. Sopra a questa disposizione di base
   restano applicabili gli spostamenti fini (--claimN-x/y). */
.hero-inner {
  max-width: 900px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--landing-icon-size) 1fr;
  align-items: start;
  justify-items: start;
  column-gap: var(--landing-col-gap);
  row-gap: var(--landing-row-gap);
  transform: translate(var(--landing-shift-x), var(--landing-shift-y));
}

/* La casetta NON è più un elemento della griglia (non "spanna" più
   righe): se lo fosse, la sua altezza costringerebbe ogni riga di
   testo che attraversa ad allargarsi per contenerla, impedendo di
   stringere l'interlinea. È invece posizionata in modo indipendente
   sopra alla griglia, centrata nella colonna di mezzo — così la sua
   dimensione e la spaziatura del testo si controllano separatamente.
   Il "top" è negativo apposta: nel file l'immagine ha del margine
   bianco sopra al disegno vero (per gli uccellini), quindi l'immagine
   va spostata su di quella quantità perché sia la CASA — non il bordo
   dell'immagine — a toccare la prima riga di testo. */
.hero-visual {
  position: absolute;
  left: 50%;
  top: calc(var(--landing-icon-size) * -0.11838);
  transform: translate(-50%, 0) translate(var(--landing-icon-offset-x), var(--landing-icon-offset-y));
}

.hero-visual img {
  width: var(--landing-icon-size);
  height: auto;
}

.hero-claim {
  display: contents;
  font-size: var(--fs-hero-claim);
  line-height: var(--lh-hero-claim);
  margin: 0;
  text-align: left;
}

.hero-claim em {
  font-style: italic;
}

/* Le righe del claim breve: la loro posizione di base (colonna
   sinistra/destra, riga) segue il profilo della casetta come nella
   reference. Ognuna può poi essere ulteriormente spostata per conto
   sua tramite la sua coppia di variabili --claimN-x / --claimN-y
   definite in cima al file (si sommano alla posizione di base).
   Nessuna riga va mai a capo (white-space: nowrap): sono frasi
   brevi pensate per stare su una riga sola. */
.claim-seg {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

/* Colonna sinistra: allineata a destra (il "muro" comune a cui si
   agganciano le righe), dall'alto in basso. */
.claim-seg-1,
.claim-seg-3,
.claim-seg-5,
.claim-seg-6 {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

/* Colonna destra: allineata a sinistra, dall'alto in basso. */
.claim-seg-2,
.claim-seg-4,
.claim-seg-9,
.claim-seg-7,
.claim-seg-8 {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.claim-seg-1 {
  grid-row: 1;
  transform: translate(var(--claim1-x), var(--claim1-y));
}

.claim-seg-2 {
  grid-row: 1;
  transform: translate(var(--claim2-x), var(--claim2-y));
}

.claim-seg-3 {
  grid-row: 2;
  transform: translate(var(--claim3-x), var(--claim3-y));
}

.claim-seg-4 {
  grid-row: 2;
  transform: translate(var(--claim4-x), var(--claim4-y));
}

.claim-seg-5 {
  grid-row: 3;
  transform: translate(var(--claim5-x), var(--claim5-y));
}

.claim-seg-9 {
  grid-row: 3;
  transform: translate(var(--claim9-x), var(--claim9-y));
}

.claim-seg-6 {
  grid-row: 4;
  transform: translate(var(--claim6-x), var(--claim6-y));
}

.claim-seg-7 {
  grid-row: 4;
  transform: translate(var(--claim7-x), var(--claim7-y));
}

/* "personale." condivide l'allineamento a sinistra di "più", una
   riga sotto, con uno spazio extra sopra (sta sotto alla casetta). */
.claim-seg-8 {
  grid-row: 5;
  margin-top: var(--landing-personale-gap);
  transform: translate(var(--claim8-x), var(--claim8-y));
}

/* Le regole mobile della hero (sopra, dentro il primo
   @media max-width:900px) vengono sovrascritte dalle regole
   desktop di base qui sopra perché, a parità di specificità,
   vince l'ultima dichiarata nel file: qui le si ripete, DOPO
   le regole desktop, così la versione mobile vince davvero
   sotto il breakpoint. Nessuna nuova logica, solo riordino
   della cascata. */
@media (max-width: 900px) {
  /* Non più in sovrapposizione: il testo sta subito sopra la
     casetta, in sequenza verticale, con un piccolo spazio fisso
     tra i due (--landing-mobile-text-house-gap). */
  .hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    transform: none;
  }

  .hero-visual {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    order: 2;
  }

  .hero-visual img {
    width: var(--landing-icon-size-mobile);
    height: auto;
  }

  .hero-claim {
    display: flex;
    position: static;
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 5%;
    margin-bottom: var(--landing-mobile-text-house-gap);
    font-size: var(--fs-hero-claim-mobile);
    line-height: var(--lh-hero-claim-mobile);
  }

  .claim-seg-1,
  .claim-seg-2,
  .claim-seg-3,
  .claim-seg-4,
  .claim-seg-5,
  .claim-seg-6,
  .claim-seg-7,
  .claim-seg-8,
  .claim-seg-9 {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    text-align: left;
    display: block;
    white-space: normal;
    margin-top: 0;
    transform: none;
  }
}

/* -----------------------------------------------------------
   Sezioni di contenuto generiche
   ----------------------------------------------------------- */
.section {
  margin-bottom: var(--section-gap);
}

.section-title {
  font-size: var(--fs-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--color-muted);
}

.claim-esteso p {
  font-size: var(--fs-claim-esteso);
  line-height: var(--lh-claim-esteso);
  text-align: justify;
}

.timeline {
  margin-top: var(--timeline-top-gap);
}

.timeline-item {
  display: flex;
  gap: 24px;
  padding: var(--timeline-item-gap) 0;
  font-size: var(--fs-timeline);
}

.timeline-date {
  flex: 0 0 220px;
  font-style: italic;
}

/* -----------------------------------------------------------
   Open Call
   ----------------------------------------------------------- */
.open-call-image {
  margin-bottom: var(--open-call-image-gap);
}

.open-call-image img {
  width: 100%;
  height: auto;
}

.eyebrow {
  font-size: var(--fs-heading);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--open-call-body-gap);
}

.eyebrow p {
  margin: 0;
}

.intro-text p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

.section-block {
  margin-bottom: var(--section-block-gap);
}

.section-block h2 {
  font-size: var(--fs-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.section-block p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

.section-block li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.section-block ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
  list-style: none;
}

.section-block ul li {
  margin-bottom: 6px;
  position: relative;
}

.section-block ul li::before {
  content: "-";
  position: absolute;
  left: -1.2em;
}

.notice {
  font-style: normal;
}

.notice strong {
  font-weight: bold;
}

.cta-row {
  margin: 48px 0;
}

.btn {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border);
  padding: 14px 28px;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  box-sizing: border-box;
}

.btn:hover {
  font-style: italic;
}

/* -----------------------------------------------------------
   Iscriviti / form
   ----------------------------------------------------------- */
.intro-note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

.form-embed {
  margin-top: 24px;
}

.form-embed iframe {
  border: none;
  width: 100%;
}

/* -----------------------------------------------------------
   Tutors
   ----------------------------------------------------------- */
.tutor {
  display: flex;
  gap: 40px;
  margin-bottom: var(--paired-block-gap);
  align-items: flex-start;
}

.tutor-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tutor-name {
  font-size: var(--fs-tutor-name);
  font-weight: normal;
  font-style: italic;
  margin: 0 0 16px;
}

.tutor-bio p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

.tutor-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.tutor-logos img {
  height: 36px;
  width: auto;
}

.tutor-logos .placeholder {
  flex: 1 1 120px;
  padding: 10px;
}

.tutor-photo {
  flex: 0 0 auto;
}

/* L'altezza reale viene impostata via JS (js/main.js) in modo che
   la foto sia alta esattamente quanto il blocco di testo (nome +
   bio) di Chiara — vedi commento nel file JS. Qui solo i valori
   di base: nessun ritaglio, proporzioni originali mantenute
   (width:auto insieme a un'altezza fissa mantiene l'aspect ratio). */
.tutor-photo img {
  width: auto;
  height: auto;
  max-width: 260px;
  filter: grayscale(100%);
}

@media (max-width: 640px) {
  .tutor {
    flex-direction: column-reverse;
  }

  .tutor-photo img {
    height: auto !important;
    width: 160px;
    max-width: 100%;
  }
}

/* -----------------------------------------------------------
   Chi siamo
   ----------------------------------------------------------- */
.team-member {
  margin-bottom: 40px;
}

.team-member h3 {
  font-size: var(--fs-team-name);
  font-weight: normal;
  margin: 0 0 12px;
}

.team-member h3 em {
  font-style: italic;
}

.team-member p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

/* Paragrafo Alchemica APS: stessa dimensione/giustificazione del
   resto della pagina (era rimasto un paragrafo "generico" senza
   queste regole — bug corretto qui) e stesso spazio sopra usato
   tra i due tutor nella pagina Tutors. */
.section-alchemica {
  margin-top: var(--paired-block-gap);
}

.section-alchemica p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: justify;
}

/* -----------------------------------------------------------
   Contatti
   ----------------------------------------------------------- */
.contact-text p {
  font-size: var(--fs-contact-text);
  line-height: var(--lh-body);
  text-align: justify;
}

.contact-text-funding {
  font-size: var(--fs-contact-text);
  line-height: var(--lh-body);
  text-align: justify;
  margin: 0;
}

.contact-funders {
  display: flex;
  gap: 32px;
  align-items: center;
  margin: 48px 0 20px;
  flex-wrap: wrap;
}

.contact-funders img {
  height: 64px;
  width: auto;
}

.contact-closing {
  margin-top: var(--section-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.contact-closing img {
  width: var(--contact-closing-logo-size);
  height: auto;
}

.contact-closing a {
  text-decoration: none;
}

.link-missing {
  text-decoration: none;
  border-bottom: 1px dashed var(--color-missing-border);
  color: inherit;
}

/* -----------------------------------------------------------
   Footer (ripetuto identico in fondo a ogni pagina) — solo
   logo piccolo + email, centrati, nient'altro.
   ----------------------------------------------------------- */
.site-footer {
  margin-top: var(--footer-margin-top);
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.footer-brand img {
  width: var(--footer-logo-size);
  height: auto;
}

.footer-contact a {
  text-decoration: none;
}