/* ============================================================
   Story body — the mockup's `.art-layout` + `.art-body`
   (styles/article.css).

   This container owns three things: the two-column grid, the measure, and the
   TYPOGRAPHY the story is set in. The last one has to reach inside
   `core/post-content`, which is why the prose rules are here and not on an atom
   — a container imposing type on its children is the section skeleton's own
   contract, applied to somebody else's block.

   Deltas from the mockup, deliberate:
     · whether there is a rail is decided by `:has()`, because the rail is an
       inner block an editor can remove — not a flag;
     · the mockup's `.art-lead` first-paragraph size is applied with
       `:first-child`, so an editor gets it by writing a first paragraph rather
       than by remembering a class they cannot type in Gutenberg anyway;
     · `blockquote` is styled generically (core/quote and core/pullquote both),
       since the story is written in the block editor, not in the mockup's hand
       markup.
   ============================================================ */
.vt-article__layout {
  --vt-article-measure: 820px;
  max-width: var(--vt-article-measure);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) 20px clamp(16px, 3vw, 32px);
}
.vt-article__layout--narrow { --vt-article-measure: 700px; }
.vt-article__layout--wide { --vt-article-measure: 960px; }

/* A rail is present only when an article-share child says so.

   THE RAIL LIVES IN A GUTTER, NOT IN THE MEASURE. It used to be `44px 1fr`
   inside the same 820px box the headline uses, which spent the rail's 44px and
   its 36px gap out of the reading column: measured at 1440px on 2026-09-22 the
   headline ran 330→1110 (780px) while every paragraph under it ran 410→1110
   (700px), so the story was 80px narrower than its own title and pushed 80px to
   the right of it. Below 1080px, where the rail hides, it was correctly aligned
   — which is what made the mismatch look like a mystery rather than a rail.

   So the box grows by a gutter on BOTH sides and the reading column is the
   middle track. The third track is empty on purpose: it is what keeps the
   measure centred on the page instead of shunted left by the rail's width. */
.vt-article__layout:has(> .vt-article__sharewrap--rail) {
  --vt-article-gutter: 80px; /* the 44px rail + the 36px gap */
  max-width: calc(var(--vt-article-measure) + 2 * var(--vt-article-gutter));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 36px;
  align-items: start;
}
.vt-article__layout > .vt-article__sharewrap--rail { grid-column: 1; }
/* The rail hides below 1080px (article-share/style.css) — the grid has to go
   with it, or the column it left behind is 44px of nothing. The widened box
   has to go with it too: `:has()` still matches the rail in the DOM while it is
   display:none, so without this the measure would grow by both gutters the
   moment the rail stopped occupying one. */
@media (max-width: 1080px) {
  .vt-article__layout:has(> .vt-article__sharewrap--rail) {
    display: block;
    max-width: var(--vt-article-measure);
  }
}

/* EVERY child except the rail belongs in the reading column, and it has to be
   said explicitly: grid auto-placement fills row by row, so the tags — the
   third child — landed back in the 44px rail column on the second row, and the
   chips wrapped inside themselves. Naming the column also means an editor can
   add a fourth block without discovering this the same way. */
.vt-article__layout:has(> .vt-article__sharewrap--rail) > *:not(.vt-article__sharewrap--rail) {
  grid-column: 2;
}
.vt-article__layout > * { min-width: 0; }

/* NOTHING BREAKS OUT OF THE MEASURE — except the story band, below.

   The migrated 2021–2026 stories carry alignments a previous template honoured:
   50 `alignwide` media-text bands, but also 5 groups, 4 columns and 4 images.
   Only the band earns the extra width here, so every other alignment is
   answered explicitly rather than left inert — it does nothing today only
   because `core/post-content` renders `is-layout-flow`, and a layout attribute
   added to the template later would turn all of them loose at once. */
.vt-article__layout .wp-block-post-content .alignwide,
.vt-article__layout .wp-block-post-content .alignfull {
  max-width: 100%;
  width: auto;
  margin-inline: 0;
}

/* THE STORY BAND IS THE ONE THING WIDER THAN THE PROSE, and the width it takes
   is the HEADER's: `.wrap--wide` is 1640px around a 32px gutter, so the logo and
   the login button sit on --layout-column-wide (1576px). The band lands on those
   same two lines, which is the whole point — one rule for how far anything on a
   story page may reach.

   WHICH BANDS. The lead one always: it is the story's opening statement, and it
   is what the featured image used to be (article-hero stands down for it). Then
   any band an editor marked wide or full. NOT the unmarked mid-story ones —
   "Visitech Then and Now" alone weaves four ~50% image+text pairs through its
   prose at positions 8, 12, 18 and 20, and those are reading matter, not bands.
   47 of the 64 opening bands carry `alignwide` already; `:first-child` is what
   catches the other 13, which are the newer ja/zh leads (measured 2026-09-22).

   THE MATHS. The reading column is centred on the page (the grid above is
   symmetric: 44px | measure | 44px), so widening symmetrically about its own
   centre lands the band on the page's centre too. `100%` is the column, so a
   negative inline margin of half the difference is the whole break-out. `max()`
   keeps it from ever going NARROWER than the column on a phone, where the
   viewport term wins. The 64px of gutter in the viewport term is more than any
   scrollbar, so `100vw` cannot overflow the page here. */
