/* ============================================================
   03-utilities.css — Classi utility
   ============================================================ */

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--sm {
  max-width: var(--max-width-sm);
}

/* Testo */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-upper   { text-transform: uppercase; letter-spacing: 0.08em; }
.text-sm      { font-size: var(--size-sm); }
.text-lg      { font-size: var(--size-lg); }

/* Display */
.d-flex       { display: flex; }
.d-grid       { display: grid; }
.d-none       { display: none; }
.d-block      { display: block; }

/* Flex */
.align-center  { align-items: center; }
.justify-center{ justify-content: center; }
.gap-4         { gap: var(--space-4); }
.gap-8         { gap: var(--space-8); }

/* Spacing */
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }

/* Sfondi */
.bg-white   { background-color: var(--color-white); }
.bg-alt     { background-color: var(--color-bg-alt); }
.bg-primary { background-color: var(--color-primary); color: var(--color-white); }
.bg-dark    { background-color: var(--color-dark); color: var(--color-white); }

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

/* Sezione */
.section {
  padding-block: var(--space-16);
}

.section--alt {
  background-color: var(--color-bg-alt);
}