/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
/* =========================================================================
   PAGE: BLOG ARTICLE (/blog/{slug}) — page-specific CSS.
   Linked from public/blog/article-new.blade.php @section('css'). All rules
   scoped under .page-blog-article. Tokens, .page-eyebrow, .footer-2026 and the
   nav come from /css/new/global-2026.css — not duplicated here.

   Holds: anti-cascade reset · sticky footer (+ overflow:clip for the subscribe
   band's full-bleed gradient) · article two-column layout · share row ·
   article-body prose (styles the real Laraberg/Gutenberg DB HTML) · related
   sidebar · subscribe band · the gated case-study unlock CTA + modal · and the
   shared components (.blog-feature--plain, .blog-card, .badge, .subscribe-field)
   scoped to this page.

   Breakpoints: mobile <768 · tablet 768..1023 · desktop >=1024 (content 1320).
   "Interesting for you" shows at ALL breakpoints: a 296px right sidebar on
   desktop, a full-width 3-across row on tablet, a full-width stack on mobile —
   always below the article and above the subscribe band.
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
.page-blog-article a:where(:not([class*="pui-"]):not(.pui-typography *)):link,
.page-blog-article a:where(:not([class*="pui-"]):not(.pui-typography *)):visited,
.page-blog-article a:where(:not([class*="pui-"]):not(.pui-typography *)):hover,
.page-blog-article a:where(:not([class*="pui-"]):not(.pui-typography *)):focus,
.page-blog-article a:where(:not([class*="pui-"]):not(.pui-typography *)):active { color: inherit; text-decoration: none; }

.page-blog-article button:where(:not([class*="pui-"])) {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-blog-article ul:where(:not(.pui-typography *)) { list-style: none; padding: 0; margin: 0; }   /* R — request 25 shipped (D162): a page reset leaves the Typography block's children alone */
.page-blog-article img { display: block; max-width: 100%; }

.page-blog-article .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: var(--pui-space-12);
  padding-right: var(--pui-space-12);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


/* ---------- Sticky footer + gradient clip ----------
   The absolutely-positioned .subscribe-band__gradient bleeds far past its card
   and would lengthen the page (an empty band under the footer) + cause sideways
   scroll. Clip it at the page wrapper (which ends at the footer). `clip` (not
   `hidden`) doesn't create a scroll container, so the fixed nav is unaffected.
   Footer comes from @include('blocks.footer-2026') (a .footer-2026 wrapper)
   placed inside .article-main; margin-top:auto pins it to the bottom. */
.page-blog-article {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.page-blog-article .article-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
  padding-bottom: 0;
}
.page-blog-article .article-main > .footer-2026 { margin-top: auto; }

/* Eyebrow uses the global .page-eyebrow class. */

/* ---------- Hero — shared .blog-feature--plain; page sets spacing only ---------- */
.page-blog-article .blog-feature--plain { margin-bottom: var(--pui-space-32); }

/* ===========================================================
   TWO-COLUMN LAYOUT — article content (left) + related sidebar (right)
   =========================================================== */
.page-blog-article .article-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-space-32);
}
.page-blog-article .article-content {
  flex: 0 0 856px;
  min-width: 0;
}
.page-blog-article .article-aside {
  flex: 0 0 296px;
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-24);
  /* Lift the cards ABOVE the subscribe band's translucent gradient, which is
     position:absolute;z-index:0 and bleeds upward into this region. Without this
     the gradient paints over the (opaque) cards and tints their surfaces; the
     gaps around the cards stay transparent so the gradient still shows there. */
  position: relative;
  z-index: 1;
}

/* ---- Share row: social icons + a compact subscribe field ---- */
.page-blog-article .article-share {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-bottom: var(--pui-space-32);
}
.page-blog-article .article-share > .pui-field {
  flex: 0 0 237px;
  min-width: auto;
  /* F — the place of the subscribe field in the share row; the field itself is blocks/subscribe-2026 (global-2026.css).
     `min-width: auto` keeps the row as it renders today: the box has never been 237 wide — its content (the email
     control at its natural width, the Button) needs 256, and a flex item does not go under its content. The Field's
     own `min-width: 0` would make it 237 for the first time; that is a design call, asked of Fedor, not taken here. */
}

