/* ============================================================================
 * Global Section System — headers, content wrappers, splits, CTA banners.
 *
 * Works alongside the .wb-section vertical-rhythm class in _container.css.
 *
 *   .wb-section-header                → eyebrow + heading + lead trio
 *   .wb-section-header--center        → centred alignment
 *   .wb-section-header--inline        → header sits next to content (lg+)
 *
 *   .wb-split                         → two-column responsive content/media split
 *   .wb-split--reverse                → flip image side on lg+
 *
 *   .wb-cta-band                      → full-width CTA block with optional dark variant
 * ========================================================================== */

/* Section header ----------------------------------------------------------- */
.wb-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  max-width: 720px;
  margin-bottom: var(--wb-space-8);
}
.wb-section-header__eyebrow {
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  letter-spacing: var(--wb-ls-wide);
  text-transform: uppercase;
  color: var(--wb-color-brand);
  margin: 0;
}
.wb-section-header__title {
  font-size: var(--wb-h2);
  font-weight: var(--wb-fw-bold);
  line-height: var(--wb-lh-tight);
  letter-spacing: var(--wb-ls-tight);
  color: var(--wb-color-ink);
  margin: 0;
  text-wrap: balance;
}
.wb-section-header__lead {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
  margin: 0;
  max-width: 60ch;
}
.wb-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
  margin-top: var(--wb-space-2);
}

.wb-section-header--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.wb-section-header--center .wb-section-header__lead { margin-inline: auto; }

@media (min-width: 1024px) {
  .wb-section-header--inline {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    max-width: none;
    gap: var(--wb-space-7);
  }
  .wb-section-header--inline > * { max-width: 60ch; }
}

/* Dark surface variant inside .wb-section--ink ----------------------------- */
.wb-section--ink .wb-section-header__title { color: var(--wb-color-white); }
.wb-section--ink .wb-section-header__lead  { color: var(--wb-color-text-soft); }
.wb-section--ink .wb-section-header__eyebrow {
  color: color-mix(in srgb, var(--wb-color-brand) 80%, white 20%);
}

/* Split layout ------------------------------------------------------------- */
.wb-split {
  display: grid;
  gap: var(--wb-space-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .wb-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--wb-space-10);
  }
  .wb-split--7-5 { grid-template-columns: 7fr 5fr; }
  .wb-split--5-7 { grid-template-columns: 5fr 7fr; }
  .wb-split--reverse > :first-child { order: 2; }
}

.wb-split__media {
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  background: var(--wb-color-bg-muted);
  aspect-ratio: 4 / 3;
}
.wb-split__media img,
.wb-split__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-4);
}

/* CTA band ----------------------------------------------------------------- */
.wb-cta-band {
  display: grid;
  gap: var(--wb-space-5);
  align-items: center;
  padding: var(--wb-space-8) var(--wb-space-6);
  background: var(--wb-color-bg-soft);
  border: var(--wb-border-width) solid var(--wb-color-border-soft);
  border-radius: var(--wb-radius-xl);
}
@media (min-width: 768px) {
  .wb-cta-band {
    grid-template-columns: 1fr auto;
    padding: var(--wb-space-9) var(--wb-space-8);
  }
}

.wb-cta-band__title {
  font-size: var(--wb-h3);
  font-weight: var(--wb-fw-bold);
  letter-spacing: var(--wb-ls-tight);
  line-height: var(--wb-lh-tight);
  color: var(--wb-color-ink);
  margin: 0 0 var(--wb-space-2);
}
.wb-cta-band__body {
  color: var(--wb-color-text-muted);
  margin: 0;
  max-width: 56ch;
}
.wb-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
}

.wb-cta-band--ink {
  background: var(--wb-color-ink);
  border-color: transparent;
  color: var(--wb-color-white);
}
.wb-cta-band--ink .wb-cta-band__title { color: var(--wb-color-white); }
.wb-cta-band--ink .wb-cta-band__body  { color: var(--wb-color-text-soft); }

/* Stats row ---------------------------------------------------------------- */
.wb-stats {
  display: grid;
  gap: var(--wb-space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .wb-stats { grid-template-columns: repeat(4, 1fr); }
}
.wb-stat {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-1);
}
.wb-stat__value {
  font-size: clamp(2rem, 2vw + 1.5rem, 3rem);
  font-weight: var(--wb-fw-bold);
  letter-spacing: var(--wb-ls-tight);
  line-height: 1;
  color: var(--wb-color-ink);
}
.wb-stat__label {
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-stat__value { color: var(--wb-color-white); }
.wb-section--ink .wb-stat__label { color: var(--wb-color-text-soft); }