/* Reviewer byline family — templates/components/reviewed-by.twig, fed from a
   single server-side source. Three surfaces: footer (dark card), byline (blog
   meta row), box (light page). */

/* footer: hairline-topped sign-off under the answer it vouches for. Sentence
   case on purpose; an uppercase+tracked chip made 55 chars 400px wide. */
.rvb--footer {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .74rem; line-height: 1.45; color: #8b9cb2;
}
.rvb--footer svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.rvb--footer strong { color: rgba(255, 255, 255, .92); font-weight: 600; }
.rvb--footer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 2px; }
.rvb-lic, .rvb-date { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* byline: the role line under the author's name (.article-author-role gives
   size/color); only the reviewer's name gets weight */
.rvb--byline { margin-top: 1px; line-height: 1.35; font-size: .72rem; }
.rvb--byline strong { color: rgba(255, 255, 255, .9); font-weight: 600; }
.rvb--byline a { color: rgba(255, 255, 255, .9); text-decoration: none; }

/* box: light-page card in the Bootstrap .card.shadow-sm register */
.rvb--box {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 760px; margin: 0 0 20px; padding: 18px 20px;
  background: #fff; border: 1px solid rgba(22, 38, 58, .08); border-radius: 6px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
/* Real headshot only — reviewer_identity.photo. There is deliberately no
   initials fallback: the template omits the element and .rvb-body takes the
   full width. */
.rvb-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: rgba(22, 38, 58, .06);
}
.rvb-body { min-width: 0; }
.rvb-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7a8c; margin: 0 0 2px; }
.rvb-name { font-size: 1.05rem; font-weight: 700; color: #16263a; margin: 0; line-height: 1.3; }
.rvb-name a { color: inherit; }
.rvb-cred { font-size: .88rem; line-height: 1.45; color: #3d4b5c; margin: 2px 0 6px; }
.rvb-note { font-size: .9rem; line-height: 1.5; color: #3d4b5c; margin: 0 0 6px; }
.rvb-links { font-size: .82rem; margin: 0; }

@media (max-width: 1199.98px) {
  /* keeps the article meta row single-line at 1024 (it was 4px over at .75rem) */
  .rvb--byline { font-size: .7rem; }
}
@media (max-width: 767.98px) {
  .rvb--footer { font-size: .68rem; gap: 7px; margin-top: 10px; padding-top: 9px; }
  .rvb--footer svg { width: 13px; height: 13px; }
}
@media (max-width: 575.98px) {
  .rvb--box { padding: 14px; gap: 12px; }
  .rvb-avatar { width: 40px; height: 40px; }
  .rvb-name { font-size: .98rem; }
}

/* ── Reviewed blog header: compact the chrome to pay for the reviewer line ──
   The article meta row was sized for avatar + name (~150px). The reviewer
   sentence adds ~400px to it, which pushed the share bar onto its own line at
   every width from 769 up. Measured on /blog/impact-windows-insurance-savings:
   the row's children needed 1258px against a 1096px container.

   Icon-only share buttons buy back 200px and the row lands at 966px, back to a
   single line. Scoped to .is-reviewed so an UNREVIEWED post keeps the labelled
   buttons — nothing pays for a line it does not carry.

   The labels are not removed, only taken out of the visual flow, so each link
   keeps its accessible name (no aria-label, which would have to be kept in sync
   with the text). title= gives sighted mouse users the same word on hover. */
.article-meta-row.is-reviewed .article-share-txt {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.article-meta-row.is-reviewed .article-share-btn { gap: 0; padding: 6px 10px; }
.article-meta-row.is-reviewed .article-share-btn i { font-size: .86rem; }

/* Stacking below 1024 is not scoped here — blog-article.css does it for every
   post, reviewed or not, since an unreviewed row needs 1010px and hit the same
   wall 10px earlier. */