/* V35 Journal layout fix.
   Root cause: .eyebrow uses display:inline-flex with no wrap/width
   constraints. On narrow viewports, long "Category · Date" strings
   (article hero byline meta, and journal card meta) do not wrap and
   are not constrained to their parent's width, so they can overflow
   their container, overlap the heading below them, and in some cases
   push the page into horizontal scroll. This file extends the article
   hero fix already shipped in article-spacing-v32.css to every place
   .eyebrow is used inside the Journal (index cards, article hero,
   article CTA panel) so the fix is consistent across the whole
   Journal section instead of only the hero.
*/

/* Journal index cards: category/date meta above the title. */
.article-card-copy > .eyebrow {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  gap: 0.55rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Belt-and-suspenders: no .eyebrow anywhere on the Journal / article
   pages should ever be able to force horizontal scroll, regardless of
   category label length. */
.journal-page .eyebrow,
.article-page .eyebrow {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Article hero and CTA panel: keep long titles, category lists and
   the byline from overlapping or clipping at any of the tested
   widths (375 / 768 / 1440). */
.article-hero,
.article-detail .cta-panel {
  overflow: hidden;
}
.article-hero h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article-byline {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

/* Prevent the feature image and prose column from ever exceeding the
   viewport width on small screens (guards against stray inline
   styles or unusually large embedded images inside post content). */
.article-feature,
.prose img,
.prose iframe,
.prose video {
  max-width: 100%;
}
.prose {
  overflow-wrap: anywhere;
}

/* Related-post / journal grid: stop card copy from ever stretching a
   grid track wider than its column and dragging the row layout with
   it, which previously produced misaligned or overlapping cards. */
.article-grid,
.article-card {
  min-width: 0;
}
.article-card-copy {
  min-width: 0;
}