/* ============================================================
   Layout — page-level structure
   ============================================================ */

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }
.stack--xl { gap: var(--s-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-5);
}

.grid-auto--sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-auto--lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Header actions row */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  body { padding: var(--s-3); }
  .grid-auto { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .grid-auto { grid-template-columns: repeat(2, 1fr); }
}