/* =============================================================================
   lib/styles/components/layout.css — Filtra-Core Layout Component Styles

   BEM blocks defined here:
     .container          — horizontal-centering wrapper
     .two-col-layout     — responsive 2-column grid
     .three-col-layout   — responsive 3-column grid
     .responsive-grid    — dynamic multi-column grid
     .full-width-section — full-bleed section wrappers

   Breakpoints:
     Mobile:  0–639px   → 24px horizontal padding
     Tablet:  640–1023px → 48px horizontal padding
     Desktop: 1024px+   → 64px horizontal padding
   ============================================================================= */

/* =============================================================================
   1. CONTAINER
   ============================================================================= */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-lg, 24px);
    box-sizing: border-box;
}

.container--narrow {
    max-width: 768px;
}

.container--standard {
    max-width: 1280px;
}

.container--wide {
    max-width: 1536px;
}

@media screen and (min-width: 640px) {
    .container {
        padding-inline: var(--space-3xl, 48px);
    }
}

@media screen and (min-width: 1024px) {
    .container {
        padding-inline: var(--space-4xl, 64px);
    }
}

/* =============================================================================
   2. TWO-COLUMN LAYOUT
   ============================================================================= */
.two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl, 32px);
    width: 100%;
}

.two-col-layout__left,
.two-col-layout__right {
    min-width: 0;
}

.two-col-layout--no-gap {
    gap: 0;
}

@media screen and (min-width: 640px) {
    .two-col-layout--tablet-two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl, 32px);
    }

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

@media screen and (min-width: 1024px) {
    .two-col-layout--equal {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4xl, 64px);
    }

    .two-col-layout--sixty-forty {
        grid-template-columns: 3fr 2fr;
        gap: var(--space-4xl, 64px);
    }

    .two-col-layout--forty-sixty {
        grid-template-columns: 2fr 3fr;
        gap: var(--space-4xl, 64px);
    }

    .two-col-layout--reverse .two-col-layout__left {
        order: 2;
    }

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

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

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

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

/* =============================================================================
   3. THREE-COLUMN LAYOUT
   ============================================================================= */
.three-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg, 24px);
    width: 100%;
}

.three-col-layout__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.three-col-layout--no-gap {
    gap: 0;
}

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

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

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

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

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

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

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

/* =============================================================================
   4. RESPONSIVE GRID
   ============================================================================= */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
}

.responsive-grid__cell {
    min-width: 0;
}

.responsive-grid__cell--stretch,
.responsive-grid--align-stretch .responsive-grid__cell {
    display: flex;
    flex-direction: column;
}

.responsive-grid--gap-none { gap: 0; }
.responsive-grid--gap-small { gap: var(--space-md, 16px); }
.responsive-grid--gap-medium { gap: var(--space-lg, 24px); }
.responsive-grid--gap-large { gap: var(--space-xl, 32px); }

/* Mobile (0-639px) */
.responsive-grid--cols-1-1-1, .responsive-grid--cols-1-1-2, .responsive-grid--cols-1-1-3,
.responsive-grid--cols-1-1-4, .responsive-grid--cols-1-2-2, .responsive-grid--cols-1-2-3,
.responsive-grid--cols-1-2-4, .responsive-grid--cols-1-3-3, .responsive-grid--cols-1-3-4 {
    grid-template-columns: repeat(1, 1fr);
}

.responsive-grid--cols-2-2-2, .responsive-grid--cols-2-2-3, .responsive-grid--cols-2-2-4,
.responsive-grid--cols-2-3-3, .responsive-grid--cols-2-3-4, .responsive-grid--cols-2-4-4 {
    grid-template-columns: repeat(2, 1fr);
}

