/* ==================== LAYOUT STYLES ==================== */
/* Containers, grids, and structural patterns */

/* ===== CONTAINERS ===== */
.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

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

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

.container--full {
    max-width: 100%;
    padding-inline: 0;
}

/* ===== FULL-WIDTH LAYOUT PATTERN ===== */
/* Grid that allows full-width children within a centered container */
.layout-grid {
    display: grid;
    grid-template-columns: 
        1fr 
        min(var(--container-lg), calc(100% - var(--gutter) * 2)) 
        1fr;
}

.layout-grid > * {
    grid-column: 2;
}

.layout-grid > .full-width {
    grid-column: 1 / -1;
}

/* ===== SECTION SPACING ===== */
section {
    position: relative;
}

.section {
    padding-block: var(--space-4xl);
}

.section--sm {
    padding-block: var(--space-2xl);
}

.section--lg {
    padding-block: var(--space-5xl);
}

.section--hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--hero-short {
    min-height: 50vh;
    max-height: 600px;
}

/* ===== FLEX 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(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

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

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

.gap-2xl {
    gap: var(--space-2xl);
}

/* ===== GRID PATTERNS ===== */
.grid {
    display: grid;
    gap: var(--space-lg);
}

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

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

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

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

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

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

/* ===== TWO COLUMN LAYOUT ===== */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.two-col--reverse {
    direction: rtl;
}

.two-col--reverse > * {
    direction: ltr;
}

/* ===== STACK (Vertical spacing) ===== */
.stack > * + * {
    margin-top: var(--space-md);
}

.stack--sm > * + * {
    margin-top: var(--space-sm);
}

.stack--lg > * + * {
    margin-top: var(--space-lg);
}

.stack--xl > * + * {
    margin-top: var(--space-xl);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .two-col {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .two-col--reverse {
        direction: ltr;
    }
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section {
        padding-block: var(--space-2xl);
    }
    
    .section--lg {
        padding-block: var(--space-3xl);
    }
}

@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ===== ASPECT RATIOS ===== */
.aspect-square {
    aspect-ratio: 1 / 1;
}

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

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

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

/* ===== OBJECT FIT ===== */
.object-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.object-contain {
    object-fit: contain;
}

/* ===== POSITION UTILITIES ===== */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0;
}

/* ===== OVERFLOW ===== */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

/* ===== TEXT ALIGNMENT ===== */
.text-left {
    text-align: left;
}

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

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