/**
 * EduNex UX Grid System - Responsive Grid
 *
 * @package    local_edunex_ux
 * @copyright  2026 EduNex
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* Grid Container */
.edunex-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

/* Grid Columns */
.edunex-col {
    flex: 1;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

/* Fixed width columns */
.edunex-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.edunex-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.edunex-col-3 { flex: 0 0 25%; max-width: 25%; }
.edunex-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.edunex-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.edunex-col-6 { flex: 0 0 50%; max-width: 50%; }
.edunex-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.edunex-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.edunex-col-9 { flex: 0 0 75%; max-width: 75%; }
.edunex-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.edunex-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.edunex-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .edunex-col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .edunex-col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .edunex-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .edunex-col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .edunex-col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .edunex-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .edunex-col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .edunex-col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .edunex-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .edunex-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .edunex-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .edunex-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .edunex-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .edunex-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .edunex-col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .edunex-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .edunex-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .edunex-col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .edunex-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .edunex-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .edunex-col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .edunex-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .edunex-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .edunex-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .edunex-col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .edunex-col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .edunex-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .edunex-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .edunex-col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .edunex-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .edunex-col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .edunex-col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .edunex-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .edunex-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .edunex-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .edunex-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .edunex-col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .edunex-col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .edunex-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .edunex-col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .edunex-col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .edunex-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .edunex-col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .edunex-col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .edunex-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .edunex-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .edunex-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .edunex-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Gap utilities */
.edunex-gap-0 { gap: 0; }
.edunex-gap-1 { gap: 0.25rem; }
.edunex-gap-2 { gap: 0.5rem; }
.edunex-gap-3 { gap: 1rem; }
.edunex-gap-4 { gap: 1.5rem; }
.edunex-gap-5 { gap: 2rem; }