/* ass/colonna · colonna contestuale «Per continuare» (03/10/2026)
   Schede piatte da fumetto come le altre del tema (.post-card, .tool-card, .prompt-card): bordo d'inchiostro, ombra
   piena, colori P1, titoli in Bricolage, occhielli in JetBrains Mono. La griglia (accanto o sotto il testo) è del tema
   (.articolo__griglia in tema.css); qui i moduli. Da 1024 px la colonna è alta come il testo e l'ultimo modulo resta
   agganciato sotto la testata mentre scorri, senza mai uscire dalla colonna (quindi mai sopra il piè di pagina).
   Solo variabili semantiche dei token (--ass-*), nessun colore scritto a mano. */

.colonna { display: flex; flex-direction: column; min-width: 0; }

/* «Per continuare»: titolo della sezione sotto il testo; accanto al testo resta solo per i lettori di schermo */
.colonna__titolo {
  font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase;
  color: var(--ass-color-muted);
  display: flex; align-items: center; gap: var(--ass-space-3);
  margin: 0 0 var(--ass-space-5);
}
.colonna__titolo::after { content: ""; flex: 1; border-top: var(--ass-border-hairline) solid var(--ass-color-line); }

.colonna__moduli { display: grid; gap: var(--ass-space-8); align-items: start; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .colonna__moduli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ass-space-8) var(--ass-space-6); }
  /* la promozione (Posta Seria o il prodotto) chiude a tutta larghezza se resta da sola nella riga */
  .colonna__moduli > .colonna__modulo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .colonna__titolo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .colonna__moduli { flex: 1; display: flex; flex-direction: column; gap: var(--ass-space-10); }
}
@media (min-width: 64em) and (min-height: 40em) {
  .colonna__modulo--fisso { position: sticky; top: calc(4.25rem + var(--ass-space-6)); }
  /* Posta Seria con il modulo aperto è alta (testi del consenso interi): si aggancia solo se ci sta tutta sullo schermo */
  .colonna__modulo--fisso.colonna__modulo--newsletter:has(.nl-form) { position: static; }
}
@media (min-width: 64em) and (min-height: 54em) {
  .colonna__modulo--fisso.colonna__modulo--newsletter:has(.nl-form) { position: sticky; }
}

.colonna__modulo { min-width: 0; }
.colonna__occhiello {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-2);
  font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase;
  color: var(--ass-color-muted);
  margin: 0 0 var(--ass-space-3);
}
.colonna__autopromo { font-size: 0.68rem; padding: 0.3em 0.5em; }

/* ------------------------------------------------------------------ scheda comune: tutta la scheda è il link del titolo */
.colonna-scheda {
  position: relative; margin: 0;
  background: var(--ass-color-surface); color: var(--ass-color-text);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-5);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.colonna-scheda:not(.colonna-elenco):hover { transform: translate(-2px, -2px); box-shadow: var(--ass-shadow-lg); }
/* anello solo da tastiera, al posto del bordo (come le altre schede del tema) */
.colonna-scheda:has(:focus-visible) { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); }
.colonna-scheda:not(.colonna-elenco) a:focus-visible { outline: none; }
.colonna-scheda__titolo { margin: 0; font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); text-wrap: balance; }
.colonna-scheda__titolo a { color: var(--ass-color-text); text-decoration: none; border-radius: 0; }
.colonna-scheda__titolo a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--ass-radius-lg); }
.colonna-scheda__titolo a:hover { background: none; color: var(--ass-color-text); }
.colonna-scheda:hover .colonna-scheda__titolo a { text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); text-underline-offset: 0.2em; }
.colonna-scheda__testo { margin: var(--ass-space-2) 0 0; font-size: var(--ass-font-size-sm); line-height: var(--ass-line-height-snug); color: var(--ass-color-muted); }
.colonna-scheda__azione {
  display: inline-flex; align-items: center; gap: var(--ass-space-1);
  margin: var(--ass-space-3) 0 0;
  font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1.2 var(--ass-font-body);
  color: var(--ass-color-text);
}
.colonna-scheda__freccia { transition: transform var(--ass-duration-fast) var(--ass-ease-standard); }
.colonna-scheda:hover .colonna-scheda__freccia { transform: translateX(3px); }

/* ------------------------------------------------------------------ il libro giusto: copertina e testo */
.colonna-libro { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--ass-space-4); align-items: start; }
.colonna-libro__copertina {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: cover;
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-xs) var(--ass-radius-md) var(--ass-radius-md) var(--ass-radius-xs);
  box-shadow: var(--ass-shadow-sm);
  transform: rotate(-2deg);
}
/* senza copertina: un dorso d'inchiostro con il titolo, come le copertine segnaposto del tema */
.colonna-libro__copertina--segnaposto {
  display: flex; align-items: flex-end; padding: var(--ass-space-2);
  background: var(--ass-color-ink); color: var(--ass-color-paper);
  font: var(--ass-font-weight-extrabold) var(--ass-font-size-xs)/1.05 var(--ass-font-display);
  overflow: hidden;
}
.colonna-libro__testo { min-width: 0; }
.colonna-libro__collana {
  margin: 0 0 var(--ass-space-1);
  font: var(--ass-font-weight-semibold) var(--ass-font-size-xs)/1.3 var(--ass-font-mono);
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; color: var(--ass-color-muted);
}
.colonna-libro .colonna-scheda__titolo { font-size: var(--ass-font-size-md); line-height: var(--ass-line-height-snug); }

