/* =========================================================
   DS Grid Utilities
   Usage: <div class="ds-grid ds-grid--cols-3 ds-grid--gap-lg">
   ========================================================= */

/* Base */
.ds-grid {
  display: grid;
  gap: var(--ds-grid-gap-md);
}

/* Column count modifiers */
.ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(min(240px, 100%), 1fr)); }
.ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(min(200px, 100%), 1fr)); }
.ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(min(160px, 100%), 1fr)); }
.ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(min(140px, 100%), 1fr)); }
.ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(min(120px, 100%), 1fr)); }
.ds-grid--cols-7 { grid-template-columns: repeat(7, minmax(min(100px, 100%), 1fr)); }

/* Gap modifiers */
.ds-grid--gap-xs   { gap: var(--ds-grid-gap-xs); }
.ds-grid--gap-sm   { gap: var(--ds-grid-gap-sm); }
.ds-grid--gap-lg   { gap: var(--ds-grid-gap-lg); }
.ds-grid--gap-xl   { gap: var(--ds-grid-gap-xl); }
.ds-grid--gap-0    { gap: 0; }
.ds-grid--gap-split {
  row-gap:    var(--ds-grid-gap-lg);
  column-gap: var(--ds-grid-gap-md);
}

/* Col span helpers */
.ds-col-span-2    { grid-column: span 2; }
.ds-col-span-3    { grid-column: span 3; }
.ds-col-span-4    { grid-column: span 4; }
.ds-col-span-full { grid-column: 1 / -1; }

/* ── Spec table layouts (label col + equal fluid cols) ── */
.ds-grid--spec-2   { grid-template-columns: var(--ds-grid-label-xl)  1fr; }
.ds-grid--spec-3   { grid-template-columns: var(--ds-grid-label-xl)  repeat(2, 1fr); }
.ds-grid--spec-4   { grid-template-columns: var(--ds-grid-label-xl)  repeat(3, 1fr); }
.ds-grid--spec-4n  { grid-template-columns: var(--ds-grid-label-lg)  repeat(3, 1fr); }
.ds-grid--spec-4s  { grid-template-columns: var(--ds-grid-label-sm)  repeat(3, 1fr); }
.ds-grid--spec-5n  { grid-template-columns: var(--ds-grid-label-lg)  repeat(4, 1fr); }
.ds-grid--spec-7   { grid-template-columns: var(--ds-grid-label-md)  repeat(6, 1fr); }

/* ── Fluid card grid (intrinsic responsive, no media queries) ── */
.ds-grid--cards {
  --ds-grid-card-min: 280px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--ds-grid-card-min), 100%), 1fr)
  );
}
.ds-grid--cards-compact {
  --ds-grid-card-min: 220px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--ds-grid-card-min), 100%), 1fr)
  );
}

/* ── Responsive collapse ──────────────────────────────── */
@media (max-width: 479px) {
  .ds-grid--cols-2,
  .ds-grid--cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .ds-grid--cols-4,
  .ds-grid--cols-5,
  .ds-grid--cols-6,
  .ds-grid--cols-7  { grid-template-columns: repeat(2, 1fr); }

  .ds-grid--spec-4,
  .ds-grid--spec-4n,
  .ds-grid--spec-5n { grid-template-columns: var(--ds-grid-label-xl) repeat(2, 1fr); }

  .ds-grid--spec-7  { grid-template-columns: var(--ds-grid-label-md) repeat(3, 1fr); }
}

@media (max-width: 639px) {
  .ds-grid--cols-2,
  .ds-grid--cols-3,
  .ds-grid--cols-4,
  .ds-grid--cols-5,
  .ds-grid--cols-6,
  .ds-grid--cols-7  { grid-template-columns: 1fr; }

  .ds-grid--spec-2,
  .ds-grid--spec-3,
  .ds-grid--spec-4,
  .ds-grid--spec-4n,
  .ds-grid--spec-4s,
  .ds-grid--spec-5n,
  .ds-grid--spec-7  { grid-template-columns: 1fr; }
}