/* ==========================================================================
    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 */
    --gridstacker-sticky-bottom-gap: 25px;
}

/* ==========================================================================
    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: end; /* Align to bottom for sticky-bottom to work */
        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; }

    /* New rules for tablet-stack-ac-b with col-ac-group */
    .tablet-stack-ac-b .col-ac-group {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        position: sticky;
        bottom: 0; /* Stick to bottom */
        align-self: end; /* Align group to bottom */
    }
    .tablet-stack-ac-b .col-ac-group .col-gs-a {
        margin-bottom: var(--gridstacker-column-gap);
    }
    .tablet-stack-ac-b .col-gs-b {
        grid-column: 2;
        grid-row: 1;
        align-self: start; /* Keep col-b at the top */
    }

    /* Direction-aware behavior for tablet: when user scrolls up, stick A/C group to top; when down, stick to bottom */
    .gridstacker-content.scrolling-up .tablet-stack-ac-b .col-ac-group {
        top: var(--gridstacker-sticky-top-offset);
        bottom: auto;
        align-self: start;
    }
    .gridstacker-content.scrolling-down .tablet-stack-ac-b .col-ac-group {
        top: auto;
        bottom: 0;
        align-self: end;
    }

    /* Follow-scroll tablet: on scroll UP, respect sticky top offset to avoid header collision; on DOWN, keep bottom gap */
    .gridstacker-content.gs-follow-scroll.scrolling-up .tablet-stack-ac-b .col-ac-group {
        top: var(--gridstacker-sticky-top-offset);
        bottom: auto;
        align-self: start;
    }
    .gridstacker-content.gs-follow-scroll.scrolling-down .tablet-stack-ac-b .col-ac-group {
        top: auto;
        bottom: var(--gridstacker-sticky-bottom-gap, 16px);
        align-self: end;
    }
    .gridstacker-content.gs-follow-scroll .tablet-stack-ac-b .col-ac-group {
        will-change: transform;
        overflow: visible; /* prevent visual overflow while translating inner content */
    }
    /* In follow-scroll tablet mode, inner A/C must be static to avoid overlap with sticky rules */
    .gridstacker-content.gs-follow-scroll .tablet-stack-ac-b .col-ac-group .col-gs-a,
    .gridstacker-content.gs-follow-scroll .tablet-stack-ac-b .col-ac-group .col-gs-c {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        align-self: auto !important;
    }
    
    .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-ac-b .col-gs-c > .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;
    }

    /* Neutralize follow-scroll artifacts on mobile: no sticky, no inline heights, no transforms */
    .gridstacker-content.gs-follow-scroll [class*="col-gs-"] {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        align-self: auto !important;
        height: auto !important; /* overrides JS inline height */
    }
    .gridstacker-content.gs-follow-scroll .col-ac-group {
        position: static !important;
        align-self: auto !important;
        height: auto !important;
    }
    .gridstacker-content.gs-follow-scroll .gs-follow-inner {
        display: contents !important; /* unwrap so children stack naturally */
        transform: none !important;   /* overrides JS translateY */
    }

    /* Also force-safe even if gs-follow-scroll class is absent */
    .col-ac-group { position: static !important; align-self: auto !important; height: auto !important; width: 100% !important; }
    .col-ac-group .gs-follow-inner { display: contents !important; transform: none !important; }
    .col-ac-group .col-gs-a,
    .col-ac-group .col-gs-c {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        align-self: auto !important;
        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 to top alignment */
    }

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

    /* Direction-aware behavior for desktop: toggle sticky top/bottom based on scroll direction */
    .gridstacker-content.scrolling-up .col-gs-a,
    .gridstacker-content.scrolling-up .col-gs-c {
        top: var(--gridstacker-sticky-top-offset);
        bottom: auto;
        align-self: flex-start;
    }
    .gridstacker-content.scrolling-down .col-gs-a,
    .gridstacker-content.scrolling-down .col-gs-c {
        top: auto;
        bottom: 0;
        align-self: flex-end;
    }

    /* Follow-scroll mode: keep bottom-sticky regardless of direction; JS translates smoothly */
    .gridstacker-content.gs-follow-scroll.scrolling-up .col-gs-a,
    .gridstacker-content.gs-follow-scroll.scrolling-up .col-gs-c {
        top: auto;
        bottom: var(--gridstacker-sticky-bottom-gap, 16px);
        align-self: flex-end;
    }
    .gridstacker-content.gs-follow-scroll.scrolling-down .col-gs-a,
    .gridstacker-content.gs-follow-scroll.scrolling-down .col-gs-c {
        top: auto;
        bottom: var(--gridstacker-sticky-bottom-gap, 16px);
        align-self: flex-end;
    }
    .gridstacker-content.gs-follow-scroll .col-gs-a,
    .gridstacker-content.gs-follow-scroll .col-gs-c {
        will-change: transform;
        overflow: visible; /* keep the external bottom gap clean */
    }

    /* Re-order columns for desktop flexbox layout */
    .col-gs-a { order: 1; }
    .col-gs-b { order: 2; }
    .col-gs-c { order: 3; } 


    .col-ac-group {
        display: contents;
    }

    /* If a follow-scroll inner wrapper exists (from tablet), neutralize it so A/C are direct flex items */
    .col-ac-group > .gs-follow-inner {
        display: contents !important;
    }

    /* In follow-scroll desktop mode, give A and C a bottom gap */
    .gridstacker-content.gs-follow-scroll .col-gs-a,
    .gridstacker-content.gs-follow-scroll .col-gs-c {
        top: auto;
        bottom: var(--gridstacker-sticky-bottom-gap, 16px);
    }

    .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;
}