/**
 * BLOG ARTICLE PAGE
 * =========================================================================
 * Figma: node 94:14219 "Blogs article page" (1440 x 6169).
 *
 * Self-contained: everything here is in the .a3-ba-* namespace and loads only
 * on post-blog-article.php, so it shares nothing with service.css and cannot
 * reach another template. The two bands at the foot of the page (contact CTA
 * and FAQ) deliberately reuse the site's existing .a3-contact-cta / .a3-faq
 * markup, so they are styled by service.css and appear nowhere below.
 *
 * The measurements and the reasoning behind them are in BLOG-ARTICLE-PAGE.md.
 * Numbers with decimals are Figma's own - they are kept rather than rounded,
 * because the three body columns have to add up.
 *
 * Desktop is the measured design; below 1200px the page reflows (see §7).
 * There is no mobile frame in the file, so those rules are judgement, and are
 * commented as such.
 */

.a3-blog-article {
  /* Grid tracks - Figma's body Section is 1392 wide inside the 1440 frame:
   *   rail 205.3 | 32 | article 770 | 37 | sidebar 325 | 22.7 slack
   * Two different gaps, so they are tracks rather than a `gap` value. */
  --a3-ba-rail: 205.3px;
  --a3-ba-gap-1: 32px;
  --a3-ba-article: 770px;
  --a3-ba-gap-2: 37px;
  --a3-ba-sidebar: 325px;
  --a3-ba-container: 1392px;

  /* The clear space either side of a break-out (blockquote, figure, image).
   *
   * It is the GAP that is held constant, not the margin: the article column
   * sits 32 from the rail and 37 from the sidebar, so equal negative margins
   * give unequal gutters - which measured 0 on the left and 5 on the right.
   * Deriving the margins from this instead keeps both sides identical, and
   * keeps them identical if either grid gap is ever changed. */
  --a3-ba-breakout: 16px;

  /* Palette, all straight off the design */
  --a3-ba-ink: #030303;
  --a3-ba-body: #333333;
  --a3-ba-muted: #676f7b;
  --a3-ba-line: #e7eaf0;
  --a3-ba-wash: #f4f5f9;
  --a3-ba-card: #fcfcfd;
  --a3-ba-brand: #ff6900;
  --a3-ba-accent: #3b82f6;

  background: #ffffff;
}

.a3-ba-container {
  width: min(100% - 48px, var(--a3-ba-container));
  margin-inline: auto;
}

/* =========================================================================
 * 1. HERO - node 94:14222 (1440 x 540)
 *
 * Photo, a flat 60% black wash, then a second bottom-up gradient. The design
 * layers both: the wash evens out the photo, the gradient buys extra contrast
 * for the meta row without darkening the top of the frame.
 * ========================================================================= */

.a3-ba-hero {
  position: relative;
  /* min-height, not height: the frame is 540 and almost every title fits, but
   * a fixed height clips a long one against the bottom of the photo instead of
   * letting the band grow. */
  min-height: 540px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background-color: var(--a3-ba-ink);
}

/* imageTransform on the fill is sy=0.5618 ty=0.2191 - symmetric (21.91% off
 * each edge), which is exactly what a centred `cover` does. */
.a3-ba-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--a3-ba-cover);
  background-size: cover;
  background-position: center;
}

/* Figma: Overlay #030303 @ 60%, then Gradient #030303 -> 40% -> 0 bottom to
 * top (handles [[0.5,1],[0.5,0]] = vertical). */
.a3-ba-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(3, 3, 3, 1) 0%,
      rgba(3, 3, 3, 0.4) 50%,
      rgba(3, 3, 3, 0) 100%
    ),
    rgba(3, 3, 3, 0.6);
}

.a3-ba-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1000px);
  padding-top: 94.2px; /* Figma: back link at y 94.2 */
  /* Figma leaves 30 under the meta row (its box ends 509.8 in a 540 band).
   * Without it a three-line title pushed the row into the bottom edge and the
   * avatar tile was cut in half - the band grows past 540 by then, but the
   * content still had nothing between it and the boundary. */
  padding-bottom: 30.2px;
  text-align: center;
  color: #ffffff;
}

/* Inter 600 14/20, #FFF at 70% */
/* flex + fit-content rather than inline-flex: the hero centres its children
 * with text-align, and two inline boxes would sit on the same line - Figma
 * stacks the link at y 94.2 and the badge at 146.2. */
.a3-ba-hero__back {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.a3-ba-hero__back:hover,
.a3-ba-hero__back:focus-visible {
  color: #ffffff;
}

/* Figma: 194.4 x 30 pill, 1px white border, 8px background blur, text
 * Inter 700 12/16, tracking 0.6, uppercase. */
.a3-ba-hero__badge {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin: 32px auto 0; /* back link box bottom 114.2 -> badge 146.2 */
  padding: 0 17px;
  border: 1px solid #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Inter 400, 72px, tracking -1.8, centred.
 *
 * The two nodes disagree about the box: the blog article (94:14233) draws it
 * 693.7 wide on 79.2 leading, the guide article (95:16014) 993 wide on 93.
 * The guide's is used for both - asked for on the day, and it is the better
 * of the two: at 694 a title of any length breaks to three lines and pushes
 * the meta row into the bottom edge of a 540 band, where at 993 the same
 * title sits on two with room around it.
 *
 * Leading is a ratio rather than 93px so it still scales at the smaller
 * breakpoints; 1.292 is 93/72 exactly. */
.a3-ba-hero__heading {
  max-width: 993px;
  margin: 21.5px auto 0; /* badge bottom 176.2 -> heading box 195.7 */
  font-size: 72px;
  font-weight: 400;
  line-height: 1.292;
  letter-spacing: -0.025em; /* -1.8px at 72px, stays proportional if it clamps */
  color: #ffffff;
}

.a3-ba-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 36.2px; /* heading box bottom 441.6 -> meta 477.8 */
}

/* 32 x 32 white tile, 1px white-20% border, initials Inter 700 12/16 #030303 */
/* A picture in the tile where one exists (Profile photo or a real Gravatar);
 * otherwise the initials the design draws. */
.a3-ba-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a3-ba-hero__avatar {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
}

.a3-ba-hero__author {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: normal;
  color: #ffffff;
}

/* The date and read-time pairs. Figma spaces them 25px apart (author box ends
 * 660.9, calendar icon 687.4) and the icons are brand orange against the
 * white-80% label. */
.a3-ba-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 17px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.8);
}

