/* pages.css — apertura di pagina e blocchi specifici */

/* ══ Apertura fotografica · H6 ══════════════════════════════
   Una sola immagine tiene la prima schermata. Il testo sta in basso a
   sinistra, dove l'occhio finisce di leggere l'immagine, non al centro:
   un titolo centrato su una foto e' la posa che fa sembrare uguali tutti
   i siti. Sotto, una riga di dati che qualificano — e' li' che la
   fiducia si aggancia, non nel titolo.                                  */

/* Il testo sta sopra la fotografia a tutte le larghezze. Quello che
   cambia con lo schermo e' la rampa che lo sostiene e quanta roba gli
   si mette sopra: su mobile la colonna e' una sola, quindi il velo deve
   fare piu' lavoro e il blocco di testo deve pesare meno.
   La schermata e' piena, cosi' fra il viso e il titolo resta aria. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: min(100svh, 46rem);
  padding-block-start: calc(var(--strip-h) + var(--bar-h));
  color: var(--color-on-ink);
  background: var(--color-ink-deep);
  overflow: clip;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inquadratura tarata sulla fotografia: tiene il viso interamente
     sopra il titolo, dove la rampa e' ancora trasparente. Si corregge
     qui se un giorno la foto di apertura cambia. */
  object-position: 56% 42%;
}

/* Due veli sovrapposti: uno dal basso per il testo, uno da sinistra per
   la colonna. Nessun velo piatto sull'intera immagine — spegnerebbe la
   fotografia invece di sostenerla. */
/* Otto fermate, distribuite come una curva e non a passi uguali: e'
   quello che toglie la banda visibile e fa sembrare il buio parte della
   fotografia invece di un pannello appoggiato sopra. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    var(--color-scrim-deep)   0%,
    var(--color-scrim-deep)   22%,
    var(--color-scrim)        36%,
    var(--color-scrim-head-2) 50%,
    var(--color-scrim-head-3) 61%,
    var(--color-scrim-head-4) 71%,
    var(--color-scrim-head-5) 82%,
    transparent               92%);
}

.hero__content { padding-block: var(--space-lg) var(--space-md); }

.hero__title {
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  max-width: 15ch;
  color: inherit;
}
.hero__lede {
  margin-block-start: var(--space-sm);
  /* Misura corta di proposito: la riga deve finire dentro la zona
     velata, non sbordare sul camice bianco. */
  max-width: 32ch;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-over-text);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-md);
}

/* Riga dei dati, in fondo alla schermata */
/* Su mobile i tre dati stanno su una riga sola, separati da un punto
   medio. Le etichette restano nel DOM per chi legge con la sintesi
   vocale ma spariscono alla vista: erano sei righe di impalcatura sopra
   una fotografia, e i valori si spiegano da soli. */
.hero__strip {
  border-block-start: var(--rule-hair) solid var(--color-over-rule);
  padding-block: var(--space-sm) var(--space-lg);
}
.hero__strip ul {
  display: grid;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__strip li {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-over-text);
}
.hero__strip li > span:first-child {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero__strip b {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-on-ink);
}

/* Stato senza fotografia: non un riquadro tratteggiato ma un campo
   composto, cosi' la pagina si giudica anche prima che arrivino le foto. */
.hero--plain { min-height: min(80svh, 38rem); align-content: end; }
.hero--plain .hero__veil {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(to bottom, var(--color-over-rule) 0 1px, transparent 1px 5.5rem),
    linear-gradient(to top, var(--color-scrim) 0%, transparent 70%);
  opacity: 0.5;
}
.hero--plain .hero__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: var(--rule-slab);
  margin-block-start: var(--space-lg);
  background: var(--color-mark);
}

/* Da tablet in su c'e' spazio: le etichette tornano visibili e i tre
   dati si dispongono in colonne, incolonnati sotto le rispettive voci. */
@media (min-width: 48rem) {
  .hero__strip { padding-block: var(--space-md) var(--space-lg); }
  .hero__strip ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
  .hero__strip li { display: grid; gap: var(--space-3xs); }
  .hero__strip li > span:first-child {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
  }
  .hero__strip b {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: var(--track-lead);
    text-transform: none;
  }
}

@media (min-width: 60rem) {
  .hero {
    min-height: min(92svh, 50rem);
    padding-block-start: calc(var(--strip-h) + var(--bar-h) + var(--space-2xl));
  }
  .hero__media img { object-position: center 35%; }

  /* Su schermo largo il testo occupa una colonna stretta a sinistra, non
     tutta la base: la rampa dal basso puo' quindi alleggerirsi, e torna
     la velatura laterale che sostiene proprio quella colonna. */
  .hero__veil {
    background:
      linear-gradient(to top,
        var(--color-scrim)        0%,
        var(--color-scrim-head-2) 26%,
        var(--color-scrim-head-3) 42%,
        var(--color-scrim-head-4) 54%,
        transparent               66%),
      linear-gradient(to right,
        var(--color-scrim-side)   0%,
        var(--color-scrim-head-2) 28%,
        var(--color-scrim-head-4) 46%,
        transparent               60%);
  }

  .hero__content { padding-block: var(--space-3xl) var(--space-xl); }
  .hero__lede { font-size: var(--text-lg); line-height: var(--leading-body); margin-block-start: var(--space-md); }
  .hero__actions { margin-block-start: var(--space-lg); }
  .hero__title { font-size: clamp(3.5rem, 6.4vw, 6.5rem); }

  /* Il testo resta in una colonna a sinistra: la meta' destra appartiene
     alla fotografia. Senza questo vincolo il titolo attraversa il viso
     del soggetto, che e' il motivo per cui la fotografia e' li'. */
  .hero__content > * { max-width: min(34rem, 52%); }
  .hero__title { max-width: min(34rem, 52%); }
}

