/* ==========================================================================
    GRIDSTACKER DYNAMIC CSS
    Breakpoints: 
    - Mobile: 0-650px
    - Tablet: 651-980px
    - Desktop: 981px+
========================================================================== */

:root {
    /* Gutter/Spacing Variable */
    --gridstacker-column-gap: 24px;
    --gridstacker-sticky-top-offset: 84px; /* Default sticky top offset */
}

/* ==========================================================================
    1. Gridstacker Content Container Setup
    ========================================================================== */
.gridstacker-content {
    container-type: inline-size;
    container-name: gridstacker;
    max-width: 1300px;
    margin: auto;
}

.gridstacker-wrapper {
    display: flex;
    gap: var(--gridstacker-column-gap);
    align-items: flex-start;
}

/* ==========================================================================
    2. Column Base Styling & Sticky Behavior
    ========================================================================== */
[class*="col-gs-"] {
    position: sticky;
    top: var(--gridstacker-sticky-top-offset);
    width: var(--desktop-width);
    transition: width 0.3s ease-in-out, order 0.3s ease-in-out, position 0s;
}

/* Utility to hide an element below desktop size */
.gs-hide-lt-desktop {
    display: none !important;
}

/* Utility to hide an element below tablet size */
.gs-hide-lt-tablet {
    display: none !important;
}

/* ==========================================================================
    3. Container Queries for Responsive Layout
    ========================================================================== */

/* --- TABLET LAYOUT --- */
@container gridstacker (min-width: 651px) and (max-width: 980px) {
    .gridstacker-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: min-content;
        align-items: start;
        gap: 0 var(--gridstacker-column-gap, 24px);
        padding: 0;
        margin: 0;
    }

    .gridstacker-wrapper:not([class*='tablet-stack-']),
    .tablet-stack-ac-b,
    .tablet-stack-a-bc {
        grid-template-columns: var(--tablet-width-a, 50%) 1fr;
    }
    .tablet-stack-ca-b {
        grid-template-columns: var(--tablet-width-c, 50%) 1fr;
    }

    .tablet-stack-b-ac,
    .tablet-stack-b-ca {
        grid-template-columns: var(--tablet-width-b, 50%) 1fr;
    }

    [class*="col-gs-"] {
        width: 100%;
        padding: 0;
        margin: 0;
        position: static;
    }
    
    /* Stacking Logic */
    .gridstacker-wrapper:not([class*='tablet-stack-']) .col-gs-a { grid-column: 1 / 2; }
    .gridstacker-wrapper:not([class*='tablet-stack-']) .col-gs-b { grid-column: 2 / 3; }
    .gridstacker-wrapper:not([class*='tablet-stack-']) .col-gs-c { grid-column: 1 / 3; }

    .tablet-stack-ac-b .col-gs-a { grid-column: 1; grid-row: 1 / auto; }
    .tablet-stack-ac-b .col-gs-c { grid-column: 1; grid-row: auto; margin-top: var(--gridstacker-column-gap); }
    .tablet-stack-ac-b .col-gs-b { grid-column: 2; grid-row: 1 / span 999; }
    
    .tablet-stack-a-bc .col-gs-a { grid-column: 1; grid-row: 1 / span 999; position: sticky; top: var(--gridstacker-sticky-top-offset); align-self: start; }
    .tablet-stack-a-bc .col-gs-b { grid-column: 2; grid-row: 1; margin-bottom: 0; }
    .tablet-stack-a-bc .col-gs-c { grid-column: 2; grid-row: 2; margin-top: var(--gridstacker-column-gap); }
    
    .tablet-stack-b-ac .col-gs-b { grid-column: 1; grid-row: 1 / span 999; position: sticky; top: var(--gridstacker-sticky-top-offset); align-self: start; }
    .tablet-stack-b-ac .col-gs-a { grid-column: 2; grid-row: 1; margin-bottom: 0; }
    .tablet-stack-b-ac .col-gs-c { grid-column: 2; grid-row: 2; margin-top: var(--gridstacker-column-gap); }
    
    .tablet-stack-b-ca .col-gs-b { grid-column: 1; grid-row: 1 / span 999; position: sticky; top: var(--gridstacker-sticky-top-offset); align-self: start; }
    .tablet-stack-b-ca .col-gs-c { grid-column: 2; grid-row: 1; margin-bottom: 0; }
    .tablet-stack-b-ca .col-gs-a { grid-column: 2; grid-row: 2; margin-top: var(--gridstacker-column-gap); }
    
    .tablet-stack-ca-b .col-gs-c { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .tablet-stack-ca-b .col-gs-a { grid-column: 1; grid-row: 2; margin-top: var(--gridstacker-column-gap); position: sticky; bottom: 0; align-self: end; }
    .tablet-stack-ca-b .col-gs-b { grid-column: 2; grid-row: 1 / span 999; position: sticky; top: var(--gridstacker-sticky-top-offset); align-self: start; }

    /* Gap & Sticky Fixes */
    .tablet-stack-ac-b .col-gs-a > .card:last-of-type,
    .tablet-stack-a-bc .col-gs-b > .card:last-of-type {
        margin-bottom: 0;
    }

    .gridstacker-wrapper:not([class*='tablet-stack-']) .col-gs-c,
    .tablet-stack-ac-b .col-gs-c,
    .tablet-stack-ac-b .col-gs-b,
    .tablet-stack-a-bc .col-gs-a,
    .tablet-stack-a-bc .col-gs-c,
    .tablet-stack-b-ac .col-gs-b,
    .tablet-stack-b-ac .col-gs-c,
    .tablet-stack-b-ca .col-gs-b,
    .tablet-stack-b-ca .col-gs-a,
    .tablet-stack-ca-b .col-gs-a,
    .tablet-stack-ca-b .col-gs-b {
        position: sticky;
        top: var(--gridstacker-sticky-top-offset);
    }

    .gs-hide-lt-tablet {
        display: block !important;
    }
}

