/* ==========================================================================
   Strutture di sezione — servizi a mosaico, metodo a flusso
   Adottate dalle anteprime in hero-variants/ (B · Soglia e C · Ritratto).

   Nota sulle classi: si riusano `.card` e `.timeline` invece di introdurre
   nomi nuovi, perché mobile.css contiene la scala tipografica calibrata su
   quelle classi. Qui si aggiunge solo ciò che cambia da 40rem in su, quindi
   il telefono resta esattamente com'è.
   ========================================================================== */

:root {
  /* Grigio di testo che supera il 4,5:1 richiesto dall'AA sui fondi sabbia,
     al contrario di --text-muted (#6B7A8B, 3,83–4,39:1). Usato solo dalle
     strutture di questo file; la sostituzione sul resto del sito è una
     modifica a parte. */
  --text-muted-aa: #5A6878;
  --rule-thick: 2px;
}

/* ==========================================================================
   Servizi · mosaico
   Sette tessere di tre larghezze invece di una griglia uniforme: le due aree
   più corpose (costituzione e struttura societaria) occupano due terzi di
   riga, le altre si affiancano. Serve a dare gerarchia a un elenco che
   altrimenti si legge come sette voci equivalenti.
   ========================================================================== */

.bento {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nella griglia a due colonne la settima tessera resterebbe spaiata: chiude
   la fila per intero. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .bento > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card--lg { grid-column: span 4; }
  .card--md,
  .card--sm { grid-column: span 2; }

  .card--lg h3 { font-size: var(--step-2); }
  .card--lg > p { font-size: var(--step-0); line-height: 1.6; }

  /* Le tessere larghe reggono due colonne di voci: senza, l'elenco resta una
     riga di testo lunghissima dentro un riquadro largo. `column-count` non
     funziona su un contenitore grid, quindi qui torna a blocco e la
     spaziatura passa dal gap ai margini. */
  .card--lg .card__list {
    display: block;
    column-count: 2;
    column-gap: 2rem;
  }
  .card--lg .card__list li {
    margin-bottom: 0.5rem;
    break-inside: avoid;
  }
  .card--lg .card__list li:last-child { margin-bottom: 0; }
}

/* Il filetto separa la descrizione dall'elenco di cosa viene fatto.
   Da 40rem in su soltanto: sotto vale la spaziatura compatta di mobile.css,
   che questa regola scavalcherebbe per specificità (0,2,0 contro 0,1,0). */
@media (min-width: 40rem) {
  .bento .card__list {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
  }
}

/* ==========================================================================
   Metodo · flusso
   Le quattro fasi restano la griglia già presente; cambia la segnaletica:
   filetto più marcato, nodo quadrato, frecce di collegamento fra le colonne
   e il tempo come riga in chiaro invece che come pastiglia.

   Applicato col modificatore `--flow` e non su `.timeline` perché la stessa
   classe regge anche la timeline del company profile, che è impaginata per
   la stampa.
   ========================================================================== */

/* Tutto il blocco vale da 55rem in su, cioè da dove `.timeline` diventa a
   quattro colonne. Sotto quella soglia il telefono tiene la sua timeline
   verticale a filo continuo, calibrata in mobile.css: queste regole la
   scavalcherebbero per specificità (0,2,0 contro 0,1,0) pur venendo prima
   nel foglio. */
@media (min-width: 55rem) {
  .timeline--flow .timeline__item {
    border-top-width: var(--rule-thick);
  }

  /* Nodo quadrato: la stessa forma dei marcatori d'elenco delle tessere. */
  .timeline--flow .timeline__item::before {
    top: calc(var(--rule-thick) / -2 - 3px);
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--gold-600);
  }

  .timeline--flow .timeline__step {
    color: var(--text-muted-aa);
  }

  /* Freccia centrata sul filetto, fra una fase e la successiva: rende
     esplicito che le quattro colonne sono una sequenza e non quattro
     opzioni affiancate. */
  .timeline--flow .timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: clamp(0.5rem, 1.2vw, 1rem);
    width: 0.45rem;
    height: 0.45rem;
    border-top: var(--rule-thick) solid var(--gold-600);
    border-right: var(--rule-thick) solid var(--gold-600);
    transform: translateY(-50%) rotate(45deg);
  }

  .timeline--flow .timeline__when {
    display: block;
    margin-top: 1.15rem;
    padding: 0.7rem 0 0;
    background: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    font-size: 0.78rem;
    color: var(--ink-700);
  }
}

/* La nota è una nota a piè di sezione: tenuta a misura di lettura invece che
   allargata a tutta la fascia. */
.section-note {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 50ch;
}

