/**
 * JOY-TEX — Global Grid System
 *
 * Responsibility:
 * - Reusable column layouts
 * - Responsive column behavior
 * - Grid spacing
 *
 * Visual styling belongs to individual components.
 *
 * @version 1.0.0
 */

/* Base */

.joy-grid {
    display: grid;
    min-width: 0;

    grid-template-columns: minmax(0, 1fr);

    column-gap: var(--joy-grid-column-gap, var(--joy-space-7));
    row-gap: var(--joy-grid-row-gap, var(--joy-space-6));
}

.joy-grid > * {
    min-width: 0;
}

/* Desktop column variants */

.joy-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.joy-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.joy-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tablet */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-grid {
        --joy-grid-column-gap: var(--joy-space-6);
    }

    .joy-grid--3,
    .joy-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Opt-in: preserve three columns on tablet */
    .joy-grid--3.joy-grid--tablet-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 767px) {

    .joy-grid {
        --joy-grid-column-gap: var(--joy-space-5);
        --joy-grid-row-gap: var(--joy-space-5);

        grid-template-columns: minmax(0, 1fr);
    }

    .joy-grid--2,
    .joy-grid--3,
    .joy-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}