/* SMK Mini Grid Utilities */
.smk-row,
.smk-form-row {
    --smk-grid-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--smk-grid-gap);
}

.smk-row > *,
.smk-form-row > * {
    min-width: 0;
    box-sizing: border-box;
}

.smk-col-12 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 12) + (11 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 12) + (11 * var(--smk-grid-gap)));
}

.smk-col-11 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 11) + (10 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 11) + (10 * var(--smk-grid-gap)));
}

.smk-col-10 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 10) + (9 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 10) + (9 * var(--smk-grid-gap)));
}

.smk-col-9 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 9) + (8 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 9) + (8 * var(--smk-grid-gap)));
}

.smk-col-8 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 8) + (7 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 8) + (7 * var(--smk-grid-gap)));
}

.smk-col-7 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 7) + (6 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 7) + (6 * var(--smk-grid-gap)));
}

.smk-col-6 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 6) + (5 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 6) + (5 * var(--smk-grid-gap)));
}

.smk-col-5 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 5) + (4 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 5) + (4 * var(--smk-grid-gap)));
}

.smk-col-4 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 4) + (3 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 4) + (3 * var(--smk-grid-gap)));
}

.smk-col-3 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 3) + (2 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 3) + (2 * var(--smk-grid-gap)));
}

.smk-col-2 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 2) + (1 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 2) + (1 * var(--smk-grid-gap)));
}

.smk-col-1 {
    flex: 0 0 calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 1) + (0 * var(--smk-grid-gap)));
    max-width: calc(((100% - (11 * var(--smk-grid-gap))) / 12 * 1) + (0 * var(--smk-grid-gap)));
}

/* Spacing Utilities */
.smk-mb-10 { margin-bottom: 10px !important; }
.smk-mb-20 { margin-bottom: 20px !important; }
.smk-gap-10 { --smk-grid-gap: 10px !important; }
.smk-gap-20 { --smk-grid-gap: 20px !important; }

/* Mobile-first collapse */
@media (max-width: 768px) {
    .smk-col-12,
    .smk-col-11,
    .smk-col-10,
    .smk-col-9,
    .smk-col-8,
    .smk-col-7,
    .smk-col-6,
    .smk-col-5,
    .smk-col-4,
    .smk-col-3,
    .smk-col-2,
    .smk-col-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}