/* KingMedia Blocks – Base Styles */

/* ── Block base ─────────────────────────────────────────────────── */
.km-section,
.km-container,
.km-stack,
.km-grid,
.km-link { box-sizing: border-box; }

.km-section  { width: 100%; }
.km-grid     { display: grid; gap: 1rem; }
.km-stack    { display: flex; flex-direction: column; }
.km-link     { display: block; text-decoration: none; color: inherit; }

/* ── Grid column utilities ──────────────────────────────────────── */
/* Use these classes (or their responsive prefixes) on a km-grid block */
.cols-1 { grid-template-columns: repeat(1, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }
.cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols-auto-sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cols-auto-lg { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Gap utilities ──────────────────────────────────────────────── */
.gap-0  { gap: 0 !important; }
.gap-2  { gap: .5rem !important; }
.gap-4  { gap: 1rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-8  { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }

/* ── Max-width utilities ────────────────────────────────────────── */
.max-w-sm  { max-width: 640px !important; }
.max-w-md  { max-width: 768px !important; }
.max-w-lg  { max-width: 1024px !important; }
.max-w-xl  { max-width: 1280px !important; }
.max-w-2xl { max-width: 1536px !important; }
.mx-auto   { margin-left: auto !important; margin-right: auto !important; }