/* ============================================================
   Valet Design System — Layout Utilities
   Requires: base-tokens.css, client-tokens.css

   Box model reset, spacing utilities, flex/grid helpers.
   All utilities use :where() or single-class selectors
   to keep specificity at 0,1,0.
   ============================================================ */

/* ── Box model reset ─────────────────────────────────────── */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(body) {
  margin: 0;
  background-color: var(--color-bg);
  min-block-size: 100vh;
}

:where(img, video, svg) {
  display: block;
  max-inline-size: 100%;
}

:where(button, input, select, textarea) {
  font: inherit;
}

/* ── Container ───────────────────────────────────────────── */
.container {
  inline-size: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-sm  { inline-size: min(100%, 768px);  margin-inline: auto; padding-inline: var(--space-6); }
.container-md  { inline-size: min(100%, 1024px); margin-inline: auto; padding-inline: var(--space-6); }

/* ── Stack (vertical rhythm) ─────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.stack-xs  > * + * { margin-block-start: var(--space-2); }
.stack-sm  > * + * { margin-block-start: var(--space-4); }
.stack-md  > * + * { margin-block-start: var(--space-6); }
.stack-lg  > * + * { margin-block-start: var(--space-10); }
.stack-xl  > * + * { margin-block-start: var(--space-16); }

/* ── Cluster (horizontal wrapping group) ─────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster-sm { gap: var(--space-2); }
.cluster-lg { gap: var(--space-6); }

/* ── Split (space-between row) ───────────────────────────── */
.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

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

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

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

/* ── Spacing utilities ───────────────────────────────────── */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.mt-4  { margin-block-start: var(--space-4); }
.mt-6  { margin-block-start: var(--space-6); }
.mt-8  { margin-block-start: var(--space-8); }
.mt-auto { margin-block-start: auto; }

/* ── Display helpers ─────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-end  { justify-content: flex-end; }
.flex-1       { flex: 1; }
.shrink-0     { flex-shrink: 0; }

/* ── Visibility ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden { display: none; }

@media (max-width: 640px)  { .hide-mobile  { display: none; } }
@media (min-width: 641px)  { .hide-desktop { display: none; } }

/* ── Overflow ────────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}