/* ============================================
   MIMIR — LAYOUT Y GRID
   ============================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

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

.section        { padding-block: var(--space-section); }
.section--sm    { padding-block: var(--space-section-sm); }
.section--dark  { background-color: var(--color-bg-dark); }
.section--darker{ background-color: var(--color-bg-darker); }
.section--alt   { background-color: var(--color-bg-section-alt); }

.grid { display: grid; gap: var(--space-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.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);  }
.gap-12 { gap: var(--space-12); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --container-px: var(--space-5); }
}

@media (max-width: 640px) {
  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }
  :root {
    --space-section:    var(--space-16);
    --space-section-sm: var(--space-12);
    --container-px:     var(--space-4);
  }
}