/*
 * blog-single-body.css — Toro Legal Marketing
 * Figma node: 383:1234 (right column of article)
 *
 * Article-body typography + layout. Owns the prose styles + the
 * three article-specific surfaces:
 *   1. Overview callout (branded CSS gradient bg, dark pill chip)
 *   2. Pull-quote card (cream surface, Halant 20)
 *   3. Numbered sub-section header (42px circle + h3 inline)
 *
 * The 2-column page grid (rail + article) lives in
 * preview-blog-single.html inline so it can use the existing
 * .tlm-container width. This file styles only the article column.
 *
 * Anchor IDs (#overview, #question, etc.) match the rail TOC + the
 * mobile bottom-dock's IntersectionObserver targets.
 * scroll-margin-top: 152px on each so anchor jumps clear the navbar.
 */

.blog-single-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;          /* prevents long URLs from blowing the grid track */
}

/* Anchor scroll-offset (clears navbar @ 100px + breathing). */
.blog-single-body :is(h2, h3, section)[id] {
  scroll-margin-top: 152px;
}

/* ============================================
 * Overview callout
 * ============================================ */

.blog-single-body__overview {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  /* Single brand-accent wash, knocked right back over white so body
     text reads as cleanly as on plain white. The accent gradient
     (pink → orange) is the same one used for heading-word fills, so
     the callout stays on-brand without introducing bespoke colour
     literals. ~8% opacity keeps it a hint, not a panel.
     Per [[feedback_figma_asset_pipeline]]: prefer CSS for soft glows. */
  background-color: var(--color-white);
  background-image: var(--gradient-accent);
}

/* The accent gradient is opaque; the wrapper above paints it at low
   strength via an overlay. Kept as a separate layer so the radius +
   overflow clip it cleanly. */
.blog-single-body__overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  opacity: 0.92;
  pointer-events: none;
}

.blog-single-body__overview > * {
  position: relative;
}

.blog-single-body__overview-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

.blog-single-body__overview-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

/* WYSIWYG output: paragraphs, lists and inline marks share the lede
   styling. Lists get standard indent + tight item rhythm. */
.blog-single-body__overview-lede > * {
  margin: 0;
}

.blog-single-body__overview-lede > * + * {
  margin-top: var(--space-sm);
}

.blog-single-body__overview-lede ul,
.blog-single-body__overview-lede ol {
  padding-left: 1.25em;
}

.blog-single-body__overview-lede li + li {
  margin-top: var(--space-2xs, 4px);
}

.blog-single-body__overview-lede a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ============================================
 * Prose — core Gutenberg block styling
 * ============================================
 * the_content() emits core block markup directly into .blog-single-body,
 * so we scope to descendant selectors instead of a __prose wrapper.
 * The_content() output sits inside the article container; the existing
 * flex `gap` on .blog-single-body handles block-to-block rhythm.
 *
 * Paragraph rhythm: paragraphs reset their default browser margins so
 * the flex gap on .blog-single-body controls the spacing between blocks.
 */
.blog-single-body > p,
.blog-single-body > ul,
.blog-single-body > ol,
.blog-single-body > .wp-block-image,
.blog-single-body > .wp-block-quote,
.blog-single-body > .wp-block-pullquote,
.blog-single-body > .wp-block-separator {
  margin: 0;
}

/* Body paragraph + list typography. 16 mobile → 18 tablet+,
   leading-relaxed. Body prose sits at navy-muted (80%) so inline
   links — bare <a>, full navy via base.css — read slightly darker
   than the surrounding text, matching the speaker-page "Referred"
   treatment. Underline still appears on hover. */
.blog-single-body p,
.blog-single-body li {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
}

@media (min-width: 768px) {
  .blog-single-body p,
  .blog-single-body li {
    font-size: var(--text-lg);
  }
}

/* Lists — standard indent, tight item rhythm. */
.blog-single-body ul,
.blog-single-body ol {
  padding-left: 1.25em;
}

.blog-single-body li + li {
  margin-top: var(--space-2xs);
}

/* Prose links — no at-rest underline. Body prose is navy-muted so the
   full-navy link reads slightly darker; base.css adds the underline on
   hover. Keep underline-offset for that hover state. */
.blog-single-body p a,
.blog-single-body li a {
  text-underline-offset: 0.15em;
}

/* Headings — Halant serif, navy. Both core blocks and raw <h2>..<h6>
   covered. Note: core emits .wp-block-heading on EVERY level, so we
   tag-scope the size/line-height rules per level. */
