/* ============================================================
   LAYOUT — Lumina 2027 · containers, grid, flex helpers
   ============================================================ */

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

/* ── SECTIONS ── */
.section    { padding-block: var(--section-md); }
.section-sm { padding-block: var(--section-sm); }
.section-lg { padding-block: var(--section-lg); }

/* ── GRID ── */
.grid      { display: grid; }
.grid-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }

/* ── FLEX ── */
.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-col    { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── BREAKPOINTS ── */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ASYMMETRIC LAYOUTS (golden ratio) ── */
.layout-feature {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: var(--space-16);
  align-items: center;
}
.layout-feature.reverse { grid-template-columns: 1.618fr 1fr; }

@media (max-width: 768px) {
  .layout-feature,
  .layout-feature.reverse { grid-template-columns: 1fr; }
}