/* COMPONENTI */
/* ------------------------------------------------ */
/* I pezzi che si ripetono: occhielli, bottoni, card, pillole, la
   tabella, i cursori, il carousel.

   Ogni pezzo e' scritto UNA VOLTA, in termini dei token di contesto
   (--superficie, --bordo, --testo...). Chi lo mette dentro una
   sezione scura non riscrive nulla: e' la sezione a ridichiarare le
   variabili, in base.css. */


/* ETICHETTE E OCCHIELLI */
/* ------------------------------------------------ */

/* .etichetta non e' piu' qui: sta in pagine.css, insieme alle altre
   classi che possono comparire DENTRO un articolo. L'area clienti
   carica quel foglio e non questo — questo dichiara .piano, e la
   vista dei piani dell'area clienti dichiara lo stesso nome — quindi
   una classe che serve al corpo di un articolo deve stare di la'. */

.occhiello {
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-xl);
  line-height: var(--interlinea-media);
  text-transform: uppercase;
}

/* Il testo con il riflesso d'oro che scorre. Va su uno span dentro un
   titolo, mai su un blocco intero: il ritaglio sul testo costa, e su
   un paragrafo lungo si vede scattare. */
.oro {
  background: var(--grad-accento-testo);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.collegamento-sottolineato {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accento);
  color: var(--accento-leggibile);
  font-size: var(--testo-xs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.icona {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}


/* BOTTONI */
/* ------------------------------------------------ */
/* Cinque varianti, non una per posto in cui compare un bottone. */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: background var(--durata-media) ease,
              border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              color var(--durata-media) ease;
}

.bottone--grande {
  padding: var(--sp-5) var(--sp-10);
}

/* Il pieno d'oro: l'invito principale. Ce n'e' uno per schermata. */
.bottone--primario {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-card-chiara);
}

.bottone--primario:hover {
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-passaggio);
}

/* Il pieno scuro: l'invito dentro una card chiara. */
.bottone--scuro {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

.bottone--scuro:hover {
  color: var(--accento-tenue);
  box-shadow: var(--ombra-card-chiara);
}

/* Il vuoto: seconda scelta, stesso peso tipografico. */
.bottone--fantasma {
  border-color: var(--bordo);
  color: var(--accento-leggibile);
}

.bottone--fantasma:hover {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento-tenue) / .08);
}

/* Il pieno d'oro piccolo, per i capi di sezione su fondo scuro. */
.bottone--oro {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

.bottone--oro:hover {
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-passaggio);
}

/* Il solo testo con la riga sotto: terza scelta. */
.bottone--testo {
  padding-inline: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--accento);
  color: var(--accento-leggibile);
}

.bottone--testo:hover {
  border-bottom-color: currentColor;
}

/* Dentro una card di piano il bottone eredita il colore del piano. */
.bottone--piano {
  width: 100%;
  margin-top: auto;
  border-color: var(--bordo-forte);
  color: inherit;
}

.bottone--piano:hover {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

/* Il collegamento all'articolo sotto al pulsante: seconda scelta, e
   si vede che lo e'. */
.piano__articolo {
  display: block;
  margin-top: var(--sp-3);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-align: center;
  text-transform: uppercase;
}

.piano__articolo:hover {
  color: var(--accento-leggibile);
}

.sigla {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid currentColor;
  border-radius: var(--raggio-cerchio);
  font-size: .8em;
  letter-spacing: 0;
  text-transform: lowercase;
}


/* PILLOLE */
/* ------------------------------------------------ */

.pillola {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  background: var(--superficie);
  color: var(--testo-attenuato);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.pillola--evento:hover {
  border-color: var(--accento);
  color: var(--testo);
}

/* Sotto i sette giorni la finestra e' vicina e la pillola lo dice.
   Nell'export il colore passava a un oro chiarissimo, illeggibile su
   fondo crema: qui cambia il bordo, che si vede senza gridare. */
.pillola--vicina {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento) / .08);
}

.pillola--vicina strong {
  color: var(--accento-leggibile);
}

.pillola--quieta {
  border-color: transparent;
  background: none;
  color: var(--testo-tenue);
}

.pillola strong {
  color: var(--testo);
  font-weight: var(--peso-forte);
}

.pillola__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}


/* FREGI FLOTTANTI */
/* ------------------------------------------------ */
/* Le due targhette sull'immagine dell'eroe. */

.fregio {
  position: absolute;
  z-index: var(--z-sollevato);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-s);
  box-shadow: var(--ombra-card-chiara);
}

.fregio--chiaro {
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
}

