/* FormGrid.css - Responsive grid layout for form fields */
/* SPACING CONTRACT:
   - Internal padding: 0 (grid only arranges children)
   - External margins: NONE - Parent controls */

.form-grid {
    display: flex;
    flex-direction: column;
}

.form-grid-description {
    color: var(--text-muted);
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-sm);
}

.form-grid-fields {
    display: grid;
}

/* Auto-fit columns (responsive) */
.form-grid-auto .form-grid-fields {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Fixed column configurations -- hard column counts.
   Mobile stacking handled by @media rule below. */
.form-grid-col-2 .form-grid-fields {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-col-3 .form-grid-fields {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-col-4 .form-grid-fields {
    grid-template-columns: repeat(4, 1fr);
}

.form-grid-col-5 .form-grid-fields {
    grid-template-columns: repeat(5, 1fr);
}

.form-grid-col-6 .form-grid-fields {
    grid-template-columns: repeat(6, 1fr);
}

/* Gap sizes */
.form-grid-gap-sm .form-grid-fields {
    gap: var(--space-2);
}

.form-grid-gap-md .form-grid-fields {
    gap: var(--space-4);
}

.form-grid-gap-lg .form-grid-fields {
    gap: var(--space-6);
}

/* Responsive: Stack on small screens */
@media (max-width: 640px) {
    .form-grid-fields {
        grid-template-columns: 1fr !important;
    }
}