/* Blog styles. Token-only Carbon: every color, size, and space resolves a Carbon custom
   property; type composes vendored type-token groups (productive + fluid/expressive sets),
   so g10/g90 both work without page-specific overrides. Loaded last, after site.css.
   Layout follows the Carbon editorial doctrine: cards per Carbon-for-IBM.com anatomy
   (tag, date, title, ArrowRight icon CTA), featured-first listing, article as eyebrow +
   fluid H1 + dek + byline, body on a constrained measure. */

.uru-blog-main {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  padding-block: var(--cds-spacing-09) var(--cds-spacing-10);
}

/* Carbon's css-grid has column gutters but no row gap, so stacked cards touch.
   Mirror the 32px wide-gutter vertically so posts separate naturally in every layout. */

.uru-blog-main .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}

/* The "Blog" product label doubles as the way back to the listing on article pages. */

a.uru-portal-shell__product {
  color: inherit;
  text-decoration: none;
}

a.uru-portal-shell__product:hover {
  text-decoration: underline;
}

a.uru-portal-shell__product:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Listing leadspace: a full-bleed dark theme zone (GitHub-blog-style band). The
   uru-contrast-zone class swaps the whole Carbon token set to g100, so every
   child token resolves dark automatically in both page themes. */

.uru-blog-main:has(.uru-blog-hero) {
  padding-block-start: 0;
}

.uru-blog-hero {
  padding-block: var(--cds-spacing-10) var(--cds-spacing-10);
  margin-bottom: var(--cds-spacing-07);
  background: var(--cds-background);
  color: var(--cds-text-primary);
}

.uru-blog-hero .uru-eyebrow {
  margin-bottom: var(--cds-spacing-04);
}

.uru-blog-hero .uru-blog-title {
  font-size: var(--cds-fluid-display-02-font-size, var(--cds-fluid-heading-06-font-size));
  line-height: var(--cds-fluid-display-02-line-height, var(--cds-fluid-heading-06-line-height));
  font-weight: var(--cds-fluid-display-02-font-weight, 600);
  margin: 0 0 var(--cds-spacing-06);
}

.uru-blog-hero .uru-blog-lede {
  color: var(--cds-text-secondary);
}

/* Gallery section labels with a full-width hairline (the GitHub "Featured" rule).
   The label owns the band above it: spacing-07 on top of the grid's spacing-07 row gap
   makes 64px of empty band before the label and 32px after its rule, so proximity binds
   the label to the cards it names instead of splitting the difference. */

