/* ════════════════════════════════════════════════════════════════
   hedj — blog-page.css : layout for a single blog article page
   (blog.html). Reuses .blog-article / .blog-card__* rules from
   styles.css for the body copy, tag and media fallback.
   ════════════════════════════════════════════════════════════════ */

.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) 1.25rem 5rem;
}

.blog-post__wrap { display: flex; flex-direction: column; }

/* back link */
.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  align-self: flex-start;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.blog-post__back svg { width: 1.05em; height: 1.05em; }
.blog-post__back:hover { color: var(--green); }
.blog-post__back:hover svg { transform: translateX(-3px); transition: transform .2s var(--ease); }

.blog-post__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
  margin-bottom: 1rem;
}

.blog-post__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: .9rem;
}

.blog-post__lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
  text-wrap: pretty;
}

/* hero image / branded fallback */
.blog-post__hero {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: var(--sh-card);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent) 10%, var(--paper)));
}
.blog-post__hero img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.blog-post__hero .blog-card__glyph { font-size: clamp(3rem, 8vw, 5rem); }
/* the "HEDj" glyph is only a fallback — hide it whenever a real image is present.
   If the image fails to load, blog-article.js removes it, :has(img) stops
   matching, and the glyph reappears. */
.blog-post__hero:has(img) .blog-card__glyph { display: none; }
.blog-post__hero:not(:has(img)) { aspect-ratio: 16 / 9; }

/* body copy inherits .blog-article rules from styles.css */
.blog-post .blog-article p { font-size: 1.08rem; line-height: 1.7; }
.blog-post .blog-article p:first-child { font-size: 1.16rem; }

.blog-post__cta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 2px solid var(--line);
}