/**
 * Layout Styles
 *
 * Grid, containers, and section framework.
 *
 * @package enhed
 */

/* ==========================================================================
   Site Structure
   ========================================================================== */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
}

/* ==========================================================================
   Container
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--spacing-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

.container--narrow {
    max-width: var(--spacing-container-narrow);
}

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

.container--full {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
    position: relative;
    padding-top: var(--spacing-section-mobile);
    padding-bottom: var(--spacing-section-mobile);
}

@media (min-width: 768px) {
    .section {
        padding-top: var(--spacing-section);
        padding-bottom: var(--spacing-section);
    }
}

.section__container {
    width: 100%;
    max-width: var(--spacing-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .section__container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Section Header */
.section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section__title {
    margin-bottom: var(--space-4);
}

.section__subtitle {
    font-size: var(--text-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Backgrounds */
.section--light {
    background-color: var(--color-paper);
}

.section--secondary {
    background-color: var(--color-secondary);
}

.section--dark {
    background: var(--gradient-dark);
    color: var(--color-paper);
}

.section--dark .section__title,
.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-paper);
}

.section--dark p {
    color: rgba(255, 244, 230, 0.85);
}

.section--image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 244, 230, 0.92);
    backdrop-filter: blur(4px);
}

.section--image > * {
    position: relative;
    z-index: var(--z-above);
}

/* ==========================================================================
   Grid System
   ========================================================================== */

.grid {
    display: grid;
    gap: var(--spacing-gap);
}

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

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

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

@media (min-width: 640px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* Auto-fit grids */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid--auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.gap-sm {
    gap: var(--spacing-gap-sm);
}

.gap {
    gap: var(--spacing-gap);
}

.gap-lg {
    gap: var(--spacing-gap-lg);
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ==========================================================================
   Two Column Layouts
   ========================================================================== */

.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-gap-lg);
    align-items: center;
}

@media (min-width: 768px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
    }

    .two-col--reverse > :first-child {
        order: 2;
    }

    .two-col--60-40 {
        grid-template-columns: 3fr 2fr;
    }

    .two-col--40-60 {
        grid-template-columns: 2fr 3fr;
    }
}

/* ==========================================================================
   Aspect Ratios
   ========================================================================== */

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-3-4 {
    aspect-ratio: 3 / 4;
}