/* ========================================================================
   LAYOUT — containers, sections, grid helpers.
   Pattern di alternanza sfondi: mai due sezioni adiacenti con stesso background.
   ======================================================================== */

/* ========== CONTAINERS ========== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 48px;
}
.container-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 56px;
}
.container-output {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ========== SECTIONS ========== */
.section {
  padding: var(--space-2xl) 0;
}
.section-bg-white {
  background: var(--color-white);
}
.section-bg-accent-soft {
  background: var(--color-accent-soft);
}
.section-bg-black {
  background: var(--color-black);
  color: var(--color-white);
}

/* ========== GRID HELPERS ========== */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .container-narrow { padding: 0 24px; }
  .container-hero { padding: 0 24px; }
  .container-output { padding: 0 20px; }

  .section { padding: var(--space-xl) 0; }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* Wrap default/article pages verticale — padding orizzontale gestito dal container. */
.page-default-wrap {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* Mobile: riduce padding orizzontale container (default 48px è troppo su schermi piccoli). */
@media (max-width: 768px) {
  .container,
  .container-narrow,
  .container-hero,
  .container-output {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .page-default-wrap {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}