.a3-ba-hero__fact svg {
  flex: 0 0 16px;
  color: var(--a3-ba-brand);
}

/* =========================================================================
 * 2. BODY GRID - node 94:14247 (1392 x 2652)
 * ========================================================================= */

.a3-ba-body {
  padding: 101px 0 0; /* hero bottom 1132 -> body 1233 */
}

.a3-ba-grid {
  display: grid;
  grid-template-columns:
    var(--a3-ba-rail)
    var(--a3-ba-gap-1)
    var(--a3-ba-article)
    var(--a3-ba-gap-2)
    var(--a3-ba-sidebar);
  align-items: start;
}

.a3-ba-rail {
  grid-column: 1;
}

.a3-ba-article {
  grid-column: 3;
  min-width: 0; /* a code block or a wide table must not stretch the track */
}

.a3-ba-sidebar {
  grid-column: 5;
}

/* Figma leaves the rail and the sidebar pinned while the article scrolls -
 * both are far shorter than the article. 120px clears the site header. */
.a3-ba-rail,
.a3-ba-sidebar {
  position: sticky;
  top: 120px;
}

/* =========================================================================
 * 3. RAIL - Contents + Share (node 94:14248, 205.3 wide)
 * ========================================================================= */

.a3-ba-rail__block + .a3-ba-rail__block {
  margin-top: 40px; /* list bottom 264 -> Share header 304 */
}

/* Figma: Inter 700 12/16, tracking 0.6, uppercase, on a 34-tall header with a
 * 2px bottom rule. Used by Contents, Share and Related Articles alike. */
.a3-ba-rail__title {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--a3-ba-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--a3-ba-ink);
}

.a3-ba-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-ba-toc__item + .a3-ba-toc__item {
  margin-top: 12px; /* item pitch 31.2 on a 19.2 line */
}

/* The chevron hangs 8px into the margin in Figma (rel x = -8), so the labels
 * line up with the heading above rather than with the icons. */
.a3-ba-toc__link {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 0 8px;
  margin-left: -8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.25px;
  letter-spacing: normal;
  color: var(--a3-ba-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.a3-ba-toc__link svg {
  margin-top: 4px;
}

.a3-ba-toc__link:hover,
.a3-ba-toc__link:focus-visible,
.a3-ba-toc__link.is-active {
  color: var(--a3-ba-ink);
}

/* Figma: 205.3 x 46 buttons, 1px #E7EAF0, icon at 17, label Inter 700 14/20
 * #676F7B at 45, stacked 8px apart. */
.a3-ba-share__btn {
  display: flex;
  align-items: center;
  /* global.css centres the contents of every `button`, and two of these three
   * are buttons while Email is a link - so without this the icons sat at 52
   * and the link's at 18, and the three rows did not line up with each other,
   * let alone with Figma's 17. A property that is never declared cannot be
   * won by specificity; it has to be stated. */
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 46px;
  /* global.css floors every button and submit at min-height 56 - without this
   * the three share buttons render 10px too tall and the rail stops lining up
   * with the article beside it. */
  min-height: 0;
  padding: 0 17px;
  background: transparent;
  border: 1px solid var(--a3-ba-line);
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--a3-ba-muted);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.a3-ba-share__btn + .a3-ba-share__btn {
  margin-top: 8px;
}

.a3-ba-share__btn:hover,
.a3-ba-share__btn:focus-visible {
  color: var(--a3-ba-ink);
  border-color: var(--a3-ba-ink);
}

/* ---- the Share Post menu ----
 * Which networks appear is Article Settings; this is only how they look. The
 * list is plain links in the markup and `hidden` until the button opens it, so
 * it still works with JS off - just always open. */
.a3-ba-share {
  position: relative;
}

.a3-ba-share__menu {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--a3-ba-line);
  background: #ffffff;
}

.a3-ba-share__menu[hidden] {
  display: none;
}

/* Same 46px row as the three buttons above it, so the menu reads as part of
 * the same stack rather than as a floating popover. */
.a3-ba-share__net {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 46px;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--a3-ba-muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.a3-ba-share__menu li + li .a3-ba-share__net {
  border-top: 1px solid var(--a3-ba-line);
}

.a3-ba-share__net:hover,
.a3-ba-share__net:focus-visible {
  background: var(--a3-ba-wash);
  color: var(--a3-ba-ink);
}

/* Each network in its own colour on hover - the only place brand colours
 * appear, and only on the row you are pointing at. */
.a3-ba-share__net--facebook:hover { color: #1877f2; }
.a3-ba-share__net--x:hover { color: #000000; }
.a3-ba-share__net--linkedin:hover { color: #0a66c2; }
.a3-ba-share__net--whatsapp:hover { color: #25d366; }
.a3-ba-share__net--telegram:hover { color: #229ed9; }
.a3-ba-share__net--reddit:hover { color: #ff4500; }

/* The chevron state on the button that opens it. */
.a3-ba-share__btn[aria-expanded="true"] {
  color: var(--a3-ba-ink);
  border-color: var(--a3-ba-ink);
}

/* Set by blog-article.js after a successful copy, cleared 2s later. */
.a3-ba-share__btn.is-copied {
  color: var(--a3-ba-brand);
  border-color: var(--a3-ba-brand);
}

/* =========================================================================
 * 4. THE ARTICLE
 * ========================================================================= */

/* ---- 4.1 Executive Summary - node 94:14322 (770 x 270) ----
 *
 * Figma strokes this with a diamond gradient that resolves to brand orange on
 * the left edge and #E7EAF0 elsewhere, with the left side 4px and the rest
 * 1px - i.e. an orange bar down the left of a hairline box. */
.a3-ba-summary {
  /* Figma: lead paragraph ends 229, box 298-568, first H2 at 648 - so 69
   * above and 80 below. The box is injected after the opening paragraph
   * (see post-blog-article.php), which is where the design puts it. */
  margin: 69px 0 80px;
  padding: 33px 36px 35px;
  background: var(--a3-ba-wash);
  border: 1px solid var(--a3-ba-line);
  border-left: 4px solid var(--a3-ba-brand);
}

/* Inter 700 18/28, tracking 0.9, uppercase, 20px icon 28px before the text.
 *
 * Scoped through .a3-ba-summary on purpose: the box is spliced into the body,
 * so .a3-ba-content h2 (0,1,1) would otherwise win over a lone class and set
 * this to 36px article-heading type. */
.a3-ba-summary .a3-ba-summary__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 27px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--a3-ba-ink);
}

.a3-ba-summary .a3-ba-summary__heading svg {
  flex: 0 0 20px;
  color: var(--a3-ba-brand);
}

.a3-ba-summary .a3-ba-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-ba-summary .a3-ba-summary__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--a3-ba-body);
}

.a3-ba-summary .a3-ba-summary__item + .a3-ba-summary__item {
  margin-top: 16px;
}

.a3-ba-summary .a3-ba-summary__item svg {
  margin-top: 2px;
  color: var(--a3-ba-brand);
}

/* ---- 4.2 The editor content ----
 *
 * These rules style whatever the editor produced. Every selector is scoped to
 * .a3-ba-content, so nothing here can reach the rest of the page.
 *
 * Figma's spacing, measured off the y positions:
 *   p -> p 23 · h2 80 above / 27.5 below · blockquote 84/112 · figure 47 */

.a3-ba-content {
  font-size: 18px;
  font-weight: 400;
  line-height: 29.25px; /* 162.5% */
  letter-spacing: normal;
  color: var(--a3-ba-body);
}

/* The size/leading/colour are repeated here rather than left to inherit from
 * .a3-ba-content: global.css styles `p` directly (16px/1.8), and a direct rule
 * always beats an inherited value however specific the ancestor selector is.
 * Same reason the list below restates them. */
.a3-ba-content > p {
  margin: 0 0 23px;
  font-size: 18px;
  line-height: 29.25px;
  color: var(--a3-ba-body);
}

/* The opening paragraph is set larger and darker than the rest, with a drop
 * cap: Inter Light 300 24/39 #030303, and the cap is Inter SemiBold 70px. */
.a3-ba-content > p:first-of-type {
  font-size: 24px;
  font-weight: 300;
  line-height: 39px;
  color: var(--a3-ba-ink);
}

.a3-ba-content > p:first-of-type::first-letter {
  float: left;
  margin: 14px 11px 0 0;
  font-size: 70px;
  font-weight: 600;
  line-height: 39px;
  color: var(--a3-ba-ink);
}

.a3-ba-content h2 {
  margin: 80px 0 27.5px;
}

/* The summary carries the 80px gap to whatever follows it, and an article that
 * opens straight on a heading should not start with 80px of air. */
.a3-ba-content > .a3-ba-summary + h2,
.a3-ba-content > h2:first-child {
  margin-top: 0;
}

.a3-ba-content h2 {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.025em; /* -0.9px at 36px */
  color: var(--a3-ba-ink);
  /* The Contents links jump here, so keep the heading clear of the header. */
  scroll-margin-top: 120px;
}

.a3-ba-content h3 {
  margin: 48px 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--a3-ba-ink);
}

/* ---------------------------------------------------------------------------
 * HEADING SCALE  (blog posts only)
 *
 * global.css styles the bare h4/h5/h6 tags with the site-wide *display* scale
 * - --h4: clamp(24px, 3vw, 36px) - sizing meant for landing-page section
 * titles. This file overrode h2 and h3 for article type but never the levels
 * below them, so an <h4> subheading rendered at 36px: identical to an <h2> and
 * larger than the <h3> it sits under. 1,171 posts use <h4>.
 *
 * The rules below continue the article ramp downwards instead:
 *
 *     h2 36/40   h3 24/32   h4 20/30   h5 18/28   h6 16/26   (body 18/29.25)
 *
 * Scoped through :where(body.single-post) so this lands on blog posts only and
 * leaves the guide CPT and the post-blog-article page template untouched.
 * :where() contributes no specificity, so each rule stays at (0,1,1) - level
 * with the h2/h3 rules above, enough to beat global.css's bare tag selector,
 * and still below the component overrides later in this file (the CTA banner
 * headline is an h4 and keeps its own 32px).
 * --------------------------------------------------------------------------- */

:where(body.single-post) .a3-ba-content h4 {
  margin: 36px 0 14px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--a3-ba-ink);
}

:where(body.single-post) .a3-ba-content h5 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--a3-ba-ink);
}

