/* Base structural section module.
   Most blocks extend modular/section.html.twig, so these rules stay intentionally
   generic and token-driven for Hermes/local-service reuse. */

.section {
  position: relative;
  padding-block: var(--ds-section-py-lg, 4.25rem);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--scheme-fg, var(--ds-ink, #0e0f0c));
}

.section.section-sm {
  padding-block: var(--ds-space-6, 2rem);
}

.section.section-lg {
  padding-block: var(--ds-space-9, 6rem);
}

.section.py-0 {
  padding-block: 0 !important;
}

.section.light {
  --scheme-bg: var(--ds-paper, #fbf7ef);
  --scheme-fg: var(--ds-ink, #0e0f0c);
  --scheme-fg-soft: var(--ds-ink-soft, #4a4842);
  --scheme-fg-mute: var(--ds-ink-mute, #76736a);
  --scheme-card-bg: #fff;
  background-color: var(--scheme-bg);
}

.section.dark {
  --scheme-bg: var(--ds-steel, #1d2731);
  --scheme-fg: var(--ds-paper, #fbf7ef);
  --scheme-fg-soft: color-mix(in srgb, var(--ds-paper, #fbf7ef) 82%, transparent);
  --scheme-fg-mute: color-mix(in srgb, var(--ds-paper, #fbf7ef) 64%, transparent);
  --scheme-card-bg: color-mix(in srgb, var(--ds-steel, #1d2731) 86%, #fff);
  background-color: var(--scheme-bg);
}

.section > .container,
.section > .container-fluid {
  position: relative;
  z-index: 1;
}

.section-header {
  margin: 0 auto var(--ds-space-6, 2rem);
  max-width: var(--ds-container-md, 980px);
  text-align: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: var(--ds-space-3, .75rem);
  padding: 0 var(--ds-space-3, .75rem);
  border: 1px solid color-mix(in srgb, var(--scheme-fg, #0e0f0c) 16%, transparent);
  border-radius: var(--ds-radius-pill, 999px);
  color: var(--ds-cta-dk, #bb4d0d);
  font-family: var(--ds-font-body, system-ui);
  font-size: var(--ds-fs-eyebrow, .875rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-title :where(h1, h2, h3),
.section-title {
  margin: 0;
  color: var(--scheme-fg, var(--ds-ink, #0e0f0c));
}

.section-subtitle {
  margin: var(--ds-space-4, 1rem) auto 0;
  max-width: 68ch;
  color: var(--scheme-fg-soft, var(--ds-ink-soft, #4a4842));
  font-size: var(--ds-fs-lead, 1.125rem);
  line-height: var(--ds-lh-normal, 1.55);
}

.section-header-divider {
  width: 56px;
  height: 2px;
  margin: var(--ds-space-5, 1.5rem) auto 0;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-cta, #e36218);
}

.trust-badges-inline,
.live-activity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2, .5rem);
  margin-bottom: var(--ds-space-4, 1rem);
}

.trust-badge,
.live-activity {
  min-height: 36px;
  padding: var(--ds-space-2, .5rem) var(--ds-space-3, .75rem);
  border: 1px solid color-mix(in srgb, var(--scheme-fg, #0e0f0c) 12%, transparent);
  border-radius: var(--ds-radius-pill, 999px);
  background: color-mix(in srgb, var(--scheme-card-bg, #fff) 88%, transparent);
  color: var(--scheme-fg-soft, var(--ds-ink-soft, #4a4842));
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 700;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-cta, #e36218);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-cta, #e36218) 18%, transparent);
}

.container-edge-to-edge {
  width: 100%;
  max-width: none;
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--ds-section-py-sm, 2.75rem);
  }

  .section.section-lg {
    padding-block: var(--ds-space-7, 3rem);
  }
}