/* =============================================================================
   TWO-COLUMN LAYOUT COMPONENT
   Default behaviour: Columns stack on mobile/tablet, split at desktop 1024px+
   ============================================================================= */

/* Base grid — mobile-first single column */
.two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px; /* 32px default gap between stacked columns */
    width: 100%;
}

/* Column cells */
.two-col-layout__left,
.two-col-layout__right {
    min-width: 0; /* Prevent grid blowout from wide children */
}

/* No-gap modifier */
.two-col-layout--no-gap {
    gap: 0;
}

/* --- Alignment modifiers (applied at all breakpoints) --- */
.two-col-layout--align-start {
    align-items: start;
}

.two-col-layout--align-center {
    align-items: center;
}

.two-col-layout--align-stretch {
    align-items: stretch;
}

/* =============================================================================
   Tablet Breakpoint (640px+) 
   Activates only when stackUntilDesktop = false
   ============================================================================= */
@media screen and (min-width: 640px) {
    .two-col-layout--tablet-two-col {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* Ratio modifiers at tablet */
    .two-col-layout--tablet-two-col.two-col-layout--sixty-forty {
        grid-template-columns: 3fr 2fr;
    }

    .two-col-layout--tablet-two-col.two-col-layout--forty-sixty {
        grid-template-columns: 2fr 3fr;
    }
}

/* =============================================================================
   Desktop Breakpoint (1024px+) 
   Always activates regardless of stackUntilDesktop
   ============================================================================= */
@media screen and (min-width: 1024px) {

    /* Equal 50/50 */
    .two-col-layout--equal {
        grid-template-columns: 1fr 1fr;
        gap: 64px; /* 64px gap on desktop */
    }

    /* 60 / 40 */
    .two-col-layout--sixty-forty {
        grid-template-columns: 3fr 2fr;
        gap: 64px;
    }

    /* 40 / 60 */
    .two-col-layout--forty-sixty {
        grid-template-columns: 2fr 3fr;
        gap: 64px;
    }

    /* Reverse — swap column visual order without touching DOM order */
    .two-col-layout--reverse .two-col-layout__left {
        order: 2;
    }

    .two-col-layout--reverse .two-col-layout__right {
        order: 1;
    }
}