/* This post's own tags — gray pills (same look as the hub filter pills),
   shown under the share/subscribe row and above the article body. */
.page-blog-article .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-space-8);
  margin: 0 0 var(--pui-space-32);
}
.page-blog-article .article-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--pui-size-control-medium);
  padding: var(--pui-space-8) var(--pui-space-16);
  border-radius: var(--pui-radius-full);
  background: var(--pui-surface-sunken);
  color: var(--pui-text-muted);
  font-family: var(--pui-font-family);
  font-weight: var(--pui-font-weight-500);
  font-size: var(--pui-font-size-14);
  line-height: var(--pui-font-line-height-normal);   /* B2 — Fedor: the tags keep the hub pills' light drawing (the Toggle's rest state: surface/sunken, text/muted, radius/full, 36 tall, 14 Medium) — the site's own label on tokens, no DS change */
}

/* ===========================================================
   ARTICLE BODY (prose) — styles the real Laraberg/Gutenberg HTML stored in
   the DB ({!! $blogArticle->article !!}): p, h2-h4, ul/ol/li, strong/em, a,
   figure.wp-block-image > img, iframe (embedded video), blockquote, hr.
   =========================================================== */
/* Base prose typography on the container so loose text nodes (e.g. the quote
   text inside a .flbox <div>, which is NOT a <p>) don't inherit layout.min.css's
   20px/30px/300 body cascade. */
.page-blog-article .pui-typography {
  display: flow-root;
  max-width: none;   /* D — the body is .pui-typography (typography.css quotes this file as its source): the family, body/medium, Regular, the 1.6 line and the ink are the kit's (text/default, #0b0202 for #000 — D50); the kit's 720 measure is lifted — the contract states the site's 856 column */
  /* Long unbroken URLs used as link text (e.g. https://…/chatwithchase/) must
     wrap, or they overflow the column on narrow screens. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* first heading shouldn't add a big top gap right under the share row */
/* D — the kit's first-child rule zeroes the first block's top margin */

/* D — the paragraph gap is the kit's 16 under each paragraph (was 1em = 18 — for the veto pass) */

/* R — the link-underline guard went: the page reset no longer reaches the block (request 25) */

/* R — request 17 shipped: the kit's strong is font/weight/600 (his Semibold); the D2 guard went */
.page-blog-article .pui-typography em { font-style: italic; }

/* Lists — re-add markers (the anti-cascade reset strips list-style off ul). */
.page-blog-article .pui-typography ol { list-style: decimal; }
/* D — the items sit at the kit's gap 4 (was 6 between — for the veto pass) */
/* D — the marker is the kit's text/muted (the same #544d4d) */

/* Images / figures (Laraberg wraps images in figure.wp-block-image). */
.page-blog-article .article-body__figure { margin: var(--pui-space-32) 0; }   /* D — the figure element is the kit's (32 around, a column with the caption 8 under); the __figure class is the site's own, by name */
.page-blog-article .pui-typography figure.aligncenter { text-align: center; }
.page-blog-article .pui-typography img,
.page-blog-article .article-body__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--pui-radius-16);      /* 16 */
}
.page-blog-article .article-body__figure + h2 { margin-top: var(--pui-space-8); }   /* D — by name */

/* Embedded video (iframe) — keep 16:9 and full width. */
.page-blog-article .pui-typography iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: var(--pui-space-32) 0;   /* D — by name; an embedded video is the site's own block (the kit's figure holds an Aspect ratio) */
  border: 0;
  border-radius: var(--pui-radius-16);
}


/* ===========================================================
   WordPress / Gutenberg block layouts inside the body.
   Without these the editor's flex blocks (columns, the custom .flbox
   person-quote) collapse to stacked divs and images blow up full-width.
   =========================================================== */

/* NOTE: the editor's `has-text-align-center` class on headings/paragraphs is
   intentionally NOT honoured — the live site doesn't act on it (those headings
   render left-aligned), so we leave them at their natural left alignment to
   match the original. Only image figure alignment is handled (below). */

/* Image alignment (size-full aligncenter is the default — the big charts). */
.page-blog-article .pui-typography figure.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.page-blog-article .pui-typography .aligncenter { text-align: center; }

