/*
 * Modulo3 — foglio autonomo. Nessuna dipendenza da altri moduli o da Bootstrap.
 * Ogni selettore è limitato a .design-modulo3.
 * Colori, font, dimensioni e spazi sono variabili del tab Aspetto, per istanza.
 * Per un override singolo usare #modulo3-module-ID oppure un'ancora unica.
 * Le regole responsive seguono anche la larghezza della posizione Helix.
 */
.design-modulo3 {
  width: 100%; margin: 0; padding: 0;
  font-family: var(--design-text-font, Arial, Helvetica, sans-serif);
  font-size: 16px; line-height: 1.5;
  color: var(--design-body, #20261f); background: var(--design-background, #fbfaf6);
  scroll-margin-top: 100px;
}
.design-modulo3, .design-modulo3 * { box-sizing: border-box; }
.design-modulo3 [hidden] { display: none !important; }
.design-modulo3 .dg-wrap { width: 100%; max-width: var(--design-max-width, 1600px); margin: 0 auto; container: modulo3 / inline-size; }
.design-modulo3 p { margin: 0; }
.design-modulo3 :is(a, button):focus-visible { outline: 3px solid var(--design-accent, currentColor); outline-offset: 4px; }
.design-modulo3 .dg-inner { min-width: 0; overflow-wrap: anywhere; }
.design-modulo3 .dg-headline { font-family: var(--design-display-font, Georgia, serif); color: var(--design-title, #20261f); }
.design-modulo3 .dg-headline :is(em, i) { color: var(--design-accent, #912535); font-style: italic; }

/* 1. Intestazione del catalogo: titolo e collegamento in fondo alla stessa riga. */
.design-modulo3 .dg-inner { padding: var(--design-padding-top, 24px) 6.5% var(--design-padding-bottom, 50px); padding-inline: clamp(24px, 6.5cqw, 104px); }
.design-modulo3 .dg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.design-modulo3 .dg-eyebrow { color: var(--design-eyebrow); font-size: 8px; font-weight: 700; line-height: 1.5; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 18px; }
.design-modulo3 .dg-headline { margin: 0; font-size: var(--design-heading-size, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.design-modulo3 .dg-text-link { display: inline-block; max-width: 100%; width: fit-content; color: var(--design-link); font-size: 9px; line-height: 1.7; text-decoration: none; border-bottom: 1px solid currentColor; }
.design-modulo3 .dg-top > .dg-text-link { flex-shrink: 0; margin-bottom: 3px; }

/* 2. Tre colonne: due libri e invito iniziali; altre schede si aggiungono a righe. */
.design-modulo3 .dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; align-items: start; }
.design-modulo3 .dg-book { min-width: 0; }
.design-modulo3 .dg-cover-link { display: block; text-decoration: none; }
.design-modulo3 .dg-cover { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: calc(var(--design-cover-height, 180px) + 44px); padding: 22px; background: var(--design-cover-bg, #e3d1cf); }
.design-modulo3 .dg-cover img { display: block; width: auto; max-width: 100%; height: var(--design-cover-height, 180px); object-fit: contain; filter: drop-shadow(0 12px 10px #0003); }
.design-modulo3 .dg-cover-placeholder { display: flex; align-items: center; justify-content: center; max-width: 100%; width: 127px; height: var(--design-cover-height, 180px); padding: 16px; background: var(--design-invite-bg); color: var(--design-book-title); font-family: var(--design-display-font, Georgia, serif); font-size: 18px; text-align: center; }
.design-modulo3 .dg-collection { color: var(--design-collection); font-size: 7px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; margin-top: 14px; }
.design-modulo3 .dg-book-title { color: var(--design-book-title); font-family: var(--design-display-font, Georgia, serif); font-size: var(--design-book-size, 18px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; margin: 5px 0 0; }
.design-modulo3 .dg-book-title a { color: inherit; text-decoration: none; }
.design-modulo3 .dg-book-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.design-modulo3 .dg-author { color: var(--design-body); font-size: 10px; line-height: 1.6; margin-top: 5px; }

/* 3. Riquadro del prossimo progetto: testo e link sono configurabili da backend. */
.design-modulo3 .dg-invite { display: flex; flex-direction: column; min-height: 302px; padding: 30px 24px 24px; background: var(--design-invite-bg); }
.design-modulo3 .dg-invite-eyebrow { color: var(--design-invite-eyebrow); font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
.design-modulo3 .dg-invite-title { max-width: 280px; color: var(--design-invite-title); font-family: var(--design-display-font, Georgia, serif); font-size: var(--design-invite-size, 30px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; margin: 30px 0 12px; }
.design-modulo3 .dg-invite-title :is(em, i) { color: var(--design-accent); font-style: italic; }
.design-modulo3 .dg-invite-body { color: var(--design-body); max-width: 220px; font-size: 10px; line-height: 1.7; margin-bottom: 24px; }
.design-modulo3 .dg-invite .dg-text-link { margin-top: auto; }

/* 4. Tablet e telefono: schede sempre leggibili, copertine intere senza ritaglio. */
@container modulo3 (max-width: 1050px) {
  .design-modulo3 .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-modulo3 .dg-invite { grid-column: 1 / -1; min-height: 0; }
  .design-modulo3 .dg-invite-title { max-width: none; }
  .design-modulo3 .dg-invite-body { max-width: 420px; font-size: 14px; }
  .design-modulo3 .dg-text-link { font-size: 12px; }
  .design-modulo3 .dg-collection { font-size: 10px; }
  .design-modulo3 .dg-author { font-size: 12px; }
}
@container modulo3 (max-width: 560px) {
  .design-modulo3 .dg-inner { padding-inline: 22px; }
  .design-modulo3 .dg-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .design-modulo3 .dg-eyebrow { font-size: 9px; }
  .design-modulo3 .dg-headline { font-size: min(var(--design-heading-size, 36px), 32px); }
  .design-modulo3 .dg-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .design-modulo3 .dg-book-title { font-size: max(var(--design-book-size, 18px), 20px); }
  .design-modulo3 .dg-invite-title { margin-top: 22px; }
}
/* Fallback per browser senza container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) { .design-modulo3 .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .design-modulo3 .dg-invite { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .design-modulo3 .dg-grid { grid-template-columns: minmax(0, 1fr); } .design-modulo3 .dg-top { flex-direction: column; align-items: flex-start; } }
}