.fregio--scuro {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

.fregio--purezza {
  top: var(--sp-5);
  left: calc(-1 * var(--sp-5));
}

/* A cavallo del bordo inferiore della fotografia: sporge sotto
   l'immagine per circa meta' della propria altezza. */
.fregio--custodia {
  right: var(--sp-5);
  bottom: calc(-1 * var(--sp-8));
}

.fregio__etichetta {
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  opacity: .75;
}

.fregio__valore {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--testo-l);
}


/* LA FASCIA SCORREVOLE */
/* ------------------------------------------------ */

.fascia {
  position: relative;
  z-index: var(--z-contenuto);
  margin: 0 calc(-1 * var(--gutter));
  padding-block: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
  overflow: hidden;
  /* La dissolvenza che stacca la fascia dal corpo dell'eroe. */
  background: var(--velo-fondo-chiaro);
}

.fascia__pista {
  display: flex;
  width: max-content;
}

.fascia__elenco {
  display: flex;
  align-items: center;
  list-style: none;
}

.fascia__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
  white-space: nowrap;
}

/* Sottolineate perche' portano da qualche parte: sono i quattro
   registri pubblici su cui le dichiarazioni si verificano, e senza un
   segno visibile nessuno immagina di poterci cliccare. */
.fascia__voce a {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--bordo);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-xl);
  text-transform: uppercase;
  transition: border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.fascia__voce a:hover {
  border-bottom-color: var(--accento);
  color: var(--accento-leggibile);
}

.fascia__separatore {
  color: var(--accento);
}


/* CARD DEI PROFILI */
/* ------------------------------------------------ */

.profilo {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-card);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.profilo:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-passaggio);
  transform: translateY(-3px);
}

.profilo__nome {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
}

.profilo__occhiello {
  margin-top: 2px;
  color: var(--testo-tenue);
  font-size: var(--testo-s);
  font-style: italic;
}

.profilo__testo {
  margin-top: var(--sp-5);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.profilo__evidenza {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie-alt);
  font-size: var(--testo-s);
}

.profilo .etichetta {
  margin-top: var(--sp-6);
}

.profilo__modi {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  list-style: none;
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.profilo__modi strong {
  color: var(--testo);
  font-weight: var(--peso-medio);
}

.profilo__chiusa {
  margin: var(--sp-8) 0 var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-align: center;
  text-transform: uppercase;
}

.profilo .bottone {
  margin-top: auto;
}

.profilo .conto {
  margin: var(--sp-4) 0 var(--sp-8);
}


/* LE QUATTRO RAGIONI */
/* ------------------------------------------------ */

.ragione {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--bordo);
}

/* Il numero sta dentro il titolo, non sopra: la riga si legge
   "II Diversificazione" invece di spezzarsi in due. Eredita corpo e
   carattere dal titolo, e cambia solo colore. */
.ragione__numero {
  margin-right: var(--sp-3);
  color: var(--accento);
}

.ragione__titolo {
  font-size: var(--testo-xl);
}

.ragione__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}


/* L'ECCELLENZA */
/* ------------------------------------------------ */

.eccellenza__caveau,
.eccellenza__card {
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease;
}

.eccellenza__caveau:hover,
.eccellenza__card:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-alone);
}

.eccellenza__caveau {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* L'IMMAGINE SEGUE LE QUATTRO SCHEDE, NON VICEVERSA

   La card del caveau occupa due righe della griglia, quindi la sua
   altezza si distribuisce su entrambe. Con l'immagine nel flusso — 470
   pixel alla sua proporzione naturale — quelle due righe diventavano
   alte 297 ciascuna, mentre una scheda accanto ne riempiva 123: 126
   pixel di vuoto per scheda, quattro volte.

   Togliendo l'immagine dal flusso l'altezza delle righe la decidono le
   schede, che e' quello che si vuole, e l'immagine riempie lo spazio
   che avanza ritagliandosi invece di deformarsi. Il minimo evita che,
   se un giorno le schede diventassero cortissime, resti una fessura. */
.eccellenza__figura {
  position: relative;
  flex: 1;
  min-height: 200px;
}

.eccellenza__figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--raggio-s);
  object-fit: cover;
}

.eccellenza__titolo {
  font-size: var(--testo-xl);
}

.eccellenza__caveau .eccellenza__titolo {
  font-size: var(--titolo-s);
}

.eccellenza__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.fregio-simbolo,
.eccellenza__card .fregio {
  position: static;
}

/* Il segno geometrico in cima alle quattro schede piccole. */
.eccellenza__card > svg {
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  color: var(--accento);
}


/* L'INTERRUTTORE A DUE PILLOLE */
/* ------------------------------------------------ */

.interruttore {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  background: var(--superficie);
}

.interruttore__pillola {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-pillola);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  transition: background var(--durata-rapida) ease,
              color var(--durata-rapida) ease,
              box-shadow var(--durata-rapida) ease;
}

