/* ============================================================
   Section Component
   ------------------------------------------------------------
   Structural wrapper for page blocks.
   Controls spacing and visual theme via CSS variables.

   Usage:
     <section class="section section--dark">
     <section class="section section--light">
     <section class="section section--white">
     <section class="section section--accent">
     <section class="section section--compact">
   ============================================================ */

/* ------------------------------------------------------------
   Base Section
   ------------------------------------------------------------ */

.section {
  width: 100%;
  padding: var(--space-xxl) 0;

  /* Theme variables (fallbacks) */
  --section-bg: transparent;
  --section-color: inherit;

  background-color: var(--section-bg);
  color: var(--section-color);
}

/* ------------------------------------------------------------
   Theme Variants
   ------------------------------------------------------------ */

/* Dark (default for navy body) */
.section--dark {
  --section-bg: transparent;
  --section-color: var(--tx-white);
}

/* Light gray background */
.section--light {
  --section-bg: var(--tx-gray-light);
  --section-color: var(--tx-navy);
}

/* Pure white background */
.section--white {
  --section-bg: var(--tx-white);
  --section-color: var(--tx-navy);
}

/* Accent (future promo / CTA blocks) */
.section--accent {
  --section-bg: var(--tx-red);
  --section-color: var(--tx-white);
}

/* ------------------------------------------------------------
   Density Modifiers
   ------------------------------------------------------------ */

.section--compact {
  padding: var(--space-lg) 0;
}

.section--spacious {
  padding: var(--space-xxxl) 0;
}

/* ------------------------------------------------------------
   Content Behavior
   ------------------------------------------------------------ */

/* Ensure links inherit section color unless overridden */
/*.section a {
  color: inherit;
}*/

.section-title {
  text-align: center;
  margin: 0 auto var(--space-md);
  letter-spacing: 0.02em;
}

.section-epigraph {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  font-size: 1.1rem;
  opacity: 0.8;
}