/* ─────────────────────────────────────────────────────────────────
   Block: section-with-raw — markdown + raw HTML two-column block (T9)
   ----------------------------------------------------------------
   - Text column max-width 60ch.
   - Raw column receives no defensive styling — it brings its own.
   - Tokens: --ds-cta, --ds-accent, --ds-paper, --ds-ink,
             --ds-font-heading, --ds-font-body, --ds-space-*.
   ───────────────────────────────────────────────────────────── */

.block-section-with-raw {
  font-family: var(--ds-font-body);
  color: var(--scheme-fg);
}

.block-section-with-raw__row { align-items: center; gap: var(--ds-space-6) 0; }

/* Text column ----------------------------------------------------- */
.block-section-with-raw__text {
  font-family: var(--ds-font-body);
}

/* Senior-UX (T5 2026-05-07): floor 18px @ 1.6, widen measure to 70ch
   (was clamp 16-18px / 60ch — under presbyopia floor at small viewports). */
.block-section-with-raw .content-prose {
  max-width: 70ch;
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--scheme-fg-soft, var(--ds-ink));
}
@media (min-width: 992px) {
  .block-section-with-raw .content-prose {
    font-size: clamp(1.125rem, calc(1rem + 0.4vw), 1.25rem);
  }
}

.block-section-with-raw .content-prose h1,
.block-section-with-raw .content-prose h2,
.block-section-with-raw .content-prose h3,
.block-section-with-raw .content-prose h4 {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  color: var(--scheme-fg, var(--ds-ink));
  letter-spacing: 0.005em;
  margin: 1.4em 0 0.5em;
  line-height: 1.15;
  text-transform: uppercase;
}
.block-section-with-raw .content-prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  position: relative;
  padding-bottom: 0.3em;
}
.block-section-with-raw .content-prose h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  position: relative;
  padding-bottom: 0.25em;
}
/* Senior-UX (T5 2026-05-07): h4 humane sentence-case (DM Sans) — older
   readers lose word-shape cues under all-caps. */
.block-section-with-raw .content-prose h4 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-h4, 1.25rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--ds-lh-display, 1.2);
  margin: 1.4em 0 0.4em;
}
.block-section-with-raw .content-prose h2::after,
.block-section-with-raw .content-prose h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 14rem;
  height: 3px;
  background: var(--ds-accent, var(--ds-cta));
  border-radius: 2px;
}

.block-section-with-raw .content-prose p {
  font-family: var(--ds-font-body);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--scheme-fg-soft, var(--ds-ink));
  margin: 0 0 1.1em;
}

.block-section-with-raw .content-prose ul,
.block-section-with-raw .content-prose ol {
  margin: 0 0 1.1em 1.5em;
  padding-left: 0;
  color: var(--scheme-fg-soft);
}
.block-section-with-raw .content-prose li {
  margin-bottom: 0.5em;
  line-height: var(--ds-lh-body, 1.6);
}

.block-section-with-raw .content-prose strong { color: var(--scheme-fg); font-weight: 700; }

/* Senior-UX (T5 2026-05-07): underline body links thicker for older
   eyes — color-only differentiation fails under colour-vision decline. */
.block-section-with-raw .content-prose a {
  color: var(--ds-cta);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.block-section-with-raw .content-prose a:hover { color: var(--ds-cta-dk, var(--ds-cta)); }

.block-section-with-raw .content-prose blockquote {
  margin: 1.4em 0;
  padding: var(--ds-space-3) var(--ds-space-5);
  border-left: 4px solid var(--ds-accent, var(--ds-cta));
  background: var(--scheme-card-bg);
  color: var(--scheme-fg);
  font-family: var(--ds-font-serif, Georgia, serif);
  font-style: italic;
  border-radius: var(--ds-radius-sm, 4px);
}

/* Raw HTML column ------------------------------------------------ */
.block-section-with-raw__raw {
  font-family: var(--ds-font-body);
  /* The raw HTML brings its own internal padding/margins.
     We only ensure overflow is contained on small viewports. */
  min-width: 0;
}
.block-section-with-raw__raw img,
.block-section-with-raw__raw video,
.block-section-with-raw__raw iframe,
.block-section-with-raw__raw dotlottie-player {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .block-section-with-raw .col-lg-4,
  .block-section-with-raw .col-lg-5,
  .block-section-with-raw .col-lg-6,
  .block-section-with-raw .col-lg-7,
  .block-section-with-raw .col-lg-8 {
    margin-bottom: var(--ds-space-5);
  }
  .block-section-with-raw .col-lg-4:last-child,
  .block-section-with-raw .col-lg-5:last-child,
  .block-section-with-raw .col-lg-6:last-child,
  .block-section-with-raw .col-lg-7:last-child,
  .block-section-with-raw .col-lg-8:last-child {
    margin-bottom: 0;
  }
}

/* ── Bug fix 2026-05-07-bugs (T5): defensive guard against the global
   `#features ul li::before` checkmark rule in theme.min.css. The
   .content-prose column renders markdown `<ul>` lists. The raw column
   pastes verbatim HTML which often includes lists too. ── */
.block-section-with-raw ul li::before,
.block-section-with-raw .content-prose ul li::before,
.block-section-with-raw .content-prose ol li::before,
.block-section-with-raw__raw ul li::before {
  content: none !important;
  background: none !important;
  display: none !important;
}
/* Containment for raw column code/pre on small viewports. */
.block-section-with-raw__raw pre,
.block-section-with-raw__raw code {
  max-width: 100%;
  overflow-x: auto;
}

/* ── Validate-2026-05-08 defensive hardening: prevent wide author content from breaking out. ── */
.block-section-with-raw__raw,
.block-section-with-raw .raw-content,
.section-with-raw .raw-content {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.block-section-with-raw__raw img,
.block-section-with-raw__raw video,
.block-section-with-raw__raw iframe,
.block-section-with-raw__raw table {
  max-width: 100%;
  height: auto;
}
.block-section-with-raw__raw table,
.block-section-with-raw .raw-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Senior-UX text floor (W2-T10 / 2026-05-08) ────────────────────
   Audit: 'Live Gantt — sample' rendered at 12px (0.75rem inline
   style in page md). Override inline style so all text in this
   block respects the 16px senior floor. */
.block-section-with-raw p[style*="font-size"],
.block-section-with-raw .content-prose p[style*="font-size"] {
  font-size: var(--ds-fs-body-sm, 1rem) !important;
}