/* ===========================================
   LAYOUT UTILITIES
   Containers, grids, spacing utilities
   Dependencies: tokens.css
   Philosophy: FLOOR-TO-CEILING WINDOWS
   =========================================== */

/* ===================
   CONTAINERS
   =================== */

/* Prevent horizontal scroll from full-width breakouts */
body {
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    /* 24px minimum from edges */
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-xl);
        /* 32px from edges on tablet+ */
    }
}

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

.container--full {
    max-width: none;
}

/* ===================
   BREAKOUT CONTAINERS
   "Floor-to-ceiling windows" - spans full viewport
   =================== */

.container--breakout {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* ===================
   SECTIONS - ARCHITECTURAL PROPORTIONS
   "Space is not wasted" - gallery-level rhythm
   =================== */

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

@media (min-width: 768px) {
    .section {
        padding: var(--space-6xl) 0;
        /* 10rem / 160px — floor-to-ceiling breathing room */
    }
}

@media (min-width: 1024px) {
    .section {
        padding: var(--space-7xl) 0;
        /* 12rem / 192px — monumental spacing */
    }
}

/* Hero sections — full viewport, centered */
.section--hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4xl) var(--space-xl);
}

/* Reduced hero for Products page — less top-heavy */
.section--hero-compact {
    min-height: auto;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-4xl);
}

@media (min-width: 768px) {
    .section--hero-compact {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-5xl);
    }
}

/* Full-bleed sections - span 100vw for drama */
.section--breakout {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Background variants for visual rhythm */
.section--bone {
    background: var(--bone-base);
}

.section--white {
    background: #FFFFFF;
}

.section--warm {
    background: var(--bone-surface);
}

.section--alt {
    background-color: var(--bone-surface);
}

/* Section gradient transitions - creates visual rhythm without hard lines */
.section--fade-in,
.section--gradient-down {
    background: linear-gradient(to bottom,
            var(--bone-base) 0%,
            var(--bone-surface) 100%);
}

.section--fade-out,
.section--gradient-up {
    background: linear-gradient(to bottom,
            var(--bone-surface) 0%,
            var(--bone-base) 100%);
}

.section--gradient-subtle {
    background: linear-gradient(180deg,
            var(--bone-base) 0%,
            var(--bone-surface) 50%,
            var(--bone-base) 100%);
}

/* Visual punctuation between sections */
.section-divider {
    width: 60px;
    height: 1px;
    background: var(--travertine);
    margin: 0 auto;
}

/* Narrow content for intimacy */
.section__content--narrow {
    max-width: 680px;
    margin: 0 auto;
}

/* ===================
   GLOBAL SECTION CONTENT CENTERING
   - Headlines: centered
   - Subheadlines: centered
   - Body copy: centered container, left-aligned text
   - Cards/grids: centered container
   - CTAs: centered
   - Lists: centered container, left-aligned items
   =================== */

.section-content {
    max-width: var(--max-width-narrow);
    /* ~800px */
    margin: 0 auto;
    text-align: center;
}

.section-content p,
.section-content ul {
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-content h2,
.section-content h3 {
    text-align: center;
}

/* ===================
   SECTION HEADER SPACING
   Consistent gap between headline and content
   =================== */

.section__header {
    margin-bottom: var(--space-2xl);
    /* 48px base */
}

@media (min-width: 768px) {
    .section__header {
        margin-bottom: var(--space-3xl);
        /* 64px on tablet+ */
    }
}

/* ===================
   CTA SECTION SPACING
   Call-to-action sections need room
   =================== */

.cta-section {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

@media (min-width: 768px) {
    .cta-section {
        padding: var(--space-4xl) var(--space-xl);
    }
}

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

.cta-section__subtitle {
    margin-bottom: var(--space-xl);
}

/* ===================
   GRID
   =================== */

.grid {
    display: grid;
    gap: var(--space-lg);
    /* 24px base */
}

@media (min-width: 768px) {
    .grid {
        gap: var(--space-xl);
        /* 32px on tablet+ */
    }
}

.grid--2 {
    grid-template-columns: 1fr;
}

.grid--3 {
    grid-template-columns: 1fr;
}

.grid--4 {
    grid-template-columns: 1fr;
}

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

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

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

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

/* ===================
   FLEX UTILITIES
   =================== */

.flex {
    display: flex;
}

.flex--between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

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

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

/* ===================
   MARGIN UTILITIES
   =================== */

/* Margin Top */
.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mt-2xl {
    margin-top: var(--space-2xl);
}

.mt-3xl {
    margin-top: var(--space-3xl);
}

/* Margin Bottom */
.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.mb-2xl {
    margin-bottom: var(--space-2xl);
}

.mb-3xl {
    margin-bottom: var(--space-3xl);
}

/* Margin Left */
.ml-sm {
    margin-left: var(--space-sm);
}

.ml-md {
    margin-left: var(--space-md);
}

.ml-lg {
    margin-left: var(--space-lg);
}

.ml-xl {
    margin-left: var(--space-xl);
}

/* Margin Right */
.mr-sm {
    margin-right: var(--space-sm);
}

.mr-md {
    margin-right: var(--space-md);
}

.mr-lg {
    margin-right: var(--space-lg);
}

.mr-xl {
    margin-right: var(--space-xl);
}

/* ===================
   PADDING UTILITIES
   =================== */

/* Padding Top */
.pt-sm {
    padding-top: var(--space-sm);
}

.pt-md {
    padding-top: var(--space-md);
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pt-xl {
    padding-top: var(--space-xl);
}

.pt-2xl {
    padding-top: var(--space-2xl);
}

.pt-3xl {
    padding-top: var(--space-3xl);
}

/* Padding Bottom */
.pb-sm {
    padding-bottom: var(--space-sm);
}

.pb-md {
    padding-bottom: var(--space-md);
}

.pb-lg {
    padding-bottom: var(--space-lg);
}

.pb-xl {
    padding-bottom: var(--space-xl);
}

.pb-2xl {
    padding-bottom: var(--space-2xl);
}

.pb-3xl {
    padding-bottom: var(--space-3xl);
}

/* Padding Y (top and bottom) */
.py-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.py-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.py-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.py-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.py-2xl {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.py-3xl {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

/* Padding X (left and right) */
.px-sm {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.px-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.px-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.px-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

/* ===================
   TEXT ALIGNMENT
   =================== */

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

.text-center-balanced {
    text-align: center;
    margin-inline: auto;
}

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

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

/* ===================
   DISPLAY UTILITIES
   =================== */

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

/* ===================
   WIDTH UTILITIES
   =================== */

.w-full {
    width: 100%;
}

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

.max-w-text {
    max-width: var(--max-width-text);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}