/* ==========================================================================
   Testo corrente fuori dai componenti
   Prima questi paragrafi avevano lo stile in linea nell'HTML (font-size
   var(--step-1)) oppure nessuno stile, e cadevano sui 16px del body. Risultato
   su telefono: sei corpi diversi nella stessa pagina — 11, 13, 13,6, 14, 16 e
   17px — con la biografia più grande dei sommari di sezione. Da qui la
   sensazione di disordine. Ora passano tutti da queste due classi.
   ========================================================================== */

.lede {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-body);
}
.lede--on-dark { color: var(--text-on-dark-muted); }

/* Nessun colore imposto: sui fondi chiari eredita --text-body dal body, e
   dentro il footer scuro eredita il colore del footer. Fissandolo a
   --text-body il paragrafo del footer usciva a 2,06:1, illeggibile. */
.prosa {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.7;
}
.prosa--stretta { max-width: 26rem; }

/* ==========================================================================
   Barra dati sotto l'hero
   La regola che le dava il fondo scuro stava in vhero.css, scollegato quando
   la hero è tornata fotografica: la fascia restava bianca con addosso i colori
   pensati per il fondo scuro (oro chiaro e grigio-azzurro), cioè 1,80:1 sulle
   cifre e 2,02:1 sulle didascalie. Qui torna al suo fondo.
   ========================================================================== */
.factbar-solo {
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-top: 1px solid var(--line-dark);
}

/* Le interviste stanno nella stessa sezione delle testimonianze ma sono altra
   cosa: serve solo lo stacco verticale, il resto lo fanno .grid--2 e .vcard. */
.interviste {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

/* Da tablet in su il testo occupa la riga intera e le card dei video si
   affiancano sotto. Con il testo in colonna restavano tre elementi su due
   colonne, quindi l'ultima card finiva da sola con mezza riga vuota accanto. */
@media (min-width: 48rem) {
  .interviste > :first-child { grid-column: 1 / -1; }
}

/* Le testimonianze dei clienti sono selfie verticali, quindi .vcard__media è
   9/16. L'intervista è girata in studio in 16/9: con il rapporto verticale
   veniva ritagliata sui lati e la sovrimpressione col nome finiva fuori. */
.interviste .vcard__media { aspect-ratio: 16 / 9; }
.interviste .vcard__media video { object-position: center; }

/* ==========================================================================
   Rassegna stampa · si sfoglia
   Carosello a scatti CSS: lo scorrimento col dito e lo snap li fa il browser,
   le frecce servono solo a chi sta col mouse. Niente libreria.
   ========================================================================== */
.sfoglia { margin-top: clamp(2.5rem, 5vw, 4rem); }

.sfoglia__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.25rem;
}

/* Le frecce stanno SUI lati delle pagine, non sopra il blocco: si sfoglia
   dove si guarda. Restano ai bordi estremi, così il centro resta libero per lo
   scorrimento col dito. */
.sfoglia__vetrina { position: relative; }

.sfoglia__btn {
  position: absolute;
  /* le didascalie sotto le pagine non devono spostare il centro ottico */
  top: calc((100% - 2.4rem) / 2);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  /* fondo pieno: sotto ci passa la carta chiara della rivista, un bottone
     trasparente ci sparirebbe sopra */
  background: rgba(8, 19, 31, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), opacity 0.2s var(--ease);
}
.sfoglia__btn--prev { left: 0.6rem; }
.sfoglia__btn--next { right: 0.6rem; }
.sfoglia__btn svg { width: 20px; height: 20px; }
.sfoglia__btn:hover:not(:disabled) { background: rgba(8, 19, 31, 0.9); border-color: var(--gold-500); }
/* a fine corsa sparisce invece di restare grigia: sopra la pagina una freccia
   spenta sembra un difetto di stampa */
.sfoglia__btn:disabled { opacity: 0; pointer-events: none; }

.sfoglia__conta {
  flex: none;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-muted);
}


.sfoglia__pagine {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 420px);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* il padding di scorrimento tiene la pagina allineata al margine del testo:
     senza, lo snap la incolla al bordo dello schermo */
  scroll-padding-inline: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
}
.sfoglia__pagine::-webkit-scrollbar { display: none; }
.sfoglia__pagine:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }

.sfoglia__pagina { margin: 0; scroll-snap-align: start; }
.sfoglia__pagina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  /* l'ombra asimmetrica dà il rilievo del foglio staccato dalla pagina */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
.sfoglia__pagina figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sfoglia__pagine { scroll-behavior: auto; }
}

/* Posto libero per la prossima intervista: stessa sagoma della card piena, ma
   vuota e col bordo tratteggiato, così si legge come "in arrivo" e non come
   un video che non carica. */
.vcard--vuota .vcard__media {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.vcard__vuota {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}