/* ============================================================
   bottega-hub.css — quello che la pagina Bottega ha di SUO

   L'impalcatura comune alle tre pagine dell'XD (apertura, ancore, sezioni a
   due colonne, immagini al vivo) sta in `xd-sezioni.css`. Qui restano solo la
   citazione di Pavese e la riga di ritratti, che le altre due non hanno.

   Fonte: artboard `ABOUT_DESKTOP` e `ABOUT_MOBILE` (nomi STANTII: disegnano
   la Bottega, non About).
   ============================================================ */

/* ── Il fondo, dichiarato invece che ereditato ────────────────────────────
   ⚠ Questa pagina era Elementor: il suo CSS resta accodato anche dopo lo
   switch al template custom, e con lui il fondo del body. Su NEW-315 quel
   fondo scuro rimasto esposto aveva dato 1,08:1 di contrasto su una pagina
   che sembrava a posto. Qui il fondo lo dichiara il template. */
body.bb-bottega-bruzziches-tpl {
  background: #fff;
}

/* Shoptimizer stringe il contenuto: questa pagina va al vivo. */
.bb-bottega-bruzziches-tpl .shoptimizer-archive,
.bb-bottega-bruzziches-tpl .col-full {
  max-width: 100% !important;
  padding: 0 !important;
}
.bb-bottega-bruzziches-tpl .archive-header {
  display: none !important;
}

/* ============================================================
   LA CITAZIONE DI PAVESE
   ============================================================ */
/* ⚠ [NEW-397] La misura e' passata da 34ch a 44ch: con gli a capo tolti
   dal testo, 34ch spezzavano la frase in sei righe corte e il risultato
   somigliava di nuovo a una poesia incolonnata — cioe' il contrario di
   «distesa». Resta una colonna stretta, perche' una citazione larga quanto
   la pagina non si legge. */
.bb-bottega-hub-citazione {
  margin: 0 auto clamp(28px, 4vw, 72px);
  max-width: 44ch;
}
.bb-bottega-hub-citazione blockquote {
  margin: 0;
  padding: 0;
  border: 0;

  /* [NEW-397] In Playfair: e' una citazione letteraria, non un'etichetta. */
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
  font-size: var(--bb-xd-titolino, clamp(14px, 1.4vw, 20px));
  line-height: 1.5;
  letter-spacing: var(--bb-ls-tight, .04em);
}

/* [NEW-397] Le caporali che incorniciano. Stanno nel CSS e non nel testo per
   due motivi: sono un segno grafico, e dentro la stringa finirebbero nel giro
   delle traduzioni (in inglese le caporali non si usano).

   `line-height: 0` con `vertical-align` serve a farle grandi SENZA che
   allarghino la riga in cui cadono: altrimenti la prima e l'ultima riga della
   citazione si staccherebbero dalle altre. */
.bb-bottega-hub-citazione blockquote::before,
.bb-bottega-hub-citazione blockquote::after {
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
  font-size: 2.6em;
  line-height: 0;
  color: inherit;
  opacity: .55;
}
.bb-bottega-hub-citazione blockquote::before {
  content: '«';
  margin-right: .1em;
  vertical-align: -.34em;
}
.bb-bottega-hub-citazione blockquote::after {
  content: '»';
  margin-left: .08em;
  vertical-align: -.34em;
}
.bb-bottega-hub-citazione figcaption {
  margin-top: 1.2em;
  font-size: var(--bb-xd-titolino, clamp(14px, 1.4vw, 20px));
  letter-spacing: var(--bb-ls-tight, .04em);
}

/* ============================================================
   LA RIGA DI RITRATTI
   ============================================================
   ⚠ E' una LISTA, non quattro caselle: `auto-fit` regge 1..N senza che il CSS
   sappia quanti sono. L'artboard ne disegna 4 da 24,8% ciascuno, al vivo e
   attaccati; ma un artboard disegna UN caso, non la regola (NEW-256).

   ⚠ Il riquadro disegnato e' 2:3 verticale, e `simone-bossi-121` e' invece
   ORIZZONTALE (2500x2143): `cover` le toglie circa meta' inquadratura. Serve
   un ritaglio dedicato (chiesto a DATI). Il rapporto resta quello del
   disegno, perche' e' cio' che tiene la riga allineata. */
.bb-bottega-hub-ritratti {
  width: auto;
  margin: clamp(28px, 4vw, 72px) calc(-1 * var(--bb-gutter, 16px));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px;
}
.bb-bottega-hub-ritratti__voce {
  margin: 0;
}
.bb-bottega-hub-ritratti__voce img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

@media (max-width: 767px) {
  .bb-bottega-hub-citazione {
    max-width: 28ch;
  }
}