/* =============================================================
   BBI - Article detail (single)
   assets/css/single.css
   ============================================================= */

/* -------------------------------------------------------------
   1. Article header
   ------------------------------------------------------------- */

.bbi-single {
  padding-block-start: var(--article-gap-after-divider, 50px);
}

.bbi-article-social-rail {
  flex-shrink: 0;
}

.bbi-article-social-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.bbi-article-social-rail__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bbi-social-icon-size);
  height: var(--bbi-social-icon-size);
  padding: 0;
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.bbi-article-social-rail__link:hover,
.bbi-article-social-rail__link:focus-visible {
  background: transparent;
  transform: translateY(-1px);
}

.bbi-article-header {
  margin-bottom: var(--space-10);
}

.bbi-article-header__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 953px;
}

.bbi-article-header__meta-top {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 10px; /* 10px margin + 10px container gap = 20px total gap */
}

/* Shared pill styles from .bbi-category-label (home Latest News / hero). */
.bbi-article-header__category {
  min-width: 116px;
  border-radius: 0;
  -webkit-clip-path: var(--bbi-clip-path-chamfer-4);
  clip-path: var(--bbi-clip-path-chamfer-4);
}

.bbi-article-header__date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  color: var(--color-byline);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
  padding-bottom: 2px; /* Align with the bottom edge of the category box */
}

.bbi-article-header__title {
  font-family: var(--font-display);
  /* Fluid scale: ~32px on a 1024 vw and 50px on a 1440+ vw. */
  font-size: clamp(32px, 4vw, 50px);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-black);
}

.bbi-article-header__excerpt {
  font-family: var(--type-article-excerpt-font) !important;
  font-size: var(--type-article-excerpt-size);
  font-style: var(--type-article-excerpt-style) !important;
  font-weight: var(--type-article-excerpt-weight) !important;
  line-height: var(--type-article-excerpt-line-height);
  letter-spacing: var(--letter-spacing-normal);
  font-synthesis: none;
  color: var(--color-black);
  margin: 0;
  max-width: 814px;
}

.bbi-article-header__byline {
  margin-top: 10px;
}

/* Desktop: title left, social rail right (same row as the headline). */
.bbi-article-social-rail--byline {
  display: none;
}

@media (min-width: 1200px) {
  .bbi-article-header__inner {
    max-width: none;
    width: 100%;
  }

  .bbi-article-header__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
  }

  .bbi-article-header__title-row .bbi-article-header__title {
    flex: 1 1 auto;
    max-width: 953px;
    min-width: 0;
  }

  .bbi-article-header__title-row .bbi-article-social-rail--header {
    display: block;
    flex-shrink: 0;
    align-self: flex-start;
  }
}

.bbi-article-author {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  margin-top: 0;
}

.bbi-article-author__prefix {
  color: var(--color-byline);
  text-transform: uppercase;
}

.bbi-article-author__dropdown-wrapper {
  position: relative;
  display: inline-flex;
}

.bbi-article-author__trigger {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.bbi-article-author__name {
  transition: color var(--transition-fast);
}

.bbi-article-author__chevron {
  transition: transform var(--transition-fast);
}

.bbi-article-author__trigger[aria-expanded="true"] .bbi-article-author__chevron {
  transform: rotate(180deg);
}

.bbi-article-author__trigger:hover .bbi-article-author__name,
.bbi-article-author__trigger:focus-visible .bbi-article-author__name,
.bbi-article-author__trigger[aria-expanded="true"] .bbi-article-author__name {
  color: inherit;
}

.bbi-article-author__trigger:hover .bbi-article-author__chevron,
.bbi-article-author__trigger:focus-visible .bbi-article-author__chevron,
.bbi-article-author__trigger[aria-expanded="true"] .bbi-article-author__chevron {
  color: inherit;
}

.bbi-article-author__trigger:hover .bbi-icon-svg,
.bbi-article-author__trigger:focus-visible .bbi-icon-svg,
.bbi-article-author__trigger[aria-expanded="true"] .bbi-icon-svg {
  stroke: currentColor;
}

/* -------------------------------------------------------------
   Author dropdown panel
   ------------------------------------------------------------- */

.bbi-author-dropdown[hidden] {
  display: none;
}

.bbi-author-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: var(--z-above);
  width: 306px;
  background: var(--color-background);
  border: none;
  padding: 0;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.12);
}

.bbi-author-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 12px solid var(--color-background);
}

.bbi-author-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bbi-author-dropdown__item {
  position: relative;
}

.bbi-author-dropdown__item:not(:last-child)::after {
  content: '';
  display: block;
  border-bottom: 0.5px solid var(--color-byline);
  margin-left: 20px;
  margin-right: 48px;
}

.bbi-author-dropdown__list::after {
  content: '';
  display: block;
  border-bottom: 0.5px solid var(--color-byline);
  margin-left: 20px;
  margin-right: 48px;
}

