/* gp-grid-system.css */

:root {
    --gp-gutter-x: 1.5rem; /* Default horizontal gutter width */
    --gp-gutter-y: 0;     /* Default vertical gutter (usually 0 for rows, can be set per row) */

    /* Breakpoint variables (still used for container max-widths and for reference) */
    --gp-breakpoint-sm: 576px;
    --gp-breakpoint-md: 768px;
    --gp-breakpoint-lg: 992px;
    --gp-breakpoint-xl: 1200px;
    --gp-breakpoint-xxl: 1400px;

    /* Container max widths (these still use the variables) */
    --gp-container-sm: 540px;
    --gp-container-md: 720px;
    --gp-container-lg: 960px;
    --gp-container-xl: 1140px;
    --gp-container-xxl: 1320px;
}

/* Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Container */
.gp-container,
.gp-container-fluid {
    width: 100%;
    padding-right: calc(var(--gp-gutter-x) * 0.5);
    padding-left: calc(var(--gp-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.gp-container { /* Fixed width at breakpoints */
    max-width: 100%; /* Default for mobile */
}
@media (min-width: 576px) { /* --gp-breakpoint-sm */
    .gp-container { max-width: var(--gp-container-sm); }
}
@media (min-width: 768px) { /* --gp-breakpoint-md */
    .gp-container { max-width: var(--gp-container-md); }
}
@media (min-width: 992px) { /* --gp-breakpoint-lg */
    .gp-container { max-width: var(--gp-container-lg); }
}
@media (min-width: 1200px) { /* --gp-breakpoint-xl */
    .gp-container { max-width: var(--gp-container-xl); }
}
@media (min-width: 1400px) { /* --gp-breakpoint-xxl */
    .gp-container { max-width: var(--gp-container-xxl); }
}

/* Row */
.gp-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gp-gutter-y));
    margin-right: calc(-0.5 * var(--gp-gutter-x));
    margin-left: calc(-0.5 * var(--gp-gutter-x));
}

/* Columns */
.gp-row > [class*="gp-col"] {
    position: relative;
    padding-right: calc(var(--gp-gutter-x) * 0.5);
    padding-left: calc(var(--gp-gutter-x) * 0.5);
    padding-top: var(--gp-gutter-y);
}

.gp-col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* No breakpoint (xs and up) */
.gp-col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.gp-col-1  { flex: 0 0 auto; width: 8.33333333%; }
.gp-col-2  { flex: 0 0 auto; width: 16.66666667%; }
.gp-col-3  { flex: 0 0 auto; width: 25%; }
.gp-col-4  { flex: 0 0 auto; width: 33.33333333%; }
.gp-col-5  { flex: 0 0 auto; width: 41.66666667%; }
.gp-col-6  { flex: 0 0 auto; width: 50%; }
.gp-col-7  { flex: 0 0 auto; width: 58.33333333%; }
.gp-col-8  { flex: 0 0 auto; width: 66.66666667%; }
.gp-col-9  { flex: 0 0 auto; width: 75%; }
.gp-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.gp-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.gp-col-12 { flex: 0 0 auto; width: 100%; }

.gp-offset-0  { margin-left: 0; }
.gp-offset-1  { margin-left: 8.33333333%; }
.gp-offset-2  { margin-left: 16.66666667%; }
.gp-offset-3  { margin-left: 25%; }
.gp-offset-4  { margin-left: 33.33333333%; }
.gp-offset-5  { margin-left: 41.66666667%; }
.gp-offset-6  { margin-left: 50%; }
.gp-offset-7  { margin-left: 58.33333333%; }
.gp-offset-8  { margin-left: 66.66666667%; }
.gp-offset-9  { margin-left: 75%; }
.gp-offset-10 { margin-left: 83.33333333%; }
.gp-offset-11 { margin-left: 91.66666667%; }

.gp-order-first { order: -1; }
.gp-order-last  { order: 13; }
.gp-order-0  { order: 0; }
.gp-order-1  { order: 1; }
.gp-order-2  { order: 2; }
.gp-order-3  { order: 3; }
.gp-order-4  { order: 4; }
.gp-order-5  { order: 5; }