.blog-single-body h2,
.blog-single-body h3,
.blog-single-body h4,
.blog-single-body h5,
.blog-single-body h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  color: var(--color-navy);
  margin: 0;
}

.blog-single-body h2 {
  font-size: var(--text-h4-mobile);          /* 28px mobile, 32px desktop (see media query) */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.blog-single-body h3 {
  font-size: var(--text-2xl);                /* 24px */
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
}

/* H4 — Halant 20, sits just above body. H5 + H6 fold to the same
   visual treatment (defensive: if an author picks them, output stays
   legible). Sans-serif weight bump distinguishes from body when an
   article actually nests this deep. */
.blog-single-body h4,
.blog-single-body h5,
.blog-single-body h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);                 /* 20px */
  line-height: var(--leading-normal);
  letter-spacing: -0.01em;
  color: var(--color-navy);
  text-transform: none;
}

/* Inline marks — strong + em inherit colour, just shift weight/style. */
.blog-single-body strong {
  font-weight: var(--weight-bold);
}

.blog-single-body em {
  font-style: italic;
}

/* Horizontal separator — hairline, full column width. */
.blog-single-body hr,
.blog-single-body .wp-block-separator {
  height: 1px;
  background: var(--color-navy-divider);
  border: 0;
  margin: 0;
}

/* ============================================
 * Question Callout block (custom: tlm/question-callout)
 * ============================================
 * Cousin of the Overview callout — cream surface, navy chip, inner
 * content stacks paragraphs / lists with the standard body rhythm.
 */
.blog-single-body__question {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-grey-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-single-body__question-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

.blog-single-body__question-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-single-body__question-body > * {
  margin: 0;
}

.blog-single-body__question-body p,
.blog-single-body__question-body li {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

@media (min-width: 768px) {
  .blog-single-body__question-body p,
  .blog-single-body__question-body li {
    font-size: var(--text-lg);
  }
}

.blog-single-body__question-body ul,
.blog-single-body__question-body ol {
  padding-left: 1.25em;
}

.blog-single-body__question-body li + li {
  margin-top: var(--space-2xs);
}

.blog-single-body__question-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ============================================
 * Quote block (core) — indented blockquote variant
 * ============================================
 * Authors insert this via the Quote block. Sits inline as an indented
 * blockquote with an accent rail on the left. Lighter than the pullquote.
 */
.blog-single-body .wp-block-quote {
  margin: 0;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-left: 3px solid var(--color-navy);
  font-family: var(--font-sans);
  color: var(--color-navy);
}

.blog-single-body .wp-block-quote p {
  margin: 0;
  font-style: italic;
  color: var(--color-navy);
}

.blog-single-body .wp-block-quote cite {
  display: block;
  margin-top: var(--space-xs);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-navy-muted);
}

/* ============================================
 * Pullquote block (core) — cream card variant
 * ============================================
 * Authors insert this via the Pullquote block for a bigger, standalone
 * statement card. The legacy .blog-single-body__pullquote selector is
 * retained for any non-block usage; both share the same visual treatment.
 */
.blog-single-body .wp-block-pullquote,
.blog-single-body__pullquote {
  background: var(--color-cream);
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);                 /* 20px Halant */
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-navy-muted);
  quotes: none;
  text-align: left;
}

.blog-single-body .wp-block-pullquote p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Stacked paragraphs inside a pullquote (bold lead-in + description) */
.blog-single-body .wp-block-pullquote p + p {
  margin-top: var(--space-sm);
}

/* Stacked paragraphs inside a blockquote (lead-in + description) too */
.blog-single-body .wp-block-quote p + p {
  margin-top: var(--space-sm);
}

.blog-single-body .wp-block-pullquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-navy-muted);
}

/* ============================================
 * Image block (core) — alignment + size matrix
 * ============================================
 * the_content() emits <figure class="wp-block-image size-X alignX">.
 *
 * Sizes (WP defaults): size-thumbnail 150px, size-medium 300px,
 * size-large 1024px-bounded, size-full original. We cap visible width
 * via max-width per size since the article column is ~720px.
 *
 * Alignments: alignleft / alignright float and let prose wrap;
 * aligncenter centres in the column; alignwide / alignfull break out
 * of the column (only on desktop where there's room beside the rail).
 *
 * On mobile, every variant collapses to full-width block so floats
 * don't squeeze copy.
 */
.blog-single-body .wp-block-image {
  margin: 0;
}

.blog-single-body .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.blog-single-body .wp-block-image figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
  text-align: left;
}

