/* ==========================================================================
   Blog post — public/css/pages/blog-post.css
   Only rules that exist nowhere else. .prose / .section / .container live
   in global.css.
   ========================================================================== */

/* --- Draft preview banner ---------------------------------------------------- */
.draft-banner {
  position: sticky; top: 0; z-index: 40; text-align: center; padding: 12px 20px;
  background: #fff3cd; color: #7a5b00; font-weight: 600; font-size: var(--step--1);
  border-bottom: 1px solid #f0d98c;
}
.draft-banner a { margin-left: 10px; color: var(--navy-700); text-decoration: underline; }

/* --- Hero -------------------------------------------------------------------- */
.post-hero { padding-block: clamp(48px, 6vw, 84px); background: var(--navy-900); color: rgba(255,255,255,.78); }
.post-hero .container { max-width: 760px; }
.post-hero__date {
  display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.post-hero h1 { margin-top: 14px; color: #fff; }
.post-hero__lede { margin-top: 18px; font-size: var(--step-2); color: rgba(255,255,255,.82); }
.post-hero__author { margin-top: 16px; font-size: var(--step--1); font-weight: 600; color: rgba(255,255,255,.6); }

/* --- Cover image -------------------------------------------------------------- */
.post-cover { display: block; width: 100%; max-height: 520px; object-fit: cover; }

/* --- Back link ---------------------------------------------------------------- */
.post-back { margin-top: clamp(36px, 4vw, 56px); font-weight: 700; font-size: var(--step--1); }
.post-back a { color: var(--navy-600); }

/* --- Blocks --------------------------------------------------------------------- */
.block + .block { margin-top: 1.15em; }

.block--image.block--full {
  margin-inline: calc(50% - 50vw); max-width: none; width: 100vw;
}
.block--image.block--full img { width: 100%; border-radius: 0; }
.block--image.block--wide img { width: 100%; }
.block--image.block--inline { max-width: 420px; }
.block--image figcaption, .block--video figcaption { margin-top: 10px; font-size: var(--step--1); color: var(--muted); text-align: center; }

.block--video video { width: 100%; border-radius: var(--radius); display: block; }

.embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy-900); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.block--quote {
  border-left: 4px solid var(--accent); padding-left: 22px; margin-block: 1.4em;
  font-size: var(--step-2); color: var(--ink); font-style: italic;
}
.block--quote cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--step--1); font-weight: 700; color: var(--muted); }

.block--divider { border: none; border-top: 1px solid var(--line); margin-block: 2em; }