:where(body.single-post) .a3-ba-content h6 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: var(--a3-ba-ink);
}

.a3-ba-content ul,
.a3-ba-content ol {
  margin: 0 0 23px;
  padding-left: 24px;
}

.a3-ba-content li {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 29.25px;
  color: var(--a3-ba-body);
}

.a3-ba-content a {
  color: var(--a3-ba-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.a3-ba-content strong {
  font-weight: 700;
  color: var(--a3-ba-ink);
}

/* Figma draws this 866.1 wide - 64px out to the left of the 770 column and 32
 * to the right, using the space beside the article. It is capped at the 32px
 * gutter here instead, so it breaks out 834 wide and lands flush with the
 * figures and images above and below it.
 *
 * The reason is the sticky rail, which is behaviour the static frame cannot
 * express: in Figma the Contents/Share block is 508 tall and sits far above
 * this quote, so the column beside the article is empty and free to borrow.
 * Here the rail follows you down the page, and an 866 quote runs 16px under
 * the Share buttons on the left and 11px under the sidebar card on the right.
 * 834 is the widest break-out that can never touch either.
 *
 * 2px rules top and bottom, text Inter 500 36/43.2 tracking -0.9, centred. */
.a3-ba-content blockquote {
  position: relative;
  margin-top: 84px;
  margin-bottom: 112px;
  margin-left: calc(-1 * (var(--a3-ba-gap-1) - var(--a3-ba-breakout)));
  margin-right: calc(-1 * (var(--a3-ba-gap-2) - var(--a3-ba-breakout)));
  padding: 41.5px 48px 40px;
  border-top: 2px solid var(--a3-ba-ink);
  border-bottom: 2px solid var(--a3-ba-ink);
  font-size: 36px;
  font-weight: 500;
  line-height: 43.2px;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--a3-ba-ink);
}

/* The quote mark is a #F4F5F9 glyph *behind* the text, so it reads as texture
 * rather than punctuation - drawn as a pseudo-element because the editor never
 * emits an element to hang it on. */
.a3-ba-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 16px;
  font-size: 120px;
  line-height: 1;
  color: var(--a3-ba-wash);
  pointer-events: none;
}

/* The quote text is a <p>, and global.css styles `p` directly at 16px/1.8 -
 * which beats the 36px inherited from the blockquote however specific this
 * selector is. Restating them as `inherit` is what keeps the two in step. */