.bbi-author-dropdown__link {
  display: block;
  padding: 24px 20px;
  color: var(--color-black);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}

.bbi-author-dropdown__view-all {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 20px 48px 24px 20px;
  color: var(--color-accent-blue);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.bbi-author-dropdown__view-all:hover,
.bbi-author-dropdown__view-all:focus-visible {
  opacity: 1;
}

.bbi-author-dropdown__icon {
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.bbi-author-dropdown__icon path {
  stroke: currentColor;
}

.bbi-author-dropdown__view-all:hover .bbi-author-dropdown__icon,
.bbi-author-dropdown__view-all:focus-visible .bbi-author-dropdown__icon {
  transform: translateX(4px);
  color: inherit;
}

.bbi-author-dropdown__empty {
  padding: 24px 20px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* -------------------------------------------------------------
   Featured image
   ------------------------------------------------------------- */

.bbi-article-featured {
  margin: 0 0 40px;
}

.bbi-article-featured__frame {
  position: relative;
  width: 100%;
  max-width: 1648px;
  margin: 0 auto;
  aspect-ratio: 1648 / 1074;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.bbi-article-featured__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  opacity: 1;
}

/* -------------------------------------------------------------
   Audio player
   ------------------------------------------------------------- */

.bbi-audio-player {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-gray-50);
  border-left: 4px solid var(--color-accent-blue);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  width: 100%;
}

.bbi-audio-player--hint p { margin: 0 0 var(--space-1); }
.bbi-audio-player--hint .description {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.bbi-article-body .trinityaudio,
.bbi-article-body .trinity-skin {
  margin-bottom: var(--space-6) !important;
  background-color: var(--color-gray-50) !important;
  border: 0 !important;
  border-left: 4px solid var(--color-accent-blue) !important;
  border-radius: 0 !important;
  font-family: var(--font-ui) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------------
   Body (two-column)
   ------------------------------------------------------------- */

/*
 * Desktop ADP (1728 artboard): header/featured use the 1648 rail (40px gutter via
 * chrome-gutters.css). Body uses a narrower 1450px centred block (1370px content +
 * 40px padding each side) so prose + trending sit inset from the header rail.
 */
@media (min-width: 1200px) {
  .bbi-article-body .container {
    max-width: 1450px;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--site-chrome-inline);
    box-sizing: border-box;
  }

  .bbi-article-body__row {
    grid-template-columns: minmax(0, 814px) minmax(0, 460px);
    column-gap: 81px;
  }

  .bbi-article-body__main {
    max-width: none;
    width: auto;
  }

  .bbi-article-body__sidebar {
    width: 460px;
  }

  .bbi-article-body__row > .bbi-article-body__divider {
    padding-inline: var(--site-chrome-inline);
  }
}

.bbi-article-body__row {
  display: grid;
  grid-template-columns: minmax(0, 814px) 460px;
  column-gap: 81px;
  align-items: start;
}

.bbi-article-body__main {
  grid-column: 1;
  grid-row: 1;
  max-width: 814px;
  min-width: 0;
}

.bbi-article-body__sidebar {
  grid-column: 2;
  /* Row 1 only — do not span the divider row or sticky sidebar overlaps that line. */
  grid-row: 1;
  width: 460px;
}

/*
 * Row 2: 100px below prose (not below the sidebar). Full-bleed line with a single
 * 40px gutter (--container-padding). Similar Articles has no extra top padding.
 */
.bbi-article-body__row > .bbi-article-body__divider {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin: 100px calc(50% - 50vw) 100px;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

.bbi-article-body__row > .bbi-article-body__divider::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5px;
  background-color: #6b6b6b;
}

.bbi-article-body__main .bbi-prose > *:last-child {
  margin-bottom: 0;
}

.bbi-prose {
  font-family: var(--type-article-body-font);
  font-size: var(--type-article-body-size);
  font-weight: var(--type-article-body-weight);
  font-style: normal;
  line-height: var(--type-article-body-line-height);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-black);
}

.bbi-prose p,
.bbi-prose li,
.bbi-prose ul,
.bbi-prose ol,
.bbi-prose .wp-block-paragraph,
.bbi-prose .wp-block-list {
  font-family: var(--type-article-body-font);
  font-size: var(--type-article-body-size);
  font-weight: var(--type-article-body-weight);
  font-style: normal;
  line-height: var(--type-article-body-line-height);
  letter-spacing: var(--letter-spacing-normal);
}

/* Editor/pasted inline font stacks → Georgia only. */
.bbi-prose :where(p, li, span, div)[style*="font-family"] {
  font-family: var(--type-article-body-font) !important;
}

.bbi-prose p {
  margin: 0 0 32px;
}

.bbi-prose h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-tight);
  margin-block: var(--space-10) var(--space-4);
}

.bbi-prose h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  margin-block: var(--space-8) var(--space-3);
}

