/* Spacing Optimization - Reduce excessive vertical whitespace
 * Updated: January 6, 2026
 * Purpose: Better utilize page real estate by reducing gaps between sections
 */

/* ===== MAIN CONTAINER & SECTION SPACING ===== */

main {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}

/* Remove top padding when page starts with hero or is a dashboard */
main:has(.page-hero),
main:has(.homepage-hero),
main:has(.hero),
main:has(.dashboard-header),
.page-hero:first-child,
.homepage-hero:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

section {
  padding: var(--space-md) 0 !important;
}

section.card {
  padding: var(--space-3) !important;
}

section:first-child {
  padding-top: var(--space-md) !important;
}

section:last-child {
  padding-bottom: var(--space-md) !important;
}

/* Reduce gap between generic sections */
main > * + * {
  margin-top: var(--space-sm) !important;
}

/* ===== CONTENT BOX SPACING ===== */

.content-section,
.section-box,
article {
  margin-bottom: var(--space-md) !important;
}

/* ===== HEADING & TEXT RELATIONSHIPS ===== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0 !important;
  margin-bottom: var(--space-2) !important;
}

h1 + p,
h2 + p,
h3 + p {
  margin-top: var(--space-1) !important;
}

h1 + h2,
h2 + h3,
h3 + h4 {
  margin-top: var(--space-1) !important;
}

.section-title {
  margin-bottom: var(--space-2) !important;
}

/* ===== HERO SECTION SPECIFIC ===== */

.page-hero {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
  margin-bottom: var(--space-md) !important;
}

.page-hero h1 {
  margin-bottom: var(--space-2) !important;
}

/* ===== CARD & BOX SPACING ===== */

.card {
  padding: var(--space-3) !important;
  margin-bottom: var(--space-md) !important;
}

.card:last-child {
  margin-bottom: 0 !important;
}

/* Reduce internal card spacing */
.card h3, .card h4 {
  margin-bottom: var(--space-1) !important;
}

.card p {
  margin-bottom: var(--space-2) !important;
}

/* ===== GRID GAP OPTIMIZATION ===== */

.grid,
.grid-2,
.grid-3,
.grid-4 {
  gap: var(--space-md) !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  main {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }

  section {
    padding: var(--space-sm) 0 !important;
  }

  .page-hero {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }
}