/* === MOBILE-FIRST RESPONSIVE SPACING SYSTEM === */

/* Base spacing for all homepage sections - mobile first */
.homepage-section {
    /* Mobile: Tight, focused spacing */
    padding: 60px 0;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

/* Tablet: More breathing room */
@media (min-width: 640px) {
    .homepage-section {
        padding: 80px 0;
    }
}

/* Desktop: Generous but controlled spacing */
@media (min-width: 968px) {
    .homepage-section {
        padding: 100px 0;
    }
}

/* Container system - mobile first */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Mobile: Tight margins */
    padding: 0 20px;
}

/* Tablet: More side padding */
@media (min-width: 640px) {
    .section-container {
        padding: 0 32px;
    }
}

/* Desktop: Full side padding */
@media (min-width: 968px) {
    .section-container {
        padding: 0 48px;
    }
}

/* Header spacing within sections - mobile first */
.section-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Tablet and up: More header breathing room */
@media (min-width: 640px) {
    .section-header {
        margin-bottom: 60px;
    }
}

/* Desktop: Maximum header spacing */
@media (min-width: 968px) {
    .section-header {
        margin-bottom: 80px;
    }
}

/* Alternating section backgrounds */
.homepage-section:nth-child(odd) {
    background: #ffffff;
}

.homepage-section:nth-child(even) {
    background: #fafbfc;
}

/* Remove top border from first section */
.homepage-section:first-of-type {
    border-top: none;
}

/* Special spacing for hero section */
.homepage-hero {
    padding: 0;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-top: none;
}

/* Tablet: More hero height */
@media (min-width: 640px) {
    .homepage-hero {
        min-height: 90vh;
    }
}

/* Desktop: Full hero height */
@media (min-width: 968px) {
    .homepage-hero {
        min-height: 100vh;
    }
}