/* La Pizza téma – generált a HTML-prototípusból. */
/* --------------------------------------------------------------------------
   3. LAYOUT  → assets/css/layout.css
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding-block: clamp(3rem, 6vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--alt { background: var(--color-surface-alt); }
.section--dark { background: var(--c-burgundy-900); color: var(--c-sand-200); }
.section--dark h2, .section--dark h3 { color: var(--c-cream-50); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section__head > div { max-width: 640px; }
.section__head p { color: var(--color-text-muted); margin: 0; }
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--sp-3);
}
.section--dark .eyebrow { color: var(--c-sand-300); }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.lede { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 60ch; }