/*
  Citazione di una recensione.

  Il blocco prende la superficie scura, che è quella nativa del brand
  (brand-kit/brand-style.md, principio 1): il sito ne adotta la variante
  light, la recensione se la riprende per un blocco solo. È così che
  stacca dal contenuto attorno senza spendere il colore d'accento, che
  resta libero per il CTA — e senza ombre o gradienti, che il brand non
  ammette.

  Struttura e valori qui: il componente sta tutto in questo file.
*/
.c-quote {
  --quote-bg: var(--color-secondary);
  --quote-fg: var(--color-on-secondary);
  /* Default prudente: senza un tema che dia un grigio leggibile sul
     fondo scuro, il testo secondario resta nel colore del testo. */
  --quote-fg-muted: var(--quote-fg);

  /* Il fondo di `code` dentro la citazione. `base.css` glielo dà chiaro
     (zinc-200) perché lì sotto c'è la pagina; qui sotto c'è la superficie
     scura, e un frammento di codice finirebbe bianco su grigio chiaro —
     illeggibile. Un velo chiaro sul fondo scuro invece del colore pieno:
     regge su qualsiasi `--quote-bg` il tema decida. */
  --quote-code-bg: rgba(250, 250, 250, 0.16);

  /* Le semantiche ridefinite qui dentro fanno il lavoro sui figli:
     .c-byline__name e il testo secondario si ricolorano da soli. */
  --color-text: var(--quote-fg);
  --color-text-muted: var(--quote-fg-muted);

  /* Sotto ai float, mai di fianco: il blocco ha una superficie propria e
     un'immagine in float che sborda dal paragrafo sopra (il selfie della
     bio) gli finirebbe sopra al fondo scuro. Scorrere il testo attorno a
     un'immagine ha senso, far passare l'immagine sopra a una card no. */
  clear: both;

  margin: var(--space-30) 0;
  padding: var(--space-30);
  border-left: 0;
  border-radius: var(--radius-4);
  background: var(--quote-bg);
  color: var(--quote-fg);
  font-size: var(--font-size-18);
}

.c-quote code {
  background: var(--quote-code-bg);
  color: inherit;
}

/* Stacco fra l'ultima riga della citazione e la firma. */
.c-quote p:last-of-type {
  margin-bottom: var(--space-24);
}

/* Il nero pieno del brand come superficie, e il grigio neutro per la
   provenienza: #8C8C94 su #0E0E10 fa ~5,4:1, passa AA. */
.c-quote {
  --quote-bg: var(--color-black);
  --quote-fg: var(--color-white);
  --quote-fg-muted: var(--color-grey);
}