/* ============================================================
   .section-pad — proposed canonical section padding ladder (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the 28+ usages of `padding: var(--section-padding-y*) 0` on
   per-page section selectors across:
     style.css                  .section / .section-tight / .section-loose
     tools.css                  .tools-content-section / .tools-related-section / ...
     education.css              .audience-section / .module-grid-section / ...
     locations.css              .locations-why-section / .locations-directory-section / ...
     pricing.css                various
     product-news.css           .product-news-section / ...
     privacy.css                .privacy-section
     location-detail.css        .location-detail-header

   Single base + four-step size ladder + two flag modifiers + a CSS-var
   escape hatch for mixed asymmetry.

   Slots:
     .section-pad                base; default size = md (--section-padding-y, 64px)

   Size modifiers (override default top + bottom together):
     --xs       var(--space-xl)              32px
     --sm       var(--section-padding-y-tight)  48px
     --md       var(--section-padding-y)        64px (= default; alias for explicitness)
     --lg       var(--section-padding-y-loose)  96px

   Asymmetry flags:
     --no-top     padding-top: 0
     --no-bottom  padding-bottom: 0

   Mixed-size asymmetry (e.g. md top + sm bottom):
     <section class="section-pad section-pad--md"
              style="--section-pad-bottom: var(--space-2xl);">
     Set the size class for the larger side, then override the smaller
     one inline. Avoids a 16-modifier API for a rare shape.

   Mobile (≤768px): all step sizes collapse to var(--space-2xl) (48px) —
   matches the existing style.css mobile rule for .section / -tight / -loose.
   ============================================================ */

.section-pad {
    padding-top: var(--section-pad-top, var(--section-padding-y));
    padding-bottom: var(--section-pad-bottom, var(--section-padding-y));
}

.section-pad--xs {
    --section-pad-top: var(--space-xl);
    --section-pad-bottom: var(--space-xl);
}

.section-pad--sm {
    --section-pad-top: var(--section-padding-y-tight);
    --section-pad-bottom: var(--section-padding-y-tight);
}

.section-pad--md {
    --section-pad-top: var(--section-padding-y);
    --section-pad-bottom: var(--section-padding-y);
}

.section-pad--lg {
    --section-pad-top: var(--section-padding-y-loose);
    --section-pad-bottom: var(--section-padding-y-loose);
}

.section-pad--no-top {
    --section-pad-top: 0;
}

.section-pad--no-bottom {
    --section-pad-bottom: 0;
}

@media (max-width: 768px) {
    .section-pad {
        --section-pad-top: var(--space-2xl);
        --section-pad-bottom: var(--space-2xl);
    }

    .section-pad--no-top {
        --section-pad-top: 0;
    }

    .section-pad--no-bottom {
        --section-pad-bottom: 0;
    }
}