/* testo: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/testo/) e limitato alla classe della sezione. */

/* testo/Colonna.astro → .b-testo-colonna */
  .colonna.b-testo-colonna { padding: clamp(72px, 14vh, 140px) var(--margine); display: grid; grid-template-columns: 1fr 2fr; }
  .b-testo-colonna .colonna-blocco { grid-column: 2; max-width: 44rem; }
  .b-testo-colonna .colonna-titolo { font-size: clamp(2.2rem, 4.6vw, var(--scala-5)); color: var(--titoli); margin-bottom: .5em; }
  .b-testo-colonna .colonna-testo { font-size: clamp(1.08rem, 1.5vw, var(--scala-1)); line-height: 1.5; }
  .b-testo-colonna .colonna-testo h2, .b-testo-colonna .colonna-testo h3 {
    font: var(--peso-dettaglio) .8rem/1.3 var(--font-dettaglio); text-transform: var(--dettaglio-maiuscolo); letter-spacing: var(--dettaglio-spaziatura);
    color: var(--testo-secondario); padding-top: 16px; border-top: 1.5px solid var(--testo);
  }
  .b-testo-colonna .colonna-testo * + h2, .b-testo-colonna .colonna-testo * + h3 { margin-top: clamp(40px, 7vh, 72px); }
  .b-testo-colonna .colonna-testo h2 + *, .b-testo-colonna .colonna-testo h3 + * { margin-top: 10px; }
  .b-testo-colonna .colonna-testo ul { list-style: none; padding: 0; }
  .b-testo-colonna .colonna-testo li { position: relative; padding: 12px 0 12px 1.6em; margin: 0; border-bottom: 1px solid var(--extra-salvia); font-weight: 600; }
  .b-testo-colonna .colonna-testo li + li { margin-top: 0; }
  /* Il segno di ogni riga è una bolla. */
  .b-testo-colonna .colonna-testo li::before { content: ""; position: absolute; left: 0; top: calc(12px + .75em - 6px); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--extra-salvia); }
  .b-testo-colonna .colonna-testo ul + p { margin-top: 18px; }
  .b-testo-colonna .colonna-testo p { max-width: 38em; }

  /* Prima sezione della pagina (/grazie/): riempie la schermata, il titolo è l'h1. */
  .colonna.prima.b-testo-colonna { min-height: calc(100svh - var(--testata)); align-content: center; }
  .colonna.prima.b-testo-colonna .colonna-titolo { font-size: clamp(2.6rem, 6.4vw, var(--scala-6)); max-width: 14ch; }

  @media (max-width: 860px) {
    .colonna.b-testo-colonna { grid-template-columns: 1fr; }
    .b-testo-colonna .colonna-blocco { grid-column: 1; }
  }