.interruttore__punto {
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-cerchio);
  background: currentColor;
  opacity: .5;
}

.interruttore__pillola--attiva {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-card-chiara);
}

.interruttore__pillola--attiva .interruttore__punto {
  opacity: 1;
}


/* IL CONTATORE E LA TABELLA */
/* ------------------------------------------------ */

.retro__cifra {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--bordo);
}

.retro__percentuale {
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--titolo-l);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.retro__nota {
  margin-top: var(--sp-2);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--raggio-m);
  overflow: hidden;
  background: var(--superficie);
  font-size: var(--testo-s);
}

.tabella thead {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro-attenuato);
}

.tabella th {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  text-align: left;
  text-transform: uppercase;
}

.tabella tbody th {
  color: var(--testo);
  font-family: var(--font-display);
  font-size: var(--testo-l);
  letter-spacing: 0;
  text-transform: none;
}

.tabella td {
  padding: var(--sp-4) var(--sp-5);
  font-variant-numeric: tabular-nums;
}

.tabella tbody tr:nth-child(even) {
  background: var(--superficie-alt);
}

.tabella__numerica {
  text-align: right;
}

.tabella__guadagno {
  color: var(--accento-leggibile);
  font-weight: var(--peso-medio);
}

.avvertenza {
  margin-top: var(--sp-5);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* IL SIMULATORE */
/* ------------------------------------------------ */

.cursore__etichetta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.cursore__valore {
  color: var(--testo);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.cursore input[type="range"] {
  width: 100%;
  margin-top: var(--sp-4);
  accent-color: var(--accento);
}

.simulatore__esito {
  padding: var(--sp-8);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-card);
}

.simulatore__proiezione {
  margin-top: var(--sp-2);
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--titolo-l);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.barra {
  margin-top: var(--sp-6);
}

.barra__testa {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--testo-attenuato);
  font-size: var(--testo-xs);
}

.barra__testa > span:nth-child(2) {
  margin-left: auto;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.barra__percentuale {
  color: var(--accento-leggibile);
}

.barra__pista {
  height: 6px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-alt);
  overflow: hidden;
}

.barra__riempimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raggio-pillola);
  background: var(--grad-barra-piena);
  transition: width var(--durata-lenta) var(--curva-uscita);
}

.barra__riempimento--tenue {
  background: var(--grad-barra-tenue);
}


/* LE CARD DEI PIANI */
/* ------------------------------------------------ */

.piano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.piano:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra-alone);
}

/* Tre temi, non tre palette da dodici chiavi come nell'export: la
   card scura, quella intermedia e quella dorata differiscono per il
   fondo e per il colore del testo, il resto e' identico. */

.piano--scura {
  background: var(--superficie);
  color: var(--testo);
}

.piano--media {
  background: var(--grad-card-media);
  color: var(--testo);
}

.piano--oro {
  border-color: var(--accento);
  background: var(--grad-perla);
  color: var(--testo-su-chiaro);
  box-shadow: var(--ombra-rilievo);
  /* La card in evidenza usa i token del contesto CHIARO anche stando
     dentro una sezione scura: e' una superficie chiara a tutti gli
     effetti, e i suoi bordi e testi devono seguirla. */
  --testo: var(--testo-su-chiaro);
  --testo-attenuato: var(--testo-su-chiaro-attenuato);
  --testo-tenue: var(--testo-su-chiaro-tenue);
  --bordo: var(--bordo-su-chiaro);
  --bordo-forte: var(--bordo-su-chiaro-forte);
  --bordo-tenue: var(--bordo-su-chiaro-tenue);
  --accento-leggibile: var(--accento-su-chiaro);
}

.piano__fregio {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: 50%;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--raggio-pillola);
  background: var(--fondo-scuro);
  color: var(--accento-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  transform: translateX(-50%);
}

.piano__nome {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-xl);
  text-transform: uppercase;
}

.piano__obiettivo {
  font-family: var(--font-display);
  font-size: var(--titolo-m);
  line-height: 1;
}

.piano__didascalia {
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
}

.piano__descrizione {
  margin-top: var(--sp-4);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.piano__dati {
  margin: var(--sp-6) 0;
  font-size: var(--testo-s);
}

.piano__riga {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bordo-tenue);
}

.piano__riga dt {
  color: var(--testo-tenue);
}

.piano__riga dd {
  margin: 0;
  font-weight: var(--peso-medio);
}


/* IL PERCORSO GOLD WAY */
/* ------------------------------------------------ */

.percorso__linea {
  position: absolute;
  top: 24px;
  left: 12.5%;
  width: 75%;
  height: 1px;
  background: var(--bordo-tenue);
}

.percorso__linea--viva {
  width: 0;
  background: var(--accento);
  box-shadow: var(--ombra-alone);
}

