/* =============================================================================
   layout.css — layout primitives
   Container editoriale, measure, stack, grid, spacing utilities.
   Niente framework grid: utility mirate, gli articoli sono single-column.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CONTAINER — padding orizzontale costante, max-width generoso
   ----------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 72rem;                       /* ~1152px */
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 900px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* Container stretto — per contenuto long-form (articolo, colonna di testo) */
.container-narrow {
  width: 100%;
  max-width: calc(var(--measure) + var(--space-6) * 2);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 900px) {
  .container-narrow {
    padding-inline: var(--space-6);
  }
}

/* -----------------------------------------------------------------------------
   MEASURE — utility diretta per elementi che devono stare a larghezza lettura
   ----------------------------------------------------------------------------- */
.measure         { max-width: var(--measure); }
.measure-wide    { max-width: var(--measure-wide); }
.measure-narrow  { max-width: var(--measure-narrow); }

/* -----------------------------------------------------------------------------
   STACK / FLOW — spaziatura verticale automatica tra figli adiacenti
   Uso: <div class="flow">...</div> spaziera' ogni * + * con --flow-space.
   ----------------------------------------------------------------------------- */
.flow > * + * {
  margin-top: var(--flow-space, var(--space-4));
}

.flow-tight   { --flow-space: var(--space-2); }
.flow-loose   { --flow-space: var(--space-5); }
.flow-section { --flow-space: var(--space-8); }

/* -----------------------------------------------------------------------------
   CLUSTER — row flex con gap, wrap-friendly
   Uso: metadata inline, liste di tag, gruppi di link.
   ----------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster-tight { gap: var(--space-2); }

/* -----------------------------------------------------------------------------
   SPLIT — row con due gruppi (left / right) spinti ai bordi
   Uso: header sito, meta articolo (titolo | data), footer.
   ----------------------------------------------------------------------------- */
.split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

/* -----------------------------------------------------------------------------
   SECTION — stacco tra sezioni di pagina
   ----------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-9);
}

.section-sm { padding-block: var(--space-7); }
.section-lg { padding-block: var(--space-10); }

.section + .section {
  border-top: 1px solid var(--rule);
}

/* Sezione con rule "strong" sopra (divisione importante) */
.section-strong-top {
  border-top: 1px solid var(--ink) !important;
}

/* -----------------------------------------------------------------------------
   GRID — grid base a colonne per sezioni che lo richiedono (progetti)
   ----------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
   SPACING UTILITIES — usare con parsimonia, preferire flow/section
   ----------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* -----------------------------------------------------------------------------
   VISIBILITY
   ----------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}