/*
 * =====================================================
 *  Section Spacing: Site-Wide Consistency System
 *  Professional, even vertical rhythm across all pages.
 * =====================================================
 */

/* === CSS Custom Properties: Spacing Scale === */
:root {
    --space-section:    100px; /* Standard section top/bottom padding */
    --space-section-sm:  64px; /* Tablet section padding */
    --space-section-xs:  48px; /* Mobile section padding */

    --space-header:      40px; /* Space between section header and content */
    --space-header-sm:   28px;

    --space-gap:         30px; /* Standard card/item gap */
    --space-gap-sm:      20px;
}

/* ===================================================
   1. OVERRIDE: Standardize .section globally
      (overrides the 130px in main.min.css for uniformity)
   =================================================== */
.section {
    padding-top:    var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
}

/* Explicit override for sections that add pb-0 intentionally (footer, sponsor) */
.section.pb-0 {
    padding-bottom: 0 !important;
}

/* ===================================================
   2. SECTION HEADERS: Consistent gap below titles
   =================================================== */
.section__header {
    margin-bottom: var(--space-header) !important;
}

/* ===================================================
   3. SPECIFIC SECTION TYPES: Fine-tuning
   =================================================== */

/* Hero / Banner section — slightly more breathing room and clears fixed navbar */
.banner.section,
.hero.section,
section.banner {
    padding-top:    180px !important; /* Clears navbar */
    padding-bottom: 120px !important;
}

/* CTA Section — tighter than standard */
.cta-s.section {
    padding-top:    var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
}

/* Sponsor / brand strip — top only, no bottom */
.sponsor.section {
    padding-top:    var(--space-section) !important;
    padding-bottom: 0 !important;
}

/* Work steps — keep visual effect but normalize top */
.work-steps.section {
    padding-top: var(--space-section) !important;
}

/* ===================================================
   4. TABLET: 768px – 1199px
   =================================================== */
@media (max-width: 1199px) {
    .section {
        padding-top:    var(--space-section-sm) !important;
        padding-bottom: var(--space-section-sm) !important;
    }

    .section.pb-0 {
        padding-bottom: 0 !important;
    }

    .banner.section,
    .hero.section,
    section.banner {
        padding-top:    140px !important; /* Clears navbar on tablet */
        padding-bottom: 80px !important;
    }

    .section__header {
        margin-bottom: var(--space-header-sm) !important;
    }
}

/* ===================================================
   5. MOBILE: Max 767px
   =================================================== */
@media (max-width: 767px) {
    .section {
        padding-top:    var(--space-section-xs) !important;
        padding-bottom: var(--space-section-xs) !important;
    }

    .section.pb-0 {
        padding-bottom: 0 !important;
    }

    .banner.section,
    .hero.section,
    section.banner {
        padding-top:    120px !important; /* Clears navbar on mobile */
        padding-bottom: 60px !important;
    }

    .section__header {
        margin-bottom: 24px !important;
    }

    .sponsor.section {
        padding-top: var(--space-section-xs) !important;
    }
}