/* Small devices (sm) */
@media (min-width: 576px) { /* --gp-breakpoint-sm */
    .gp-col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .gp-col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .gp-col-sm-1  { flex: 0 0 auto; width: 8.33333333%; }
    .gp-col-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
    .gp-col-sm-3  { flex: 0 0 auto; width: 25%; }
    .gp-col-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
    .gp-col-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
    .gp-col-sm-6  { flex: 0 0 auto; width: 50%; }
    .gp-col-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
    .gp-col-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
    .gp-col-sm-9  { flex: 0 0 auto; width: 75%; }
    .gp-col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .gp-col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .gp-col-sm-12 { flex: 0 0 auto; width: 100%; }

    .gp-offset-sm-0  { margin-left: 0; }
    .gp-offset-sm-1  { margin-left: 8.33333333%; }
    .gp-offset-sm-2  { margin-left: 16.66666667%; }
    .gp-offset-sm-3  { margin-left: 25%; }
    .gp-offset-sm-4  { margin-left: 33.33333333%; }
    .gp-offset-sm-5  { margin-left: 41.66666667%; }
    .gp-offset-sm-6  { margin-left: 50%; }
    .gp-offset-sm-7  { margin-left: 58.33333333%; }
    .gp-offset-sm-8  { margin-left: 66.66666667%; }
    .gp-offset-sm-9  { margin-left: 75%; }
    .gp-offset-sm-10 { margin-left: 83.33333333%; }
    .gp-offset-sm-11 { margin-left: 91.66666667%; }

    .gp-order-sm-first { order: -1; }
    .gp-order-sm-last  { order: 13; }
    .gp-order-sm-0  { order: 0; }
    .gp-order-sm-1  { order: 1; }
    .gp-order-sm-2  { order: 2; }
    .gp-order-sm-3  { order: 3; }
    .gp-order-sm-4  { order: 4; }
    .gp-order-sm-5  { order: 5; }
}

/* Medium devices (md) */
@media (min-width: 768px) { /* --gp-breakpoint-md */
    .gp-col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .gp-col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .gp-col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
    .gp-col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
    .gp-col-md-3  { flex: 0 0 auto; width: 25%; }
    .gp-col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
    .gp-col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
    .gp-col-md-6  { flex: 0 0 auto; width: 50%; }
    .gp-col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
    .gp-col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
    .gp-col-md-9  { flex: 0 0 auto; width: 75%; }
    .gp-col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .gp-col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .gp-col-md-12 { flex: 0 0 auto; width: 100%; }

    .gp-offset-md-0  { margin-left: 0; }
    .gp-offset-md-1  { margin-left: 8.33333333%; }
    .gp-offset-md-2  { margin-left: 16.66666667%; }
    .gp-offset-md-3  { margin-left: 25%; }
    .gp-offset-md-4  { margin-left: 33.33333333%; }
    .gp-offset-md-5  { margin-left: 41.66666667%; }
    .gp-offset-md-6  { margin-left: 50%; }
    .gp-offset-md-7  { margin-left: 58.33333333%; }
    .gp-offset-md-8  { margin-left: 66.66666667%; }
    .gp-offset-md-9  { margin-left: 75%; }
    .gp-offset-md-10 { margin-left: 83.33333333%; }
    .gp-offset-md-11 { margin-left: 91.66666667%; }

    .gp-order-md-first { order: -1; }
    .gp-order-md-last  { order: 13; }
    .gp-order-md-0  { order: 0; }
    .gp-order-md-1  { order: 1; }
    .gp-order-md-2  { order: 2; }
    .gp-order-md-3  { order: 3; }
    .gp-order-md-4  { order: 4; }
    .gp-order-md-5  { order: 5; }
}

/* Large devices (lg) */
@media (min-width: 992px) { /* --gp-breakpoint-lg */
    .gp-col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .gp-col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .gp-col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
    .gp-col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
    .gp-col-lg-3  { flex: 0 0 auto; width: 25%; }
    .gp-col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
    .gp-col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
    .gp-col-lg-6  { flex: 0 0 auto; width: 50%; }
    .gp-col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
    .gp-col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
    .gp-col-lg-9  { flex: 0 0 auto; width: 75%; }
    .gp-col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .gp-col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .gp-col-lg-12 { flex: 0 0 auto; width: 100%; }

    .gp-offset-lg-0  { margin-left: 0; }
    .gp-offset-lg-1  { margin-left: 8.33333333%; }
    .gp-offset-lg-2  { margin-left: 16.66666667%; }
    .gp-offset-lg-3  { margin-left: 25%; }
    .gp-offset-lg-4  { margin-left: 33.33333333%; }
    .gp-offset-lg-5  { margin-left: 41.66666667%; }
    .gp-offset-lg-6  { margin-left: 50%; }
    .gp-offset-lg-7  { margin-left: 58.33333333%; }
    .gp-offset-lg-8  { margin-left: 66.66666667%; }
    .gp-offset-lg-9  { margin-left: 75%; }
    .gp-offset-lg-10 { margin-left: 83.33333333%; }
    .gp-offset-lg-11 { margin-left: 91.66666667%; }

    .gp-order-lg-first { order: -1; }
    .gp-order-lg-last  { order: 13; }
    .gp-order-lg-0  { order: 0; }
    .gp-order-lg-1  { order: 1; }
    .gp-order-lg-2  { order: 2; }
    .gp-order-lg-3  { order: 3; }
    .gp-order-lg-4  { order: 4; }
    .gp-order-lg-5  { order: 5; }
}

