/* =============================================================================
   lib/styles/components/layout.css — Diesel Dash Layout Component Styles

   BEM blocks defined here:
     .container          — Phase 9 item #52: horizontal-centering wrapper
     .two-col-layout     — Phase 9 item #53 (pending)
     .three-col-layout   — Phase 9 item #54 (pending)
     .responsive-grid    — Phase 9 item #55 (pending)
     .full-width-section — Phase 9 item #56 (pending)
     .section-spacing    — Phase 9 item #57 (pending)

   Breakpoints (matches ResponsiveBreakpoints in responsive_helper.dart):
     Mobile:  0–639px   → 24px horizontal padding
     Tablet:  640–1023px → 48px horizontal padding
     Desktop: 1024px+   → 64px horizontal padding

   Depends on: global.css (CSS custom properties)
   ============================================================================= */


/* =============================================================================
   1. CONTAINER — lib/components/layout/container.dart
   Spec §1.3: Desktop 64px | Tablet 48px | Mobile 24px horizontal padding
   ============================================================================= */


/* --- Base container — mobile-first default (24px padding) --- */


.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    /* 24px — mobile default */
    box-sizing: border-box;
}


/* --- Width constraint modifiers --- */


/* Narrow — long-form prose, legal pages, single-column forms */
.container--narrow {
    max-width: 768px;
}


/* Standard — most page sections (default) */
.container--standard {
    max-width: 1280px;
}


/* Wide — full-bleed grids on large-desktop viewports */
.container--wide {
    max-width: 1536px;
}


/* --- Tablet breakpoint — 640px+ --- */


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


/* --- Desktop breakpoint — 1024px+ --- */


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

/* =============================================================================
   2. TWO-COLUMN LAYOUT — lib/components/layout/two_column_layout.dart
   Spec §1.3: Columns stack on mobile/tablet (default), split at desktop 1024px+
   ============================================================================= */


/* --- Base grid — mobile-first single column --- */


.two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    /* 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;
}


/* --- Tablet two-column (activates at 640px when stackUntilDesktop = false) --- */


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

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

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

    /* 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;
    }
}


/* --- Alignment modifiers (applied at all breakpoints) --- */


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


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

/* =============================================================================
   3. THREE-COLUMN LAYOUT — lib/components/layout/three_column_layout.dart
   Spec §1.3: 1-col mobile → 2-col tablet → 3-col desktop (default behaviour)
   ============================================================================= */


/* --- Base grid — mobile-first single column --- */


.three-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    /* 24px default — tighter than two-col 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: var(--space-lg);
    }
}

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


/* =============================================================================
   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: var(--space-md);
    }
}

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

/* =============================================================================
   4. RESPONSIVE GRID — lib/components/layout/responsive_grid.dart
   Dynamic CSS grid driven by GridColumns per-breakpoint configuration.
   Pre-generates grid-template-columns rules for all valid col counts (1–6).
   ============================================================================= */


/* --- Base grid wrapper --- */


.responsive-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile-first default — overridden by column modifier */
    width: 100%;
}


/* --- Cell wrapper --- */


.responsive-grid__cell {
    min-width: 0;
    /* Prevent grid blowout */
}

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

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


/* --- Gap modifiers --- */


.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 column counts (0–639px)
   Applied directly on the base class — no media query needed for mobile-first.
   Format: .responsive-grid--cols-{mobile}-{tablet}-{desktop}
   ============================================================================= */

.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 column counts (640px–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 column counts (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 — lib/components/layout/full_width_section.dart
   Outermost page-section wrapper. Controls background theme + vertical padding.
   Spec §1.3: Section vertical margins 64px | Hero 80px | Max 96px
   ============================================================================= */


/* --- Base --- */


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


/* =============================================================================
   Theme modifiers — background colour
   ============================================================================= */


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

.full-width-section--light-gray {
    background-color: var(--color-light-gray);
}

.full-width-section--dark {
    background-color: var(--color-deep-navy);
    color: var(--color-light-steel);
}

/* Headings inside dark sections use Energetic Gold */
.full-width-section--dark h1,
.full-width-section--dark h2,
.full-width-section--dark h3,
.full-width-section--dark h4 {
    color: var(--color-energetic-gold);
}

/* Body paragraphs inside dark sections use Light Steel */
.full-width-section--dark p {
    color: var(--color-light-steel);
}

.full-width-section--gold-tint {
    background-color: rgba(255, 184, 0, 0.06);
}

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


/* =============================================================================
   Padding modifiers — vertical rhythm
   Spec §1.3 Spacing Scale: 32px | 48px | 64px | 80px | 96px
   ============================================================================= */


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

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

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

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

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


/* =============================================================================
   Responsive padding scaling — reduce vertical padding on smaller viewports
   ============================================================================= */


/* Tablet — reduce large/hero/xl padding slightly */
@media screen and (max-width: 1023px) {

    .full-width-section--pad-large {
        padding-top: var(--space-3xl);
        /* 48px on tablet */
        padding-bottom: var(--space-3xl);
    }

    .full-width-section--pad-hero {
        padding-top: var(--space-4xl);
        /* 64px on tablet */
        padding-bottom: var(--space-4xl);
    }

    .full-width-section--pad-xl {
        padding-top: var(--space-5xl);
        /* 80px on tablet */
        padding-bottom: var(--space-5xl);
    }
}


/* Mobile — further reduce padding for compact viewport */
@media screen and (max-width: 639px) {

    .full-width-section--pad-small {
        padding-top: var(--space-lg);
        /* 24px on mobile */
        padding-bottom: var(--space-lg);
    }

    .full-width-section--pad-medium {
        padding-top: var(--space-xl);
        /* 32px on mobile */
        padding-bottom: var(--space-xl);
    }

    .full-width-section--pad-large {
        padding-top: var(--space-3xl);
        /* 48px on mobile */
        padding-bottom: var(--space-3xl);
    }

    .full-width-section--pad-hero {
        padding-top: var(--space-3xl);
        /* 48px on mobile */
        padding-bottom: var(--space-3xl);
    }

    .full-width-section--pad-xl {
        padding-top: var(--space-4xl);
        /* 64px on mobile */
        padding-bottom: var(--space-4xl);
    }
}

/* Block: public-layout */
.public-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ensures the wrapper takes up the full viewport height */
    background-color: #F8F9FA;
    /* Brand: Alabaster White */
}

/* Element: main */
.public-layout__main {
    flex: 1;
    /* Pushes the footer to the bottom of the screen if content is short */
    display: flex;
    flex-direction: column;
    width: 100%;
}