/* ============================================================
   LAYOUT & GRID — Skiforeningen
   12-column responsive grid, mobile-first.
   Breakpoints: xs <480 · sm ≥480 · md ≥768 · lg ≥1024 · xl ≥1280
   ============================================================ */

:root {
  --grid-columns:     12;       /* @kind other */
  --container-max:    1200px;   /* max editorial content width */
  --container-wide:   1320px;   /* full-bleed feature width */
  --gutter:           var(--space-4);   /* 16px column gap, mobile */

  /* Breakpoint reference values (for use in JS / docs) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 768px)  { :root { --gutter: var(--space-6); } } /* 24px */
@media (min-width: 1024px) { :root { --gutter: var(--space-8); } } /* 32px */

/* ---- Container helper ---- */
.sf-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

/* ---- 12-col grid helper ---- */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gutter);
}

/* ---- Card gallery flow: 1 → 2 → 3 → 4 columns ----
   Use .sf-card-grid; auto-fits using min track width per breakpoint. */
.sf-card-grid {
  display: grid;
  gap: var(--gap-card-grid);
  grid-template-columns: 1fr;                       /* xs: 1 col */
}
@media (min-width: 480px)  { .sf-card-grid { grid-template-columns: repeat(2, 1fr); } } /* sm: 2 */
@media (min-width: 1024px) { .sf-card-grid { grid-template-columns: repeat(3, 1fr); } } /* lg: 3 */
@media (min-width: 1280px) { .sf-card-grid { grid-template-columns: repeat(4, 1fr); } } /* xl: 4 */