.bbi-prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-accent-blue);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  background-color: var(--color-gray-50);
}

.bbi-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 40px;
}

.bbi-prose figure {
  margin: 40px 0;
}

.bbi-prose figcaption {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.bbi-prose a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-accent-blue);
}

/* -------------------------------------------------------------
   Sidebar (Trending)
   ------------------------------------------------------------- */

.bbi-sidebar {
  display: flex;
  flex-direction: column;
}

.bbi-sidebar__block--trending {
  box-sizing: border-box;
  background-color: var(--color-surface-panel);
  padding: var(--trending-panel-padding);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 460px;
  opacity: 1;
}

/* 20px between heading → image → list (panel padding handles outer inset). */
.bbi-sidebar__block--trending > .bbi-trending-heading,
.bbi-sidebar__block--trending > .bbi-trending-image {
  margin-bottom: var(--trending-panel-gap);
}

/* Trending lives inside .bbi-prose when relocated on mobile — do not use article h2 margins. */
.bbi-prose h2.bbi-trending-heading {
  margin: 0;
  font-family: var(--type-trending-heading-font);
  font-size: var(--type-trending-heading-size);
  font-weight: var(--type-trending-heading-weight);
  line-height: var(--type-trending-heading-line-height);
  letter-spacing: var(--type-trending-heading-letter-spacing);
  color: var(--color-accent-blue);
  text-transform: uppercase;
}

.bbi-trending-heading {
  font-family: var(--type-trending-heading-font);
  font-size: var(--type-trending-heading-size);
  font-weight: var(--type-trending-heading-weight);
  line-height: var(--type-trending-heading-line-height);
  letter-spacing: var(--type-trending-heading-letter-spacing);
  color: var(--color-accent-blue);
  text-transform: uppercase;
  margin: 0;
  font-synthesis: none;
}

.bbi-trending-image {
  width: 100%;
  max-width: 420px;
  height: 215px;
  margin: 0;
  overflow: hidden;
  opacity: 1;
}

.bbi-trending-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbi-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bbi-sidebar__block--trending .bbi-sidebar__list {
  gap: 0;
}

.bbi-sidebar__item {
  position: relative;
}

/* Divider between trending titles: 20px above and below the rule. */
.bbi-sidebar__block--trending .bbi-sidebar__item:not(:last-child) {
  padding-bottom: var(--trending-panel-gap);
  border-bottom: 0.5px solid var(--color-byline-soft);
  margin-bottom: var(--trending-panel-gap);
}

.bbi-sidebar__link {
  display: flex;
  gap: 20px;
  text-decoration: none;
  color: var(--color-black);
  align-items: flex-start;
}

.bbi-sidebar__number-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bbi-sidebar__number {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--color-accent-blue);
  line-height: 1;
  text-transform: uppercase;
}

.bbi-sidebar__number-line {
  width: 18px;
  height: 6px;
  background-color: var(--color-accent-blue);
}

.bbi-sidebar__title {
  font-family: var(--type-trending-item-title-font);
  font-size: var(--type-trending-item-title-size);
  font-weight: var(--type-trending-item-title-weight);
  line-height: var(--type-trending-item-title-line-height);
  letter-spacing: var(--type-trending-item-title-letter-spacing);
  text-transform: uppercase;
  font-synthesis: none;
}

/* -------------------------------------------------------------
   Sidebar similar articles (compact, no heading)
   ------------------------------------------------------------- */

.bbi-sidebar__block--similar {
  width: 460px;
  margin-top: 100px;
}

.bbi-sidebar-similar__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bbi-card.bbi-card--similar-compact {
  --bbi-similar-meta-band: 18px;
  display: grid;
  grid-template-columns: 168fr 232fr;
  grid-template-areas: "media body";
  column-gap: 12px;
  align-items: stretch;
  width: 100%;
  height: 142px;
  background: transparent;
  overflow: visible;
  position: relative;
}

/* Category pill — same as footer similar + author cards (above image, chamfered). */
.bbi-card--similar-compact .bbi-card__category-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: var(--color-text);
  width: auto;
  min-width: 0;
  max-width: calc((100% - 12px) * 168 / (168 + 232));
  height: auto;
  padding: 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  -webkit-clip-path: var(--bbi-clip-path-chamfer-top);
  clip-path: var(--bbi-clip-path-chamfer-top);
  transition: background-color var(--transition-fast);
}

.bbi-card--similar-compact .bbi-card__category {
  font-family: var(--font-slab);
  font-size: var(--font-size-xs);
  color: var(--color-background);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.bbi-card--similar-compact .bbi-card__media {
  grid-area: media;
  display: block;
  position: relative;
  width: 100%;
  margin-top: var(--bbi-similar-meta-band);
  height: calc(142px - var(--bbi-similar-meta-band));
  overflow: hidden;
  background-color: var(--color-gray-100);
  text-decoration: none;
}

.bbi-card--similar-compact .bbi-card__media img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Black stripe on image top — behind category pill (author.css). */
.bbi-card--similar-compact .bbi-card__media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background-color: var(--color-black);
  z-index: 1;
  pointer-events: none;
}