/* Mobile (<768px) — all alignment/size variants render full-width.
   Floats and breakouts are desktop-only; on phones a floated image
   chokes the column. */
@media (max-width: 767px) {
  .blog-single-body .wp-block-image,
  .blog-single-body .wp-block-image.alignleft,
  .blog-single-body .wp-block-image.alignright,
  .blog-single-body .wp-block-image.aligncenter,
  .blog-single-body .wp-block-image.alignwide,
  .blog-single-body .wp-block-image.alignfull {
    float: none;
    margin: 0;
    width: 100%;
  }

  .blog-single-body .wp-block-image img {
    width: 100%;
  }
}

/* Tablet+ (≥768px) — alignment + size matrix applies. */
@media (min-width: 768px) {

  /* Alignments */
  .blog-single-body .wp-block-image.alignleft {
    float: left;
    margin: var(--space-xs) var(--space-lg) var(--space-md) 0;
    max-width: 50%;
  }

  .blog-single-body .wp-block-image.alignright {
    float: right;
    margin: var(--space-xs) 0 var(--space-md) var(--space-lg);
    max-width: 50%;
  }

  .blog-single-body .wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .blog-single-body .wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
  }

  /* Sizes — cap visible width. WP size-* classes describe the asset
     served, not the rendered width; that's why we still need max-widths. */
  .blog-single-body .wp-block-image.size-thumbnail img {
    max-width: 150px;
  }

  .blog-single-body .wp-block-image.size-medium img {
    max-width: 300px;
  }

  .blog-single-body .wp-block-image.size-large img,
  .blog-single-body .wp-block-image.size-full img {
    max-width: 100%;
  }

  /* When a size class collides with a float, the size wins on width
     while the float controls position. */
  .blog-single-body .wp-block-image.alignleft.size-thumbnail,
  .blog-single-body .wp-block-image.alignright.size-thumbnail {
    max-width: 150px;
  }

  .blog-single-body .wp-block-image.alignleft.size-medium,
  .blog-single-body .wp-block-image.alignright.size-medium {
    max-width: 300px;
  }
}

/* Float clearing — anything that follows a floated image needs to
   reclaim its own track. End-of-article rule clears too. */
.blog-single-body .wp-block-image.alignleft + *,
.blog-single-body .wp-block-image.alignright + * {
  /* Don't clear immediately — the next paragraph SHOULD wrap.
     Heading-level elements are the safer break point. */
}

.blog-single-body h2,
.blog-single-body h3,
.blog-single-body .wp-block-heading,
.blog-single-body__end-rule {
  clear: both;
}

/* ============================================
 * Numbered sub-section header (custom block — server-rendered)
 * ============================================ */

.blog-single-body__numbered {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.blog-single-body__num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-none);
}

.blog-single-body__sub-heading {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);                /* 24px Halant */
  line-height: var(--leading-normal);
  letter-spacing: -0.03em;
  color: var(--color-navy);
  margin: 0;
}

/* ============================================
 * Image + adjacent Pullquote — paired card pattern
 * ============================================
 * When an image is immediately followed by a pullquote in the source
 * markdown (image + > quote commentary pattern), the two render as a
 * single visual unit: image's bottom corners square, pullquote's top
 * corners square, no gap between them. Uses sibling-combinator + :has()
 * so it's purely structural; no extra markup or block required.
 *
 * Cascade caveat (per [[feedback_css_modifier_not_guard]]): the
 * existing .wp-block-image img border-radius (--radius-md) and the
 * .wp-block-pullquote border-radius (--radius-lg) need overriding on
 * the touching corners only. Specificity here is just sibling-context;
 * fine because nothing else fights for these corners.
 */
.blog-single-body .wp-block-image:has(+ .wp-block-pullquote) img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.blog-single-body .wp-block-image + .wp-block-pullquote {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Cancel the flex gap between the two so they sit flush. The parent
   .blog-single-body uses flex column with --space-lg gap; this kills
   it just for the pair. */
.blog-single-body .wp-block-image:has(+ .wp-block-pullquote) {
  margin-bottom: calc(var(--space-lg) * -1);
}

/* ============================================
 * Table block (core)
 * ============================================
 * <figure class="wp-block-table"><table>...</table></figure>
 * Cream header row, light navy borders, mobile overflow-x scroll so
 * wide tables don't blow out the article column.
 */
.blog-single-body .wp-block-table {
  margin: 0;
  overflow-x: auto;
}

.blog-single-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

.blog-single-body .wp-block-table thead {
  background: var(--color-cream);
}

.blog-single-body .wp-block-table th {
  font-weight: var(--weight-bold);
  text-align: left;
  color: var(--color-navy);
}

.blog-single-body .wp-block-table th,
.blog-single-body .wp-block-table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-navy-divider);
  vertical-align: top;
}