/* --- MOBILE LAYOUT --- */
@container gridstacker (max-width: 650px) {
    .gridstacker-wrapper {
        display: flex;
        flex-direction: column;
    }

    [class*="col-gs-"] {
        width: 100% !important;
        position: static;
        order: 0;
    }

    /* Ensure grouped A+C wrapper spans full width like individual columns */
    .col-ac-group { width: 100% !important; }
    
    /* Mobile Stacking Logic */
    .mobile-stack-abc .col-gs-a { order: 1; }
    .mobile-stack-abc .col-gs-b { order: 2; }
    .mobile-stack-abc .col-gs-c { order: 3; }

    .mobile-stack-cba .col-gs-c { order: 1; }
    .mobile-stack-cba .col-gs-b { order: 2; }
    .mobile-stack-cba .col-gs-a { order: 3; }

    .mobile-stack-acb .col-gs-a { order: 1; }
    .mobile-stack-acb .col-gs-c { order: 2; }
    .mobile-stack-acb .col-gs-b { order: 3; }

    .mobile-stack-bac .col-gs-b { order: 1; }
    .mobile-stack-bac .col-gs-a { order: 2; }
    .mobile-stack-bac .col-gs-c { order: 3; }

    .mobile-stack-bca .col-gs-b { order: 1; }
    .mobile-stack-bca .col-gs-c { order: 2; }
    .mobile-stack-bca .col-gs-a { order: 3; }

    .mobile-stack-cab .col-gs-c { order: 1; }
    .mobile-stack-cab .col-gs-a { order: 2; }
    .mobile-stack-cab .col-gs-b { order: 3; }
}

/* --- DESKTOP LAYOUT --- */
@container gridstacker (min-width: 981px) {
    .gridstacker-wrapper {
        display: flex;
        align-items: flex-start;
        gap: var(--gridstacker-column-gap);
    }

    [class*="col-gs-"] {
        width: var(--desktop-width);
        align-self: flex-start; /* Default all columns to top alignment */
    }

    /* Apply sticky bottom only to side columns A and C */
    .col-gs-a,
    .col-gs-c {
        position: sticky;
        top: auto;
        bottom: 0;
        align-self: flex-end;
    }

    /* Ensure main column B stays at the top */
    .col-gs-b {
        align-self: flex-start;
    }

    .gs-hide-lt-desktop,
    .gs-hide-lt-tablet {
        display: block !important;
    }
}

/* ==========================================================================
    4. Column Utility Classes
    ========================================================================== */

/* Utility to hide a column completely, for instance, when it has no content. */
.col-gs-hidden {
    display: none;
}