/* css/blog-post.css
 * Standalone /blog/<slug>.html styling — mirrors the in-page blog modal
 * so users (and bots) viewing the standalone page get the same polished
 * editorial look. Lives outside the inline <style> block so we can iterate
 * once and have all 13 posts stay in sync.
 *
 * Width / hero behavior intentionally tracks .blog-modal-inner +
 * .blog-modal-hero in blog.html — keep them in sync if you change one.
 */

.blog-post-article {
  width: 100%;
  max-width: 1058px;
  margin: 0 auto;
  padding: 0 0 96px;
  background: transparent;
  color: rgba(246,243,238,0.82);
  position: relative;
}

/* Hide the top "← All posts" link — there's a "← Back to all posts" at the
 * bottom of every post body that handles return navigation. The top one
 * was creating a black bar above the hero. */
.blog-post-article > .blog-back { display: none; }

/* HERO — break out of the article max-width so the image spans the full
 * viewport width edge-to-edge, then fades into the body via the modal's
 * gradient. The CSS trick: width:100vw + negative-margin centering. */
.blog-post-hero {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: #000;
}
.blog-post-hero img,
.blog-post-hero picture,
.blog-post-hero picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: grayscale(0.2) contrast(1.05);
}
/* Per-post crop overrides — match the modal's */
.blog-post-article[data-slug^="why-im-hitting-record"] .blog-post-hero img,
.blog-post-article[data-slug^="why-im-hitting-record"] .blog-post-hero picture > img { object-position: center 55%; }
/* Smooth bottom-only fade — top half of the image reads cleanly, bottom
 * half eases into the page bg with no banding or hard seam. The curve is
 * front-loaded with small alpha jumps and back-loaded with larger ones so
 * the eye never catches a transition edge. */
.blog-post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,9,8,0.00) 0%,
    rgba(10,9,8,0.00) 35%,
    rgba(10,9,8,0.05) 50%,
    rgba(10,9,8,0.18) 62%,
    rgba(10,9,8,0.38) 72%,
    rgba(10,9,8,0.62) 82%,
    rgba(10,9,8,0.84) 90%,
    rgba(10,9,8,0.96) 96%,
    var(--bv2-bg-elev, #14110d) 100%);
  pointer-events: none;
  z-index: 2;
}

/* TITLE + META — float over the bottom of the hero, like the modal */
.blog-post-article h1 {
  font-family: var(--bv2-display, 'Poppins', system-ui), sans-serif;
  color: var(--bv2-ink, #f6f3ee);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 300;
  margin: 0 5% 36px;
  position: relative;
  z-index: 2;
}
.blog-post-meta {
  font-family: var(--bv2-body, system-ui), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--bv2-accent, #ffa33a);
  margin: 0 5% 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.blog-post-meta::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--bv2-accent, #ffa33a);
}
.blog-post-meta time { color: inherit; }

/* Pull title + meta UP into the hero's faded bottom — modal does -154px */
.blog-post-article h1,
.blog-post-meta {
  margin-top: 0;
}
.blog-post-hero + h1,
.blog-post-hero + .blog-post-meta {
  margin-top: -154px;
}
.blog-post-meta + h1 { margin-top: 0; }
.blog-post-article > .blog-post-hero + .blog-post-meta { margin-top: -154px; }
.blog-post-article > .blog-post-hero + .blog-post-meta + h1 { margin-top: 0; }

/* BODY — match modal's 5% inset, 17px/1.85 reading rhythm, 72px bottom */
.blog-post-body {
  padding: 0 5% 72px;
  font-family: var(--bv2-body, system-ui), sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(246,243,238,0.82);
  position: relative;
  z-index: 2;
  margin: 0 auto;
}
.blog-post-body p { margin: 0 0 22px; }
.blog-post-body h2,
.blog-post-body h3 {
  font-family: var(--bv2-display, 'Poppins', system-ui), sans-serif;
  color: var(--bv2-ink, #f6f3ee);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.blog-post-body h2 { font-size: 28px; font-weight: 400; margin: 48px 0 16px; }
.blog-post-body h3 { font-size: 21px; font-weight: 400; margin: 36px 0 16px; }
.blog-post-body a {
  color: var(--bv2-accent, #ffa33a);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,163,58,0.4);
  transition: border-color 0.2s;
}
.blog-post-body a:hover { border-bottom-color: var(--bv2-accent, #ffa33a); }
.blog-post-body img,
.blog-post-body iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  display: block;
  border-radius: 0;
}
.blog-post-body img { filter: grayscale(0.05) contrast(1.02); }
.blog-post-body iframe {
  aspect-ratio: 16/9;
  border: 0;
}
.blog-post-body blockquote {
  margin: 36px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--bv2-accent, #ffa33a);
  font-style: italic;
  color: rgba(246,243,238,0.92);
  font-size: 19px;
  line-height: 1.55;
}
.blog-post-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(246,243,238,0.55);
}
.blog-post-body .qa {
  margin: 14px 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(246,243,238,0.85);
}
.blog-post-body .qa-jon { color: var(--bv2-ink, #f6f3ee); }
.blog-post-body .qa .qa-speaker {
  font-weight: 700;
  color: var(--bv2-accent, #ffa33a);
  margin-right: 6px;
  letter-spacing: 0.02em;
}

/* "← Back to all posts" at the very bottom */
.blog-post-body p > .blog-back {
  display: inline-block;
  margin-top: 24px;
  color: var(--bv2-accent, #ffa33a);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
}

/* Mobile: tighter padding, smaller pull-up to match modal media query */
@media (max-width: 700px) {
  .blog-post-article { border-radius: 0; }
  .blog-post-article h1 { margin: 0 24px 24px; font-size: clamp(30px, 7vw, 40px); }
  .blog-post-meta { margin: 0 24px 16px; }
  .blog-post-body { padding: 0 24px 48px; font-size: 16px; }
  .blog-post-hero + .blog-post-meta { margin-top: -77px; }
}

/* Page background matches where the hero fade resolves to. Without this,
 * the image's bottom-fade gradient terminates at #14110d but the body
 * shell sits on the site's default bg, leaving a visible color seam. */
html:has(article.blog-post-article),
body:has(article.blog-post-article) {
  background: var(--bv2-bg-elev, #14110d);
}

/* Outer page — no top padding so the hero butts up under the nav cleanly */
main:has(> article.blog-post-article) {
  padding: 0 0 64px;
}
@media (max-width: 700px) {
  main:has(> article.blog-post-article) { padding: 0 0 32px; }
}