/* 8 Furlong Consulting — blog-post.css (all 13 posts)
   Layout only. Mobile-first → 768px → 1024px. */

.bp-hero__inner { text-align: center; max-width: 940px; margin: 0 auto; }
.bp-hero__inner .eyebrow { margin-bottom: 14px; }
.bp-hero__inner .eyebrow a { color: inherit; }
.bp-hero__inner .eyebrow a:hover { color: var(--white); }
.bp-hero__byline { font-size: 13.5px; color: var(--muted-dark); margin-top: 20px; }
.bp-hero__byline b { color: var(--muted); font-weight: 500; }

.bp-layout { display: grid; gap: 48px; max-width: 1296px; }
.bp-article .ph-featured { border-radius: var(--radius-card); overflow: hidden; }
.bp-article .ph-featured img { width: 100%; height: auto; display: block; }

.bp-body { margin-top: 36px; font-size: 16px; line-height: 1.85; }
.bp-body p { margin: 0 0 22px; }
.bp-body h2 { font-size: 26px; line-height: 1.2; margin: 40px 0 16px; }
.bp-body h2 .bp-n { color: var(--tan); }
.bp-body h3 { margin: 32px 0 12px; }
.bp-body b, .bp-body strong { color: var(--navy); }
.bp-body ul { margin: 0 0 22px; padding-left: 22px; }
.bp-body li { margin-bottom: 8px; }
.bp-body code { font-family: var(--font-num); font-size: 14px; color: var(--saddle); }
.bp-body .bp-cta-line { border-top: 1px solid var(--line-light); padding-top: 28px; margin-top: 36px; }

.bp-side { display: flex; flex-direction: column; gap: 28px; }
.bp-side__card { background: var(--white); border: 1px solid var(--line-card); border-radius: var(--radius-card); padding: 24px 24px 26px; }
.bp-side__heading { font-family: var(--font-label); font-weight: 600; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--saddle); margin: 0 0 18px; }
.bp-side__cats { display: flex; flex-direction: column; gap: 13px; }
.bp-side__cats a { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--body); transition: color .18s ease-out; }
.bp-side__cats a:hover { color: var(--saddle); }
.bp-side__cats .num { font-weight: 500; color: var(--tan); }
.bp-side__recent { display: flex; flex-direction: column; gap: 18px; }
.bp-side__recent a { display: flex; gap: 14px; align-items: center; }
.bp-side__recent img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-btn); flex-shrink: 0; }
/* Recent-post entry for a post with no featured photograph: same footprint as the
   thumbnail so the row does not collapse. Decorative, hence aria-hidden in the markup. */
.bp-side__recent-noimg { width: 72px; height: 54px; border-radius: var(--radius-btn); background: var(--navy); flex-shrink: 0; display: block; }
.bp-side__recent-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); line-height: 1.3; display: block; }
.bp-side__recent-cat { font-size: 12px; color: #8A94A0; margin-top: 4px; display: block; }
.bp-side__cta { background: var(--navy); border-radius: var(--radius-card); padding: 28px 26px 30px; text-align: center; }
.bp-side__cta-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--white); line-height: 1.25; margin: 0 0 20px; }

@media (min-width: 1024px) {
  .bp-layout { grid-template-columns: 1fr 360px; gap: 56px; }
  .bp-body { margin-top: 44px; }
  .bp-body h2 { font-size: 30px; }
  .bp-side { position: sticky; top: 112px; align-self: start; }
}

/* Tap targets: the category link in the hero eyebrow is a standalone control
   (added 2026-09-07). Negative margin keeps the approved spacing. */
.bp-hero__inner .eyebrow a {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -11px;
}
/* Tap targets: sidebar category list is standalone navigation (added 2026-09-07). */
.bp-side__cats a { min-height: 44px; }