/**
 * SimulatorBooking - Layout Utilities
 * Container, grid systems, and structural helpers
 * @version 2.0.0
 */

/* Container System */
.sb-container {
    width: 100%;
    max-width: var(--sb-container-max);
    margin-inline: auto;
    padding-inline: var(--sb-container-padding);
}

.sb-container--narrow {
    max-width: 960px;
}

.sb-container--wide {
    max-width: 1440px;
}

/* Section Spacing */
.sb-section {
    padding-block: var(--sb-space-24);
}

.sb-section--compact {
    padding-block: var(--sb-space-16);
}

.sb-section--expanded {
    padding-block: calc(var(--sb-space-24) + var(--sb-space-8));
}

/* Light background section variant */
.sb-section--light {
    background: var(--sb-color-bg-surface);
}

/* Subtle gradient background for emphasis */
.sb-section--subtle {
    background: linear-gradient(180deg, var(--sb-color-bg-base) 0%, var(--sb-color-bg-surface) 100%);
}

/* Flex Utilities */
.sb-flex {
    display: flex;
}

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

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

.sb-flex--center {
    align-items: center;
    justify-content: center;
}

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

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

.sb-flex--gap-sm {
    gap: var(--sb-space-3);
}

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

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

/* Grid Systems */
.sb-grid {
    display: grid;
    gap: var(--sb-space-6);
}

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

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

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

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

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

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
    .sb-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sb-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sb-grid--4col,
    .sb-grid--3col,
    .sb-grid--2col {
        grid-template-columns: 1fr;
    }
    
    .sb-section {
        padding-block: var(--sb-space-16);
    }
    
    .sb-section--compact {
        padding-block: var(--sb-space-12);
    }
    
    .sb-section--expanded {
        padding-block: var(--sb-space-20);
    }
}

/* Split Layout */
.sb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sb-space-12);
    align-items: center;
}

.sb-split--reverse {
    direction: rtl;
}

.sb-split--reverse > * {
    direction: ltr;
}

@media (max-width: 900px) {
    .sb-split {
        grid-template-columns: 1fr;
        gap: var(--sb-space-8);
    }
    
    .sb-split--reverse {
        direction: ltr;
    }
}

/* Aspect Ratios */
.sb-aspect--square {
    aspect-ratio: 1;
}

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

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

/* Visibility Helpers */
.sb-hide-mobile {
    display: block;
}

.sb-show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .sb-hide-mobile {
        display: none;
    }
    
    .sb-show-mobile {
        display: block;
    }
}

/* Text Alignment */
.sb-text-left { text-align: left; }
.sb-text-center { text-align: center; }
.sb-text-right { text-align: right; }

/* Margin/Padding Utilities */
.sb-mt-auto { margin-top: auto; }
.sb-mb-0 { margin-bottom: 0; }
.sb-mb-4 { margin-bottom: var(--sb-space-4); }
.sb-mb-6 { margin-bottom: var(--sb-space-6); }
.sb-mb-8 { margin-bottom: var(--sb-space-8); }
.sb-mb-10 { margin-bottom: var(--sb-space-10); }
.sb-mb-12 { margin-bottom: var(--sb-space-12); }
.sb-mt-6 { margin-top: var(--sb-space-6); }
.sb-mt-8 { margin-top: var(--sb-space-8); }
.sb-mt-10 { margin-top: var(--sb-space-10); }
.sb-pt-0 { padding-top: 0; }
.sb-pb-0 { padding-bottom: 0; }

/* Width Constraints */
.sb-max-w-prose {
    max-width: 65ch;
}

.sb-max-w-sm {
    max-width: 480px;
}

.sb-max-w-md {
    max-width: 640px;
}

.sb-max-w-lg {
    max-width: 800px;
}