/* SeaStrike: componenti per mostrare i dati, non raccontarli.
   ------------------------------------------------------------------
   PERCHE' ESISTE QUESTO FILE

   Le due pagine del funnel B2B (`approfondimenti-stagione-2026.html` e
   `stabilimenti-domande.html`) avevano 1.134 e 873 parole con zero
   immagini. Il problema pero' non si risolveva mettendoci una fotografia
   qualsiasi: quelle pagine sono piene di numeri, e un numero dentro un
   paragrafo si legge come parola, non come quantita'. Chi scorre non lo
   vede. Qui i numeri che la pagina gia' cita diventano forma: una barra
   lunga il doppio di un'altra si capisce senza leggere.

   Nessuna decorazione: ogni elemento disegna un dato che e' gia' nel
   testo e che ha la sua fonte dichiarata sotto. Se il dato cambia,
   cambia anche la larghezza (`--w`), altrimenti il disegno mente.

   Non serve ricompilare Tailwind: qui dentro e' CSS scritto a mano.
   ------------------------------------------------------------------ */

/* --- Barre orizzontali -------------------------------------------------
   Struttura: la frase a sinistra, il valore grande a destra, la barra
   sotto la frase. Il valore resta leggibile anche se le barre non si
   caricano, e chi usa un lettore di schermo sente la frase e la
   percentuale (la barra e' aria-hidden). */

.grafico { display: grid; gap: 1.15rem; }

.barra {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.25rem;
  align-items: center;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #E7EBF3;
}
.grafico .barra:last-child { border-bottom: 0; padding-bottom: 0; }

.barra-testo { grid-column: 1; grid-row: 1; line-height: 1.4; }

.barra-valore {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #0D1442;
  text-align: right;
  min-width: 4.2ch;
}

.barra-traccia {
  grid-column: 1; grid-row: 2;
  height: .55rem;
  border-radius: 99px;
  background: #EAF4FC;
  overflow: hidden;
}

.barra-riempimento {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 99px;
  background: linear-gradient(90deg, #3A87C4, #4A9FE0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,.84,.36,1);
  transition-delay: var(--d, 0ms);
}
/* `.in` lo mette assets/js/motion.js quando l'elemento entra in vista:
   le barre crescono mentre si legge, invece di essere gia' cresciute. */
.in .barra-riempimento { transform: scaleX(1); }

/* la barra che riguarda noi si stacca dalle altre */
.barra.evidenza .barra-riempimento { background: linear-gradient(90deg, #0D1442, #3A87C4); }
.barra.evidenza .barra-valore { color: #0D1442; }

/* --- Su fondo scuro --------------------------------------------------- */
.su-scuro-dati .barra { border-bottom-color: rgba(255,255,255,.10); }
.su-scuro-dati .barra-valore { color: #fff; }
.su-scuro-dati .barra-traccia { background: rgba(255,255,255,.10); }

/* --- Barra dentro una cella di tabella ---------------------------------
   La tabella resta una tabella (tre colonne di dati confrontabili, e' la
   forma giusta), ma sotto la cifra compare quanto e' lunga rispetto alla
   piu' alta della colonna. Il confronto "Alassio contro Lignano" si vede
   invece di doverlo calcolare. */
.cella-barra {
  display: block;
  height: .3rem;
  width: var(--w, 0%);
  margin: .4rem 0 0 auto;
  border-radius: 99px;
  background: #4A9FE0;
}
tr.evidenza .cella-barra { background: #0D1442; }

/* --- La settimana ------------------------------------------------------
   2,7 giorni su 7 detto a parole resta un numero. Disegnato, si vede che
   e' poco piu' di un fine settimana lungo. */
.settimana { display: flex; gap: .35rem; margin-top: 1.5rem; }
.settimana .giorno {
  position: relative;
  flex: 1 1 0;
  height: 2.6rem;
  border-radius: .35rem;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.settimana .giorno::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: #4A9FE0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.16,.84,.36,1);
  transition-delay: var(--d, 0ms);
}
.in .settimana .giorno::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .barra-riempimento,
  .settimana .giorno::before { transition: none; transform: scaleX(1); }
}

/* --- La catena del calcolo ---------------------------------------------
   Su `stabilimenti-domande.html` il conto che interessa al gestore
   (24 € a partita che diventano ~4.300 € su una tappa) era un elenco di
   voce-e-valore: corretto ma muto, non si vedeva che e' una catena di
   moltiplicazioni. Qui ogni passaggio e' un anello e fra un anello e
   l'altro c'e' l'operazione, cosi' il conto si segue invece di doverlo
   ricostruire. I numeri sono gli stessi di prima: 24 x 12 = 288, meta'
   144, per 30 giorni ~4.300. Se cambia il prezzo cambiano tutti. */

.catena { list-style: none; margin: 0; padding: 0; }

.catena-passo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #E7EBF3;
}
.catena-passo .etichetta { color: #5B6478; }
.catena-passo .valore {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: #0D1442; white-space: nowrap;
}

/* l'operazione fra un anello e l'altro, con il filo che li lega */
.catena-op {
  position: relative;
  margin: 0; padding: .5rem 0 .5rem 1.75rem;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: #3A87C4;
}
.catena-op::before {
  content: ""; position: absolute; left: .55rem; top: -.35rem; bottom: -.35rem;
  width: 2px; background: #CFE0F1; border-radius: 2px;
}

.catena-totale {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.2rem; padding: 1.25rem 1.4rem;
  border-radius: 1rem; background: #0D1442; color: #fff;
}
.catena-totale .etichetta { color: #B9C6DA; font-size: .95rem; }
.catena-totale .valore {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1;
}

/* --- La divisione a meta' ----------------------------------------------
   Il modello e' "tu non paghi niente, si divide a meta'". Due barre
   uguali lo dicono in un colpo d'occhio meglio di una riga di testo. */
.divisione { display: flex; gap: .4rem; margin-top: 1.4rem; }
.divisione .quota {
  flex: 1 1 50%;
  padding: .7rem .9rem;
  border-radius: .6rem;
  font-size: .8rem; font-weight: 600;
}
.divisione .tua { background: #0D1442; color: #fff; }
.divisione .nostra { background: #EAF4FC; color: #3A87C4; }