/* =====================================================================
   WARM LEDGER — Layout
   Container, griglia 12/8/4, sezioni, ritmo degli sfondi, righe "da registro".
   ===================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max-width) + 2 * var(--page-padding));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--page-padding)); }
.bleed { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-lg);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 640px) {
  .grid > .span-t-4 { grid-column: span 4; }
  .grid > .span-t-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .grid > .span-3  { grid-column: span 3; }
  .grid > .span-4  { grid-column: span 4; }
  .grid > .span-5  { grid-column: span 5; }
  .grid > .span-6  { grid-column: span 6; }
  .grid > .span-7  { grid-column: span 7; }
  .grid > .span-8  { grid-column: span 8; }
  .grid > .span-12 { grid-column: span 12; }
  .grid > .start-8 { grid-column-start: 8; }
}
@media (min-width: 1024px) {
  .grid--7-5 > :first-child { grid-column: 1 / span 7; }
  .grid--7-5 > :last-child  { grid-column: 8 / span 5; }
  .grid--5-7 > :first-child { grid-column: 1 / span 5; }
  .grid--5-7 > :last-child  { grid-column: 6 / span 7; }
}

.stack    { display: flex; flex-direction: column; gap: var(--spacing-md); }
.stack--s { gap: var(--spacing-sm); }
.stack--l { gap: var(--spacing-lg); }
.cluster  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); }

.section {
  padding-block: var(--section-padding-y);
  background-color: var(--c-bg);
  color: var(--c-text);
}
/* Ritmo: mai due sezioni scure consecutive (verificato da warm-ledger.js in sviluppo) */
.section.surface-paper + .section.surface-paper { border-top: var(--border-default); }

.section-head {
  display: flex; flex-direction: column; gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  max-width: var(--text-measure);
}
@media (min-width: 1024px) { .section-head { margin-bottom: var(--spacing-xl); } }
.section-head .lead { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--c-text-2); }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head--center p { margin-inline: auto; }

/* ---------- Righe "da registro": 1 px, 6%, solo in due sezioni per pagina ---------- */
.ledger-lines {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--spacing-xl) - var(--border-width)),
    var(--c-ledger-line) calc(var(--spacing-xl) - var(--border-width)),
    var(--c-ledger-line) var(--spacing-xl)
  );
}

.rule { border: 0; border-top: var(--border-default); margin: 0; }
.on-dark .rule, .surface-dark .rule, .surface-footer .rule { border-top-color: var(--color-border-on-dark); }