.passo {
  position: relative;
  padding-top: var(--sp-14);
}

.passo__nodo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio-cerchio);
  background: var(--superficie);
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.passo__titolo {
  font-size: var(--testo-xl);
}

.passo__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}


/* GLI EVENTI */
/* ------------------------------------------------ */

.appuntamenti__capo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.evento {
  padding: var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease;
}

.evento:hover {
  border-color: var(--accento);
}

.evento__titolo {
  margin: var(--sp-2) 0;
  font-size: var(--testo-l);
}

.evento__dettaglio {
  margin-bottom: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
}


/* I CANALI */
/* ------------------------------------------------ */
/* Nell'export l'evidenziazione di queste quattro schede era gestita
   da JavaScript con dieci binding di stato. E' :hover. */

.canale__collegamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo);
  font-size: var(--testo-s);
  transition: border-color var(--durata-media) ease,
              background var(--durata-media) ease;
}

.canale__collegamento:hover {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento) / .08);
  color: var(--testo);
}

.canale__nome {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.canale__nome::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}

.canale__invito {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--durata-media) ease;
}

.canale__collegamento:hover .canale__invito {
  opacity: 1;
}


/* IL CAROUSEL */
/* ------------------------------------------------ */

.carousel__capo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.carousel__sottotitolo {
  max-width: 52ch;
  margin-top: var(--sp-2);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.carousel__frecce {
  display: flex;
  gap: var(--sp-2);
}

.carousel__freccia {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-cerchio);
  color: var(--accento-leggibile);
  transition: border-color var(--durata-media) ease,
              background var(--durata-media) ease;
}

.carousel__freccia:hover {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento) / .08);
}

/* Il carousel e' un contenitore a scorrimento con aggancio, non una
   pista che trasla. Cosi' lo stesso meccanismo serve le frecce del
   mouse e il dito sul telefono, e non serve una seconda
   implementazione per il tocco.

   Il respiro verticale non e' estetico: la scheda si alza di tre
   pixel al passaggio del puntatore, e qui un asse e' `auto`, quindi
   il CSS impone che l'altro non possa restare `visible`. Senza
   questo margine interno il bordo superiore della scheda sollevata
   e l'ombra finiscono tagliati via dal contenitore. Il margine
   negativo restituisce la spaziatura di prima. */
.carousel__finestra {
  padding-block: var(--sp-4);
  margin-block: calc(var(--sp-4) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel__finestra::-webkit-scrollbar {
  display: none;
}

.carousel__pista {
  display: flex;
}

.carousel__lastra {
  display: grid;
  gap: var(--sp-4);
  min-width: 100%;
  scroll-snap-align: start;
}

.carousel__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.carousel__punti {
  display: flex;
  gap: var(--sp-2);
}

.carousel__punto {
  width: 26px;
  height: 3px;
  border-radius: var(--raggio-pillola);
  background: var(--bordo);
  transition: background var(--durata-lenta) ease;
}

.carousel__punto[aria-selected="true"] {
  background: var(--accento);
}


/* LA SCHEDA DI UN ARTICOLO */
/* ------------------------------------------------ */

.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.scheda:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-card);
  transform: translateY(-3px);
}

/* La riga che porta pastiglia e data. Va a capo invece di stringere:
   su una scheda in colonna stretta "Gold Insight" e "17 maggio 2027"
   non ci stanno affiancate, e una data spezzata a meta' e' peggio di
   una riga in piu'. */
.scheda__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

.scheda__data {
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.scheda__format {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.scheda__evidenza-nota {
  color: var(--accento-leggibile);
}

.scheda__titolo {
  margin-top: var(--sp-4);
  font-size: var(--testo-xl);
}

.scheda--evidenza .scheda__titolo {
  font-size: var(--titolo-s);
}

.scheda__titolo a {
  color: inherit;
}

.scheda__titolo a:hover {
  color: var(--accento-leggibile);
}

/* Tutta la scheda e' cliccabile, ma il collegamento resta uno solo:
   il lettore di schermo sente il titolo, non un doppione. */
.scheda__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scheda__estratto {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.scheda__leggi {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}


/* LE CARD B2B */
/* ------------------------------------------------ */

.partner {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease;
}

.partner:hover {
  border-color: var(--accento);
}

.partner__nome {
  margin-top: var(--sp-2);
  font-size: var(--titolo-s);
}

.partner__testo {
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.partner .collegamento-sottolineato {
  margin-top: auto;
  align-self: flex-start;
}


/* SCHERMO GRANDE */
/* ------------------------------------------------ */

@media (min-width: 900px) {
  .carousel__lastra {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .goldinsight .scheda--evidenza {
    padding: var(--sp-6);
  }
}