/* Grid System */

:root {
    --grid-columns: 12;
    --grid-gap: var(--space-m);
}

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

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

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

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

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

/* Analytical Grid Overlay (for checking) */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    /* 20mm grid approx if needed, or stick to pixels */
    opacity: 0.1;
    display: none;
}

.show-grid .grid-overlay {
    display: block;
}