/* ==========================================================================
   Simple row/col grid (Bootstrap-like, uses project design tokens)
   Use with .container for max-width + padding. No Bootstrap dependency.
   ========================================================================== */

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-lg);
    width: 100%;
}

/* Full width (default for single column) */
.col-12 {
    grid-column: span 12;
}

/* Fixed columns (use when you always want 2/3/4 columns) */
.col-6 {
    grid-column: span 6;
}

.col-8 {
    grid-column: span 8;
}

.col-4 {
    grid-column: span 4;
}

.col-3 {
    grid-column: span 3;
}

/* Responsive: from 768px (matches existing site breakpoint) */
@media (min-width: 768px) {
    .col-md-12 {
        grid-column: span 12;
    }

    .col-md-8 {
        grid-column: span 8;
    }

    .col-md-6 {
        grid-column: span 6;
    }

    .col-md-4 {
        grid-column: span 4;
    }

    .col-md-3 {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {
    .col-6,
    .col-8,
    .col-4,
    .col-3,
    .col-md-12,
    .col-md-8,
    .col-md-6,
    .col-md-4,
    .col-md-3 {
        grid-column: span 12;
    }
}