/* =============================================================================
   THREE-COLUMN LAYOUT COMPONENT
   Default behaviour: 1-col mobile → 2-col tablet → 3-col desktop
   ============================================================================= */

/* Base grid — mobile-first single column */
.three-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px; /* Default tighter gap for card grids */
    width: 100%;
    padding-bottom: 64px;
}

/* Cell wrapper */
.three-col-layout__cell {
    min-width: 0; /* Prevent grid blowout from wide children */
    display: flex;
    flex-direction: column; /* Allows card children to use height: 100% correctly */
}

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

/* Alignment modifiers */
.three-col-layout--align-start {
    align-items: start;
}

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

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

/* =============================================================================
   Breakpoint: tabletTwoDesktopThree
   1-col mobile | 2-col tablet (640px+) | 3-col desktop (1024px+)
   ============================================================================= */

@media screen and (min-width: 640px) {
    .three-col-layout--tablet-two-desktop-three {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media screen and (min-width: 1024px) {
    .three-col-layout--tablet-two-desktop-three {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px; /* 32px on desktop */
    }
}

/* =============================================================================
   Breakpoint: desktopOnly
   1-col mobile + tablet | 3-col desktop (1024px+)
   ============================================================================= */

@media screen and (min-width: 1024px) {
    .three-col-layout--desktop-only {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* =============================================================================
   Breakpoint: mobileTwo
   2-col mobile (480px+) | 3-col desktop (1024px+)
   ============================================================================= */

@media screen and (min-width: 480px) {
    .three-col-layout--mobile-two {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media screen and (min-width: 1024px) {
    .three-col-layout--mobile-two {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}