/* ==========================================================================
 LAYOUT.CSS - Container, Grid, Flexbox, Section Spacing
 Sell Chicago Properties
 Mobile-first layout system
 ========================================================================== */

/* ---------------------------------------------------------------------------
 1. CONTAINER SYSTEM
 --------------------------------------------------------------------------- */

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

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

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

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


/* ---------------------------------------------------------------------------
 2. CSS GRID UTILITIES
 --------------------------------------------------------------------------- */

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

/* Single column on mobile - all grid variants start at 1 column */
.grid--2,
.grid--3,
.grid--4 {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-5);
}

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

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

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

/* Desktop: 1280px+ */
@media (min-width: 1280px) {
 .grid--3 {
 grid-template-columns: repeat(3, 1fr);
 }

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


/* ---------------------------------------------------------------------------
 3. FLEXBOX UTILITIES
 --------------------------------------------------------------------------- */

.flex {
 display: flex;
}

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

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

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

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

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

.flex--gap-4 {
 gap: var(--space-4);
}

.flex--gap-5 {
 gap: var(--space-5);
}

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

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

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


/* ---------------------------------------------------------------------------
 4. SECTION SPACING
 --------------------------------------------------------------------------- */

.section {
 padding-top: var(--space-6);
 padding-bottom: var(--space-6);
}

.section--sm {
 padding-top: var(--space-4);
 padding-bottom: var(--space-4);
}

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

 .section--sm {
 padding-top: var(--space-6);
 padding-bottom: var(--space-6);
 }
}

@media (min-width: 1280px) {
 .section {
 padding-top: var(--space-8);
 padding-bottom: var(--space-8);
 }
}

/* Section background variants */
.section--alt {
 background-color: var(--color-white);
}

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

/* Vibrant section backgrounds - use to break up monotone cream/white */
.section--mint {
 background-color: var(--color-mint);
}

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

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

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

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

/* Gradient variants for hero-like impact */
.section--gradient-trust {
 background: linear-gradient(135deg, var(--color-mint) 0%, var(--color-sky) 100%);
}

.section--gradient-warm {
 background: linear-gradient(135deg, var(--color-peach) 0%, var(--color-warm-gold) 100%);
}

.section--gradient-navy {
 background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
 color: var(--color-white);
}

/* Accent top-border for visual pop */
.section--accent-top {
 border-top: 3px solid var(--color-accent);
}

.section--accent-top-green {
 border-top: 3px solid var(--color-success);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
 color: var(--color-white);
}

.section--navy p {
 color: rgba(255, 255, 255, 0.8);
}

.section--navy a {
 color: var(--color-accent-light);
}

.section--navy a:hover {
 color: var(--color-accent);
}

/* Section header pattern */
.section__header {
 text-align: center;
 margin-bottom: var(--space-6);
 max-width: var(--container-narrow);
 margin-left: auto;
 margin-right: auto;
}

.section__header p {
 font-size: 1.125rem;
 color: var(--color-text-light);
}

.section--navy .section__header p {
 color: rgba(255, 255, 255, 0.75);
}

.section__label {
 display: inline-block;
 font-size: 0.875rem;
 font-weight: var(--fw-semibold);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--color-accent);
 margin-bottom: var(--space-2);
}


/* ---------------------------------------------------------------------------
 5. RESPONSIVE PADDING / SPACING HELPERS
 --------------------------------------------------------------------------- */

/* Responsive padding-x */
.px-responsive {
 padding-left: var(--space-4);
 padding-right: var(--space-4);
}

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

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

/* Responsive vertical spacing */
.py-responsive {
 padding-top: var(--space-8);
 padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
 .py-responsive {
 padding-top: var(--space-10);
 padding-bottom: var(--space-10);
 }
}

@media (min-width: 1280px) {
 .py-responsive {
 padding-top: var(--space-12);
 padding-bottom: var(--space-12);
 }
}