.blog-single-body .wp-block-table figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-navy-muted);
}

/* ============================================
 * Button block (core)
 * ============================================
 * Inherit the .tlm-button visual contract from shared buttons.css —
 * we re-style the core button wrapper so authored Buttons render
 * with the same shape/colour as the rest of the site. Default to
 * the navy/primary look; authors can flip to secondary later via
 * a registered block style if needed.
 */
.blog-single-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
}

.blog-single-body .wp-block-button {
  margin: 0;
}

.blog-single-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

@media (hover: hover) {
  .blog-single-body .wp-block-button__link:hover {
    background: var(--color-white);
    color: var(--color-navy);
    text-decoration: none;
  }
}

/* ============================================
 * Embed block (core) — responsive iframe wrapper
 * ============================================
 * <figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
 *   <iframe>...</iframe>
 * </div></figure>
 *
 * WP ships .wp-embed-aspect-* classes (16-9, 4-3, etc) on the figure
 * for responsive sizing. We only need to make the iframe fill its
 * wrapper and cap radius/overflow.
 */
.blog-single-body .wp-block-embed {
  margin: 0;
}

.blog-single-body .wp-block-embed__wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Responsive aspect-ratio iframe — WP adds .wp-has-aspect-ratio +
   .wp-embed-aspect-16-9 / -4-3 / -1-1 / -9-16 / -21-9 on the figure.
   Default to 16:9; the per-aspect classes below override. */
.blog-single-body .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}

.blog-single-body .wp-block-embed.wp-embed-aspect-16-9  .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.blog-single-body .wp-block-embed.wp-embed-aspect-4-3   .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.blog-single-body .wp-block-embed.wp-embed-aspect-1-1   .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.blog-single-body .wp-block-embed.wp-embed-aspect-9-16  .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
.blog-single-body .wp-block-embed.wp-embed-aspect-21-9  .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }

.blog-single-body .wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blog-single-body .wp-block-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.blog-single-body .wp-block-embed figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-navy-muted);
}

/* End-of-article hairline */
.blog-single-body__end-rule {
  height: 1px;
  background: var(--color-navy-divider);
  margin-top: var(--space-lg);
}

/* ============================================
 * Tablet (≥768px) — slight type bump
 * ============================================ */

@media (min-width: 768px) {
  .blog-single-body__overview {
    padding: var(--space-xl);
  }
}

/* ============================================
 * Desktop (≥1024px) — full type
 * ============================================ */

@media (min-width: 1024px) {
  .blog-single-body {
    gap: var(--space-lg);
  }

  .blog-single-body__overview {
    padding: var(--space-xl);
  }

  .blog-single-body h2 {
    /* 32px desktop — grows from the 28 mobile base. Halant.
       H4-level heading, so uses the --text-h4 token. */
    font-size: var(--text-h4);
  }
}

/* ============================================
 * "What you get" list — Carbon icon + text rows.
 * Rendered inside a wp:html block, so it sits outside the
 * default .blog-single-body ul styling.
 * ============================================ */

.blog-single-body .tlm-wyg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}

.blog-single-body .tlm-wyg-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-sm);
  align-items: center;
}

.blog-single-body .tlm-wyg-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-navy);
}

.blog-single-body .tlm-wyg-icon {
  width: 20px;
  height: 20px;
}

.blog-single-body .tlm-wyg-text {
  color: var(--color-navy);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

@media (min-width: 768px) {
  .blog-single-body .tlm-wyg-text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
}

/* ============================================
 * Presenters cards — 3-up grid of photo + name + firm
 * Mirrors the author-bio card pattern with less chrome.
 * ============================================ */

.blog-single-body .tlm-presenters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}

.blog-single-body .tlm-presenters__card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-xl);
}

.blog-single-body .tlm-presenters__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-navy-faint);
}

.blog-single-body .tlm-presenters__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.blog-single-body .tlm-presenters__logo {
  width: 56px;
  height: 18px;
  background: var(--color-navy-faint);
  border-radius: 4px;    /* small-element radius on an 18px-tall logo; --radius-sm (8px) too round */
  margin-bottom: var(--space-2xs);
}

.blog-single-body .tlm-presenters__name {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-navy);
}

.blog-single-body .tlm-presenters__firm {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-navy-subtle);
}

