/* ========================================================= 
   SECTION RHYTHM — VERTICAL SPACING (Engine 4.2)
   ---------------------------------------------------------
   Every direct child of .cs-dashboard-main gets consistent
   vertical rhythm. This is the SINGLE source of truth for
   inter-section spacing across ALL dashboards.

   Applies to:
     • .cs-artist-dashboard .cs-dashboard-main
     • .cs-studio-dashboard .cs-dashboard-main
     • .cs-client-dashboard .cs-dashboard-main
     • any future .cs-*-dashboard

   Individual sections can override with .cs-section--tight
   or .cs-section--loose when needed.
========================================================= */

.cs-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 40px;             /* ← the master rhythm */
}

/* Mobile tighter rhythm */
@media (max-width: 900px) {
    .cs-dashboard-main { gap: 28px; }
}
@media (max-width: 600px) {
    .cs-dashboard-main { gap: 22px; }
}

/* Opt-in tighter variant for closely-paired sections */
.cs-dashboard-main > .cs-section--tight {
    margin-top: -16px;     /* pulls a section closer to its neighbor */
}

/* Opt-in loose variant */
.cs-dashboard-main > .cs-section--loose {
    margin-top: 24px;      /* extra breathing room */
}

/* ── Explicit gaps for known pairs ────────────────────────── */

/* Stats rows always get breathing room from the section above */
.cs-dashboard-main > .cs-stats-row,
.cs-dashboard-main > .cs-artist-stats,
.cs-dashboard-main > .cs-artist-stats-2027,
.cs-dashboard-main > .cs-client-stats {
    margin-top: 0;         /* gap handles it — no double spacing */
    margin-bottom: 8px;    /* slight extra below stats */
}

/* Player section gets extra room below */
.cs-dashboard-main > .cs-artist-player,
.cs-dashboard-main > .cs-artist-player-2027,
.cs-dashboard-main > .cs-player-hub,
.cs-dashboard-main > .cs-client-player {
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Hero always gets extra room below */
.cs-dashboard-main > .cs-dashboard-hero,
.cs-dashboard-main > .cs-hero {
    margin-bottom: 8px;    /* gap adds the rest */
}

/* First child of main should have no top margin */
.cs-dashboard-main > *:first-child {
    margin-top: 0 !important;
}

/* Last child should have no bottom margin */
.cs-dashboard-main > *:last-child {
    margin-bottom: 0 !important;
}