/* File download block. */
.page-blog-article .pui-typography .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pui-space-16);
  margin: var(--pui-space-24) 0;   /* D — by name; the CMS blocks from here down are the site's own (the kit's Typography has no WordPress blocks — request 25) */
}
.page-blog-article .pui-typography .wp-block-file a { text-decoration: underline; }
.page-blog-article .pui-typography .wp-block-file .wp-block-file__button {
  display: inline-block;
  padding: var(--pui-space-8) 18px;   /* D — space/8 by name; a CMS button cannot carry the Button class — its 18 stays, stated */
  background: var(--pui-action-primary-bg);
  color: var(--pui-action-primary-fg);
  border-radius: var(--pui-radius-8);
  text-decoration: none;
}
.page-blog-article .pui-typography figure.alignleft {
  float: left; max-width: 45%; margin: 6px 28px 18px 0;   /* D — the floats' margins are the editor's own — stated */
}
.page-blog-article .pui-typography figure.alignright {
  float: right; max-width: 45%; margin: 6px 0 18px 28px;
}
.page-blog-article .pui-typography figure.alignleft img,
.page-blog-article .pui-typography figure.alignright img { width: 100%; }

/* Resized images keep their intended (smaller) size instead of stretching. */
.page-blog-article .pui-typography figure.is-resized { display: inline-block; max-width: 100%; }
.page-blog-article .pui-typography figure.is-resized img { width: 100%; height: auto; }
.page-blog-article .pui-typography figure.aligncenter.is-resized { display: block; }

/* ---- Person-quote: custom `.flbox` block = round portrait (left) + text (right). ---- */
.page-blog-article .pui-typography .flbox {
  display: flex;
  align-items: center;
  gap: var(--pui-space-32);
  margin: 36px 0;   /* D — space/32 by name; 36 is the block's own — stated */
}
.page-blog-article .pui-typography .flbox-pic {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
}
.page-blog-article .pui-typography .flbox-pic figure { margin: 0; }
.page-blog-article .pui-typography .flbox-pic img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;        /* round portrait, like the live article */
}
.page-blog-article .pui-typography .flbox > div:last-child { flex: 1 1 0; min-width: 0; }

/* ---- Gutenberg columns (side-by-side). ---- */
.page-blog-article .pui-typography .wp-block-columns {
  display: flex;
  gap: var(--pui-space-32);
  align-items: flex-start;
  margin: var(--pui-space-24) 0;   /* D — by name */
}
.page-blog-article .pui-typography .wp-block-column { flex: 1 1 0; min-width: 0; }
.page-blog-article .pui-typography .wp-block-column > *:first-child { margin-top: 0; }

/* ---- Buttons. ---- */
.page-blog-article .pui-typography .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-space-12);
  margin: var(--pui-space-24) 0;   /* D — by name */
  list-style: none;
  padding: 0;
}
.page-blog-article .pui-typography .wp-block-button__link,
.page-blog-article .pui-typography .wp-block-button a {
  display: inline-block;
  padding: var(--pui-space-12) var(--pui-space-24);   /* D — by name; a CMS button cannot carry the Button class — stated */
  background: var(--pui-action-primary-bg);
  color: var(--pui-action-primary-fg);
  border-radius: var(--pui-radius-8);
  font-weight: var(--pui-font-weight-500);   /* D — by name */
  text-decoration: none;
}
.page-blog-article .pui-typography .wp-block-button__link:hover,
.page-blog-article .pui-typography .wp-block-button a:hover { background: var(--pui-action-primary-bg-hover); }

/* ---- Gallery. ---- */
.page-blog-article .pui-typography .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pui-space-12);
  margin: var(--pui-space-24) 0;   /* D — by name */
  list-style: none;
  padding: 0;
}
.page-blog-article .pui-typography .wp-block-gallery figure { flex: 1 1 220px; margin: 0; }

