/* _section.css — Section block BEM */

/* ── Base section ──────────────────────────────────────────────────────────── */
.block--section {
  padding: var(--pad-section-desktop) var(--pad-x-mobile);
}

@media (min-width: 768px) {
  .block--section {
    padding: var(--pad-section-large) var(--pad-x-desktop);
  }
}

/* ── Background variants ──────────────────────────────────────────────────── */
.block--section-prose {
  background: #ffffff;
}

.block--section-centered {
  background: var(--color-stone-50);
}

/* background=muted attribute on section block → stone-50 (alternating with white) */
.block--section-bg-muted {
  background: var(--color-stone-50);
}

/* background=dark → teal-900, light text (used for services/pathways section) */
.block--section-bg-dark {
  background: var(--color-teal-900);
}

.block--section-bg-dark .block__eyebrow {
  color: var(--color-teal-400);
}

.block--section-bg-dark .block__title {
  color: #ffffff;
}

.block--section-bg-dark .block__subtitle {
  color: var(--color-teal-100);
  opacity: 0.85;
}

.block--section-bg-dark .block__note {
  color: var(--color-teal-400);
}

/* CTA on a dark background: white with teal-900 text */
.block--section-bg-dark .cta--primary {
  background: #ffffff;
  color: var(--color-teal-900);
  border-color: #ffffff;
}

.block--section-bg-dark .cta--primary:hover {
  background: var(--color-teal-100);
  border-color: var(--color-teal-100);
}

/* ── Containers ───────────────────────────────────────────────────────────── */
.block__container {
  max-width: var(--max-prose);
  margin: 0 auto;
}

.block__container--wide {
  max-width: var(--max-content);
  margin: 0 auto;
}

.block__container--medium {
  max-width: 48rem;
  margin: 0 auto;
}

/* ── Section header elements ──────────────────────────────────────────────── */
.block__eyebrow {
  margin-bottom: 2rem;
}

/* Centered header wrapper (used in continuum) */
.block__header {
  text-align: center;
  margin-bottom: 3rem;
}

.block__header .block__eyebrow {
  margin-bottom: 1rem;
}

.block__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--color-stone-800);
  margin: 0.5rem 0 1rem;
}

@media (min-width: 768px) {
  .block__title {
    font-size: 1.875rem;
  }
}

.block__subtitle {
  color: var(--color-stone-500);
  font-size: 1rem;
}

/* ── CTA wrap (used inside sections) ─────────────────────────────────────── */
.block__cta-wrap {
  text-align: center;
  margin-top: 1.5rem;
}

.block__note {
  font-size: 0.875rem;
  color: var(--color-stone-400);
  margin-top: 1rem;
}