.responsive-grid--cols-3-3-3, .responsive-grid--cols-3-3-4, .responsive-grid--cols-3-4-4 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet (640-1023px) */
@media screen and (min-width: 640px) {
    .responsive-grid--cols-1-1-1, .responsive-grid--cols-1-1-2, 
    .responsive-grid--cols-1-1-3, .responsive-grid--cols-1-1-4 { grid-template-columns: repeat(1, 1fr); }

    .responsive-grid--cols-1-2-2, .responsive-grid--cols-1-2-3, .responsive-grid--cols-1-2-4,
    .responsive-grid--cols-2-2-2, .responsive-grid--cols-2-2-3, .responsive-grid--cols-2-2-4 { grid-template-columns: repeat(2, 1fr); }

    .responsive-grid--cols-1-3-3, .responsive-grid--cols-1-3-4, .responsive-grid--cols-2-3-3,
    .responsive-grid--cols-2-3-4, .responsive-grid--cols-3-3-3, .responsive-grid--cols-3-3-4,
    .responsive-grid--cols-3-4-4 { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop (1024px+) */
@media screen and (min-width: 1024px) {
    .responsive-grid--cols-1-1-1, .responsive-grid--cols-1-2-1, .responsive-grid--cols-2-2-1 { grid-template-columns: repeat(1, 1fr); }
    .responsive-grid--cols-1-1-2, .responsive-grid--cols-1-2-2, .responsive-grid--cols-2-2-2 { grid-template-columns: repeat(2, 1fr); }
    .responsive-grid--cols-1-1-3, .responsive-grid--cols-1-2-3, .responsive-grid--cols-2-2-3,
    .responsive-grid--cols-1-3-3, .responsive-grid--cols-2-3-3, .responsive-grid--cols-3-3-3 { grid-template-columns: repeat(3, 1fr); }
    .responsive-grid--cols-1-1-4, .responsive-grid--cols-1-2-4, .responsive-grid--cols-2-2-4,
    .responsive-grid--cols-1-3-4, .responsive-grid--cols-2-3-4, .responsive-grid--cols-3-3-4,
    .responsive-grid--cols-2-4-4, .responsive-grid--cols-3-4-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   5. FULL-WIDTH SECTION
   ============================================================================= */
.full-width-section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* Themes */
.full-width-section--white { background-color: var(--color-white, #FFFFFF); }
.full-width-section--light-gray { background-color: var(--color-light-gray, #F3F4F6); }
.full-width-section--transparent { background-color: transparent; }

.full-width-section--dark {
    background-color: var(--color-primary, #0A192F);
    color: var(--color-light-gray, #F3F4F6);
}

.full-width-section--dark h1,
.full-width-section--dark h2,
.full-width-section--dark h3,
.full-width-section--dark h4 {
    color: var(--color-white, #FFFFFF);
}

.full-width-section--dark p {
    color: var(--color-light-gray, #E5E7EB);
}

.full-width-section--gold-tint {
    background-color: rgba(245, 158, 11, 0.05); /* Industrial gold tint */
}

/* Padding Scales */
.full-width-section--pad-none { padding-top: 0; padding-bottom: 0; }
.full-width-section--pad-small { padding-top: var(--space-xl, 32px); padding-bottom: var(--space-xl, 32px); }
.full-width-section--pad-medium { padding-top: var(--space-3xl, 48px); padding-bottom: var(--space-3xl, 48px); }
.full-width-section--pad-large { padding-top: var(--space-4xl, 64px); padding-bottom: var(--space-4xl, 64px); }
.full-width-section--pad-hero { padding-top: var(--space-5xl, 80px); padding-bottom: var(--space-5xl, 80px); }
.full-width-section--pad-xl { padding-top: var(--space-6xl, 96px); padding-bottom: var(--space-6xl, 96px); }

/* Responsive padding reduction */
@media screen and (max-width: 1023px) {
    .full-width-section--pad-large { padding-top: var(--space-3xl, 48px); padding-bottom: var(--space-3xl, 48px); }
    .full-width-section--pad-hero { padding-top: var(--space-4xl, 64px); padding-bottom: var(--space-4xl, 64px); }
    .full-width-section--pad-xl { padding-top: var(--space-5xl, 80px); padding-bottom: var(--space-5xl, 80px); }
}

@media screen and (max-width: 639px) {
    .full-width-section--pad-small { padding-top: var(--space-lg, 24px); padding-bottom: var(--space-lg, 24px); }
    .full-width-section--pad-medium { padding-top: var(--space-xl, 32px); padding-bottom: var(--space-xl, 32px); }
    .full-width-section--pad-large { padding-top: var(--space-3xl, 48px); padding-bottom: var(--space-3xl, 48px); }
    .full-width-section--pad-hero { padding-top: var(--space-3xl, 48px); padding-bottom: var(--space-3xl, 48px); }
    .full-width-section--pad-xl { padding-top: var(--space-4xl, 64px); padding-bottom: var(--space-4xl, 64px); }
}