.a3-ba-content blockquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.a3-ba-content blockquote p + p {
  margin-top: 16px;
}

/* A bare image runs 834 wide - 32px out each side of the column.
 *
 * wpautop wraps a lone <img> in a <p>, so the paragraph has to give up its own
 * margin and text metrics or the image sits inside 23px of paragraph spacing
 * and drags a stray line box with it. */
.a3-ba-content > p:has(> img:only-child) {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.a3-ba-content img {
  display: block;
  max-width: none;
  width: calc(
    100% + (var(--a3-ba-gap-1) - var(--a3-ba-breakout)) +
      (var(--a3-ba-gap-2) - var(--a3-ba-breakout))
  );
  margin-top: 47px;
  margin-bottom: 47px;
  margin-left: calc(-1 * (var(--a3-ba-gap-1) - var(--a3-ba-breakout)));
  margin-right: calc(-1 * (var(--a3-ba-gap-2) - var(--a3-ba-breakout)));
  height: auto;
}

/* A figure - an image the editor gave a caption - gets the design's dark
 * plate: black box, hairline border, the image dropped to 80% on a screen
 * blend so it glows, and a 4px blue inner frame. */
.a3-ba-content figure {
  margin-top: 47px;
  margin-bottom: 47px;
  margin-left: calc(-1 * (var(--a3-ba-gap-1) - var(--a3-ba-breakout)));
  margin-right: calc(-1 * (var(--a3-ba-gap-2) - var(--a3-ba-breakout)));
  padding: 1px;
  background: var(--a3-ba-ink);
  border: 1px solid var(--a3-ba-line);
}

/* Figma's plate is a fixed 832 x 355.5 and the image fill carries a centred
 * vertical crop (imageTransform sy=0.6408 ty=0.1796, symmetric), i.e. exactly
 * cover on that ratio - which also stops a portrait upload from turning into
 * a two-screen-tall figure. An image that must be shown whole belongs in a
 * bare <img> with no caption; those keep their natural height. */
.a3-ba-content figure img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  aspect-ratio: 832 / 355.5;
  object-fit: cover;
  margin: 0;
  opacity: 0.8;
  mix-blend-mode: screen;
  outline: 4px solid rgba(59, 130, 246, 0.2);
  outline-offset: -4px;
}

/* Menlo 12, tracking 1.2, uppercase, centred, #676F7B - the only monospace on
 * the page. Menlo is macOS-only, so the stack falls through to the usual
 * cross-platform equivalents. */
.a3-ba-content figcaption {
  margin-top: 12px;
  font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--a3-ba-muted);
}

/* ---- 4.3 Tags - node 94:14310 ---- */

.a3-ba-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 92px;
  padding-top: 34.5px;
  border-top: 1px solid var(--a3-ba-line);
}

.a3-ba-tags__label {
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
}

.a3-ba-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 26 tall, #F4F5F9 on a 1px #E7EAF0 hairline, Inter 700 12/16 tracking 0.6 */
.a3-ba-tags__pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 13px;
  background: var(--a3-ba-wash);
  border: 1px solid var(--a3-ba-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--a3-ba-muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.a3-ba-tags__pill:hover,
.a3-ba-tags__pill:focus-visible {
  color: var(--a3-ba-ink);
  border-color: var(--a3-ba-ink);
}

/* =========================================================================
 * 5. SIDEBAR (325 wide, node 101:17555 - itemSpacing 24)
 * ========================================================================= */

.a3-ba-sidebar > * + * {
  margin-top: 24px;
}

/* ---- 5.1 Lead-capture card - node 101:17556 (325 x 550) ----
 * The same card the blog listing carries, rebuilt in this namespace so the
 * two templates stay independent. */

.a3-ba-cta {
  background: var(--a3-ba-card);
  border: 1px solid var(--a3-ba-line);
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

.a3-ba-cta__media {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.a3-ba-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma lays a #FCFCFD -> transparent gradient over the photo, solid at the
 * bottom, so the heading rises out of the image rather than butting against it. */
.a3-ba-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--a3-ba-card), rgba(252, 252, 253, 0));
}

/* Figma padding: 24 left/right/bottom, none on top - the heading sits tight
 * under the image. */
.a3-ba-cta__body {
  padding: 0 24px 24px;
}

.a3-ba-cta__heading {
  margin: 0 0 24px;
  font-size: 21.6px;
  font-weight: 600;
  line-height: 29.7px;
  letter-spacing: -0.025em;
  color: var(--a3-ba-ink);
}

/* CF7 renders each field in its own <p>. The design's fields are a 13px
 * placeholder over a single bottom rule, 20px apart. */
.a3-ba-cta .wpcf7 p {
  margin: 0 0 20px;
}

.a3-ba-cta .wpcf7 p:last-of-type {
  margin-bottom: 0;
}

.a3-ba-cta .wpcf7-form-control-wrap {
  display: block;
}

.a3-ba-cta input[type="text"],
.a3-ba-cta input[type="email"],
.a3-ba-cta input[type="tel"],
.a3-ba-cta textarea {
  width: 100%;
  padding: 2px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a3-ba-line);
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  color: var(--a3-ba-ink);
  box-shadow: none;
}

.a3-ba-cta textarea {
  height: 29px;
  min-height: 29px;
  resize: none;
  overflow: hidden;
}

.a3-ba-cta ::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

/* Figma's Submit is #F97316 (Tailwind orange-500), not the site's #FF6900 -
 * followed as drawn, as it is on the blog listing. service.css forces
 * var(--primary) with !important on every CF7 submit, hence the !important. */
.a3-ba-cta input.wpcf7-submit,
.a3-ba-cta .wpcf7 input[type="submit"] {
  display: block;
  width: auto;
  /* Centred, not right-aligned. Figma's row is SPACE_BETWEEN, which reads as
   * "push apart", but the button's measured position on the blog listing is
   * dead centre of the card - and that page is the one already signed off, so
   * every copy of this card matches it. See BLOG-CATEGORY-PAGE.md. */
  margin-inline: auto;
  padding: 10px 24px;
  min-height: 0; /* same global.css button floor as the share buttons above */
  background: #f97316 !important;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #ffffff;
  cursor: pointer;
}

/* The spinner is invisible but still an inline box - left in flow it adds
 * ~33px inside the submit row. */
.a3-ba-cta .wpcf7-spinner {
  position: absolute;
}

