/* ============================================================
   layout.css — Flex Europa · finaldesign
   Native Grid/Flexbox only. Generous industrial gutters,
   hairline-friendly section rhythm.
   ============================================================ */

/* ---- Container ---- */
.container {
  max-inline-size: var(--container-max);
  padding-inline: clamp(20px, 5vw, 48px);
  margin-inline: auto;
  inline-size: 100%;
}
.container--narrow { max-inline-size: var(--container-narrow); }
.container--wide   { max-inline-size: var(--container-wide); }

/* ---- Full-bleed helper (breaks out of a centered container) ---- */
.full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---- Section spacing ---- */
.section     { padding-block: var(--space-3xl); }
.section--sm { padding-block: var(--space-xl); }
.section--lg { padding-block: calc(var(--space-3xl) * 1.5); }
.section--flush-top { padding-block-start: 0; }

/* ---- Auto-fit + fixed grids ---- */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Flow spacing (lobotomized owl) ---- */
.flow > * + *     { margin-block-start: var(--space-md); }
.flow--lg > * + * { margin-block-start: var(--space-xl); }

/* ---- Flex utilities ---- */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm       { gap: var(--space-sm); }
.gap-md       { gap: var(--space-md); }
.gap-lg       { gap: var(--space-lg); }

/* ---- Section heading block (shared across content sections) ---- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: var(--space-2xl);
  max-inline-size: var(--measure);
}
.section-head__title { color: var(--color-text); }
.section-head__lead  { color: var(--color-text-muted); font-size: var(--fs-lg); }