/**
 * Section design tokens — applied via data-section-key + CSS variables from admin editor.
 * Per-section vars match legacy main.css naming (--hero-*, --programs-*, etc.).
 */

/* Scope section spacing to the section element only — child nodes also carry data-section-key for the editor */
section.hero-section[data-section-key="hero"] {
  min-height: var(--hero-min-height-desktop, inherit);
  padding-top: var(--hero-padding-top-desktop, inherit);
  padding-bottom: var(--hero-padding-bottom-desktop, inherit);
  /* NOTE: do not redefine --hero-* vars here. A self-referential
     declaration like `--hero-title-size-desktop: var(--hero-title-size-desktop)`
     creates a CSS cycle that invalidates the variable on the whole hero
     subtree, which silently blocked the admin hero typography settings. */
}

section.hero-section[data-section-key="hero"] .hero-title {
  font-size: var(--hero-title-size-desktop, inherit);
  font-weight: var(--hero-title-weight, inherit);
  line-height: var(--hero-title-line-height, inherit);
  letter-spacing: var(--hero-title-letter-spacing, inherit);
  max-width: var(--hero-title-max-width, inherit);
  color: var(--hero-title-color, inherit);
  text-align: var(--hero-text-align-desktop, inherit);
}

section.hero-section[data-section-key="hero"] .hero-text {
  font-size: var(--hero-text-size-desktop, inherit);
  line-height: var(--hero-text-line-height, inherit);
  font-weight: var(--hero-text-weight, inherit);
  max-width: var(--hero-text-max-width, inherit);
  color: var(--hero-text-color, inherit);
}

section.hero-section[data-section-key="hero"] .hero-content {
  max-width: var(--hero-content-max-width, var(--hero-content-width, var(--text-wide, 920px)));
  align-items: var(--hero-content-align-desktop, center);
  gap: var(--hero-content-gap, clamp(14px, 2.2vw, 20px));
}

[data-section-key="programs"] {
  --programs-grid-gap: var(--programs-card-gap, inherit);
}

[data-section-key="programs"] .programs-grid {
  gap: var(--programs-card-gap, inherit);
}

@media (max-width: 760px) {
  section.hero-section[data-section-key="hero"] {
    min-height: var(--hero-min-height-mobile, inherit);
    padding-top: var(--hero-padding-top-mobile, var(--hero-padding-top-desktop, inherit));
    padding-bottom: var(--hero-padding-bottom-mobile, var(--hero-padding-bottom-desktop, inherit));
  }

  section.hero-section[data-section-key="hero"] .hero-title {
    font-size: var(--hero-title-size-mobile, inherit);
    text-align: var(--hero-text-align-mobile, inherit);
  }

  section.hero-section[data-section-key="hero"] .hero-text {
    font-size: var(--hero-text-size-mobile, inherit);
  }

  section.hero-section[data-section-key="hero"] .hero-content {
    align-items: var(--hero-content-align-mobile, inherit);
  }
}