/* ---- 5.2 Author box - node 101:17600 (325 x 318) ----
 * The avatar, the name and the profile link all go to the author's page. The
 * design draws no link styling on them, so they inherit the card's colours
 * and only move on hover. */

.a3-ba-author {
  padding: 25px;
  background: var(--a3-ba-card);
  border: 1px solid var(--a3-ba-line);
}

.a3-ba-author__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background: var(--a3-ba-wash);
  border: 1px solid var(--a3-ba-line);
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  color: var(--a3-ba-ink);
}

.a3-ba-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inter 700 10/15, tracking 1, uppercase, #3B82F6 */
.a3-ba-author__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--a3-ba-accent);
}

.a3-ba-author__name {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 22.5px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
}

.a3-ba-author__role {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  color: var(--a3-ba-muted);
}

.a3-ba-author__name a,
.a3-ba-hero__by {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.a3-ba-author__name a:hover,
.a3-ba-author__name a:focus-visible {
  color: var(--a3-ba-brand);
}

.a3-ba-hero__by {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.a3-ba-hero__by:hover .a3-ba-hero__author {
  color: var(--a3-ba-brand);
}

/* Guide variant - Figma 95:16000. Orange rather than the article's blue, and
 * a bordered button in place of the text link. */
.a3-ba-author__eyebrow--guide {
  color: #f97316;
}

.a3-ba-author__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 20px;
  min-height: 0; /* global.css floors every button/link-button at 56 */
  border: 1px solid var(--a3-ba-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--a3-ba-ink);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.a3-ba-author__btn:hover,
.a3-ba-author__btn:focus-visible {
  color: #f97316;
  border-color: #f97316;
}

.a3-ba-author__bio {
  margin: 18.5px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  letter-spacing: normal;
  color: var(--a3-ba-body);
}

/* ---- 5.3 Related Articles - node 101:17609 ---- */

.a3-ba-related .a3-ba-rail__title {
  border-bottom-color: var(--a3-ba-ink);
}

.a3-ba-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-ba-related__item + .a3-ba-related__item {
  margin-top: 24px;
}

/* 81 x 80 thumb tile, 96px to the text column (Figma x 1044 -> 1140) */
.a3-ba-related__link {
  display: grid;
  grid-template-columns: 81px 1fr;
  gap: 0 15px;
  text-decoration: none;
}

.a3-ba-related__thumb {
  display: block;
  width: 81px;
  height: 80px;
  background: var(--a3-ba-wash);
  border: 1px solid var(--a3-ba-line);
  overflow: hidden;
}

.a3-ba-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a3-ba-related__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--a3-ba-accent);
}

.a3-ba-related__title {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.25px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
  transition: color 0.2s ease;
}

.a3-ba-related__link:hover .a3-ba-related__title {
  color: var(--a3-ba-brand);
}

/* =========================================================================
 * 6. RESOURCES & INSIGHTS - node 101:19494 (1440 x 739)
 *
 * Figma: 80px side padding, 96 top/bottom, 1280 container, 64 between the
 * header and the row, three 394.7 cards on 48px gaps.
 * ========================================================================= */

/* The section carries its own tokens.
 *
 * They are declared on .a3-blog-article, which is the article template's root
 * - but this band also renders on the home page, whose root is .a3-home. There
 * every var(--a3-ba-*) resolved to nothing: the active dot came out
 * transparent, and the card rules using --a3-ba-line lost their hairlines the
 * same way. Declaring them here means the section is self-sufficient wherever
 * it is dropped, and the article page's values are identical so nothing
 * changes there. */
.a3-ba-resources {
  --a3-ba-ink: #030303;
  --a3-ba-body: #333333;
  --a3-ba-muted: #676f7b;
  --a3-ba-line: #e7eaf0;
  --a3-ba-wash: #f4f5f9;
  --a3-ba-brand: #ff6900;

  padding: 96px 0;
  background: #ffffff;
}

.a3-ba-resources__inner {
  width: min(100% - 160px, 1280px);
  margin-inline: auto;
}

.a3-ba-resources__header {
  margin-bottom: 64px;
}

/* Inter 500 14/20, tracking 0.35, uppercase, #4B5563 */
.a3-ba-resources__eyebrow {
  display: block;
  margin-bottom: 15.1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #4b5563;
}

/* Inter 400 48/55.2, tracking -1.5.
 *
 * No max-width. Figma's text node is 659 wide because it HUGS its one line of
 * text - it is the measured ink width, not a wrapping box. Using it as a cap
 * meant the browser, which needs a hair more than Figma for the same string,
 * broke "Technical research and guides." across two lines where the design has
 * one. The 1280 container is the real constraint. */
.a3-ba-resources__heading {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 55.2px;
  letter-spacing: -0.03125em; /* -1.5px at 48px */
  color: var(--a3-ba-ink);
}

.a3-ba-resources__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.a3-ba-resource__media {
  position: relative;
  aspect-ratio: 394.7 / 246.7;
  background: rgba(75, 85, 99, 0.05);
  overflow: hidden;
}

.a3-ba-resource__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Black chip, white Inter 500 8/10.4 tracking 0.2 uppercase, 16px in from the
 * top-left of the image. */
.a3-ba-resource__badge {
  position: absolute;
  top: 20px;
  left: 16px;
  padding: 5.5px 12px;
  background: var(--a3-ba-ink);
  font-size: 8px;
  font-weight: 500;
  line-height: 10.4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #ffffff;
}

.a3-ba-resource__body {
  margin-top: 24px;
}

.a3-ba-resource__kind {
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 500;
  line-height: 10.4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #4b5563;
}

/* Inter 400 24/24 - line-height equal to the font size, which is what keeps
 * the two-line titles tight in the design. */
.a3-ba-resource__title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
}

.a3-ba-resource__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.a3-ba-resource__title a:hover {
  color: var(--a3-ba-brand);
}

.a3-ba-resource__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--a3-ba-line);
}

.a3-ba-resource__date {
  font-size: 13px;
  font-weight: 400;
  line-height: 16.9px;
  letter-spacing: -0.26px;
  color: #4b5563;
}

