/* ========================================
   Utilities & Component Helpers
   ======================================== */

/* Section padding helpers */
.page-section {
  --section-pad-desktop: var(--section-padding-desktop, 120px);
  --section-pad-tablet: var(--section-padding-tablet, 80px);
  --section-pad-mobile: var(--section-padding-mobile, 60px);
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
}

.section--xs {
  --section-pad-desktop: calc(var(--section-padding-desktop, 120px) * 0.5);
  --section-pad-tablet: calc(var(--section-padding-tablet, 80px) * 0.5);
  --section-pad-mobile: calc(var(--section-padding-mobile, 60px) * 0.5);
}

.section--sm {
  --section-pad-desktop: calc(var(--section-padding-desktop, 120px) * 0.75);
  --section-pad-tablet: calc(var(--section-padding-tablet, 80px) * 0.75);
  --section-pad-mobile: calc(var(--section-padding-mobile, 60px) * 0.75);
}

.section--lg {
  --section-pad-desktop: calc(var(--section-padding-desktop, 120px) * 1.25);
  --section-pad-tablet: calc(var(--section-padding-tablet, 80px) * 1.1);
  --section-pad-mobile: calc(var(--section-padding-mobile, 60px) * 1.05);
}

.section--xl {
  --section-pad-desktop: calc(var(--section-padding-desktop, 120px) * 1.45);
  --section-pad-tablet: calc(var(--section-padding-tablet, 80px) * 1.25);
  --section-pad-mobile: calc(var(--section-padding-mobile, 60px) * 1.1);
}

.section--flush {
  --section-pad-desktop: 0px;
  --section-pad-tablet: 0px;
  --section-pad-mobile: 0px;
}

@media (max-width: 960px) {
  .page-section {
    padding-top: var(--section-pad-tablet);
    padding-bottom: var(--section-pad-tablet);
  }
}

@media (max-width: 768px) {
  .page-section {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }
}

/* Vertical stacks */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--spacing-md, 24px));
}

.stack--sm {
  --stack-gap: var(--spacing-sm, 16px);
}

.stack--lg {
  --stack-gap: var(--spacing-lg, 32px);
}

/* Width helpers */
.max-w-narrow {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.max-w-wide {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Typography helpers */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green, #287379);
  margin-left: 0;
}

.text-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-dim, #7a7a7b);
}

.text-muted {
  color: var(--color-text-dim, #7a7a7b);
}

.align-center {
  text-align: center;
}

.align-center .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* Badges */
.badge,
.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: rgba(40, 115, 121, 0.1);
  color: var(--d-green, #287379);
}

.badge--neutral {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-main, #000);
}

.badge--accent {
  background: rgba(206, 220, 0, 0.2);
  color: #5a6600;
}

/* Utility button group */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}