/* Blog content blocks (text / image / video / CTA).
   Loaded per-page via {% block head_extra %} so site.css stays untouched.

   SPECIFICITY NOTE: site.css styles the article body with two-class selectors,
   e.g. `.article .content h2 {color:var(--ink); margin:34px 0 12px}` (0-2-1).
   Any rule here targeting a bare element inside .content must be at least as
   specific, hence the `.article .content ...` prefixes below. */

/* ---- Text ---- */
.blk-text { margin: 0 0 4px; }

/* ---- Images ---- */
.blk-image { margin: 28px 0; }
.blk-image img {
  display: block; width: 100%; border-radius: 14px;
  border: 1.5px solid #d9def0; background: #fff;
}
.article .content .blk-image figcaption,
.article .content .blk-video figcaption {
  font-family: 'DM Mono', monospace; font-size: 13px; color: var(--muted);
  margin-top: 10px; text-align: center;
}

/* ---- Video ---- */
.blk-video { margin: 28px 0; }
.blk-video video {
  display: block; width: 100%; border-radius: 14px;
  border: 1.5px solid #d9def0; background: #000;
}

/* ---- CTA ---- */
.blk-cta {
  background: var(--blue); color: #fff; border-radius: 18px;
  padding: 32px 34px; margin: 40px 0;
}
.article .content .blk-cta h2 { color: #fff; margin: 0 0 10px; font-size: 27px; }
.article .content .blk-cta p { color: #dfe3f4; margin: 0 0 22px; max-width: 46ch; }
.article .content .blk-cta .blk-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--blue); text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 10px;
  transition: transform .18s ease;
}
.article .content .blk-cta .blk-cta-btn:hover { transform: translateY(-2px); }
.article .content .blk-cta .blk-cta-btn:focus-visible { outline: 3px solid var(--status); outline-offset: 3px; }

@media (max-width: 640px) {
  .blk-cta { padding: 26px 22px; }
}

/* ---- Related posts (internal linking) ---- */
.blk-related { border-top: 1.5px solid #d9def0; margin: 40px 0 10px; padding: 26px 0 0; }
.article .content .blk-related h2 { font-size: 21px; margin: 0 0 14px; }
.article .content .blk-related ul { list-style: none; padding-left: 0; margin: 0; }
.blk-related li { margin-bottom: 14px; }
.article .content .blk-related a { color: var(--blue); font-weight: 700; text-decoration: none; }
.article .content .blk-related a:hover { text-decoration: underline; }
.blk-related li span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }