/* =========================================================================
   Component: fm-section
   Full-width page section with optional dark/gray backgrounds.
   ========================================================================= */

.fm-section {
  padding: var(--fm-sp-6) 0;
}

@media (min-width: 992px) {
  .fm-section { padding: var(--fm-sp-7) 0; }
}

.fm-section--gray  { background: var(--fm-bg-alt); }
.fm-section--dark  { background: var(--fm-black); color: var(--fm-gray-200); }
.fm-section--dark h1, .fm-section--dark h2, .fm-section--dark h3 { color: var(--fm-white); }

/* Diagonal gradient variant: #124266 (bottom-left) → black (top-right).
   Same gradient used on the lead banner; full-width when applied here. */
.fm-section--gradient {
  background: linear-gradient(45deg, #124266 0%, #000000 100%);
  color: var(--fm-white);
}
.fm-section--gradient h1,
.fm-section--gradient h2,
.fm-section--gradient h3 { color: var(--fm-white); }
.fm-section--gradient .fm-section__lede { color: var(--fm-gray-200); }

.fm-section__header {
  max-width: 720px;
  margin: 0 auto var(--fm-sp-6);
  text-align: center;
}

.fm-section__header--left { text-align: left; margin-left: 0; }

.fm-section__lede {
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
}
.fm-section--dark .fm-section__lede { color: var(--fm-gray-200); }