/*
 * cgrid-v1.css — List Dakota Grid System
 * A lightweight, utility-focused grid for staff use.
 */

/* ── Reset & Box Model ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Container ────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1440px; }

/* ── Grid ─────────────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--grid-gap, 1.5rem);
}
.grid--2  { grid-template-columns: repeat(2,  1fr); }
.grid--3  { grid-template-columns: repeat(3,  1fr); }
.grid--4  { grid-template-columns: repeat(4,  1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ── Flex Utilities ───────────────────────────────────────────── */
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.flex-center  { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-gap     { gap: 1rem; }
.flex-col     { flex-direction: column; }

/* ── Spacing ──────────────────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem; }
.mt-6  { margin-top: 3rem; }
.mt-8  { margin-top: 4rem; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.mb-6  { margin-bottom: 3rem; }
.mb-8  { margin-bottom: 4rem; }
.py-2  { padding-block: 1rem; }
.py-4  { padding-block: 2rem; }
.py-6  { padding-block: 3rem; }
.py-8  { padding-block: 4rem; }
.px-2  { padding-inline: 1rem; }

/* ── Text Utilities ───────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Visibility ───────────────────────────────────────────────── */
.hidden         { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}