/* ══════════════════════════════════════════════════════════════════
   BURDS NERDS — "How to claim your business in ChatGPT." article styles
   Loaded only by /blog/how-to-claim-your-business-in-chatgpt via $pageCSS.
   Every selector starts with .bh (the article's root class), so nothing
   here can reach other pages. Colors, borders, and radius come from the
   bn-brand.css tokens, so light and dark themes both work.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero credit ──────────────────────────────────────────────────
   A quiet line directly under the hero. The 21:9 wrapper clips its
   contents (overflow: hidden), so the credit sits outside it and takes
   over the wrapper's 40px bottom spacing. --bn-text-muted measures
   5.56:1 on --bn-bg in light mode and 7.08:1 in dark. */
.bh .blog-post__img-wrap {
  margin-bottom: 0;
}
.bh .bh-hero-credit {
  margin: 10px 0 40px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bn-text-muted);
}

/* ── In this tutorial: jump links ─────────────────────────────── */
.bh .bh-toc {
  margin: 0 0 2em;
  padding: 16px 20px;
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius);
}
.bh .bh-toc__label {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--bn-text);
}
.bh .bh-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bh .bh-toc li {
  margin: 0;
}

/* Keep jump-link targets clear of the sticky site header. */
.bh .blog-post__body h2[id] {
  scroll-margin-top: 96px;
}

/* ── Screenshots ──────────────────────────────────────────────────
   Screenshots display at their natural size (never upscaled) and shrink
   to fit narrow screens. Each one links to the full-size file. A pair
   sits side by side only when both columns can be at least 22rem wide;
   in the 672px post column that never happens, so pairs stack and the
   text inside each screenshot stays legible. */
.bh .bh-figure {
  margin: 0 0 2em;
  min-width: 0;
}
.bh .bh-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2em 20px;
  align-items: start;
  margin: 0 0 2em;
}
.bh .bh-figures .bh-figure {
  margin: 0;
}
/* The frame sits on the link, not the image, so the global border-box
   sizing never shaves 2px off a screenshot's natural width. */
.bh .bh-figure__link {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  overflow: hidden;
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius);
}
.bh .bh-figure__link:focus-visible {
  outline: 2px solid var(--bn-acc);
  outline-offset: 4px;
}
/* No CSS width: the HTML width/height attributes set the natural size and
   reserve the space before the image loads, so nothing shifts. */
.bh .bh-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}
.bh .bh-figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bn-text-muted);
}

@media print {
  .bh .bh-toc { display: none; }
  .bh .bh-figure { break-inside: avoid; }
}