/* =============================================================================
   SECTION SPACING COMPONENT
   Purely visual vertical spacer based on the 8px spacing scale.
   ============================================================================= */

.section-spacing {
    width: 100%;
    display: block;
    /* Ensure the spacer doesn't inadvertently clip adjacent elements */
    overflow: visible;
}

/* --- Base Heights --- */
.section-spacing--xs   { height: 4px; }
.section-spacing--sm   { height: 8px; }
.section-spacing--md   { height: 16px; }
.section-spacing--lg   { height: 24px; }
.section-spacing--xl   { height: 32px; }
.section-spacing--xxl  { height: 48px; }
.section-spacing--xxxl { height: 64px; }
.section-spacing--hero { height: 80px; }
.section-spacing--max  { height: 96px; }

/* =============================================================================
   Responsive Scaling
   ============================================================================= */

/* Tablet (Max 1023px) — Step down sizes >= 64px */
@media screen and (max-width: 1023px) {
    .section-spacing--responsive.section-spacing--xxxl { 
        height: 48px; 
    }
    .section-spacing--responsive.section-spacing--hero { 
        height: 64px; 
    }
    .section-spacing--responsive.section-spacing--max { 
        height: 80px; 
    }
}

/* Mobile (Max 639px) — Step down sizes >= 32px */
@media screen and (max-width: 639px) {
    .section-spacing--responsive.section-spacing--xl { 
        height: 16px; 
    }
    .section-spacing--responsive.section-spacing--xxl { 
        height: 24px; 
    }
    .section-spacing--responsive.section-spacing--xxxl { 
        height: 32px; 
    }
    .section-spacing--responsive.section-spacing--hero { 
        height: 48px; 
    }
    .section-spacing--responsive.section-spacing--max { 
        height: 64px; 
    }
}