.a3-ba-resource__cta {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--a3-ba-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.a3-ba-resource__cta:hover {
  color: var(--a3-ba-brand);
}

/* =========================================================================
 * 7. RESPONSIVE
 *
 * The design file has a desktop frame only, so everything below is judgement
 * rather than measurement - the breakpoints match the ones the rest of the
 * theme already uses (1200 / 992 / 767 / 575).
 * ========================================================================= */

/* Between 1200 and the full 1440 the three fixed tracks no longer fit, so the
 * article and sidebar flex while the rail keeps its width. */
@media (max-width: 1399.98px) {

  .a3-ba-grid {
    grid-template-columns:
      var(--a3-ba-rail)
      var(--a3-ba-gap-1)
      minmax(0, 1fr)
      var(--a3-ba-gap-2)
      minmax(280px, var(--a3-ba-sidebar));
  }

  /* The blockquote and images hang outside the column by a fixed amount; once
   * the column is fluid that overhang has to shrink with it or it collides
   * with the rail. */
  .a3-ba-content blockquote {
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .a3-ba-content img,
  .a3-ba-content figure {
    width: 100%;
    margin-inline: 0;
  }

  .a3-ba-content figure img {
    width: 100%;
  }
}

/* Tablet: the rail moves above the article as a horizontal contents strip,
 * and the sidebar drops below. Sticky is dropped with it - a rail that scrolls
 * with a page this narrow just eats the viewport. */
@media (max-width: 1199.98px) {

  .a3-ba-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .a3-ba-rail,
  .a3-ba-article,
  .a3-ba-sidebar {
    grid-column: 1;
  }

  .a3-ba-sidebar {
    position: static;
  }

  /* display: contents dissolves the rail so Contents and Share become grid
   * items in their own right and can be ordered separately. On a phone the
   * Contents list belongs above the article - it is navigation - but Share
   * belongs after it: nobody shares an article they have not read yet, and a
   * block of share buttons above the copy is just an obstacle.
   *
   *   Contents -> article -> Share -> sidebar */
  .a3-ba-rail {
    display: contents;
  }

  .a3-ba-rail__block {
    grid-column: 1;
  }

  .a3-ba-rail__block:not(.a3-ba-share) {
    order: 1;
    margin-bottom: 40px;
  }

  .a3-ba-article {
    order: 2;
    margin-bottom: 40px;
  }

  .a3-ba-share {
    order: 3;
    margin-top: 0;
    margin-bottom: 64px;
    max-width: 420px;
  }

  .a3-ba-sidebar {
    order: 4;
  }

  .a3-ba-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: start;
  }

  .a3-ba-sidebar > * + * {
    margin-top: 0;
  }

  .a3-ba-resources__inner {
    width: min(100% - 80px, 1280px);
  }

  .a3-ba-resources__grid {
    gap: 32px;
  }
}

@media (max-width: 991.98px) {

  .a3-ba-hero {
    min-height: 440px;
  }

  .a3-ba-hero__inner {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .a3-ba-hero__heading {
    font-size: 52px;
  }

  .a3-ba-resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .a3-ba-resources__heading {
    font-size: 40px;
    line-height: 1.15;
  }
}

@media (max-width: 767.98px) {

  .a3-ba-container {
    width: min(100% - 32px, var(--a3-ba-container));
  }

  .a3-ba-body {
    padding-top: 56px;
  }

  .a3-ba-hero__heading {
    font-size: 36px;
    line-height: 1.15;
  }

  /* The meta row is four items on one line at 1440; on a phone it wraps, and
   * the 17px left margins would read as ragged indents. */
  .a3-ba-hero__meta {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .a3-ba-hero__fact {
    margin-left: 0;
  }

  .a3-ba-content {
    font-size: 16px;
    line-height: 26px;
  }

  .a3-ba-content > p:first-of-type {
    font-size: 20px;
    line-height: 32px;
  }

  .a3-ba-content > p:first-of-type::first-letter {
    margin-top: 10px;
    font-size: 56px;
    line-height: 32px;
  }

  .a3-ba-content h2 {
    margin-top: 48px;
    font-size: 28px;
    line-height: 34px;
  }

  /* The ramp compresses with the h2 above; see HEADING SCALE. h3 drops to 22px
   * so it stays clearly below the 28px h2 - at 24px they were a step apart. */
  :where(body.single-post) .a3-ba-content h3 {
    margin-top: 40px;
    font-size: 22px;
    line-height: 30px;
  }

  :where(body.single-post) .a3-ba-content h4 {
    margin-top: 32px;
    font-size: 19px;
    line-height: 28px;
  }

  :where(body.single-post) .a3-ba-content h5 {
    margin-top: 28px;
    font-size: 17px;
    line-height: 26px;
  }

  :where(body.single-post) .a3-ba-content h6 {
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .a3-ba-content blockquote {
    margin: 48px -16px 56px;
    padding: 32px 16px;
    font-size: 22px;
    line-height: 30px;
  }

  .a3-ba-content blockquote::before {
    font-size: 80px;
  }

  .a3-ba-summary {
    padding: 24px 20px;
    margin-bottom: 48px;
  }

  .a3-ba-tags {
    margin-top: 56px;
  }

  .a3-ba-resources {
    padding: 64px 0;
  }

  .a3-ba-resources__inner {
    width: min(100% - 32px, 1280px);
  }

  .a3-ba-resources__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .a3-ba-resources__header {
    margin-bottom: 40px;
  }

  .a3-ba-resources__heading {
    font-size: 32px;
  }
}

/* =========================================================================
 * 8. prefers-reduced-motion
 *
 * Only colour transitions and the Contents smooth scroll here; both go.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {

  .a3-ba-hero__back,
  .a3-ba-toc__link,
  .a3-ba-share__btn,
  .a3-ba-tags__pill,
  .a3-ba-related__title,
  .a3-ba-resource__title a,
  .a3-ba-resource__cta {
    transition: none;
  }
}

/* The grid becomes a Slick carousel below 768 (blog-article.js). Slick needs
 * the track, not a grid, so the display is handed back while it is active. */
@media (max-width: 767.98px) {

  .a3-ba-resources__grid.slick-initialized {
    display: block;
  }

  .a3-ba-resources__grid .slick-slide {
    height: auto;
  }

  /* Dots: grey circles, and the active one an orange pill. Slick draws its
   * own bullet through a ::before glyph, so that is switched off and the
   * button itself becomes the dot - a glyph cannot be made to stretch. */
  .a3-ba-resources__grid .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
  }

  .a3-ba-resources__grid .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }

  .a3-ba-resources__grid .slick-dots li button {
    width: 8px;
    height: 8px;
    min-height: 0; /* global.css floors every button at 56 */
    padding: 0;
    border: 0;
    /* !important because global.css sets border-radius: 0 !important on every
     * button, and a slick dot is a button - without it the pill and the
     * circles both render as squares. */
    border-radius: 999px !important;
    background: #d4d4d8;
    text-indent: -9999px; /* the label stays for screen readers */
    overflow: hidden;
    transition:
      width 0.25s ease,
      background-color 0.25s ease;
  }

  .a3-ba-resources__grid .slick-dots li button::before {
    display: none;
  }

  .a3-ba-resources__grid .slick-dots li.slick-active button {
    width: 26px;
    background: var(--a3-ba-brand);
  }

  @media (prefers-reduced-motion: reduce) {
    .a3-ba-resources__grid .slick-dots li button {
      transition: none;
    }
  }
}

/* =========================================================================
 * TABLES
 *
 * Gutenberg wraps a table in <figure class="wp-block-table">, and the figure
 * rule above is the IMAGE plate: a near-black box (--a3-ba-ink) that exists so
 * a photo can sit on it at 80% opacity with mix-blend-mode: screen. A table has
 * no image to blend, so it inherited the black plate while its text stayed
 * --a3-ba-body (#333) - dark grey on near-black, unreadable. 283 published
 * posts contain a table.
 *
 * So: opt table figures out of the plate, then style the table itself, which
 * the design never covered.
 * ===================================================================== */
.a3-ba-content figure.wp-block-table {
  padding: 0;
  background: transparent;
  border: 0;
  /* A wide table must scroll inside its own box rather than push the article
   * sideways. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.a3-ba-content .wp-block-table table,
.a3-ba-content table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  color: var(--a3-ba-body);
  font-size: 16px;
  line-height: 1.6;
}

.a3-ba-content :is(td, th) {
  padding: 14px 18px;
  border: 1px solid var(--a3-ba-line);
  text-align: left;
  vertical-align: top;
}

/* The header row. Gutenberg emits a real <thead> when "Header section" is on,
 * but most of these posts came across as a plain first row of <td><strong>, so
 * both are covered. */
.a3-ba-content thead th,
.a3-ba-content thead td,
.a3-ba-content table > tbody > tr:first-child > td:has(strong) {
  background: #f5f7fa;
  color: #18181b;
  font-weight: 600;
}

.a3-ba-content tbody tr:nth-child(even) > td {
  background: #fbfcfd;
}

.a3-ba-content :is(td, th) > strong {
  color: inherit;
}

.a3-ba-content table a {
  color: #f05a29;
}

@media (max-width: 767px) {
  .a3-ba-content .wp-block-table table,
  .a3-ba-content table { font-size: 15px; }
  .a3-ba-content :is(td, th) { padding: 11px 13px; }
}

/* =========================================================================
 * IN-CONTENT CTA BANNERS
 *
 * Some posts embed a raw-HTML CTA that uses the OLD theme's classes -
 * .blockchain3-cta-section, .call-to-action-wrap, .cta-button, .white-btn.
 * That stylesheet is only enqueued on the imported pages, so on a post the
 * banner arrived with its inline background but the button had no padding,
 * height or radius: it rendered as a bare inline link instead of a pill.
 *
 * The values below are lifted from the legacy theme.css .white-btn rule so the
 * button matches the live site. The banner's own colours stay inline in the
 * post, which is why they are not repeated here.
 * ===================================================================== */
.a3-ba-content .blockchain3-cta-section {
  margin: 44px 0;
  padding: 40px 32px;
  border-radius: 12px;
}

.a3-ba-content .call-to-action-wrap {
  padding: 0;
}

.a3-ba-content .call-to-action-wrap.border-0 {
  border: 0;
}

/* The banner headline is an <h4> in the imported markup, so it needs a size of
 * its own now that h4 carries article-subheading type. 32/500 is the legacy
 * `.blockchain3-cta-section .cta-box .content h2` value from theme.css. */
.a3-ba-content .blockchain3-cta-section :is(h2, h3, h4) {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

/* Same specificity as the rule above, so these have to follow it in source
 * order to win - the file's own 1199.98/767.98 blocks sit further up. Steps
 * match legacy responsive.css (28px at 1199, 24px at 767). */
@media (max-width: 1199.98px) {
  .a3-ba-content .blockchain3-cta-section :is(h2, h3, h4) {
    font-size: 28px;
  }
}

@media (max-width: 767.98px) {
  .a3-ba-content .blockchain3-cta-section :is(h2, h3, h4) {
    font-size: 24px;
  }
}

.a3-ba-content .blockchain3-cta-section p {
  margin: 0;
}

.a3-ba-content .cta-button {
  margin-top: 22px;
}

/* Lifted from legacy theme.css `.white-btn`. */
.a3-ba-content :is(.white-btn, .btn, .btn-white) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 42px;
  padding: 9px 24px;
  border-radius: 8px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

/* The plate rule further up gives any figure a near-black background; a CTA
 * dropped inside one would inherit it. */
.a3-ba-content figure:has(.blockchain3-cta-section) {
  padding: 0;
  background: transparent;
  border: 0;
}

@media (max-width: 767px) {
  .a3-ba-content .blockchain3-cta-section { padding: 28px 20px; }
}

/* ---------------------------------------------------------------------------
 * WIDE CONTENT MUST SCROLL ITSELF
 *
 * Two things in imported bodies push the whole article sideways on a phone.
 *
 * Bare <table> - 26 posts carry one with no <figure class="wp-block-table">
 * around it, so it never got the figure's `overflow-x`. post-blog-article.php
 * now wraps those in .a3-ba-tablewrap; this is that box.
 *
 * Fixed-width <iframe> - 5 posts embed one at width="560" or "640", which is
 * wider than a 390px viewport. Capping the width keeps it in; the aspect ratio
 * keeps a video the right shape once the width is no longer what sets it.
 * --------------------------------------------------------------------------- */

.a3-ba-tablewrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 23px;
  -webkit-overflow-scrolling: touch;
}

.a3-ba-tablewrap > table {
  margin-bottom: 0;
}

.a3-ba-content iframe {
  max-width: 100%;
}

/* Only the ones that declare a 16:9-ish size - a bare iframe with no width
 * attribute is left to whatever the embed itself sets. */
.a3-ba-content iframe[width][height] {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* A long unbreakable token - a bare URL, a hash, a run of &nbsp; from a paste -
 * has no wrap opportunity and widens the whole article on a phone. Twelve posts
 * carried a run of 8+ non-breaking spaces (one had 77) and pushed the page 93px
 * wide at 390. The runs are cleaned out of the content; this keeps the next one
 * from doing it again. */
.a3-ba-content,
.a3-ba-content :is(p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote) {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * A CAPTIONLESS FIGURE IS JUST AN IMAGE  (blog posts only)
 *
 * The plate rule at §4.2 says exactly what it is for - "an image the editor
 * gave a caption" - and its own note adds that "an image that must be shown
 * whole belongs in a bare <img> with no caption". The SELECTOR does not say
 * that. Gutenberg wraps EVERY image block in a <figure>, caption or not, so of
 * 4,206 figures in the corpus only **34** carry a <figcaption>. The other
 * 4,172, across 1,008 posts, were being given the dark plate and the
 * 832 x 355.5 cover crop meant for those 34:
 *
 *   - a 241px logo sat on a full-width black bar (the rest of the plate)
 *   - a wide CTA banner was cropped on both sides, cutting off the A3Logics
 *     mark on the left and the Contact Us button on the right
 *   - every screenshot was dimmed to 80% and blend-screened
 *
 * So a figure with no caption renders like the bare <img> the note points at:
 * natural height, no plate, no crop, no blend. The 34 captioned ones keep the
 * design exactly as measured from Figma.
 *
 * `:has()` is already used for this in this file (`figure:has(.blockchain3-cta-
 * section)`, `td:has(strong)`). Tables are excluded because
 * figure.wp-block-table has its own opt-out further up.
 * --------------------------------------------------------------------------- */

:where(body.single-post) .a3-ba-content figure:not(:has(figcaption)):not(.wp-block-table) {
  padding: 0;
  background: none;
  border: 0;
}

:where(body.single-post) .a3-ba-content figure:not(:has(figcaption)):not(.wp-block-table) img {
  aspect-ratio: auto;
  object-fit: fill;
  height: auto;
  opacity: 1;
  mix-blend-mode: normal;
  outline: 0;
}

/* ---------------------------------------------------------------------------
 * LIST MARKERS  (blog posts only)
 *
 * global.css:86 resets `ul, ol { list-style: none }` for the nav menus, which
 * is the right call for chrome and the wrong one for prose. This file gave the
 * article body its 24px indent but never put the markers back, so every
 * bulleted list in every post rendered as flush, unmarked lines.
 *
 * The rail, share, summary and related lists keep their own `list-style: none`
 * - they are components, not prose - and are excluded by name rather than by
 * relying on them sitting outside .a3-ba-content.
 * --------------------------------------------------------------------------- */

:where(body.single-post) .a3-ba-content :is(ul, ol):not(.a3-ba-toc__list, .a3-ba-share__menu, .a3-ba-summary__list, .a3-ba-related__list) {
  list-style-position: outside;
}

:where(body.single-post) .a3-ba-content ul:not(.a3-ba-toc__list, .a3-ba-share__menu, .a3-ba-summary__list, .a3-ba-related__list) {
  list-style-type: disc;
}

:where(body.single-post) .a3-ba-content ol:not(.a3-ba-toc__list, .a3-ba-share__menu, .a3-ba-summary__list, .a3-ba-related__list) {
  list-style-type: decimal;
}

:where(body.single-post) .a3-ba-content ul ul { list-style-type: circle; }
:where(body.single-post) .a3-ba-content ul ul ul { list-style-type: square; }
:where(body.single-post) .a3-ba-content ol ol { list-style-type: lower-alpha; }

:where(body.single-post) .a3-ba-content li::marker {
  color: var(--a3-ba-muted);
}

/* ---------------------------------------------------------------------------
 * IN-CONTENT CTA: COLOUR IT AGAINST ITS OWN BANNER
 *
 * The 14 raw-HTML CTA banners in post content split exactly in half by the
 * background set on the <section> inline: 7 carry `background-color: #f05a29`
 * and 7 carry `background-color: #000`. Every one of them uses the same button
 * classes - `white-btn orange-default text-white` - so one fixed colour cannot
 * serve both: whatever is right on the orange banner disappears on the black
 * one. The black banner was rendering "Contact Us" as bare white text on black.
 *
 * The inline background is the only thing that distinguishes them, so it is
 * what the rules key off - the same technique the light layer uses for
 * `[style*="background-image"]`.
 *
 *   black banner  -> orange pill, white text  (legacy `a.orange-default`)
 *   orange banner -> black pill, white text   (matches the live rendering)
 *
 * The copy also has to follow the banner: `.a3-ba-content p` sets #333 directly
 * and a direct rule beats the `color: #fff` the section inherits down, so the
 * sub-heading was near-invisible on black.
 * --------------------------------------------------------------------------- */

.a3-ba-content .blockchain3-cta-section :is(p, h2, h3, h4, h5, h6, li) {
  color: inherit;
}

/* The buttons carry `orange-default`, and legacy theme.css says exactly what
 * that means: `a.orange-default { background: #F05A29 }` - the brand orange,
 * white text. That is the intended default and it reads well on the black
 * banners. */
.a3-ba-content .blockchain3-cta-section :is(.white-btn, .btn, .btn-white) {
  background-color: #f05a29;
  color: #fff;
}

/* On the orange banner a white or orange pill both fail; black is what the
 * live site shows. `i` because the inline value is written lower-case here but
 * nothing guarantees that in future content. */
.a3-ba-content .blockchain3-cta-section[style*="f05a29" i] :is(.white-btn, .btn, .btn-white) {
  background-color: #000;
  color: #fff;
}

/* Bootstrap IS loaded on posts, and its `.text-white` utility is
 *
 *     .text-white { color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important }
 *
 * `!important` beats specificity, so every one of these buttons was painted
 * white regardless of the rules above - white text on the white pill. Matching
 * `!important` is the only way to answer it. The orange banners are unaffected:
 * their buttons carry an inline `!important` of their own, and an inline
 * declaration outranks a stylesheet one at the same weight. */
.a3-ba-content .blockchain3-cta-section :is(.white-btn, .btn, .btn-white).text-white {
  background-color: #f05a29 !important;
  color: #fff !important;
}

.a3-ba-content .blockchain3-cta-section[style*="f05a29" i] :is(.white-btn, .btn, .btn-white).text-white {
  background-color: #000 !important;
  color: #fff !important;
}