.grid-base {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
}

.grid-base-md {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(auto-fit, minmax(clamp(min(100%, 10rem), 25%, calc(25% - (var(--grid-gutter)*1.75))), 1fr));
}

.grid-base.grid-footer[data-layout='halves'] {
     --grid-min-item-size: clamp(min(100%, 10rem), 50%, calc(50% - (var(--grid-gutter)*1.5)));
}

.grid-footer > *:last-child,
.grid-footer > *:last-child > a {
    text-align: right;
    display: block;
}

@media (max-width: 23.65rem) {
    .grid-footer > *:last-child,
    .grid-footer > *:last-child > a {
        text-align: left;
    }
}

/* A split 50/50 layout */
.grid-base[data-layout='halves'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 20rem), 50%, calc(50% - (var(--grid-gutter)*1.5)));
}

/* Three column grid layout */
.grid-base[data-layout='thirds'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 20rem), 33%, calc(33.33% - (var(--grid-gutter)*1.67)));
}

/* Four column grid layout */
.grid-base[data-layout='fourths'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 18rem), 25%, calc(25% - (var(--grid-gutter)*1.75)));
}

/* ─── PAGE GRID ──────────────────────────────────────────────────── */

/*
 * tt-page-grid: CSS Grid wrapper for page-level multi-column layouts.
 * Set data-layout for the column structure; children collapse to a single
 * column below 768 px (matches the app-shell sidebar breakpoint).
 * Default align-items: stretch gives equal-height columns in each row.
 */
.tt-page-grid {
    display: grid;
    gap: var(--grid-gutter);
    margin-bottom: var(--grid-gutter);
}

.tt-page-grid[data-layout="halves"]            { grid-template-columns: 1fr 1fr; }
.tt-page-grid[data-layout="thirds"]            { grid-template-columns: 1fr 1fr 1fr; }
.tt-page-grid[data-layout="fourths"]           { grid-template-columns: 1fr 1fr 1fr 1fr; }
.tt-page-grid[data-layout="primary-secondary"] { grid-template-columns: 7fr 5fr; }
.tt-page-grid[data-layout="secondary-primary"] { grid-template-columns: 5fr 7fr; }

/* Span all columns regardless of the active layout */
.tt-col-full { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .tt-page-grid[data-layout] {
        grid-template-columns: 1fr;
    }
}

/* ─── ROW ────────────────────────────────────────────────────────── */

/* ROW */
.tt-row {
    display: flex;
    flex-wrap: nowrap; /* don't wrap unless you want it */
    gap: 0 var(--form-row-margin-bottom, 1rem);
    width: 100%;
}

/* Alignment modifiers */
.tt-row--center  { align-items: center; }
.tt-row--stretch { align-items: stretch; }

/* BASE COLUMN */
.tt-col {
    display: flex;
    flex-direction: column; /* good for form items */
    min-width: 0; /* prevents overflow */
}

/* TAKES ONLY WHAT IT NEEDS */
.tt-col-auto {
    flex: 0 0 auto;
}

/* TAKES THE REMAINING SPACE */
.tt-col-fill {
    flex: 1 1 auto;
    min-width: 0;
}