/* BitComfy — single article template.
   Scope: `.bc-*` only. Loaded on is_singular('post') after gp-bridge.

   Every value comes from a design token except two, which the reference
   uses and the token set does not carry. They are deliberately local and
   must not be promoted into tokens/ without approval:
     --bc-measure-column : 46rem  (head/body/pull-quote column)
     --bc-lh-quote       : 1.32   (pull quote line-height)

   Verified reference geometry @1536:
     grid 764 + 72 + 340 = 1176 inside a 1240 box with 32px padding. */

.bc-single {
  --bc-measure-column: 46rem;
  --bc-lh-quote: 1.32;
  --bc-accent: var(--ink-500); /* overridden inline per category */
}

/* GP flexes .site-content for its content/sidebar pair. This template is a
   single child that manages its own grid, so the flex context must go. */
.single-post .site-content {
  display: block;
}

/* ---------------------------------------------------------------
   1. Article shell
   --------------------------------------------------------------- */
.bc-article {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-9) var(--page-pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-10);
  align-items: start;
}

.bc-article__main {
  min-width: 0;
}

/* ---------------------------------------------------------------
   2. Head — breadcrumb, eyebrow, title, deck, byline
   --------------------------------------------------------------- */
.bc-article__head {
  max-width: var(--bc-measure-column);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* .bc-breadcrumb lives in shared.css — the archive uses it too. */

.bc-eyebrow {
  align-self: flex-start;
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: #7A6212;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.bc-eyebrow:hover,
.bc-eyebrow:focus-visible {
  color: #7A6212;
  text-decoration: none;
}

.bc-eyebrow:focus-visible {
  outline: 2px solid #7A6212;
  outline-offset: 3px;
}

.bc-article__title {
  font: var(--text-article-title);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.bc-article__deck {
  font: var(--text-article-deck);
  color: var(--ink-600);
  margin: 0;
  max-width: var(--measure-deck);
  text-wrap: pretty;
}

.bc-bylinerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}

.bc-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font: var(--text-meta);
  color: var(--text-muted);
}

.bc-byline__author {
  color: var(--text-strong);
  font-weight: var(--w-semibold);
}

.bc-byline__sep {
  opacity: 0.6;
}

/* ---------------------------------------------------------------
   3. Hero — full column width, 16:9, LCP
   --------------------------------------------------------------- */
.bc-article__hero {
  margin: var(--sp-8) 0 0;
}

.bc-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-hero);
  object-fit: cover;
  border-radius: var(--radius-md);
}

.bc-article__caption {
  font: var(--text-caption);
  color: var(--text-muted);
  margin: var(--sp-3) 0 0;
}

/* ---------------------------------------------------------------
   4. Body — 46rem wrapper, 40rem prose measure
   --------------------------------------------------------------- */
.bc-article__body {
  max-width: var(--bc-measure-column);
  margin: var(--sp-9) 0 0;
}

.bc-article__body .entry-content > * {
  max-width: var(--measure-article);
}

.bc-article__body .entry-content p {
  font: var(--text-body);
  color: var(--text-body);
  margin: 0 0 var(--sp-6);
}

.bc-article__body .entry-content h2 {
  font: var(--text-h2);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: var(--sp-8) 0 var(--sp-4);
}

.bc-article__body .entry-content h3 {
  font: var(--text-h3);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: var(--sp-7) 0 var(--sp-3);
}

.bc-article__body .entry-content img {
  border-radius: var(--radius-md);
}

.bc-article__body .entry-content figcaption {
  font: var(--text-caption);
  color: var(--text-muted);
  margin: var(--sp-3) 0 0;
}

/* Drop cap on the opening paragraph only. */
.bc-article__body .entry-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.82;
  font-weight: var(--w-medium);
  color: var(--text-strong);
  float: left;
  padding: 0.06em 0.1em 0 0;
}

/* Pull quote — a core blockquote. Spans the 46rem column, centred, no rule. */
.bc-article__body .entry-content blockquote {
  max-width: none;
  margin: var(--sp-9) 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.bc-article__body .entry-content blockquote p {
  font: var(--w-light) var(--size-h2) / var(--bc-lh-quote) var(--font-display);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: 0;
  max-width: none;
  text-wrap: balance;
}

.bc-article__body .entry-content blockquote cite,
.bc-article__body .entry-content blockquote footer {
  display: block;
  margin-top: var(--sp-4);
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-style: normal;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   5. Sidebar

   The rail — .bc-sidebar, .bc-minicard, .bc-adslot and their responsive
   rules — lives in shared.css, because the category archive renders the
   same component. Nothing about it is single-post specific.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   6. Full-bleed sections — rendered on generate_before_footer,
   outside #page, so no viewport-breakout hack is needed.
   --------------------------------------------------------------- */
.bc-section__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.bc-related {
  background-color: var(--surface-card);
  margin-top: var(--sp-11);
  padding: var(--sp-11) 0;
}

.bc-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-rule);
}

.bc-related__title {
  font: var(--text-h2);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bc-related__dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--bc-accent);
}

.bc-related__all {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.bc-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
}

.bc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  min-width: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.bc-card:hover {
  opacity: 0.9;
  text-decoration: none;
}

.bc-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-card);
  object-fit: cover;
  border-radius: var(--radius-md);
}

.bc-card__cat {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: #7A6212;
}

.bc-card__title {
  font: var(--w-semibold) var(--size-body-lg) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
}

.bc-card__meta {
  font: var(--text-caption);
  color: var(--ink-400);
}

/* Previous / Next */
.bc-postnav {
  padding: var(--sp-11) 0;
}

.bc-postnav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
}

.bc-postnav__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line-rule);
  text-decoration: none;
  min-width: 0;
}

.bc-postnav__link:hover {
  text-decoration: none;
}

.bc-postnav__link--next {
  text-align: right;
  grid-column: 2;
}

.bc-postnav__label {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bc-postnav__title {
  font: var(--w-semibold) var(--size-h3) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
}

/* ---------------------------------------------------------------
   7. Responsive
   The reference carries no layout media queries and collapses its article
   column to 0 below ~400px. This is a clean single-column rebuild instead,
   per the brief. Type scales itself: the token ramp at <=768px already
   moves the title 56 -> 34, deck 26 -> 20, body 18 -> 17.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bc-article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-9);
    padding-top: var(--sp-8);
  }

  .bc-article__head,
  .bc-article__body {
    max-width: none;
  }

  .bc-related {
    margin-top: var(--sp-9);
    padding: var(--sp-9) 0;
  }

  .bc-postnav {
    padding: var(--sp-9) 0;
  }

  .bc-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .bc-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bc-postnav__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .bc-postnav__link--next {
    text-align: left;
    grid-column: 1;
  }

  .bc-article__body .entry-content > p:first-of-type::first-letter {
    font-size: 3.6em;
  }
}

/* Article body links: black, red on hover, never underlined.
   Scoped to single-article body only (.bc-article__body). */
.bc-article__body a {
  color: #000000;
  text-decoration: none;
}
.bc-article__body a:hover {
  color: #F82A00;
  text-decoration: none;
}