/* WPBakery integration layer
 *
 * WHY THIS FILE EXISTS. prose-block and media-text are core `vc_column_text`
 * per the handoff — their copy carries inline links mid-sentence, which a
 * shortcode attribute cannot hold. The consequence is that their OUTER markup
 * belongs to WPBakery, not to the theme:
 *
 *     .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column
 *
 * That chain carries no `.container`. Every theme-rendered section emits one
 * and stops at --container-max; these two did not, so they ran the full
 * viewport width and visibly disagreed with the card grid below them.
 *
 * This file maps WPBakery's chain onto the design's container/section
 * contract. It is deliberately NOT in css/sections/ — those files are
 * byte-identical to the approved design build and are re-synced from the
 * handoff. This one is WordPress plumbing and belongs to the theme.
 *
 * No !important: every selector here is more specific than what it overrides.
 */

/* -- Kill vc_row-fluid's negative gutter -------------------------------
 * WPBakery pairs `margin-inline: -15px` on the row with `padding: 0 15px` on
 * each column, which is Bootstrap's gutter trick. The theme's grid does not
 * use it, so the row simply hangs 15px past the viewport on both sides and
 * the page gets a horizontal scrollbar — measured at scrollWidth 1295 against
 * a clientWidth of 1280. Both halves have to go, not just the margin. */
.vc_row.pblock,
.vc_row.mtext {
  margin-left: 0;
  margin-right: 0;
}

/* -- The container the theme's own sections emit ----------------------- */
.vc_row.pblock > .wpb_column,
.vc_row.mtext > .wpb_column {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  /* Replaces WPBakery's 15px column padding outright, so the content edge
     lands on the same --gutter as every theme-rendered .container. */
  padding-inline: var(--gutter);
  /* WPBakery floats its columns; a float cannot be centred by margin auto. */
  float: none;
}

/* WPBakery moved its 15px gutter onto .vc_column-inner, NOT .wpb_column, so
 * zeroing the column's padding alone leaves the content 15px inboard of every
 * theme-rendered .container — measured at 95px against the card grid's 80px.
 * The padding has to be cleared on the inner div. */
.vc_row.pblock > .wpb_column > .vc_column-inner,
.vc_row.mtext > .wpb_column > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
}

/* vc_single_image wraps the img in <figure> and a .vc_single_image-wrapper,
 * both shrink-to-fit. Without this the image cannot fill its grid column. */
.mtext .wpb_single_image,
.mtext .wpb_single_image .vc_figure,
.mtext .wpb_single_image .vc_single_image-wrapper {
  display: block;
  width: 100%;
}

/* -- media-text's two-up grid ------------------------------------------
 * The grid lives on the INNERMOST wrapper. Put it on the column and it has
 * exactly one child (.vc_column-inner), so nothing sits side by side. */
.vc_row.mtext--inner > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: var(--space-md);
  align-items: start;
}

/* WPBakery gives its elements a bottom margin; the grid owns spacing here. */
.vc_row.mtext--inner .wpb_content_element,
.vc_row.pblock .wpb_content_element {
  margin-bottom: 0;
}

.mtext .wpb_single_image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* -- prose-block spacing ------------------------------------------------
 * wpautop wraps the eyebrow in its own <p>. The eyebrow is an inline-flex
 * pill, so the paragraph is what carries the gap beneath it. */
.pblock .wpb_text_column > .wpb_wrapper > *:first-child { margin-top: 0; }
.pblock__heading-wrap p { margin-bottom: var(--space-2xs); }

@media (max-width: 992px) {
  .vc_row.mtext--inner > .wpb_column > .vc_column-inner > .wpb_wrapper {
    grid-template-columns: 1fr;
  }
  .mtext .wpb_single_image img { max-width: 32rem; }
}

/* -- Paragraph rhythm inside imported prose -----------------------------
 * THE BUG THIS FIXES: prose-block.css says
 *
 *     .pblock__body > * + * { margin-top: var(--space-xs); }
 *
 * which is correct for the static build, where the paragraphs ARE the direct
 * children. Under WPBakery they are not: `.pblock__body` lands on
 * `.wpb_text_column`, which wraps everything in its own `.wpb_wrapper`. So
 * `> * + *` matched exactly one element — the wrapper — and every paragraph
 * on every imported page ran together with ZERO margin between them.
 *
 * Measured before this rule: visual gap between consecutive <p> = 0px.
 *
 * Restated one level down. Scoped to the WPBakery wrapper so the static
 * build's own rule is untouched and the two cannot double up.
 */
.pblock__body > .wpb_wrapper > * + *,
.mtext__body > .wpb_wrapper > * + * {
  margin-top: var(--space-xs);
}

/* Headings need more room above than a paragraph does, and none of it when
 * they open the block. */
.pblock__body > .wpb_wrapper > :is(h2, h3, h4) + *,
.mtext__body > .wpb_wrapper > :is(h2, h3, h4) + * {
  margin-top: var(--space-2xs);
}
.pblock__body > .wpb_wrapper > :first-child,
.mtext__body > .wpb_wrapper > :first-child {
  margin-top: 0;
}

/* Lists carried over from the old site arrive unstyled — the design's reset
 * strips list markers, and the old theme supplied its own. */
.pblock__body > .wpb_wrapper ul,
.mtext__body > .wpb_wrapper ul {
  padding-left: 1.25em;
  list-style: disc;
}
.pblock__body > .wpb_wrapper ol,
.mtext__body > .wpb_wrapper ol {
  padding-left: 1.35em;
  list-style: decimal;
}
.pblock__body > .wpb_wrapper li + li {
  margin-top: var(--space-3xs);
}

/* -- Prose runs the full container -------------------------------------
 * Rob 2026-08-22. The 72ch measure was centred, which read as a narrow column
 * with a wide empty gutter either side. Copy now fills the container.
 *
 * This overrides base.css's `.prose { max-width: var(--content-max) }` rather
 * than editing it, so assets/css/sections/ and base.css stay byte-identical to
 * the handoff and can still be re-synced.
 *
 * Trade-off, recorded rather than argued: at 1440 this puts body copy at
 * roughly 150 characters a line, which is what the original mockup did and
 * what --content-max was introduced to shorten. Rob's call.
 */
.prose { max-width: 100%; }

/* In the split layout the media column is 34% and the prose 66%; neither
 * should carry its own cap on top of that. */
.vc_row.mtext--inner .pblock__body { max-width: none; }