/* ---- Cover / group spacing. ---- */
.page-blog-article .pui-typography .wp-block-cover { margin: var(--pui-space-24) 0; border-radius: var(--pui-radius-16); overflow: hidden; }   /* D — by name */
.page-blog-article .pui-typography .wp-block-group { margin: var(--pui-space-24) 0; }   /* D — by name */
.page-blog-article .pui-typography .wp-block-separator {
  margin: var(--pui-space-32) auto;   /* D — by name; the 100 measure is the editor's — stated */
  border: 0;
  border-top: 1px solid var(--pui-color-neutral-200);
  max-width: 100px;
}

/* ---- Related sidebar (cards are the shared .blog-card) ---- */
.page-blog-article :where(.article-aside) > .pui-text--body-large {
  margin: 0;
  width: 100%;
  color: var(--pui-text-default);
}
.page-blog-article .article-related {
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-16);
  width: 100%;
}

/* ===========================================================
   GATED CASE-STUDY UNLOCK — the CTA shown when the body contains a
   .caseStudyDelimeter (gated article, no cookie) + the lead-capture modal.
   Submits to the existing /contact42 endpoint (see @section('js')).
   =========================================================== */
.page-blog-article .case-unlock {
  margin-top: var(--pui-space-32);
  display: flex;
  justify-content: center;
}
.page-blog-article .case-unlock[hidden] { display: none; }
/* descendant selector (0,2,0) beats the anti-cascade `.page-* button` reset (0,1,1) */
/* A1 — its hover is the Button's */
/* A1 — its pressed state is the Button's */

.page-blog-article .pui-scrim {
  z-index: 1000;
  /* B — the scrim (fixed, the viewport, centred, padding 16 — the site's 24; overlay/scrim) is .pui-scrim; `z-index` 1000 stays — the kit's 50 sits under the site's fixed bar (as the About popup) */
}
.page-blog-article .pui-scrim[hidden] { display: none; }
.page-blog-article .case-gate__overlay {
  position: absolute;
  inset: 0;
  background: transparent;   /* B — the scrim paints the overlay (overlay/scrim: neutral/800 at 50 % — the site's black at 55 %, stated); this layer stays as the click-to-close target */
}
.page-blog-article .pui-dialog {
  position: relative;
  z-index: 1;
  /* B — the card (480 — the site's 460, the Dialog's medium; padding 24 — the site's 40 / 32 / 32; surface/card — the site's white; radius 16 — the site's 32; elevation/modal — the site's 0 32 64 −12 at 25 %; a column at gap 16; all stated) is .pui-dialog--medium */
}
/* B — the hover is the kit's */
.page-blog-article .pui-dialog__content { display: flex; flex-direction: column; gap: var(--pui-space-12);   /* B — on the scale (was 14); the form sits in the Dialog's white content slot (surface/slot, radius 8, padding 16) */ }
.page-blog-article .pui-scrim :where(.pui-dialog__content) > .pui-button {
  margin-top: var(--pui-space-8);
  /* A1 — the gate's submit is .pui-button--large; `margin-top: 8px` stays — the form's rhythm */
  /* B — the one verb stays in the form's flow, full width: the Dialog's footer is for a pair of buttons, and a submit outside its form would need form= (stated) */
}
.page-blog-article .pui-scrim :where(.pui-dialog__content) > .pui-button:hover { background: var(--pui-action-primary-bg-hover); }
.page-blog-article .pui-scrim :where(.pui-dialog__content) > .pui-button:active { transform: scale(0.99); }

/* ===========================================================
   SUBSCRIBE BAND — MAFO-style: an SVG gradient bleeds BEHIND a frosted glass
   card (no PNG bg). The card holds the shared .subscribe-field.
   =========================================================== */