.uru-blog-section-label {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  margin: var(--cds-spacing-07) 0 0;
  padding-bottom: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.uru-blog-title {
  font-size: var(--cds-fluid-heading-05-font-size);
  line-height: var(--cds-fluid-heading-05-line-height);
  font-weight: var(--cds-fluid-heading-05-font-weight);
  letter-spacing: var(--cds-fluid-heading-05-letter-spacing);
  margin: 0 0 var(--cds-spacing-05);
}

/* The fluid token scales with the VIEWPORT; from lg up this headline's container does not.
   The article is pinned to a 560px measure at every width, so past 1512 the type kept growing
   inside a column that did not, reaching 60px over 560px -- about nine characters a line. On
   the two longest posts that produced a five-line headline with "AI" alone on the last line,
   above the fold, as the first thing on the page. That is the fluid premise being violated
   rather than the fluid scale being wrong: fluid type assumes the container grows with the
   viewport, and here it is deliberately capped.

   Capping at 3rem makes >=1920 render exactly as 1512 does, which reads well: measured across
   three posts, 5 lines -> 4 and 4 -> 3 on the long headlines, unchanged on the short one.
   Not a wider measure for the headline -- that cap lives on .uru-blog-article, so widening it
   here does nothing (measured: width stays 560 with max-inline-size: none). */
@media (min-width: 66rem) {
  .uru-blog-title {
    font-size: min(var(--cds-fluid-heading-05-font-size), 3rem);
  }
}

/* Dek / standfirst: Carbon's fluid-paragraph-01 (24px light), the expressive lead-paragraph
   token. Used for the listing intro and as the article dek. */

.uru-blog-lede {
  font-size: var(--cds-fluid-paragraph-01-font-size);
  line-height: var(--cds-fluid-paragraph-01-line-height);
  font-weight: var(--cds-fluid-paragraph-01-font-weight);
  letter-spacing: var(--cds-fluid-paragraph-01-letter-spacing);
  color: var(--cds-text-primary);
  max-width: 42rem;
  margin: 0;
}

/* Shared card metadata (tag, date) per the IBM editorial order: tag, then date, then title. */

.uru-blog-card__tag.cds--tag {
  margin: 0 0 var(--cds-spacing-03);
}

.uru-blog-card__date {
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
  letter-spacing: var(--cds-label-01-letter-spacing);
  color: var(--cds-text-secondary);
  display: block;
  margin-bottom: var(--cds-spacing-03);
}

/* Grid card: Carbon clickable tile, flat, $border-tile, media 4:3 flush to the tile edges,
   ArrowRight icon CTA bottom-right ($icon-interactive, 12px inset). No teaser: the title
   carries the card (IBM Research pattern). */

.uru-blog-card {
  display: block;
  height: 100%;
  border: 1px solid var(--cds-border-tile-01, var(--cds-border-subtle));
  padding-bottom: var(--cds-spacing-09);
  position: relative;
}

.uru-blog-card__img {
  display: block;
  width: calc(100% + 2 * var(--cds-spacing-05));
  height: auto;
  margin: calc(-1 * var(--cds-spacing-05)) calc(-1 * var(--cds-spacing-05)) var(--cds-spacing-05);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.uru-blog-card__title {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  color: var(--cds-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.uru-blog-card:hover .uru-blog-card__title,
.uru-blog-featured:hover .uru-blog-featured__title {
  text-decoration: underline;
}

.uru-blog-card__arrow {
  position: absolute;
  right: var(--cds-spacing-04);
  bottom: var(--cds-spacing-04);
  color: var(--cds-icon-interactive, var(--cds-link-primary));
}

@media (prefers-reduced-motion: no-preference) {
  .uru-blog-card,
  .uru-blog-featured {
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }
  .uru-blog-card__arrow {
    transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }
}

.uru-blog-card:hover .uru-blog-card__arrow,
.uru-blog-featured:hover .uru-blog-card__arrow {
  transform: translateX(4px);
}

/* Featured card: newest post, full grid width; media 4:3 stacked on small screens,
   16:9 beside the text from lg up (the IBM featured-card treatment). */

.uru-blog-featured {
  display: grid;
  padding: 0;
  border: 1px solid var(--cds-border-tile-01, var(--cds-border-subtle));
}

.uru-blog-featured__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.uru-blog-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uru-blog-featured__body {
  position: relative;
  padding: var(--cds-spacing-06);
  padding-bottom: var(--cds-spacing-09);
}

.uru-blog-featured__title {
  font-size: var(--cds-fluid-heading-04-font-size);
  line-height: var(--cds-fluid-heading-04-line-height);
  font-weight: var(--cds-fluid-heading-04-font-weight);
  color: var(--cds-text-primary);
  margin: 0 0 var(--cds-spacing-05);
}

.uru-blog-card__teaser {
  font-size: var(--cds-body-02-font-size);
  line-height: var(--cds-body-02-line-height);
  color: var(--cds-text-secondary);
  margin: 0;
  max-width: 36rem;
}

@media (min-width: 66rem) {
  .uru-blog-featured {
    grid-template-columns: 1fr 1fr;
  }
  .uru-blog-featured__media {
    aspect-ratio: 16 / 9;
  }
  .uru-blog-featured__body {
    padding: var(--cds-spacing-07);
    padding-bottom: var(--cds-spacing-09);
    align-self: center;
  }
}

/* Section-anchor row under the article header (short inline TOC). */

.uru-blog-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03) var(--cds-spacing-06);
  margin: 0 0 var(--cds-spacing-06);
  padding: 0 0 var(--cds-spacing-05);
  list-style: none;
  border-bottom: 1px solid var(--cds-border-subtle);
}

.uru-blog-anchors li {
  margin: 0;
  display: flex;
  align-items: center;
}

/* 3rem (48px) is on Carbon's fixed sizing scale (8/16/24/32/48/64/80) and clears the
   44px touch minimum, which 18px of type plus spacing-03 did not. */

.uru-blog-anchors a {
  font-size: var(--cds-heading-compact-01-font-size);
  line-height: var(--cds-heading-compact-01-line-height);
  font-weight: var(--cds-heading-compact-01-font-weight);
  color: var(--cds-link-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-block-size: 3rem;
}

.uru-blog-anchors a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

.uru-blog-anchors a:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Key-takeaways: a restrained static tile ($layer-01, no border, no accent wash). */

/* Key-takeaways box padding is one token on all four edges, so the type sits against the
   pad on every side; the box outranks the callout below by pad size (24 against 16). */

.uru-blog-takeaways {
  background: var(--cds-layer-01);
  padding: var(--cds-spacing-06);
  margin: 0 0 var(--cds-spacing-06);
}

.uru-blog-takeaways h2 {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  margin: 0 0 var(--cds-spacing-04);
}

.uru-blog-takeaways ul {
  margin: 0;
  padding-left: var(--cds-spacing-06);
  list-style: disc;
}

.uru-blog-takeaways li {
  font-size: var(--cds-body-02-font-size);
  line-height: var(--cds-body-02-line-height);
  margin: 0 0 var(--cds-spacing-03);
}

.uru-blog-takeaways li:last-child {
  margin-bottom: 0;
}

/* Practice-note callout (the firm's own voice; never an invented quote). */

/* Neutral rule, not $support-info. The callout is an editorial aside in the firm's own
   voice; it carries no status, and painting it with the "Information" status colour is the
   same misuse this codebase already stripped off a marketing dot in home-overrides.css. */
.uru-blog-callout {
  border-left: 3px solid var(--cds-border-strong-01, var(--cds-border-strong));
  background: var(--cds-layer-01);
  padding: var(--cds-spacing-05);
  margin: var(--cds-spacing-06) 0;
}

.uru-blog-callout .uru-eyebrow {
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.uru-blog-callout p {
  margin: 0;
}

/* Embedded article figure: inset on the text column, caption-01 caption beneath. Equal
   space above and below, so the figure reads as one block rather than leaning downward. */

.uru-blog-figure {
  margin: var(--cds-spacing-06) 0;
}

.uru-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.uru-blog-figure figcaption {
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
  letter-spacing: var(--cds-label-01-letter-spacing);
  color: var(--cds-text-helper);
  margin-top: var(--cds-spacing-03);
}

/* Dim content imagery slightly under the dark theme. */

html[data-theme="g90"] .uru-blog-figure img,
html[data-theme="g90"] .uru-blog-card__img,
html[data-theme="g90"] .uru-blog-featured__media img,
html[data-theme="g90"] .uru-blog-related img {
  filter: brightness(0.92);
}

/* Right rail: author block and related posts. No top margin: from lg up the rail's first
   rule has to land on the same horizontal key line as the top of the article column, and
   in the stacked layout the grid's spacing-07 row gap already carries the seam. */

.uru-blog-rail {
  margin-top: 0;
}

/* Below lg the rail stacks under the article, and it was stacking at full container width
   while the article stayed hard left at its own measure. Measured at 1055 when the article
   was 36rem: article 576px, rail 991px, so 415px of dead gutter ran the whole height of the
   article and the page read as two different measures with a full-bleed block under it.
   The cap tracks the article -- both are 35rem now; this comment said 36rem for a while
   after the article moved, which is exactly the drift the "change both or neither" note
   below is there to prevent. */
@media (max-width: 65.98rem) {
  .uru-blog-rail {
    max-width: 35rem;
  }
}

/* The rail has to stick, or the right-hand column is empty for most of the page.
   Measured on a post at 1920: the rail is 469px tall inside a 3100px article
   column, so ~2600px of scrolling had nothing beside the prose at all. That void
   is what reads as the article being "fitted to the left" on a wide screen -- the
   text column is a normal width, it just had a blank half-page next to it.

   Same offset as layout B's on-this-page rail (3rem sticky header + spacing-09),
   and the same lg boundary, so the two rails behave identically. The height cap
   and auto overflow keep a rail taller than the viewport reachable. */
@media (min-width: 66rem) {
  .uru-blog-rail {
    position: sticky;
    inset-block-start: calc(3rem + var(--cds-spacing-09, 3rem));
    max-block-size: calc(100svh - 3rem - var(--cds-spacing-09, 3rem) - var(--cds-spacing-07, 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Article page column geometry from lg up. The captured markup puts the article on
   `lg:col-span-8` and the rail on `lg:col-start-11 lg:col-span-4`, which leaves THREE voids in
   a 16-column grid: columns 9-10 between them, columns 15-16 after the rail, and the article's
   own 560px measure cap sitting inside a column that grows to 736px. They compound. Measured at
   1512 before this rule: article column at x=32, a 217px gutter to the right of the rail, and a
   365px empty canyon between the end of the text and the start of the rail; at 1920 the
   article+rail block sat 96px left of the page centre with a 400px canyon. That is the "blog is
   weirdly fitted to the left" reading -- the measure was never wrong, the furniture around it
   was.

   The fix is columns, not width: give the article 1-10 and the rail 12-16, so the grid itself
   ends where the rail ends and the leftover space becomes symmetric page margin. The 64rem cap
   then keeps the pair together on very wide screens instead of letting the gutter grow.
   Measured after, all distances viewport edge to text/rail ink (not to the grid box, which sits
   32-40px further out on its own padding): text 560px and block centred to the pixel at every
   width; canyon 122px up to 1512 and 111px beyond; rail 273-278px; left margin = right gutter,
   48 at 1056, 160 at 1280, 276 at 1512, 488 at 1920, 808 at 2560.

   Column numbers here and the `col-span`/`col-start` classes in the captured article markup are
   one decision in two places: change one and the canyon comes back asymmetric. */

@media (min-width: 66rem) {
  .uru-blog-main .cds--css-grid:has(.uru-blog-article) {
    max-width: 64rem;
    margin-inline: auto;
  }

  .uru-blog-main .cds--css-grid-column:has(> .uru-blog-article) {
    grid-column: span 10 / span 10;
  }

  .uru-blog-main .cds--css-grid-column:has(> .uru-blog-rail) {
    grid-column: 12 / span 5;
  }
}

.uru-blog-rail__section {
  border-top: 3px solid var(--cds-border-strong);
  padding-top: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-08);
}

/* The seam belongs between sections, not after the last one, where it only pads the gap
   the stacked layout already gets from main's bottom padding. */

.uru-blog-rail__section:last-child {
  margin-bottom: 0;
}

.uru-blog-rail__label {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  margin: 0 0 var(--cds-spacing-05);
}

.uru-blog-author {
  font-size: var(--cds-body-compact-01-font-size);
  line-height: var(--cds-body-compact-01-line-height);
  color: var(--cds-text-secondary);
  margin: 0;
}

.uru-blog-author strong {
  color: var(--cds-text-primary);
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
}

.uru-blog-related {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uru-blog-related li {
  margin: 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}

.uru-blog-related li:last-child {
  border-bottom: none;
}

.uru-blog-related a {
  display: flex;
  gap: var(--cds-spacing-04);
  align-items: flex-start;
  padding: var(--cds-spacing-04) 0;
  text-decoration: none;
}

.uru-blog-related a:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.uru-blog-related img {
  width: 5rem;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  flex: none;
}

.uru-blog-related span {
  font-size: var(--cds-body-compact-01-font-size);
  line-height: var(--cds-body-compact-01-line-height);
  font-weight: var(--cds-body-compact-01-font-weight, 400);
  color: var(--cds-text-primary);
}

.uru-blog-related a:hover span {
  text-decoration: underline;
}

/* Article pages: constrained reading measure; byline sits bottom-right of the header
   block from lg up (the IBM Research placement).

   One spacing ladder runs the whole article, each rung a token step apart, so proximity
   alone says what belongs together: spacing-03 (8px) binds the eyebrow to the title,
   spacing-05 (16px) runs the title-to-dek pair and the running text, spacing-06 (24px) is
   the seam between the header blocks (dek, key takeaways, date, anchor row, figure), and
   spacing-09 (48px) is the section break. Nothing in the article uses two rungs for two
   different jobs. */

/* Measure, not width. At 42rem the body ran 85 characters per line at 16px/24px --
   past the 45-75 band that typographic practice treats as comfortable, and the
   reason the owner found the post harder to read on a wide screen than on a narrow
   one: shrinking the window was pulling the measure back down into range.

   The character count depends on how you count, so all three methods are given rather
   than the flattering one. At 35rem, against this article's own running text: 75.9 by
   average-glyph-width, 75.0 by walking the first rendered line box character by
   character, 69.4 by lowercase-alphabet mean. That is AT the top of the 45-75 band on
   two of the three methods, not comfortably inside it -- an earlier version of this
   comment claimed "inside the band either way" and was wrong. 36rem was 77.4 / 77 /
   71.4, over it. Going narrower than 35rem starts to fight the 2x grid, so this is the
   last value that fits both constraints. The rail is capped to the same value below lg
   so the two columns share one left edge and one measure -- change both or neither.

   (Carbon publishes type sets and scales but no measure figure -- the local
   reference store has none and neither typography guideline page states one -- so
   this is the general practice, applied to a value verified by measurement rather
   than a Carbon citation.) */
.uru-blog-article {
  max-width: 35rem;
}

.uru-blog-article > .uru-eyebrow {
  margin-bottom: var(--cds-spacing-03);
}

.uru-blog-article .uru-blog-lede {
  margin-bottom: var(--cds-spacing-06);
}

.uru-blog-article__meta {
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
  letter-spacing: var(--cds-label-01-letter-spacing);
  color: var(--cds-text-secondary);
  margin: 0 0 var(--cds-spacing-06);
}

@media (min-width: 66rem) {
  .uru-blog-article__meta {
    text-align: right;
  }
}

/* spacing-09 at every width, not spacing-07 with an lg step up: at 390px the old base
   value put the section break (32px) one rung from the block seam (24px), which is too
   close to read as a break, and left the article without a single band of spacing-09. */

.uru-blog-article h2 {
  font-size: var(--cds-fluid-heading-04-font-size);
  line-height: var(--cds-fluid-heading-04-line-height);
  font-weight: var(--cds-fluid-heading-04-font-weight);
  margin: var(--cds-spacing-09) 0 var(--cds-spacing-05);
  scroll-margin-top: var(--cds-spacing-09);
}

.uru-blog-article > h2 {
  border-top: 1px solid var(--cds-border-subtle);
  padding-top: var(--cds-spacing-06);
}

/* :where() drops these to element specificity on purpose. At .uru-blog-article p the rule
   outranked every single-class component rule nested in the article, so the anchor row got
   a 24px list indent and a 16px row margin it never asked for, the takeaways list kept a
   stray 16px below its last bullet, the callout paragraph gained a bottom margin, and the
   date meta rendered at body-02 instead of label-01. Component rules now win, as authored;
   anything nested that needs the running-text margin declares it (see .uru-blog-sources). */

:where(.uru-blog-article) p,
:where(.uru-blog-article) li {
  font-size: var(--cds-body-02-font-size);
  line-height: var(--cds-body-02-line-height);
  font-weight: var(--cds-body-02-font-weight);
  letter-spacing: var(--cds-body-02-letter-spacing);
  margin: 0 0 var(--cds-spacing-05);
}

:where(.uru-blog-article) ul {
  padding-left: var(--cds-spacing-06);
  margin: 0 0 var(--cds-spacing-05);
  list-style: disc;
}

.uru-blog-article a {
  color: var(--cds-link-primary);
}

.uru-blog-article a:hover {
  color: var(--cds-link-primary-hover);
}

.uru-blog-article a:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* The sources block is a section of the article, so it takes the same bordered head as an
   article h2: spacing-09 above the rule, spacing-06 below it. */

.uru-blog-sources {
  margin-top: var(--cds-spacing-09);
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle);
}

.uru-blog-sources h2 {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  margin: 0 0 var(--cds-spacing-04);
}

.uru-blog-sources p,
.uru-blog-sources li {
  font-size: var(--cds-label-02-font-size, var(--cds-body-compact-01-font-size));
  line-height: var(--cds-label-02-line-height, var(--cds-body-compact-01-line-height));
  color: var(--cds-text-secondary);
  margin: 0 0 var(--cds-spacing-05);
}

/* Block-level flex, shrunk to its text: as an inline box its top margin could not collapse
   with the preceding paragraph, so the seam came out 40px after body copy and 24px after the
   sources block. Block level collapses it to a flat spacing-06 either way. */

.uru-blog-back {
  display: flex;
  align-items: center;
  inline-size: fit-content;
  min-block-size: 3rem;
  margin-top: var(--cds-spacing-06);
  font-size: var(--cds-body-compact-01-font-size);
  line-height: var(--cds-body-compact-01-line-height);
  color: var(--cds-link-primary);
  text-decoration: none;
}

.uru-blog-back:hover {
  text-decoration: underline;
}

.uru-blog-back:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Cascade guards: boxed headings keep heading-03 regardless of the article-h2 ladder. */

.uru-blog-article .uru-blog-takeaways h2,
.uru-blog-article .uru-blog-sources h2 {
  font-size: var(--cds-heading-03-font-size);
  line-height: var(--cds-heading-03-line-height);
  font-weight: var(--cds-heading-03-font-weight);
  margin: 0 0 var(--cds-spacing-04);
}

/* Fluid type: the vendored theme sheet defines the fluid tokens at their smallest-breakpoint
   values only, so without these blocks nothing ever scales. Per-breakpoint values from
   @carbon/type styles.ts (fluid-display-02, fluid-heading-05, fluid-heading-04,
   fluid-paragraph-01); the fluid tokens are theme-independent, so a blanket html override
   is safe here. Breakpoints: md 42rem, lg 66rem, xlg 82rem, max 99rem. */

@media (min-width: 42rem) {
  :root[data-theme] {
    --cds-fluid-heading-05-font-size: 2.25rem;
    --cds-fluid-heading-05-font-weight: 300;
    --cds-fluid-heading-05-line-height: 1.22;
  }
}

@media (min-width: 66rem) {
  :root[data-theme] {
    --cds-fluid-display-02-font-size: 3.375rem;
    --cds-fluid-heading-05-font-size: 2.625rem;
    --cds-fluid-heading-05-line-height: 1.19;
    --cds-fluid-paragraph-01-font-size: 1.75rem;
    --cds-fluid-paragraph-01-line-height: 1.28572;
  }
}

@media (min-width: 82rem) {
  :root[data-theme] {
    --cds-fluid-display-02-font-size: 3.75rem;
    --cds-fluid-display-02-line-height: 1.16;
    --cds-fluid-heading-05-font-size: 3rem;
    --cds-fluid-heading-05-line-height: 1.17;
    --cds-fluid-heading-04-font-size: 2rem;
    --cds-fluid-heading-04-line-height: 1.25;
  }
}

@media (min-width: 99rem) {
  :root[data-theme] {
    --cds-fluid-display-02-font-size: 4.75rem;
    --cds-fluid-display-02-line-height: 1.13;
    --cds-fluid-heading-05-font-size: 3.75rem;
    --cds-fluid-paragraph-01-font-size: 2rem;
    --cds-fluid-paragraph-01-line-height: 1.25;
  }
}

/* Author photo in the article rail (2026-07-15). The author row is one of three rail
   sections of equal weight, so it keeps the shared spacing-08 section seam; the earlier
   spacing-05 override made this one seam 16px against 40px elsewhere, which read as the
   author row belonging to the section below it. */
.uru-blog-author-block {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
}

.uru-blog-author__photo {
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* Rail "Tematy / Topics" chip row (2026-07-15) */
.uru-blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
}

/* LinkedIn-funnel pass (2026-07-16): author profile link in the rail byline. */
.uru-blog-author__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--cds-border-strong);
}

.uru-blog-author__link:hover {
  color: var(--cds-link-primary-hover);
  border-bottom-color: currentColor;
}

.uru-blog-author__link:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Grid-card teasers: clamp so cards stay compact on mobile (featured teaser unclamped).
   max-block-size backstops engines that ignore -webkit-line-clamp (~2 lines at 1.5). */
.uru-blog-card .uru-blog-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-block-size: 3.2em;
}

/* Reading-path strip under the listing hero: a curated entry order for a first visit. */
.uru-blog-readpath {
  padding: var(--cds-spacing-06) 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}

.uru-blog-readpath__lead {
  font-size: var(--cds-body-compact-02-font-size);
  line-height: var(--cds-body-compact-02-line-height);
  color: var(--cds-text-secondary);
  margin: 0;
}

.uru-blog-readpath__list {
  list-style: none;
  counter-reset: readpath;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03) var(--cds-spacing-07);
  margin: var(--cds-spacing-03) 0 0;
  padding: 0;
}

.uru-blog-readpath__list li {
  counter-increment: readpath;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin: 0;
}

.uru-blog-readpath__list li::before {
  content: counter(readpath, decimal-leading-zero);
  font-size: var(--cds-label-01-font-size);
  color: var(--cds-text-helper);
}

.uru-blog-readpath__list a {
  font-size: var(--cds-body-compact-02-font-size);
  line-height: var(--cds-body-compact-02-line-height);
  color: var(--cds-link-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-block-size: 3rem;
}

.uru-blog-readpath__list a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

.uru-blog-readpath__list a:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Listing bottom call-to-action: the listing's own conversion path (was footer-only). */
.uru-blog-listing-cta {
  border-top: 1px solid var(--cds-border-subtle);
  margin-top: var(--cds-spacing-07);
  padding: var(--cds-spacing-07) 0;
}

.uru-blog-listing-cta p {
  font-size: var(--cds-body-02-font-size);
  line-height: var(--cds-body-02-line-height);
  color: var(--cds-text-primary);
  max-width: 44rem;
  margin: 0;
}

.uru-blog-listing-cta a {
  color: var(--cds-link-primary);
  text-decoration: underline;
}

.uru-blog-listing-cta a:hover {
  color: var(--cds-link-primary-hover);
}

.uru-blog-listing-cta a:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Blog conversion path (closing panel 2026-07-28, a4; REVISED by the round-2 verify)

   The first cut promoted the form link to the 48px filled primary. Round 2 rejected it as a
   must-fix: the anchor is a grammatical constituent of a running sentence ("Opisz go krótko w
   [formularzu kontaktowym] albo..."), so a button mid-clause broke the prose line on all 20
   pages and wrapped absurdly at 360. Under this run's copy freeze the sentence cannot be
   restructured into a standalone button row, so the primary action carries emphasis WITHIN the
   prose instead: weight 600 and the standard link underline, one visible step above the plain
   mailto beside it. The real button belongs to the logged copy pass that may restructure the
   CTA block (owner item). Hook stays the href; no markup, no copy changed. -------------- */
.uru-blog-listing-cta a[href*="#kontakt"],
.uru-blog-article p a[href*="#kontakt"] {
  font-weight: 600;
  color: var(--cds-link-primary);
}

.uru-blog-listing-cta a[href*="#kontakt"]:focus,
.uru-blog-article p a[href*="#kontakt"]:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* The fallback stays an ordinary underlined link. Dropping the rule under it to reach Carbon's
   ghost weight was built and then reverted: in g90 the mailto measures 2.14:1 against the body
   text around it (#78a9ff on #f4f4f4) and axe's link-in-text-block fails, because colour alone
   is then the only thing marking the link. The demotion is carried by the button beside it, and
   a 48px filled primary against a text link is already the whole hierarchy. */
.uru-blog-listing-cta a[href^="mailto:"],
.uru-blog-article p a[href^="mailto:"] {
  color: var(--cds-link-primary);
  text-decoration: underline;
  font-weight: 400;
}

.uru-blog-listing-cta a[href^="mailto:"]:hover,
.uru-blog-article p a[href^="mailto:"]:hover {
  color: var(--cds-link-primary-hover);
}

/* Architecture schematic (warstwa post): HTML/CSS boxes, border-strong so edges hold
   on g90; SVG arrows inherit currentColor. Compact vertical stack, budgeted to roughly
   one 390px screen. The human-write node used to take its accent from support-info --
   the same misuse of a status token as decoration that came off the callout and the
   evidence bars. It is emphasised by weight now, which needs no colour to say it. */
.uru-blog-schema {
  margin: var(--cds-spacing-06) 0;
}

.uru-blog-schema__band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
}

.uru-blog-schema__box {
  border: 1px solid var(--cds-border-strong);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  font-size: var(--cds-body-compact-01-font-size);
  line-height: var(--cds-body-compact-01-line-height);
  flex: 1 1 8rem;
  text-align: center;
}

.uru-blog-schema__box--layer {
  flex: 1 1 100%;
  font-weight: 600;
  padding-block: var(--cds-spacing-04);
}

.uru-blog-schema__box--human {
  border: 2px solid var(--cds-border-inverse, var(--cds-border-strong));
  font-weight: 600;
}

.uru-blog-schema__link {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-03) var(--cds-spacing-01);
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
}

.uru-blog-schema__arrow {
  fill: currentColor;
  flex: none;
}

.uru-blog-schema__arrow--down {
  transform: rotate(90deg);
}

.uru-blog-schema__return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-05);
  padding-top: var(--cds-spacing-05);
  border-top: 1px dashed var(--cds-border-strong);
}

.uru-blog-schema__return .uru-blog-schema__box {
  flex: 0 1 auto;
}

/* Stage flowchart (wspolpraca post): a vertical spine of boxes joined by arrows,
   a decision node, and a two-branch fork (continue with loop-back, or stop).
   Reuses the g90-proven schema-box device; no durations, no figures, no JS. */
.uru-blog-flow {
  margin: var(--cds-spacing-06) auto;
  display: flex;
  flex-direction: column;
  max-width: 30rem;
}

.uru-blog-flow .uru-blog-schema__box {
  flex: none;
  display: block;
  text-align: center;
  font-weight: 600;
}

.uru-blog-flow__note {
  display: block;
  font-weight: 400;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
  letter-spacing: var(--cds-label-01-letter-spacing);
  margin-top: var(--cds-spacing-01);
}

.uru-blog-flow__node--decision {
  border-width: 2px;
  border-style: dashed;
}

.uru-blog-flow__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--cds-spacing-02);
  padding: var(--cds-spacing-02) 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size);
  line-height: var(--cds-label-01-line-height);
}

