/* ============================================================
   Layout utilities — container & responsive grid
   Mobile-first: base rules target small screens; min-width
   media queries layer on the larger layouts. Breakpoint
   literals below mirror tokens/layout.css (md 768, lg 1024).
   ============================================================ */

/* ---------------- Container ----------------
   Centers content, caps width, fluid side gutters. */
.ds-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);}
@media (min-width:768px){ .ds-container{padding-inline:var(--gutter-md);} }
@media (min-width:1024px){ .ds-container{padding-inline:var(--gutter-lg);} }

.ds-container--sm{max-width:var(--container-sm);}
.ds-container--md{max-width:var(--container-md);}
.ds-container--lg{max-width:var(--container-lg);}
.ds-container--narrow{max-width:680px;}   /* long-form reading width */
.ds-container--fluid{max-width:none;}

/* ---------------- Responsive grid ----------------
   .ds-grid is a single column by default (mobile-first). */
.ds-grid{display:grid;gap:var(--space-5);}
.ds-grid--tight{gap:var(--space-3);}
.ds-grid--loose{gap:var(--space-8);}

/* Intrinsic — as many columns as fit, no breakpoints needed.
   Tune the minimum track with --col-min (default 240px). */
.ds-grid--auto{grid-template-columns:repeat(auto-fill,minmax(var(--col-min,240px),1fr));}

/* Explicit column counts — 1 col on mobile, scaling up by breakpoint.
   2 → 1|2 · 3 → 1|2|3 · 4 → 1|2|4 */
.ds-grid--2,.ds-grid--3,.ds-grid--4{grid-template-columns:1fr;}
@media (min-width:768px){
  .ds-grid--2{grid-template-columns:repeat(2,1fr);}
  .ds-grid--3{grid-template-columns:repeat(2,1fr);}
  .ds-grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .ds-grid--3{grid-template-columns:repeat(3,1fr);}
  .ds-grid--4{grid-template-columns:repeat(4,1fr);}
}

/* ---------------- Breakpoint visibility ----------------
   Show/hide across the md (768px) boundary. `revert` restores
   the element's natural display (block, flex, …). */
.ds-only-mobile{}
@media (min-width:768px){ .ds-only-mobile{display:none !important;} }

.ds-only-desktop{display:none !important;}
@media (min-width:768px){ .ds-only-desktop{display:revert !important;} }