/* =========================================================================
   CONTO ALLA ROVESCIA (parts/countdown.html + js/countdown.js)

   In fondo alla pagina, sotto la data della chiusura e FUORI dai
   cartoncini: sta sopra la foto sfocata della villa, quindi scritte chiare
   con lo stesso alone morbido di .chiusura__testo (sito.css).

     221  ·  04  ·  12  ·  37
   GIORNI    ORE   MINUTI  SECONDI

   - cifre Cormorant Garamond "maiuscole" e a larghezza fissa (lining +
     tabular): cambiando non fanno ballare nulla;
   - quattro colonne uguali, larghe quanto il blocco (non quanto il testo):
     anche quando un'etichetta passa al singolare ("1 ora") niente si sposta;
     la colonna dei giorni ha in più la larghezza della terza cifra, così i
     puntini stanno a metà strada tra tutti i numeri;
   - misure in cqw del blocco (max 460px), con minimi in px: a 320px di
     schermo i numeri sono ~35px e le etichette ~10.7px, su una riga sola;
   - finito il conto, al posto dei numeri, in corsivo Pinyon Script:
     "Oggi ci sposiamo!" (27 maggio 2027) e "Grazie di cuore" (dal 28).

   Richiede base.css (--serif, --script).
   ========================================================================= */

.conto{
  /* le scritte chiare sulla foto, come .invito, .scorri__testo, .chiusura__testo */
  --conto-chiaro: rgba(255, 253, 249, .95);
  --conto-alone: 0 0 1px rgba(40, 34, 26, .35), 0 1px 12px rgba(40, 34, 26, .45), 0 0 26px rgba(40, 34, 26, .25);
  /* corpo delle cifre: 35px sul telefono stretto, fino a 54px sul computer.
     (proprietà non registrata: i cqw si risolvono dove viene usata, cioè
     dentro al contenitore .conto) */
  --cifre: clamp(30px, 11.8cqw, 54px);
  /* cifre dei giorni (js/countdown.js la aggiorna: 3 fino al 16 febbraio
     2027, poi 2; sotto i 10 giorni "07", come ore, minuti e secondi) */
  --giorni-cifre: 3;

  position: relative;
  width: min(100%, 460px);
  margin: clamp(22px, 4.5vh, 38px) auto 0;
  container: conto / inline-size;
  color: var(--conto-chiaro);
  text-shadow: var(--conto-alone);
  text-align: center;
  font-family: var(--serif, "Cormorant Garamond", Garamond, "Times New Roman", serif);
  -webkit-user-select: none;
  user-select: none;
}
@supports (height: 1svh){
  .conto{ margin-top: clamp(22px, 4.5svh, 38px); }
}
.conto[hidden]{ display: none; }

/* solo per i lettori di schermo (non dipende da sito.css) */
.conto__lettori{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- i quattro numeri ---------- */
/* una cifra (tabulare) di Cormorant Garamond è larga 0,49em, più la
   spaziatura di 0,02em: la prima traccia è la larghezza delle cifre dei
   giorni oltre la seconda, e i giorni occupano quella traccia e la seguente */
.conto__quadrante{
  display: grid;
  grid-template-columns: max(0px, calc(var(--cifre) * .51 * (var(--giorni-cifre) - 2))) repeat(4, minmax(0, 1fr));
  align-items: start;
}
.conto__unita[data-unita="giorni"]{ grid-column: 1 / span 2; }
.conto__unita{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.conto__numero{
  display: block;
  font-family: var(--serif, "Cormorant Garamond", Garamond, serif);
  font-size: var(--cifre);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  padding-left: .02em;                 /* compensa la spaziatura dopo l'ultima cifra */
  white-space: nowrap;
}
.conto__etichetta{
  display: block;
  margin-top: max(9px, 2.4cqw);
  padding-left: .24em;                 /* come .chiusura__testo: centra la parola spaziata */
  font-size: clamp(10.5px, 1.6cqw + 6px, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* separatori discreti: un puntino chiaro sul confine tra due colonne,
   all'altezza del centro delle cifre (con interlinea 1 le cifre maiuscole
   di Cormorant hanno il centro a ~0,5em dall'alto) */
.conto__unita + .conto__unita::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--cifre) * .5);
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .62;
  box-shadow: 0 0 1px rgba(40, 34, 26, .3), 0 0 7px rgba(40, 34, 26, .35);
}

/* ---------- a conto finito: il messaggio al posto dei numeri ---------- */
.conto__messaggio{
  display: none;
  margin: 0;
  padding: 0 .1em;
  font-family: var(--script, "Pinyon Script", cursive);
  font-size: clamp(34px, 11cqw, 52px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  text-wrap: balance;
}
.conto[data-stato="oggi"] .conto__quadrante,
.conto[data-stato="grazie"] .conto__quadrante{ display: none; }
.conto[data-stato="oggi"] .conto__messaggio,
.conto[data-stato="grazie"] .conto__messaggio{ display: block; }