.bbi-card--similar-compact .bbi-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}

.bbi-card--similar-compact .bbi-card__title {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-black);
}

.bbi-card--similar-compact .bbi-card__title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

/* -------------------------------------------------------------
   Similar articles  (Figma 113:606)
   2x2 grid of 4 articles. Each card is a 2-column layout:
     - Left  : featured image (~325/814 of card width, full card
               height, 325:275 aspect ratio).
     - Right : black category pill pinned to the TOP, then a
               date / title / author block pinned to the BOTTOM.
   ------------------------------------------------------------- */

.bbi-section-similar {
  padding-top: 0;
  padding-bottom: 80px;
}

.bbi-section-similar .bbi-section-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-black);
  margin-bottom: 40px;
}

.bbi-section-similar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 30px;
  column-gap: 20px;
}

.bbi-card.bbi-card--similar {
  --bbi-similar-meta-band: 18px; /* Same as author card — pill sits above image, not on it. */
  display: grid;
  /* Figma ratio: 325px image + 20px gap + 469px text = 814px card */
  grid-template-columns: 325fr 469fr;
  grid-template-areas: "media body";
  column-gap: 20px;
  align-items: stretch;
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 0;
  overflow: visible; /* Required so chamfer clip-path is not clipped by .bbi-card */
  height: 275px;
}

/*
 * Category pill — matches .bbi-card--author (author.css):
 * absolute on the card top-left, in the meta band above the image;
 * 9px stripe stays on the image only (::before on .bbi-card__media).
 */
.bbi-card--similar .bbi-card__category-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: var(--color-text);
  width: auto;
  min-width: 0;
  max-width: calc((100% - 20px) * 325 / (325 + 469));
  height: auto;
  padding: 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  -webkit-clip-path: var(--bbi-clip-path-chamfer-top);
  clip-path: var(--bbi-clip-path-chamfer-top);
  transition: background-color var(--transition-fast);
}

.bbi-card--similar .bbi-card__media {
  grid-area: media;
  position: relative;
  display: block;
  width: 100%;
  margin-top: var(--bbi-similar-meta-band);
  height: calc(275px - var(--bbi-similar-meta-band));
  overflow: hidden;
  background-color: var(--color-gray-100);
  text-decoration: none;
}

/* Black stripe on image top — behind category pill (author / compact cards). */
.bbi-card--similar .bbi-card__media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background-color: var(--color-black);
  z-index: 1;
  pointer-events: none;
}

.bbi-card--similar .bbi-card__media img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

.bbi-card--similar:hover .bbi-card__media img,
.bbi-card--similar:focus-within .bbi-card__media img {
  transform: none;
}

.bbi-card--similar .bbi-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  min-width: 0;
}

.bbi-card--similar .bbi-card__category {
  font-family: var(--font-slab);
  font-size: var(--font-size-xs);
  color: var(--color-background);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.bbi-card--similar .bbi-card__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.bbi-card--similar .bbi-card__date {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.1em;
  color: var(--color-byline);
  text-transform: uppercase;
  margin: 0 0 20px;
}

.bbi-card--similar .bbi-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: 120%;
  letter-spacing: 0;
  color: var(--color-black);
  margin: 0;
  width: 100%;
}

.bbi-card--similar .bbi-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bbi-card--similar .bbi-card__author {
  font-family: var(--font-mono);
  font-size: var(--bbi-card-author-size);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0;
  color: var(--color-byline);
  margin: 10px 0 0;
}

