/* ═══════════════════════════════════════════════════════════════════════════
   HOME — impaginato dei dieci blocchi (più «In evidenza»)
   Solo la disposizione: forme, schede e pulsanti sono in componenti.css.
   Ordine e fondi: selezione-rebrand/05-ui/STRUTTURA.md §3.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Apertura: piena solo in home ───────────────────────────────────── */
.apertura { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); background: var(--nl-ghiaccio); }
/* Filigrana: la croce a contorno, grande e tenue, che esce dall'angolo. */
.apertura::before {
  content: ""; position: absolute; z-index: -1; left: -26rem; top: -10rem; width: 70rem; aspect-ratio: 1;
  background: var(--nl-tinta-blu);
  -webkit-mask: var(--forma-contorno) center / contain no-repeat; mask: var(--forma-contorno) center / contain no-repeat;
}
.apertura-griglia { display: grid; gap: 3rem; align-items: center; }
.apertura .lead { max-width: 32rem; margin-top: 1.75rem; }
.apertura .azioni { margin-top: 2.25rem; }
/* «Già paziente»: una riga piatta sulla tinta d'accento, non una scheda che
   galleggia. È l'unico vantaggio riservato, quindi resta in vista. */
.apertura-paziente {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 1.75rem; padding: .6rem 1.1rem .6rem .6rem;
  border-radius: var(--nl-r-pillola);
  background: var(--nl-accento-tinta); color: var(--nl-ink);
  font-size: var(--nl-t-piccolo); line-height: 1.35; text-decoration: none;
  transition: background-color var(--nl-veloce);
}
.apertura-paziente .tondo { background: var(--nl-bianco); }
.apertura-paziente > .icona { color: var(--nl-accento-ink); transition: transform var(--nl-veloce); }
@media (hover: hover) and (pointer: fine) {
  .apertura-paziente:hover strong { text-decoration: underline; text-underline-offset: .2em; }
  .apertura-paziente:hover > .icona { transform: translateX(3px); }
}
/* Cerca le tue analisi (7/10, js/cerca-esami.js): il campo in prima
   schermata e i risultati sotto, nel flusso della pagina (12/10, Mauro): prima
   coprivano la sezione dopo e venivano tagliati. Tutti, in un riquadro che
   scorre al suo interno; restano finché nel campo c'è una parola. Solo
   l'elenco: «Calcola il preventivo» è quello sotto, che porta le scelte. */
.cerca-esami { position: relative; z-index: 5; max-width: 34rem; margin-top: 1.75rem; }
.cerca-esami-etichetta { display: block; margin-bottom: .5rem; font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-ink); }
.cerca-esami-riga { position: relative; }
.cerca-esami-riga .icona { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; width: 1.35rem; height: 1.35rem; color: var(--nl-blu-ink); pointer-events: none; }
.cerca-esami .campo { height: 3.5rem; padding-left: 3.1rem; border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-pillola); box-shadow: 0 4px 14px rgba(13, 43, 73, .08); font-size: 1.0625rem; }
.cerca-esami .campo::-webkit-search-cancel-button { cursor: pointer; }
.cerca-esami-pannello {
  margin-top: .75rem; overflow: hidden;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco);
  animation: tendina-apre .16s var(--nl-esce);
}
.cerca-esami-stato { padding: .75rem 1rem .35rem; color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); }
.cerca-esami-lista { max-height: min(22rem, 55vh); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--nl-bordo); }
.cerca-esami-voce { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .75rem .55rem 1rem; border-top: 1px solid var(--nl-bordo); }
.cerca-esami-voce:first-child { border-top: 0; }
.cerca-esami-voce.is-scelta { background: var(--nl-vetro); }
.cerca-esami-nome { display: grid; gap: .1rem; min-width: 0; }
.cerca-esami-nome strong { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cerca-esami-nome > span { color: var(--nl-ink-2); font-size: .875rem; line-height: 1.3; }
.cerca-esami-scegli {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  min-height: 2.75rem; padding: .4rem .9rem;
  border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-pillola);
  background: var(--nl-bianco); color: var(--nl-blu-ink);
  font: 700 .875rem/1 var(--nl-font-marchio);
}
.cerca-esami-scegli .icona { width: 1rem; height: 1rem; stroke-width: 2.25; }
.cerca-esami-scegli:hover { background: var(--nl-vetro); }
.cerca-esami-scegli[aria-pressed="true"] { border-color: transparent; background: var(--nl-blu-ink); color: var(--nl-bianco); }
.apertura .cerca-esami + .azioni { margin-top: 1.5rem; }

@media (min-width: 64em) {
  .apertura-griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* In alto, non al centro (12/10, Mauro): quando i risultati della ricerca
     allungano la colonna del testo, la foto non si sposta. */
  .croce-foto { justify-self: end; align-self: start; margin-right: -2rem; }
}
@media (max-width: 63.9375em) { .croce-foto { width: min(100%, 26rem); } }

/* ── 2. Prima di venire: fascia blu inchiostro a quattro colonne ───────── */
.risposte .contenitore { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.risposte-testa { display: grid; justify-items: start; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.risposte-nota { max-width: 44rem; color: var(--nl-ink-su-scuro-2); }
/* Un'icona sopra ogni colonna (7/10, modifica 8 di Giosuè): a tratto, in
   azzurro chiaro sul blu inchiostro, senza cerchio. */
.risposta-icona { width: 2.25rem; height: 2.25rem; margin-bottom: .25rem; color: var(--nl-tinta-blu); stroke-width: 1.5; }
.risposte-griglia { display: grid; gap: 2rem; }
.risposta + .risposta { padding-top: 2rem; border-top: 1px solid var(--nl-filetto-su-scuro); }
.risposta { display: grid; align-content: start; gap: .75rem; }
.risposta p { color: var(--nl-ink-su-scuro-2); }
.risposta p:has(> .link-freccia) { margin-top: .25rem; }
.risposta-etichetta { font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); }
.risposta-ora {
  font-size: var(--nl-t-display); font-weight: 900; line-height: .95; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nl-bianco) !important;
}
@media (min-width: 48em) and (max-width: 71.9375em) {
  .risposte-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .risposta:nth-child(2) { padding-top: 0; border-top: 0; }
}
@media (min-width: 72em) {
  .risposte-griglia { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 0; }
  .risposta + .risposta { padding-top: 0; border-top: 0; }
  .risposta { padding-inline: 2rem; border-left: 1px solid var(--nl-filetto-su-scuro); }
  .risposta:first-child { padding-left: 0; border-left: 0; }
  .risposta-ora { font-size: var(--nl-t-titolo); }  /* nella colonna stretta il display non ci sta */
}

/* ── 3. Servizi ────────────────────────────────────────────────────────── */
.servizi-griglia { display: grid; gap: 1.25rem; }
@media (min-width: 48em) {
  .servizi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Quattro schede dal 7/10: due per riga, e in fila da 1280px. */
@media (min-width: 80em) {
  .servizi-griglia { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .scheda-servizio--principale { grid-column: auto; }
  /* In quattro colonne «CHECK-UP» al corpo pieno andava a capo sul trattino. */
  .scheda-servizio--principale .scheda-servizio-titolo { font-size: clamp(2rem, .4rem + 2.2vw, 3rem); }
}

/* ── 1b. Le promo del momento: dal 9/10 il componente è comune, in
   Sistema/css/componenti.css («Promozioni»): lo usa anche il principale. ── */

/* ── 4. Preventivo: quattro ingressi ───────────────────────────────────── */
.preventivo::after {
  content: ""; position: absolute; z-index: -1; right: -7rem; top: -7rem; width: 22rem; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
.preventivo-griglia { display: grid; gap: 3rem; }
.preventivo-testo { margin-top: 1.75rem; }
.preventivo-invito { margin-top: 1.5rem; font-weight: 700; }
.preventivo .azioni { margin-top: 1.5rem; }
.preventivo .nota-scudo { margin-top: 1.5rem; }
.ingressi { display: grid; gap: 1rem; }
@media (min-width: 48em) {
  .ingressi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingresso a { grid-template-columns: 1fr; align-content: start; min-height: 13rem; }
  .ingresso-vai { position: absolute; right: 1.5rem; bottom: 1.4rem; }
}
@media (min-width: 64em) { .preventivo-griglia { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }

/* ── 5. Perché sceglierci ──────────────────────────────────────────────── */
.perche-griglia { display: grid; gap: 3.5rem; align-items: center; }
.perche-foto { max-width: 30rem; }
.perche-foto img { object-position: 50% 22%; }
.perche .lead { max-width: 40rem; margin-top: 1.75rem; }
.motivi { display: grid; gap: 1.5rem 2.5rem; margin-top: 2.5rem; }
/* L'icona nel filo del titolo (7/10, modifica 13 di Giosuè). */
.motivo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: .3rem; align-items: start; }
.motivo-icona { grid-row: span 2; width: 1.75rem; height: 1.75rem; margin-top: .05rem; color: var(--nl-blu-ink); }
@media (min-width: 48em) { .motivi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .perche-griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; } }

/* ── 6. Sedi: fascia blu notte ─────────────────────────────────────────── */
.sedi::before {
  content: ""; position: absolute; z-index: -1; right: -20rem; top: -22rem; width: 40rem; aspect-ratio: 1;
  background: var(--nl-filetto-su-scuro);
  -webkit-mask: var(--forma-contorno) center / contain no-repeat; mask: var(--forma-contorno) center / contain no-repeat;
}
.sedi-sottotitolo { max-width: 40rem; }
.sedi-griglia { display: grid; gap: 2.25rem 2rem; }
@media (min-width: 40em) { .sedi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .sedi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 76em) { .sedi-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── 7. Chi siamo ──────────────────────────────────────────────────────── */
/* La foto larga con la frase sull'evidenziatore (piano editoriale del Lab). */
.chi-siamo-foto { position: relative; }
.chi-siamo-foto img { aspect-ratio: 4 / 3; border-radius: var(--nl-r-scheda); }
@media (min-width: 48em) { .chi-siamo-foto img { aspect-ratio: 21 / 9; } }
.chi-siamo-frase {
  position: absolute; left: clamp(1rem, .5rem + 2.5vw, 3rem); bottom: clamp(1rem, .5rem + 2.5vw, 3rem);
  display: grid; justify-items: start; gap: .12em;
  font-size: clamp(1.5rem, .9rem + 2.6vw, 3.2rem); font-weight: 900; line-height: 1.1; text-transform: uppercase;
  color: var(--nl-bianco);
}
.chi-siamo-frase .evidenzia { padding: .02em .3em .06em; }
.chi-siamo-colonne { display: grid; gap: 2rem 2.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.chi-siamo-testo { display: grid; align-content: start; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--nl-bordo); }
.chi-siamo-testo > p:not(:has(.link-freccia)) { color: var(--nl-ink-2); }
.chi-siamo-testo p:has(> .link-freccia) { margin-top: .5rem; }
.chi-siamo-titolo { font-size: var(--nl-t-voce); }
@media (min-width: 48em) { .chi-siamo-colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* L'elemento azzurro pieno che sporge dall'angolo in alto a destra. A 1440px
   usciva di 2px dalla finestra: la sezione lo taglia (7/10). */
.chi-siamo { overflow-x: clip; }
.chi-siamo-foto::after {
  content: ""; position: absolute; right: -4%; top: -6%; width: 22%; aspect-ratio: 1;
  background: var(--nl-blu);
  -webkit-mask: var(--forma-azzurro) center / contain no-repeat; mask: var(--forma-azzurro) center / contain no-repeat;
}


/* ── 8. Domande frequenti ──────────────────────────────────────────────── */
.faq .bozza { margin-top: 1rem; }
.faq .fisarmonica { max-width: 60rem; }

/* ── 9. Newsletter: tinta d'accento con l'elemento pieno ───────────────── */
.newsletter::after {
  content: ""; position: absolute; z-index: -1; right: -5rem; bottom: -5rem; width: 18rem; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
.newsletter-griglia { display: grid; gap: 2rem; }
.newsletter .lead { margin-top: 1.25rem; }
@media (min-width: 64em) { .newsletter-griglia { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; } }

/* ── 10. Chiusura ──────────────────────────────────────────────────────── */
.chiusura .titolo { max-width: 60rem; }
.chiusura-dentro .chiusura-email { margin-top: -.5rem; }

/* I sette profili nella scheda Check-up (15/10). */
.scheda-profili { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.scheda-profili a {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--nl-bordo); border-radius: 999px;
  font-size: var(--nl-t-piccolo); color: var(--nl-ink); text-decoration: none; background: var(--nl-bianco);
}
.scheda-profili a:hover, .scheda-profili a:focus-visible { border-color: var(--nl-accento); }