.vt-article__layout .wp-block-post-content > .wp-block-media-text:first-child,
.vt-article__layout .wp-block-post-content > .wp-block-media-text.alignwide,
.vt-article__layout .wp-block-post-content > .wp-block-media-text.alignfull {
  --vt-band: max(100%, min(var(--layout-column-wide), calc(100vw - 2 * var(--layout-gutter))));
  width: var(--vt-band);
  max-width: none;
  margin-inline: calc((100% - var(--vt-band)) / 2);
}

/* ---- the prose ---- */
.vt-article__layout .wp-block-post-content > p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 24px;
}
/* The mockup's `.art-lead`: the opening paragraph is larger. Given by
   position, because an editor writes a first paragraph — they do not apply a
   class. */
.vt-article__layout .wp-block-post-content > p:first-child {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.55;
  font-weight: var(--fw-light);
  margin-bottom: 28px;
}
.vt-article__layout .wp-block-post-content > h2,
.vt-article__layout .wp-block-post-content > h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 46px 0 16px;
}
.vt-article__layout .wp-block-post-content > h2 { font-size: clamp(24px, 3vw, 32px); }
.vt-article__layout .wp-block-post-content > h3 { font-size: clamp(20px, 2.4vw, 25px); margin-top: 38px; }

.vt-article__layout .wp-block-post-content a {
  color: var(--color-dark-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vt-article__layout .wp-block-post-content > ul,
.vt-article__layout .wp-block-post-content > ol {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 24px;
  padding-left: 1.3em;
}
.vt-article__layout .wp-block-post-content li { margin-bottom: 8px; }

.vt-article__layout .wp-block-post-content blockquote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(23px, 2.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-dark-purple);
  border-left: 3px solid var(--color-light-purple);
  padding: 0 0 0 28px;
  margin: 40px 0;
}
.vt-article__layout .wp-block-post-content blockquote p { margin: 0 0 10px; font: inherit; color: inherit; }
.vt-article__layout .wp-block-post-content blockquote cite {
  display: block;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  font-style: normal;
  color: var(--color-text-muted);
}

.vt-article__layout .wp-block-post-content figure,
.vt-article__layout .wp-block-post-content .wp-block-image,
.vt-article__layout .wp-block-post-content .wp-block-embed { margin: 40px 0; }
.vt-article__layout .wp-block-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.vt-article__layout .wp-block-post-content figcaption {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 12px;
  text-align: left;
}

/* An embed keeps its ratio and its corners — the mockup's `.art-video` frame. */
.vt-article__layout .wp-block-post-content iframe {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

/* A wide table in a story must scroll inside itself, never widen the page. */
.vt-article__layout .wp-block-post-content .wp-block-table { overflow-x: auto; }

/* ---- core blocks the LEGACY stories use ----
   Everything below exists because the migrated 2021–2026 stories embed these
   core blocks; new stories are written as plain prose. Buttons mirror
   components.css `.btn`/`.btn--solid` — the class can't be applied to a core
   button, so the look is restated here (keep the two in sync by hand). */
.vt-article__layout .wp-block-post-content .wp-block-buttons { margin: 32px 0; }
.vt-article__layout .wp-block-post-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--color-dark-purple);
  color: #fff;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.vt-article__layout .wp-block-post-content .wp-block-button__link:hover {
  background: var(--color-dark-blue);
  color: #fff;
  text-decoration: none;
}
.vt-article__layout .wp-block-post-content .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* An editor-set background (incl. the legacy palette) beats the default. */
.vt-article__layout .wp-block-post-content .wp-block-button__link.has-background:hover { filter: brightness(0.92); }

.vt-article__layout .wp-block-post-content .wp-block-columns {
  gap: 28px;
  margin: 32px 0;
}
.vt-article__layout .wp-block-post-content .wp-block-column > p { margin-bottom: 16px; }

/* A HEADING FOLLOWS THE SURFACE IT IS ON. base.css paints every h1–h6
   `--color-text-brand` (#5F4A8B), which on the legacy purple bands is the
   band's own gradient start — measured 2026-09-22 the "Lighting the way
   forward in additive manufacturing" h2 was rgb(95,74,139) on rgb(95,74,139),
   a contrast ratio of 1:1. The band already sets a text colour on its wrapper
   and the paragraphs inherit it; only the headings were being repainted. Same
   shape of bug as base.css's `a:hover` on a dark ground: a global colour rule
   that does not know what it is sitting on. A heading with a colour of its own
   still wins, because WP's preset classes carry `!important`. */
.vt-article__layout .wp-block-post-content .has-text-color :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* Mid-story media-text bands. (The opening ones are no longer duplicated by the
   story picture above them — visitech/article-hero stands down when the body
   already shows the featured image; see article_thumb_in_content().) */
.vt-article__layout .wp-block-post-content .wp-block-media-text {
  gap: 28px;
  margin: 40px 0;
  border-radius: var(--radius-lg);
}
.vt-article__layout .wp-block-post-content .wp-block-media-text.has-background { padding: 24px; }
.vt-article__layout .wp-block-post-content .wp-block-media-text__media img { border-radius: var(--radius-md); }
.vt-article__layout .wp-block-post-content .wp-block-media-text__content { padding: 0 4%; }

.vt-article__layout .wp-block-post-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 40px auto;
  max-width: 120px;
}
.vt-article__layout .wp-block-post-content .wp-block-video video {
  max-width: 100%;
  border-radius: var(--radius-lg);
}