/* ============================================================================
 * Grid system — CSS Grid based, responsive via min-width media queries.
 *
 *   .wb-grid          → 1 column (mobile-first)
 *   .wb-grid--2..6    → fixed column counts
 *   .wb-grid--auto    → repeat(auto-fit, minmax(260px, 1fr))
 *   .wb-grid--fluid-* → variants of auto-fit with different min widths
 *
 * Gaps are controlled via --wb-grid-gap (default = --wb-space-5).
 * Use .wb-grid--gap-* utility to override per-instance.
 * ========================================================================== */

.wb-grid {
  --wb-grid-gap: var(--wb-space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-grid-gap);
}

.wb-grid--gap-xs { --wb-grid-gap: var(--wb-space-2); }
.wb-grid--gap-sm { --wb-grid-gap: var(--wb-space-3); }
.wb-grid--gap-md { --wb-grid-gap: var(--wb-space-5); }
.wb-grid--gap-lg { --wb-grid-gap: var(--wb-space-7); }
.wb-grid--gap-xl { --wb-grid-gap: var(--wb-space-9); }

/* Auto-fit variants — drop-in responsive without breakpoints */
.wb-grid--auto       { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wb-grid--fluid-sm   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.wb-grid--fluid-md   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wb-grid--fluid-lg   { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Tablet: ≥768px */
@media (min-width: 768px) {
  .wb-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: ≥1024px */
@media (min-width: 1024px) {
  .wb-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wb-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .wb-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .wb-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Asymmetric two-column layouts (sidebar style) */
@media (min-width: 1024px) {
  .wb-grid--sidebar      { grid-template-columns: 1fr 320px; }
  .wb-grid--sidebar-left { grid-template-columns: 320px 1fr; }
  .wb-grid--split-7-5    { grid-template-columns: 7fr 5fr; }
  .wb-grid--split-5-7    { grid-template-columns: 5fr 7fr; }
}

/* Column span utilities for grid children */
.wb-col-span-2  { grid-column: span 2; }
.wb-col-span-3  { grid-column: span 3; }
.wb-col-span-4  { grid-column: span 4; }
.wb-col-span-full { grid-column: 1 / -1; }