/* Extra large devices (xl) */
@media (min-width: 1200px) { /* --gp-breakpoint-xl */
    .gp-col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .gp-col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .gp-col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
    .gp-col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
    .gp-col-xl-3  { flex: 0 0 auto; width: 25%; }
    .gp-col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
    .gp-col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
    .gp-col-xl-6  { flex: 0 0 auto; width: 50%; }
    .gp-col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
    .gp-col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
    .gp-col-xl-9  { flex: 0 0 auto; width: 75%; }
    .gp-col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .gp-col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .gp-col-xl-12 { flex: 0 0 auto; width: 100%; }

    .gp-offset-xl-0  { margin-left: 0; }
    .gp-offset-xl-1  { margin-left: 8.33333333%; }
    .gp-offset-xl-2  { margin-left: 16.66666667%; }
    .gp-offset-xl-3  { margin-left: 25%; }
    .gp-offset-xl-4  { margin-left: 33.33333333%; }
    .gp-offset-xl-5  { margin-left: 41.66666667%; }
    .gp-offset-xl-6  { margin-left: 50%; }
    .gp-offset-xl-7  { margin-left: 58.33333333%; }
    .gp-offset-xl-8  { margin-left: 66.66666667%; }
    .gp-offset-xl-9  { margin-left: 75%; }
    .gp-offset-xl-10 { margin-left: 83.33333333%; }
    .gp-offset-xl-11 { margin-left: 91.66666667%; }

    .gp-order-xl-first { order: -1; }
    .gp-order-xl-last  { order: 13; }
    .gp-order-xl-0  { order: 0; }
    .gp-order-xl-1  { order: 1; }
    .gp-order-xl-2  { order: 2; }
    .gp-order-xl-3  { order: 3; }
    .gp-order-xl-4  { order: 4; }
    .gp-order-xl-5  { order: 5; }
}

/* Extra extra large devices (xxl) */
@media (min-width: 1400px) { /* --gp-breakpoint-xxl */
    .gp-col-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .gp-col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .gp-col-xxl-1  { flex: 0 0 auto; width: 8.33333333%; }
    .gp-col-xxl-2  { flex: 0 0 auto; width: 16.66666667%; }
    .gp-col-xxl-3  { flex: 0 0 auto; width: 25%; }
    .gp-col-xxl-4  { flex: 0 0 auto; width: 33.33333333%; }
    .gp-col-xxl-5  { flex: 0 0 auto; width: 41.66666667%; }
    .gp-col-xxl-6  { flex: 0 0 auto; width: 50%; }
    .gp-col-xxl-7  { flex: 0 0 auto; width: 58.33333333%; }
    .gp-col-xxl-8  { flex: 0 0 auto; width: 66.66666667%; }
    .gp-col-xxl-9  { flex: 0 0 auto; width: 75%; }
    .gp-col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .gp-col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .gp-col-xxl-12 { flex: 0 0 auto; width: 100%; }

    .gp-offset-xxl-0  { margin-left: 0; }
    .gp-offset-xxl-1  { margin-left: 8.33333333%; }
    .gp-offset-xxl-2  { margin-left: 16.66666667%; }
    .gp-offset-xxl-3  { margin-left: 25%; }
    .gp-offset-xxl-4  { margin-left: 33.33333333%; }
    .gp-offset-xxl-5  { margin-left: 41.66666667%; }
    .gp-offset-xxl-6  { margin-left: 50%; }
    .gp-offset-xxl-7  { margin-left: 58.33333333%; }
    .gp-offset-xxl-8  { margin-left: 66.66666667%; }
    .gp-offset-xxl-9  { margin-left: 75%; }
    .gp-offset-xxl-10 { margin-left: 83.33333333%; }
    .gp-offset-xxl-11 { margin-left: 91.66666667%; }

    .gp-order-xxl-first { order: -1; }
    .gp-order-xxl-last  { order: 13; }
    .gp-order-xxl-0  { order: 0; }
    .gp-order-xxl-1  { order: 1; }
    .gp-order-xxl-2  { order: 2; }
    .gp-order-xxl-3  { order: 3; }
    .gp-order-xxl-4  { order: 4; }
    .gp-order-xxl-5  { order: 5; }
}

/* Gutter utilities */
.gp-g-0,
.gp-gx-0 {
    --gp-gutter-x: 0;
}
.gp-g-0,
.gp-gy-0 {
    --gp-gutter-y: 0;
}

/* Optional: Add more gutter sizes like Bootstrap 5 (gp-g-1, gp-g-2, etc.) */
.gp-g-1 { --gp-gutter-x: 0.25rem; --gp-gutter-y: 0.25rem; }
.gp-g-2 { --gp-gutter-x: 0.5rem;  --gp-gutter-y: 0.5rem;  }
.gp-g-3 { --gp-gutter-x: 1rem;    --gp-gutter-y: 1rem;    }
.gp-g-4 { --gp-gutter-x: 1.5rem;  --gp-gutter-y: 1.5rem;  }
.gp-g-5 { --gp-gutter-x: 3rem;    --gp-gutter-y: 3rem;    }

/* For demonstration purposes - can be removed for production */
.demo-col {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    /* margin-bottom: 1rem; */
}