/* ============================================================
   CREATIVE AGENCY X — GLOBAL SITE LAYOUT RHYTHM
   ============================================================

   PURPOSE
   -------
   One consistent amount of breathing room between TOP-LEVEL
   content sections.

   This does NOT change:
   - section internal padding
   - section heights
   - typography
   - component grids
   - header/footer
   - nested panels/cards
   - database rendering

   The spacing is intentionally moderate:
   enough to separate sections without making the homepage feel
   fragmented or excessively long.
   ============================================================ */

:root {
    /*
     * Desktop:
     * ~34px around 1366px wide
     * ~38px around 1536px wide
     * capped at 44px on large screens
     */
    --site-section-gap: clamp(28px, 2.5vw, 44px);
}

/*
 * Apply only between direct child sections of the main content.
 *
 * This is important:
 * nested <section> elements inside components are NOT affected.
 */
.cax-site-main > section + section {
    margin-block-start: var(--site-section-gap);
}

/*
 * Tablet:
 * keep clear separation, but avoid wasting vertical space.
 */
@media (max-width: 900px) {
    :root {
        --site-section-gap: clamp(24px, 3.8vw, 32px);
    }
}

/*
 * Mobile:
 * 22–26px feels deliberate without creating long empty stretches.
 */
@media (max-width: 600px) {
    :root {
        --site-section-gap: clamp(22px, 6vw, 26px);
    }
}