/* ------------------------------------------------------------------ un prompt da provare: scheda del prompt in piccolo */
.colonna-prompt { padding: 0; overflow: hidden; }
.colonna-prompt__barra {
  display: flex; align-items: center; gap: var(--ass-space-3);
  padding: var(--ass-space-2) var(--ass-space-4);
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
}
.colonna-prompt__puntini { display: inline-flex; gap: var(--ass-space-1); }
.colonna-prompt__puntini span { width: 0.6rem; height: 0.6rem; border-radius: var(--ass-radius-pill); border: var(--ass-border-sm) solid var(--ass-color-border); }
.colonna-prompt__puntini span:nth-child(1) { background: var(--ass-color-c2); }
.colonna-prompt__puntini span:nth-child(2) { background: var(--ass-color-c1); }
.colonna-prompt__puntini span:nth-child(3) { background: var(--ass-color-c3); }
.colonna-prompt__etichetta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted);
}
.colonna-prompt__titolo { padding: var(--ass-space-4) var(--ass-space-5) var(--ass-space-3); font-size: var(--ass-font-size-md); line-height: var(--ass-line-height-snug); }
/* le prime righe del prompt, in mono, che sfumano: il resto è nella pagina del prompt */
.colonna-prompt__testo {
  position: relative;
  margin: 0 var(--ass-space-4); padding: var(--ass-space-3) var(--ass-space-4);
  max-height: 8.6em; overflow: hidden;
  background: var(--ass-color-surface-alt);
  border: var(--ass-border-hairline) solid var(--ass-color-line); border-radius: var(--ass-radius-md);
  font: var(--ass-font-weight-regular) var(--ass-font-size-xs)/1.55 var(--ass-font-mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--ass-color-text);
}
.colonna-prompt__testo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em;
  background: linear-gradient(to bottom, transparent, var(--ass-color-surface-alt));
}
.colonna-prompt__testo .var {
  background: var(--ass-color-highlight); color: var(--ass-color-on-highlight);
  font-weight: var(--ass-font-weight-bold);
  border-radius: var(--ass-radius-xs); padding: 0 0.15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.colonna-prompt__azione { margin: var(--ass-space-3) var(--ass-space-5) var(--ass-space-4); }

/* ------------------------------------------------------------------ altri prompt (nella pagina di un prompt) */
.colonna-elenco { list-style: none; padding: var(--ass-space-2) var(--ass-space-5); }
.colonna-elenco__voce { padding-block: var(--ass-space-3); }
.colonna-elenco__voce + .colonna-elenco__voce { border-top: var(--ass-border-hairline) solid var(--ass-color-line); }
.colonna-elenco__etichetta {
  display: block; margin-bottom: var(--ass-space-1);
  font: var(--ass-font-weight-semibold) var(--ass-font-size-xs)/1.3 var(--ass-font-mono);
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; color: var(--ass-color-muted);
}
.colonna-elenco__voce a {
  font: var(--ass-font-weight-bold) var(--ass-font-size-base)/var(--ass-line-height-snug) var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight);
  color: var(--ass-color-text);
}

/* ------------------------------------------------------------------ prodotto del negozio */
.colonna-prodotto { padding: 0; overflow: hidden; }
.colonna-prodotto__immagine {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
  background: var(--ass-color-paper);
}
.colonna-prodotto__testo { padding: var(--ass-space-4) var(--ass-space-5) var(--ass-space-5); }
/* «In arrivo»: tratteggiato, come «Presto» degli strumenti */
.colonna-prodotto__stato {
  display: inline-block; vertical-align: 0.15em; margin-left: var(--ass-space-1);
  font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1 var(--ass-font-mono);
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; white-space: nowrap;
  color: var(--ass-color-muted);
  border: var(--ass-border-sm) dashed currentColor; border-radius: var(--ass-radius-pill);
  padding: 0.4em 0.65em;
}

/* ------------------------------------------------------------------ Posta Seria compatta (blocco ass/newsletter) */
.colonna .wp-block-ass-newsletter > .wrap { padding-inline: 0; max-width: none; }
.colonna .newsletter {
  grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: var(--ass-space-6) var(--ass-space-5);
  box-shadow: var(--ass-shadow-lg);
}
.colonna .newsletter__body .eyebrow { margin-bottom: var(--ass-space-1); }
.colonna .newsletter__body .newsletter__titolo {
  font: var(--ass-font-weight-extrabold) var(--ass-font-size-xl)/1 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight);
  margin: 0 0 var(--ass-space-2);
}
.colonna .newsletter__lead { font-size: var(--ass-font-size-sm); line-height: var(--ass-line-height-snug); margin-bottom: var(--ass-space-4); }
.colonna .nl-form { gap: var(--ass-space-3); }
.colonna .nl-form__label { font-size: var(--ass-font-size-sm); }
.colonna .nl-form__row .field, .colonna .nl-form__row .btn { flex: 1 1 100%; }
.colonna .nl-form__scelta { font-size: var(--ass-font-size-xs); line-height: var(--ass-line-height-snug); }
.colonna .nl-form__help { font-size: var(--ass-font-size-xs); }
.colonna .newsletter__chiusa { font-size: var(--ass-font-size-sm); margin-bottom: var(--ass-space-3); }

/* ------------------------------------------------------------------ spazio pubblicitario (spento finché non si accende) */
.colonna__modulo--pubblicita { text-align: center; }
.colonna-adv__etichetta {
  margin: 0 0 var(--ass-space-2);
  font: var(--ass-font-weight-semibold) var(--ass-font-size-xs)/1 var(--ass-font-mono);
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; color: var(--ass-color-muted);
}
/* misura fissa riservata (300 × 250): niente salti della pagina quando l'annuncio arriva */
.colonna-adv__spazio { display: inline-block; width: 300px; max-width: 100%; height: 250px; background: var(--ass-color-surface-alt); }
@media (max-width: 63.99em) {
  .colonna__modulo--solo-largo { display: none; }
}