.bbi-card--similar .bbi-card__author a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Desktop+ — date directly above title in bottom copy stack (mobile date rules unchanged). */
@media (min-width: 768px) {
  .bbi-card--similar .bbi-card__body,
  .bbi-card--similar .bbi-card__bottom {
    display: flex;
    flex-direction: column;
  }

  .bbi-card--similar .bbi-card__bottom {
    margin-top: auto;
    gap: 10px;
  }

  .bbi-card--similar .bbi-card__date {
    grid-area: unset;
    position: static;
    transform: none;
    align-self: flex-start;
    margin: 0;
  }

  .bbi-card--similar .bbi-card__title {
    margin-top: 0;
  }

  .bbi-card--similar .bbi-card__author {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------
   Responsive cascade

   Mirrors the homepage breakpoint strategy:
     ≤ 1199px : tablet         (Figma `BBI_ADP_Tab`   117:884 — 1024px)
     ≤ 1023px : small tablet   (stack the article + sidebar columns)
     ≤  767px : mobile         (Figma `BBI_ADP_Mobile` 117:1165 — 402px)
     ≤  479px : small mobile   (tighter typography)
   ------------------------------------------------------------- */

/* --- Tablet ------------------------------------------------------
   Figma `BBI_ADP_Tab` 117:884 (1024×… artboard):
     - 40px gutter (article header / hero / body all start at left:40).
     - Header `Inner` 953w × 561h. Pill 122×27 at top:0, date at left:14.9%.
     - Title 40px Neue Haas 75 Bold uppercase, 708 wide; excerpt 16px
       Zalando Italic, 708 wide. By-line dropdown ~306w.
     - Featured image 944×699 (aspect ≈ 1.35), credits 12px Azeret.
     - Audio player row 944 wide.
     - 2-column body: 541 content + 21 gap + 382 sidebar.
     - Trending block 382w (heading 20px, image 215h).
     - Similar Articles 2×2 grid kept; cards downsize to ~462×220. */
@media (max-width: 1199px) {
  /* The Figma artboard hides the floating rail (not enough room next
     to the 944-wide hero). Keep matching the home page chrome. */
  .bbi-article-social-rail { display: none; }

  /* -- Article header ------------------------------------------- */
  .bbi-article-header { margin-bottom: 30px; }

  .bbi-article-header__inner {
    max-width: 708px;
    gap: 10px;
  }

  .bbi-article-header__meta-top {
    gap: 14px;
    margin-bottom: 10px;
  }

  .bbi-article-header__title-row {
    margin-block: 0;
  }

  .bbi-article-header__category {
    min-width: 122px;
  }

  .bbi-article-header__date {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .bbi-article-header__title {
    font-size: 40px;
    line-height: 1;
  }

  .bbi-article-header__excerpt {
    font-size: 16px;
    line-height: 1.4;
    max-width: 708px;
  }

  .bbi-article-header__byline {
    margin-top: 14px;
  }

  .bbi-article-author {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  /* -- Featured image ------------------------------------------- */
  .bbi-article-featured { margin: 0 0 30px; }

  .bbi-article-featured__frame {
    aspect-ratio: 944 / 699;
    max-width: 944px;
  }

  /* -- Audio player wrapper ------------------------------------- */
  .bbi-audio-player { margin-bottom: 30px; }

  /* -- Body row: 541 / 21 / 382 columns ------------------------- */
  .bbi-article-body .container { max-width: none; }

  .bbi-article-body__row {
    grid-template-columns: minmax(0, 541px) 382px;
    column-gap: 21px;
  }

  .bbi-article-body__main {
    max-width: 541px;
  }

  .bbi-article-body__sidebar {
    width: 382px;
  }

  /* -- Prose tweaks --------------------------------------------- */
  .bbi-prose {
    font-size: 18px;
    line-height: 1.8;
  }

  .bbi-prose p { margin-bottom: 28px; }

  .bbi-prose img,
  .bbi-prose figure { margin: 30px 0; }

  /* -- Sidebar (trending + sidebar similar) --------------------- */
  .bbi-article-body__sidebar .bbi-sidebar { top: 30px; }

  .bbi-sidebar__block--trending {
    width: 100%;
    padding: var(--trending-panel-padding);
    gap: 0;
  }

  .bbi-trending-image {
    width: 100%;
    max-width: 100%;
    height: 215px;
  }

  .bbi-sidebar__number { font-size: 30px; }

  /* Compact similar list inside the sidebar — Figma `Group349` 482×208.
     The Figma frame extends 90px past the sidebar column; in practice we
     keep the card flush inside the sidebar so it doesn't bleed. */
  .bbi-sidebar__block--similar {
    width: 100%;
    margin-top: 60px;
  }

  .bbi-card--similar-compact {
    grid-template-columns: 168fr 200fr;
    column-gap: 16px;
    height: 142px;
  }

  .bbi-card--similar-compact .bbi-card__category-wrap {
    max-width: calc((100% - 16px) * 168 / (168 + 200));
  }

  .bbi-card--similar-compact .bbi-card__media {
    height: calc(142px - var(--bbi-similar-meta-band, 18px));
  }

  .bbi-card--similar-compact .bbi-card__title {
    font-size: 14px;
    line-height: 1.2;
  }

  /* -- Similar Articles section (footer of article) ------------- */
  .bbi-section-similar {
    padding-top: 0;
    padding-bottom: 60px;
  }

  .bbi-section-similar .bbi-section-heading {
    font-size: 40px;
    letter-spacing: -0.6px;
    margin-bottom: 30px;
  }

  .bbi-section-similar__grid { gap: 20px; }

  .bbi-card--similar { height: 220px; }

  .bbi-card--similar .bbi-card__media {
    height: calc(220px - var(--bbi-similar-meta-band, 18px));
  }

  .bbi-card--similar .bbi-card__title {
    font-size: 20px;
    margin-top: 0;
  }

  .bbi-card--similar .bbi-card__author { margin-top: 8px; }
}

/* --- Small tablet / iPad portrait --------------------------------
   Between 1024 and 768 the Figma 2-column body becomes too cramped
   (541 + 382 = 923 plus chrome ≈ exceeds usable width), so we collapse
   to a single column. Typography stays at the tablet scale.
   ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .bbi-article-body__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .bbi-article-body__main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
  }

  .bbi-article-body__sidebar {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
  }

  .bbi-article-body__row > .bbi-article-body__divider {
    grid-column: 1;
    grid-row: 3;
  }

  .bbi-sidebar__block--trending,
  .bbi-sidebar__block--similar {
    width: 100%;
    max-width: 600px;
  }
}

/*
 * Sticky sidebar (trending + compact similar) on article detail — 768px+ only.
 * overflow-x:hidden on html/body breaks position:sticky in Chromium/WebKit.
 */
@media (min-width: 768px) {
  body.single {
    overflow-x: clip;
  }

  @supports selector(:has(*)) {
    html:has(body.single) {
      overflow-x: clip;
    }
  }

  /*
   * Match row 1 (prose) height so sticky travels with the article, not over the divider.
   * (Without stretch, the wrapper hugs sidebar content height and sticky never engages.)
   */
  .bbi-article-body__sidebar {
    align-self: stretch;
  }

  .bbi-article-body__sidebar .bbi-sidebar {
    position: sticky;
    top: 40px;
    align-self: start;
    z-index: 1;
  }
}

/* --- Mobile ------------------------------------------------------
   Figma `BBI_ADP_Mobile` 117:1165 (402×… artboard):
     - 20px gutter; content 362 wide.
     - Title 30px Neue Haas 65 *Medium*, sentence case (NOT uppercase).
     - Excerpt 14px Zalando Italic, line-height 1.2.
     - Featured image 362×250; credits 8px.
     - Audio player: 30×30 icon, label above the timeline (Trinity).
     - Single-column body, prose 16px, 24px paragraph spacing.
     - Similar Articles cards: pill at top-left, date at top-right,
       image full-width, title 20px Medium sentence case, byline 12px. */
@media (max-width: 767px) {
  /* -- Article header (Figma mobile rhythm) ----------------------
     category → title 20px | title → description 10px |
     description → byline 20px | byline → thumbnail 42px
     (−5px layout offset applied in CSS values below.)
     Spacing uses margin-top on siblings only (no flex gap stacking). */
  .bbi-article-header {
    margin-bottom: 0;
  }

  .bbi-article-header__inner {
    gap: 0;
    row-gap: 0;
  }

  .bbi-article-header__inner > * {
    margin-block: 0;
  }

  .bbi-article-header__meta-top {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    margin-bottom: 0;
  }

  /* Flatten title row so hidden desktop social rail cannot add height. */
  .bbi-article-header__title-row {
    display: contents;
  }

  .bbi-article-header__meta-top + .bbi-article-header__title-row .bbi-article-header__title {
    margin-top: 15px;
  }

  .bbi-article-header__title-row + .bbi-article-header__excerpt {
    margin-top: 8px;
  }

  .bbi-article-header__title-row + .bbi-article-header__byline {
    margin-top: 5px;
  }

  .bbi-article-header__excerpt + .bbi-article-header__byline {
    margin-top: 15px;
  }

  .bbi-article-header__date {
    margin-left: auto;
  }

  .bbi-article-header__title {
    /* Figma mobile: Neue Haas Grotesk Display Pro 65 Medium, 30px / 110%.
       Weight must be 600 to match Typekit fvd=n6 (500 loads no matching face). */
    font-family: var(--type-article-detail-title-font);
    font-size: var(--type-article-detail-title-size-mobile);
    font-weight: var(--type-article-detail-title-weight) !important;
    line-height: var(--type-article-detail-title-line-height-mobile);
    text-transform: none !important;
    letter-spacing: 0;
    font-synthesis: none;
    margin-block: 0;
  }

  .bbi-article-header__excerpt {
    font-family: var(--type-article-excerpt-font) !important;
    font-size: 14px;
    font-style: var(--type-article-excerpt-style) !important;
    font-weight: var(--type-article-excerpt-weight) !important;
    line-height: 1.2;
    letter-spacing: 0;
    font-synthesis: none;
    margin: 0;
  }

  .bbi-article-header__byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }

  .bbi-article-social-rail--header {
    display: none;
  }

  .bbi-article-header__byline .bbi-article-social-rail--byline {
    display: block;
    position: static;
    top: auto;
    right: auto;
    flex-shrink: 0;
  }

  /*
   * Byline social row — fixed 8px between icons (Figma mobile ADP).
   * components.css touch targets (44×44 min) are disabled here so flex gap
   * stays 8px between glyphs, not between oversized hit boxes.
   */
  .bbi-article-header__byline .bbi-article-social-rail--byline {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    gap: 8px;
    column-gap: 8px;
    row-gap: 0;
  }

  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__list > li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__link {
    position: relative;
    flex: 0 0 auto;
    width: var(--bbi-social-icon-size-compact);
    height: var(--bbi-social-icon-size-compact);
    min-width: 0;
    min-height: 0;
    max-width: var(--bbi-social-icon-size-compact);
    max-height: var(--bbi-social-icon-size-compact);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* Expanded tap target without growing flex layout spacing. */
  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__link::before {
    content: "";
    position: absolute;
    inset: -13px;
    z-index: 0;
  }

  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__link .bbi-icon-svg,
  .bbi-article-header__byline .bbi-article-social-rail--byline .bbi-article-social-rail__link .screen-reader-text {
    position: relative;
    z-index: 1;
  }

  .bbi-article-author {
    font-size: 10px;
    letter-spacing: 1px;
  }

  /* -- Featured image → content (30px when Trinity is absent) ----- */
  .bbi-article-featured {
    margin-top: 37px;
    margin-bottom: 30px;
  }

  /* Trinity active: 50px image → player, then 30px player → prose. */
  .bbi-article:has(.bbi-article-body .trinityaudio) .bbi-article-featured,
  .bbi-article:has(.bbi-article-body .trinity-skin) .bbi-article-featured {
    margin-bottom: 50px;
  }

  .bbi-article-featured__frame {
    aspect-ratio: 362 / 250;
    max-width: 100%;
  }

  .bbi-article-body > .container {
    padding-top: 0;
  }

  .bbi-prose > :first-child {
    margin-top: 0;
  }

  .bbi-article-body .trinityaudio,
  .bbi-article-body .trinity-skin {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }

  /* Admin install hint only — not shown when Trinity is live. */
  .bbi-audio-player--hint {
    margin-bottom: 30px;
    padding: 12px;
  }

  .bbi-audio-player:not(.bbi-audio-player--hint) {
    margin-bottom: 0;
    padding: 0;
  }

  /* -- Body & prose --------------------------------------------- */
  /* Divider directly under prose — not after the relocated sidebar column. */
  .bbi-article-body__row {
    margin-top: 0;
    gap: 0;
    row-gap: 0;
  }

  .bbi-article-body__row > .bbi-article-body__divider {
    grid-row: 2;
    margin-top: 40px;
    margin-bottom: 80px;
    margin-inline: calc(50% - 50vw);
  }

  .bbi-article-body__sidebar {
    grid-row: 3;
  }

  .bbi-article-body__sidebar .bbi-sidebar {
    position: static;
  }

  .bbi-article-body__sidebar:has(.bbi-sidebar--blocks-relocated) {
    display: none;
  }

  .bbi-prose {
    font-size: 16px;
    line-height: 1.8;
  }

  .bbi-prose p { margin-bottom: 24px; }

  .bbi-prose img,
  .bbi-prose figure { margin: 24px 0; }

  .bbi-prose h2 { font-size: 24px; }
  .bbi-prose h3 { font-size: 18px; }

  /* -- Inline sidebar blocks (relocated into article body) ------ */
  .bbi-sidebar--blocks-relocated .bbi-sidebar__block--trending,
  .bbi-sidebar--blocks-relocated .bbi-sidebar__block--similar {
    display: none !important;
  }

  .bbi-article-inline-insert {
    margin-block: 40px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .bbi-article-inline-insert--similar {
    overflow: hidden;
  }

  .bbi-article-inline-insert--similar .bbi-sidebar-similar__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .bbi-article-inline-insert--similar .bbi-sidebar-similar__list > :nth-child(n+3) {
    display: none;
  }

  .bbi-article-inline-insert--similar > .bbi-sidebar__block--similar {
    width: 100%;
    margin-top: 0;
  }

  .bbi-article-inline-insert--trending .bbi-sidebar__block--trending {
    width: 100%;
    max-width: 100%;
    padding: var(--trending-panel-padding);
    gap: 0;
    margin: 0;
  }

  .bbi-prose h2.bbi-trending-heading {
    margin: 0;
  }

  /* Prose link styles must not underline relocated sidebar/trending links. */
  .bbi-article-content.bbi-prose .bbi-article-inline-insert--trending a,
  .bbi-article-content.bbi-prose .bbi-article-inline-insert--similar a {
    text-decoration: none;
  }

  /* Relocated similar cards inside .bbi-prose — reset prose img margins only. */
  .bbi-article-content.bbi-prose .bbi-card--similar-compact img {
    margin: 0;
  }

  /*
   * Relocated trending image — prose sets img { height: auto }, which breaks
   * object-fit: cover and ignores the per-article focal point (artist face).
   */
  .bbi-article-content.bbi-prose .bbi-trending-image,
  .bbi-article-inline-insert--trending .bbi-trending-image {
    width: 100%;
    max-width: 100%;
    height: 215px;
    overflow: hidden;
  }

  .bbi-article-content.bbi-prose .bbi-trending-image__img,
  .bbi-article-content.bbi-prose .bbi-trending-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    /* object-position from inline style (thumbnail focal point). */
  }

  /* -- Sidebar — trending block on mobile (when not relocated) -- */
  .bbi-sidebar__block--trending {
    padding: var(--trending-panel-padding);
    gap: 0;
  }

  /* -- Similar Articles section --------------------------------- */
  .bbi-section-similar {
    padding-top: 0;
    padding-bottom: 40px;
  }

  .bbi-section-similar .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .bbi-section-similar__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bbi-article-inline-insert--similar .bbi-sidebar-similar__list,
  .bbi-article-inline-insert--similar > .bbi-sidebar__block--similar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bbi-sidebar__block--similar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /*
   * Mobile — compact + footer similar cards: author-style category band above image.
   */
  .bbi-card--similar-compact,
  .bbi-card--similar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
  }

  .bbi-card--similar-compact {
    display: flex !important;
    flex-direction: column;
    position: relative;
    height: auto !important;
    margin-top: 0;
  }

  .bbi-card--similar-compact .bbi-card__category-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto;
    margin: 0 !important;
    max-width: 100%;
    min-width: 0;
    z-index: 3;
    border-radius: 0;
    -webkit-clip-path: var(--bbi-clip-path-chamfer-top);
    clip-path: var(--bbi-clip-path-chamfer-top);
  }

  .bbi-card--similar {
    display: flex !important;
    flex-direction: column;
    position: relative;
    height: auto !important;
    margin-top: 0;
    gap: 20px; /* Featured image → title (Figma mobile). */
  }

  .bbi-card--similar .bbi-card__category-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto;
    margin: 0 !important;
    max-width: 100%;
    z-index: 3;
    border-radius: 0;
    -webkit-clip-path: var(--bbi-clip-path-chamfer-top);
    clip-path: var(--bbi-clip-path-chamfer-top);
  }

  .bbi-card--similar .bbi-card__date {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 50%;
    padding-inline-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
    color: var(--color-byline);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
  }

  .bbi-card--similar-compact .bbi-card__category,
  .bbi-card--similar .bbi-card__category {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bbi-card--similar-compact .bbi-card__media {
    display: block;
    position: relative;
    margin-top: var(--bbi-similar-meta-band, 18px) !important;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 362 / 250;
    min-height: 0;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }

  .bbi-card--similar .bbi-card__media {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bbi-similar-meta-band, 18px) !important;
    margin-bottom: 0;
    height: auto;
    aspect-ratio: 362 / 250;
    min-height: 0;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }

  /* 9px stripe on image top only (pill sits above in meta band). */
  .bbi-card--similar-compact .bbi-card__media::before,
  .bbi-card--similar .bbi-card__media::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background-color: var(--color-black);
    z-index: 1;
    pointer-events: none;
  }

  .bbi-card--similar-compact .bbi-card__body {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding: 0;
    padding-block-start: 0;
    box-sizing: border-box;
  }

  .bbi-card--similar-compact .bbi-card__title {
    /* Figma mobile: NHG Display Pro 65 Medium, 20px / 100%, 0 tracking. */
    font-family: var(--type-article-detail-title-font);
    font-size: 20px;
    font-weight: var(--type-article-detail-title-weight);
    line-height: 1;
    letter-spacing: 0;
    font-synthesis: none;
    margin: 0;
    max-width: 100%;
    min-width: 0;
  }

  .bbi-card--similar-compact .bbi-card__title a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bbi-card--similar .bbi-card__body {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin-top: 0;
  }

  .bbi-card--similar .bbi-card__bottom {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }

  .bbi-card--similar .bbi-card__title {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .bbi-card--similar .bbi-card__author {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .bbi-card--similar .bbi-card__title {
    font-family: var(--type-article-detail-title-font);
    font-size: 20px;
    font-weight: var(--type-article-detail-title-weight);
    line-height: 1.2;
    text-transform: none;
    margin: 0;
    font-synthesis: none;
  }

  .bbi-card--similar .bbi-card__title a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bbi-card--similar .bbi-card__author {
    margin: 10px 0 0;
    letter-spacing: 0;
  }
}

/* --- Small mobile (≤ iPhone SE) ----------------------------------
   Below 480px we tighten the article title and prose so very narrow
   viewports don't wrap awkwardly. */
@media (max-width: 479px) {
  .bbi-article-header__title {
    font-size: var(--type-article-detail-title-size-mobile);
  }
  .bbi-article-header__excerpt { font-size: 14px; }

  .bbi-prose { font-size: 15px; }
  .bbi-prose h2 { font-size: 22px; }

  .bbi-section-similar .bbi-section-heading { font-size: 26px; }

  .bbi-card--similar .bbi-card__title {
    font-size: clamp(16px, 5vw, 20px);
  }

}