@media (min-width: 90rem) {
  .hero__content > *,
  .hero__title { max-width: min(38rem, 48%); }
}

/* ══ Banda fotografica a tutta larghezza ════════════════════ */

.band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: min(62svh, 32rem);
  color: var(--color-on-ink);
  background: var(--color-ink-deep);
  overflow: clip;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    var(--color-scrim) 0%,
    var(--color-scrim-head-2) 28%,
    var(--color-scrim-head-4) 48%,
    transparent 66%);
}
.band__caption { padding-block: var(--space-xl); display: grid; gap: var(--space-xs); }
.band__caption h2 { font-size: var(--text-3xl); max-width: 20ch; color: inherit; }
.band__caption p { max-width: var(--measure-tight); color: var(--color-over-text); }
.band--plain .band__veil {
  background: repeating-linear-gradient(115deg, var(--color-over-rule) 0 1px, transparent 1px 3.25rem);
  opacity: 0.45;
}

/* ══ Apertura delle pagine interne ══════════════════════════ */

.opener { padding-block: var(--space-2xl) var(--space-xl); }
.opener__inner { display: grid; gap: var(--space-lg); }

.opener__title {
  font-size: var(--text-display-s);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  max-width: 18ch;
}
.opener__lede {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: var(--measure-tight);
}
.opener__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  margin-block-start: var(--space-xs);
}
.opener__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}

@media (min-width: 60rem) {
  .opener { padding-block: var(--space-3xl) var(--space-2xl); }
  .opener__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }
  .opener__title, .opener__lede, .opener__actions { grid-column: 1; }
  .opener__stamp {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    align-content: end;
    gap: var(--space-sm);
    padding-block-start: 0;
    padding-inline-start: var(--space-lg);
    border-block-start: 0;
    border-inline-start: var(--rule-hair) solid var(--color-rule);
  }
}

/* ══ Per chi ════════════════════════════════════════════════ */

.audience { display: grid; gap: var(--space-lg); margin-block-start: var(--space-xl); }
.audience__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block-start: var(--space-md);
  /* Filetto d'inchiostro, non d'accento: quattro righe verdi in fila
     trasformavano un accento in una decorazione. */
  border-block-start: var(--rule-hair) solid var(--color-ink);
}
.audience__item h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.audience__item p { color: var(--color-muted); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
}
@media (min-width: 72rem) {
  .audience { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══ Chiusura in richiamo ═══════════════════════════════════ */

.closing { display: grid; gap: var(--space-lg); justify-items: start; }
.closing__title {
  font-size: var(--text-3xl);
  max-width: 20ch;
  color: inherit;
}
.closing p { color: inherit; max-width: var(--measure-tight); }
.section--ink .btn--ghost { border-color: var(--color-on-ink-rule); color: var(--color-on-ink); }
.section--ink .btn--ghost:hover { border-color: var(--color-on-ink); color: var(--color-on-ink); }

/* ══ Prenotazione ═══════════════════════════════════════════ */

.booking { display: grid; gap: var(--space-2xl); }
.booking__aside { display: grid; gap: var(--space-lg); align-content: start; }
.booking__steps { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: bstep; }
.booking__steps li {
  counter-increment: bstep;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.booking__steps li::before {
  content: counter(bstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  color: var(--color-mark);
  padding-block-start: 0.28em;
}

@media (min-width: 64rem) {
  .booking {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-3xl);
    align-items: start;
  }
  .booking__aside { position: sticky; top: var(--space-lg); }
}

/* ══ Contatti ═══════════════════════════════════════════════ */

.contact { display: grid; gap: var(--space-xl); }
.contact__block { display: grid; gap: var(--space-2xs); align-content: start; }
.contact__block h2 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.contact__value { font-size: var(--text-lg); }
.hours { list-style: none; padding: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  border-block-start: var(--rule-hair) solid var(--color-hairline);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}
@media (min-width: 72rem) {
  .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══ Articolo ═══════════════════════════════════════════════ */

.entry { padding-block: var(--space-xl) var(--space-2xl); }
.entry__header { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.entry__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.entry__content { margin-block-start: var(--space-xl); }
.entry__content h2 { font-size: var(--text-2xl); }
.entry__content img { border-radius: var(--radius-lg); margin-block: var(--space-lg); }
.entry__foot {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-firm);
}

/* Nota metodologica: dove vivono le fonti di un contenuto sanitario. */
.sources {
  margin-block-start: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  border-inline-start: var(--rule-firm) solid var(--color-rule-firm);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.sources h2 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-block-end: var(--space-xs);
}

/* ══ Scheletro pagina Risultati (bozza) ═════════════════════ */

.draft-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) dashed var(--color-warn);
  border-radius: var(--radius-xs);
  background: var(--color-warn-tint);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.slot {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) dashed var(--color-rule-firm);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-neutral);
}
.slot__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.slots { display: grid; gap: var(--space-md); margin-block-start: var(--space-xl); }
@media (min-width: 48rem) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ 404 e ricerca ══════════════════════════════════════════ */

.plain { padding-block: var(--space-2xl) var(--space-3xl); display: grid; gap: var(--space-lg); }
.searchform { display: flex; gap: var(--space-xs); max-width: 26rem; }
.searchform input[type="search"] { flex: 1 1 auto; }

/* Dichiarazione dell'immagine generata. Sta in fondo, in mono e in
   tono minore: è una nota di trasparenza, non un avviso. */
.nota-ai {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.7;
  letter-spacing: var(--track-label);
  color: var(--color-neutral);
  max-width: var(--measure);
}