/* lib/styles/components/layout.css (CLEANED - Duplicates Removed) */

/* =============================================================================
   1. CONTAINER — lib/components/layout/container.dart
   ============================================================================= */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    /* Uses global.css var */
    box-sizing: border-box;
}

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

/* Ideal for long-form legal reading */
.container--standard {
    max-width: var(--max-content-width);
}

/* 1120px */
.container--wide {
    max-width: 1440px;
}

/* =============================================================================
   2. TWO-COLUMN LAYOUT — lib/components/layout/two_column_layout.dart
   ============================================================================= */

.two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    width: 100%;
}

.two-col-layout__left,
.two-col-layout__right {
    min-width: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

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

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

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

    .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 two-column */
@media screen and (min-width: 1024px) {
    .two-col-layout--equal {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4xl);
    }

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

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

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

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

/* =============================================================================
   3. THREE-COLUMN LAYOUT — lib/components/layout/three_column_layout.dart
   ============================================================================= */

.three-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    width: 100%;
}

.three-col-layout__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

@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-2xl);
    }
}

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

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

/* =============================================================================
   4. RESPONSIVE GRID — lib/components/layout/responsive_grid.dart
   ============================================================================= */

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
}

.responsive-grid__cell {
    min-width: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

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

.responsive-grid--gap-medium {
    gap: var(--space-lg);
}

.responsive-grid--gap-large {
    gap: var(--space-xl);
}

/* Mobile */
.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 */
@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 */
@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 — lib/components/layout/full_width_section.dart
   ============================================================================= */

.full-width-section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.full-width-section--animated-bg {
    animation: bg-wash-fade var(--transition-slow);
}

@keyframes bg-wash-fade {
    from {
        background-color: var(--color-white);
    }
}

/* Theme Modifiers */
.full-width-section--white {
    background-color: var(--color-white);
}

.full-width-section--light-grey {
    background-color: var(--color-paper-white);
}

.full-width-section--teal-wash {
    background-color: rgba(29, 118, 112, 0.04);
}

.full-width-section--dark {
    background-color: var(--color-justice-blue);
    color: var(--color-white);
}

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

.full-width-section--transparent {
    background-color: transparent;
}

/* Padding Modifiers */
.full-width-section--pad-none {
    padding-top: 0;
    padding-bottom: 0;
}

.full-width-section--pad-small {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.full-width-section--pad-medium {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.full-width-section--pad-large {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.full-width-section--pad-hero {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

.full-width-section--pad-xl {
    padding-top: var(--space-6xl);
    padding-bottom: var(--space-6xl);
}

/* Responsive Padding Scaling */
@media screen and (max-width: 1023px) {
    .full-width-section--pad-large {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .full-width-section--pad-hero {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .full-width-section--pad-xl {
        padding-top: var(--space-5xl);
        padding-bottom: var(--space-5xl);
    }
}

@media screen and (max-width: 639px) {
    .full-width-section--pad-small {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .full-width-section--pad-medium {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .full-width-section--pad-large {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .full-width-section--pad-hero {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .full-width-section--pad-xl {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }
}