.uru-blog-flow__arrow {
  fill: currentColor;
  flex: none;
}

.uru-blog-flow__arrow--down {
  transform: rotate(90deg);
}

.uru-blog-flow__arrow--up {
  transform: rotate(-90deg);
}

.uru-blog-flow__branches {
  display: flex;
  gap: var(--cds-spacing-03);
  align-items: stretch;
}

.uru-blog-flow__branch {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* Flex items refuse to shrink below their content's min-width by default; at 320px the
     fork's branches pushed the page 39px past the viewport (caught by the carbon-audit
     overflow gate). min-width: 0 restores shrinkability; the box text wraps. */
  min-width: 0;
}

.uru-blog-flow__branch .uru-blog-schema__box,
.uru-blog-flow__branch .uru-blog-flow__note {
  overflow-wrap: break-word;
}

.uru-blog-flow__branch .uru-blog-schema__box {
  flex: 1 1 auto;
}

.uru-blog-flow__loop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cds-spacing-02);
}

/* Continue-branch bundle: two separate boxes (next stage + the running layer)
   grouped side by side inside one container to read as a parallel package.
   The continue branch takes ~2/3 of the fork row. */
.uru-blog-flow__branch--wide {
  flex: 2 1 0;
}

.uru-blog-flow__bundle {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--cds-spacing-02);
  border: 1px solid var(--cds-border-strong);
  padding: var(--cds-spacing-03);
}

.uru-blog-flow__bundle .uru-blog-schema__box {
  flex: 1 1 0;
}

.uru-blog-flow__plus {
  align-self: center;
  flex: none;
  text-align: center;
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-03-font-size);
  line-height: 1;
}