.page-blog-article .subscribe-band {
  position: relative;
  margin-top: var(--pui-space-64);
  margin-bottom: var(--pui-space-64);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-blog-article .subscribe-band__gradient {
  position: absolute;
  top: 79%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: 2300px;
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.page-blog-article .subscribe-band__card {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 49px;
  min-height: 126px;
  padding: var(--pui-space-16) var(--pui-space-32);
  background: color-mix(in srgb, var(--pui-color-neutral-0) 66%, transparent);
  -webkit-backdrop-filter: blur(15.1px);
  backdrop-filter: blur(15.1px);
  border-radius: var(--pui-radius-16);          /* 16 */
  box-shadow: var(--pui-shadow-xxl-soft);
  overflow: hidden;
}
.page-blog-article :where(.subscribe-band__card) > .pui-text--headline-small {
  flex: 0 0 auto;
  margin: 0;
  color: var(--pui-text-default);
}
.page-blog-article .subscribe-band__card > .pui-field {   /* F — the place of the subscribe field in the band: the rest of the row */
  flex: 1 1 0;
  min-width: 0;
}

/* =========================================================================
   SHARED COMPONENTS — scoped to .page-blog-article.
   ========================================================================= */

/* ---- Hero banner: .blog-feature--plain only (grey card, no read-more). ---- */
.page-blog-article .blog-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-space-32);
  padding: var(--pui-space-32);
  border-radius: var(--pui-radius-32);          /* 32 */
}
.page-blog-article .blog-feature--plain { background: var(--pui-surface-card); }   /* #f2f2f7 */
.page-blog-article .blog-feature__body {
  flex: 0 0 704px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pui-space-24);
}
.page-blog-article .blog-feature__media {
  flex: 0 0 411px;
  align-self: center;
  aspect-ratio: 411 / 231;
  border-radius: var(--pui-radius-16);          /* 16 */
  overflow: hidden;
}
.page-blog-article .blog-feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Blog card (related sidebar). ---- */
.page-blog-article .article-related .pui-card__media {
  width: 100%;
  aspect-ratio: 265 / 147;
  /* P2 — the 8 radius and the crop are .pui-card__media; the 265/147 aspect stays */
}

/* Full-title tooltip — single floating element (built in JS) that follows the
   cursor, ~250ms after hovering a truncated card. Black frosted glass like the
   nav; appended to <body> so the page's overflow:clip never clips it. */
.blog-card-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  max-width: 300px;
  padding: 9px 13px;
  background: color-mix(in srgb, var(--pui-color-neutral-1000) 62%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--pui-color-neutral-0);
  font-family: 'Poppins', sans-serif;
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-font-size-13);
  line-height: 1.45;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--pui-color-neutral-0) 12%, transparent);
  box-shadow: var(--pui-elevation-card);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.blog-card-tip.is-visible { opacity: 1; }

/* 2.4.2 — the tag badge is .pui-badge--small + its tone — badge.css */
/* 2.4.2 — the subscribe field (the white box, its input, its black button, --sm) is .pui-input-group (+ --large for the 55 px band; the inline button is the primary Button one size below the box, D47) — input-group.css quotes these lines; .is-invalid and the wrap rules stay */
/* F — the field's message, its invalid line and the column they sit in are the subscribe field's own (blocks/subscribe-2026: a Field around the Input group; global-2026.css) */

/* =========================================================================
   TABLET — 768 .. 1023  (single column; "Interesting for you" becomes a
   full-width 3-across row below the article, per Figma)
   ========================================================================= */
@media (max-width: 1023px) {
  .page-blog-article .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--pui-space-32);
    padding-right: var(--pui-space-32);
  }

  .page-blog-article .article-layout { display: block; }
  .page-blog-article .article-content { flex: none; width: 100%; }

  /* "Interesting for you" now shows at ALL breakpoints, below the article and
     above the subscribe band (per the updated Figma). The aside DOM already sits
     after .article-content and before .subscribe-band, so once .article-layout
     stops being a flex row the aside drops into place full-width. */
  .page-blog-article .article-aside {
    display: flex;         /* was: none (desktop-only sidebar) */
    flex: none;            /* full-width block, not the 296px sidebar column */
    width: 100%;
    margin-top: var(--pui-space-64);
    /* flex-direction:column + gap:24px (title→cards) inherited from the base rule;
       24px matches Figma's tablet title→cards spacing. */
  }
  /* 3 cards across — Figma tablet: 3 × 245px + 16px gap on the 770 content width. */
  .page-blog-article .article-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pui-space-16);
  }

  .page-blog-article .blog-feature__body { flex: 1 1 auto; }
  .page-blog-article .blog-feature__media { flex: 0 0 327px; }

  /* Keep the SVG's aspect (height:auto) and centre it — the card here is short
     & wide, so the desktop `height:200%` squashed the gradient into a tiny
     centred blob (SVG preserveAspectRatio fits the artwork to the short height).
     Over-size by width so the colour spans the whole card and bleeds; the page
     wrapper's overflow:clip trims the excess. */
  .page-blog-article .subscribe-band__gradient { top: 50%; left: 50%; width: 200%; height: auto; }
}

