/* libro.css — landing di un libro (Tazza di Calma, Lunatica, Dodici Notti).
   Riusa variables.css, base.css, layout.css (header/footer), components.css
   (btn, eyebrow, blog-card). Spec: docs/superpowers/specs/2026-09-21-roadmap-ottobre-dicembre-design.md §2.
   Regola di design: respiro ≥ 24px (16px sotto 480px), raggio unico --radius,
   una sola azione primaria (il bottone Amazon dell'hero è l'unico btn-solid). */

/* ── Hero: copertina a sinistra, testi a destra; impilato sotto 768px ── */
.libro-hero {
  background: var(--color-greige-lt);
  padding: var(--space-xl) var(--space-md);
}
.libro-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
.libro-hero__cover {
  margin: 0 auto;
  max-width: 360px;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-cream);
}
.libro-hero__cover img { display: block; width: 100%; height: auto; }
.libro-hero__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-khaki);
  margin-bottom: var(--space-sm);
}
.libro-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  line-height: 1.1;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-xs);
}
.libro-hero__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text-mid);
  margin: 0 0 var(--space-md);
}
.libro-hero__autori {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-mid);
  margin: 0 0 var(--space-lg);
}
.libro-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.libro-hero__actions .btn { min-height: 44px; }

/* ── Wave: fondo = colore della fascia sopra, path = colore della fascia
      sotto, ombra solo verso l'alto (schema di .wave-divider--home-hero
      in vf-patch.css) ── */
.wave-divider--libro-hero          { background: var(--color-greige-lt); }
.wave-divider--libro-scheda-top    { background: var(--color-white); }
.wave-divider--libro-scheda-bottom { background: var(--color-greige-lt); }
.wave-divider--libro-hero,
.wave-divider--libro-scheda-top,
.wave-divider--libro-scheda-bottom {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;
}
.wave-divider--libro-hero svg,
.wave-divider--libro-scheda-top svg,
.wave-divider--libro-scheda-bottom svg {
  display: block;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}

/* ── Sezioni di testo: occhiello + titolo + colonna di lettura ── */
.libro-sezione { padding: var(--space-xl) var(--space-md); }
.libro-sezione--bianca { background: var(--color-white); }
.libro-sezione--crema  { background: var(--color-cream); }
.libro-sezione--greige { background: var(--color-greige-lt); }  /* scheda del libro: richiama l'hero */
.libro-sezione__inner  { max-width: var(--max-width-text); margin: 0 auto; }
.libro-sezione__inner--larga { max-width: var(--max-width); }
.libro-sezione__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  color: var(--color-text-dark);
  margin: var(--space-xs) 0 var(--space-md);
}
.libro-sezione p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-sm);
}

/* ── Estratto: pagine del libro, pannello con filetto oro (solo qui) ── */
.libro-estratto {
  border-left: 3px solid var(--color-gold);
  padding: var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius);
}
/* p.classe: deve battere .libro-sezione p, che altrimenti la rende serif 18px */
.libro-sezione p.libro-estratto__fonte {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-top: var(--space-md);
}

/* ── Cosa lo distingue: riquadro staccato per tono, occhiello sopra ── */
.libro-distingue {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-greige-lt);
  border-radius: var(--radius);
}
.libro-distingue .eyebrow { display: block; margin-bottom: var(--space-xs); }

/* Padding uguale sui quattro lati: niente margine sotto l'ultimo paragrafo */
.libro-sezione .libro-estratto > :last-child,
.libro-sezione .libro-distingue > :last-child { margin-bottom: 0; }

/* ── Video: 16:9 senza deformazioni ── */
.libro-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-greige-lt);
  border-radius: var(--radius);
  overflow: hidden;
}
.libro-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Dal blog: griglia di blog-card 3 → 2 → 1 ── */
.libro-blog__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.libro-blog__tutti { text-align: center; }
/* Bottone lungo su 320–360px: testo va a capo anziché overfloware */
.libro-blog__tutti .btn { white-space: normal; max-width: 100%; text-align: center; }

/* ── Dettagli editoriali (07/10): una sola scheda bianca su fondo greige,
      a righe etichetta | valore separate da un filetto, come un colophon.
      Sotto: bottone, poi la nota di affiliazione staccata e in piccolo ── */
.libro-dettagli {
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.libro-dettagli div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-greige-lt);
}
.libro-dettagli div:last-child { border-bottom: 0; }
.libro-dettagli dt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: var(--color-text-mid);
}
.libro-dettagli dd {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-text-dark);
  margin: 0;
}
.libro-sezione p.libro-dettagli__azione {
  margin: var(--space-lg) 0 0;
  text-align: center;
}
/* Bottone outline su greige: il khaki chiaro non si leggeva, qui testo e
   bordo scuri e peso regolare (resta outline: il pieno è solo nell'hero) */
.libro-sezione--greige .btn-outline {
  color: var(--color-text-dark);
  border-color: var(--color-text-dark);
  font-weight: var(--fw-regular);
  min-height: 44px;
}
.libro-sezione--greige .btn-outline:hover {
  background: var(--color-text-dark);
  color: var(--color-white);
}
.libro-sezione p.libro-disclosure {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-mid);
  text-align: center;
  max-width: 34rem;
  margin: var(--space-md) auto 0;
}
.libro-disclosure a { color: var(--color-text-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ── Responsive: impilamento, ordine invariato ── */
@media (max-width: 1023px) {
  .libro-blog__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .libro-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .libro-hero__cover { max-width: 280px; }
  .libro-hero__actions { justify-content: center; }
  .libro-blog__griglia { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .libro-hero, .libro-sezione { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  /* scheda: etichetta sopra il valore, il valore lungo non si schiaccia */
  .libro-dettagli div { grid-template-columns: 1fr; gap: 4px; }
}