/* ============================================================
   Layout — containers, page scaffolding, breakpoints (4.6).
   Mobile-first.
   ============================================================ */

/* ---------------- Page scaffold ---------------- */
body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  padding-block: var(--space-32);
}

@media (min-width: 1024px) {
  main { padding-block: var(--space-48); }
}

/* ---------------- Container ---------------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-16);
}

/* md: tablet ≥ 640px */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-inline: var(--space-24);
  }
}

/* lg: desktop ≥ 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-inline: var(--space-32);
  }
}

/* xl: wide ≥ 1440px */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
    padding-inline: var(--space-48);
  }
}

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

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

/* ---------------- Stack helpers ---------------- */
.stack    { display: flex; flex-direction: column; }
.stack > * + *    { margin-top: var(--space-16); }
.stack-sm > * + * { margin-top: var(--space-8); }
.stack-lg > * + * { margin-top: var(--space-24); }
.stack-xl > * + * { margin-top: var(--space-32); }

/* ---------------- Cluster (inline, wraps) ---------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

/* ---------------- Grid helpers ---------------- */
.grid { display: grid; gap: var(--space-16); }

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .grid-md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .grid-xl-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------- Visibility helpers ---------------- */
.hide-mobile { display: none; }
@media (min-width: 640px)  { .hide-mobile  { display: revert; } .hide-tablet  { display: none; } }
@media (min-width: 1024px) { .hide-tablet  { display: revert; } .hide-desktop { display: none; } }
@media (min-width: 1440px) { .hide-desktop { display: revert; } }