/* =========================================================================
   MOBILE — <768  (share row stacks, hero stacks, subscribe band stacks)
   ========================================================================= */
@media (max-width: 767px) {
  .page-blog-article .container { padding-left: var(--pui-space-16); padding-right: var(--pui-space-16); }

  .page-blog-article .blog-feature--plain { margin-bottom: var(--pui-space-24); }
  .page-blog-article .blog-feature {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pui-space-16);
    padding: var(--pui-space-24);
  }
  .page-blog-article .blog-feature__body { flex: 0 0 auto; order: 2; gap: var(--pui-space-16); }
  .page-blog-article .blog-feature__media { flex: 0 0 auto; order: 1; width: 100%; aspect-ratio: 327 / 184; }

  /* Share row stacks: socials on top, subscribe field full-width below. */
  .page-blog-article .article-share {
    flex-direction: column;
    align-items: stretch;
    gap: 21px;
  }
  /* The desktop `flex: 0 0 237px` would turn into a 237px HEIGHT in this COLUMN
     layout (a big empty gap under the field). Collapse it to content. */
  .page-blog-article .article-share > .pui-field {
    flex: 0 0 auto;
    width: 100%;
  }

  .page-blog-article .article-body__figure { margin: var(--pui-space-24) 0; }   /* D — by name */

  /* Body blocks stack on mobile. */
  .page-blog-article .pui-typography .flbox { flex-direction: column; align-items: flex-start; gap: var(--pui-space-16); }   /* D — by name */
  .page-blog-article .pui-typography .flbox-pic { flex: 0 0 auto; width: 160px; max-width: 160px; }
  .page-blog-article .pui-typography .wp-block-columns { flex-direction: column; gap: var(--pui-space-16); }   /* D — by name */
  .page-blog-article .pui-typography figure.alignleft,
  .page-blog-article .pui-typography figure.alignright { float: none; max-width: 100%; margin: var(--pui-space-16) 0; }   /* D — by name */

  /* "Interesting for you" — cards stack full-width (Figma mobile: 1 col, 16px
     gap; title→cards gap tightens to 16px). */
  .page-blog-article .article-aside { margin-top: var(--pui-space-48); gap: var(--pui-space-16); }
  .page-blog-article .article-related { grid-template-columns: 1fr; }

  /* Subscribe band stacks: heading above the field. */
  .page-blog-article .subscribe-band { margin-top: var(--pui-space-40); margin-bottom: var(--pui-space-48); }
  /* Stacked (taller, narrower) card — same aspect-preserving approach, a touch
     wider so the colour still covers the whole card. */
  .page-blog-article .subscribe-band__gradient { top: 50%; left: 50%; width: 260%; height: auto; }
  .page-blog-article .subscribe-band__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pui-space-16);
    padding: var(--pui-space-24) var(--pui-space-16);
  }

  .page-blog-article .pui-dialog { padding: var(--pui-space-32) var(--pui-space-20) var(--pui-space-24); }
}

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* THE FEATURE BANNER'S TITLE — a role as a class (headline/medium on the gradient and the plain banner, headline/small on the light one);
   the page states its weight, its ink and its tracking by name, and below 1024 — where the banner is narrow — the size of a smaller role. */
.page-blog-article .blog-feature__body > :is(.pui-text--headline-medium, .pui-text--headline-small) {
  margin: 0;
  color: var(--pui-text-default);
}
.page-blog-article .blog-feature--gradient .blog-feature__body > .pui-text--headline-medium { color: var(--pui-text-on-accent); }
@media (max-width: 1023px) {
  .page-blog-article .blog-feature__body > .pui-text--headline-small { font-size: var(--pui-type-body-large-font-size); }
  .page-blog-article .blog-feature__body > .pui-text--headline-medium { font-size: var(--pui-type-title-small-font-size); }   /* the size pin stays (request 61) — restored 2026-10-05 */
}
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */