/* =============================================================================
   DE LUX 21 — Verifica dell'età (eta.php)
   -----------------------------------------------------------------------------
   Ricalca la schermata che il cliente ha indicato il 16/09/2026: fascia
   bordeaux verticale a sinistra con le diciture di marca, fondo panna a destra,
   sigillo grande al centro, la domanda, i due pulsanti e "Bevi responsabilmente"
   in fondo.

   Tutto dai token, quindi regge nei tre temi. Una sola deroga voluta: il fondo
   e' sempre --surface e non --bg, perche' questa schermata deve staccare dal
   sito anche quando ci si arriva col tema Nero, dove --bg sarebbe quasi nero e
   la composizione perderebbe il suo carattere.

   Non c'e' nav e non c'e' footer: da qui non si naviga, si risponde. Per questo
   la pagina occupa esattamente l'altezza dello schermo e non scorre, a meno che
   il contenuto non ci stia (schermi bassi, testi lunghi scritti dal pannello).
   ========================================================================== */

.page-eta { margin: 0; background: var(--surface); }

.eta {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: clamp(180px, 18vw, 280px) 1fr;
  color: var(--ink);
}

/* --- Fascia bordeaux a sinistra -------------------------------------------- */
.eta__fascia {
  background: var(--accent); color: var(--accent-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.2rem, 2.5vw, 2.2rem);
  font-family: var(--font-ui); font-size: .64rem;
  letter-spacing: .22em; text-transform: uppercase; line-height: 2;
}
/* La riga di stacco fra i due blocchi in alto: e' un segno, non un bordo, e
   per quello sta dentro il paragrafo e non fra due elementi. */
.eta__fascia-alto span {
  display: block; width: 34px; height: 1px;
  background: currentColor; opacity: .5; margin: 1.4rem 0;
}
.eta__fascia-basso { opacity: .85; }

/* --- Colonna destra --------------------------------------------------------- */
.eta__corpo {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1.6rem, 3.5vw, 3rem) clamp(1.5rem, 5vw, 4rem);
}

.eta__nota-alto {
  justify-self: end; text-align: right;
  font-family: var(--font-text); font-style: italic;
  font-size: .92rem; line-height: 1.5; color: var(--ink-soft);
}
.eta__nota-alto span { display: block; color: var(--gold); margin-top: .3rem; }

.eta__centro { align-self: center; text-align: center; max-width: 46rem; margin-inline: auto; }

/* Il sigillo si dimensiona per ALTEZZA, come ogni marchio in questo progetto. */
.eta__sigillo {
  width: clamp(120px, 15vw, 190px); height: auto;
  display: block; margin: 0 auto clamp(1.2rem, 3vh, 2rem);
}

.eta__titolo {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.08;
  color: var(--brand); margin: 0 0 1rem;
  text-wrap: balance;
}
.eta__testo {
  font-family: var(--font-text); font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.6; color: var(--ink-soft);
  max-width: 44ch; margin: 0 auto clamp(1.6rem, 4vh, 2.6rem);
}

/* --- I due pulsanti --------------------------------------------------------- */
.eta__azioni { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); justify-content: center; flex-wrap: wrap; }
.eta__btn {
  font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.2rem);
  padding: .85rem clamp(1.6rem, 3.5vw, 3rem);
  border: var(--hairline) solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  min-width: 11rem;
}
/* "Sì" e' la risposta che quasi tutti daranno, quindi e' quella piena; "No"
   resta un contorno. Non e' un trucco: e' la gerarchia onesta fra la strada
   normale e quella d'eccezione. */
.eta__btn--si { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.eta__btn--si:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.eta__btn--no { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.eta__btn--no:hover { border-color: var(--ink); }
.eta__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.eta__piede {
  font-family: var(--font-ui); font-size: .72rem;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: clamp(1rem, 3vh, 2rem);
  border-top: var(--hairline) solid var(--line);
}

/* --- Telefoni ---------------------------------------------------------------
   La fascia sparisce: su 390 px porterebbe via metà schermo a una pagina che ha
   una domanda sola da fare. Sparisce anche la nota in alto a destra, che e' un
   fregio e non un'informazione. */
@media (max-width: 720px) {
  .eta { grid-template-columns: 1fr; }
  .eta__fascia { display: none; }
  .eta__nota-alto { display: none; }
  .eta__corpo { grid-template-rows: 1fr auto; }
  .eta__azioni { flex-direction: column; }
  .eta__btn { width: 100%; min-width: 0; }
}