@media (min-width: 1024px) {
  .blog-single-body .tlm-presenters {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
 * --wrap modifier — block flow for floated images
 * ============================================
 * Opt-in variant triggered by ACF `image_wrap_layout` on the post.
 * The default .blog-single-body is `display: flex; gap: --space-lg`,
 * which silently ignores `float` on its children. This variant
 * switches to block flow so alignleft/alignright images let prose
 * wrap around them, then replicates the inter-block rhythm via the
 * lobotomised-owl pattern (`> * + *`). Headings get extra breathing
 * room above since they introduce new sections.
 *
 * Also handles the wrapped figure shape Gutenberg emits when an
 * image block has a custom width set in the editor:
 *   <div class="wp-block-image">
 *     <figure class="alignright size-large is-resized" style="width:50%">
 * Default theme CSS only handles the un-wrapped figure shape.
 */
.blog-single-body--wrap {
  display: block;
  gap: 0;
}

/* Reset browser-default heading margins (the default theme's
   per-element margin reset at the top of this file covers p / ul / ol
   / image / quote / pullquote / separator; we need to extend it to
   headings under the --wrap variant so block-flow margin collapsing
   doesn't fight the owl pattern below). */
.blog-single-body--wrap > h2,
.blog-single-body--wrap > h3 {
  margin: 0;
}

/* Block-to-block rhythm — every sibling-after-first gets a top margin
   via the lobotomised-owl pattern (equivalent to flex `gap` but works
   in block flow). Single-property `margin-top` so it wins over the
   shorthand `margin: 0` reset above and at line 131. Higher-specificity
   heading overrides below add extra breathing room. */
.blog-single-body--wrap > * + p,
.blog-single-body--wrap > * + ul,
.blog-single-body--wrap > * + ol,
.blog-single-body--wrap > * + .wp-block-image,
.blog-single-body--wrap > * + .wp-block-quote,
.blog-single-body--wrap > * + .wp-block-pullquote,
.blog-single-body--wrap > * + .wp-block-separator,
.blog-single-body--wrap > * + section,
.blog-single-body--wrap > * + div {
  margin-top: var(--space-lg);
}

/* Headings introduce new sections — give them extra breathing room
   when they follow another block. */
.blog-single-body--wrap > * + h2 {
  margin-top: var(--space-2xl);
}

.blog-single-body--wrap > * + h3 {
  margin-top: var(--space-xl);
}

/* Wrapped figure shape — when the editor sets a custom width, Gutenberg
   wraps the figure in <div class="wp-block-image">. The alignment class
   sits on the inner <figure>, so we need selectors for both shapes. */
.blog-single-body--wrap div.wp-block-image > figure.alignleft,
.blog-single-body--wrap div.wp-block-image > figure.alignright,
.blog-single-body--wrap div.wp-block-image > figure.aligncenter {
  margin: 0;
}

@media (max-width: 767px) {
  /* Mobile — collapse all alignments to full-width block. Floats on
     phones squeeze the column too hard. */
  .blog-single-body--wrap div.wp-block-image > figure.alignleft,
  .blog-single-body--wrap div.wp-block-image > figure.alignright,
  .blog-single-body--wrap div.wp-block-image > figure.aligncenter {
    float: none;
    margin: 0;
    width: 100% !important;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .blog-single-body--wrap div.wp-block-image > figure.alignleft {
    float: left;
    margin: var(--space-xs) var(--space-lg) var(--space-md) 0;
    max-width: 50%;
  }

  .blog-single-body--wrap div.wp-block-image > figure.alignright {
    float: right;
    margin: var(--space-xs) 0 var(--space-md) var(--space-lg);
    max-width: 50%;
  }

  .blog-single-body--wrap div.wp-block-image > figure.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .blog-single-body--wrap div.wp-block-image > figure.aligncenter img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Headings clear floats so a new section never starts beside an image.
   Pullquotes also clear floats — they're full-width statement cards and
   should drop below any image floated above them, not sit beside them. */
.blog-single-body--wrap h2,
.blog-single-body--wrap h3,
.blog-single-body--wrap .wp-block-pullquote {
  clear: both;
}

/* Pullquotes always span full column width, even when authors add an
   alignleft / alignright in the editor. Float wrapping is reserved for
   images; pullquotes are too tall and visually-heavy to sit alongside
   copy without breaking rhythm. */
.blog-single-body .wp-block-pullquote.alignleft,
.blog-single-body .wp-block-pullquote.alignright,
.blog-single-body .wp-block-pullquote.aligncenter {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
}