/* ============================================================
   Blog post — Related Video Teaching callout
   ------------------------------------------------------------
   Small, calm contextual callout linking a blog article to its
   most relevant Video Teaching watch page. Visual language
   intentionally mirrors the sibling components used elsewhere on
   the site — .related-video-card (css/pages/letter-page.css, Open
   Letters) and .study-related-video (css/pages/study-page.css,
   Study lessons) — but is implemented natively here under its own
   class family so the blog post templates keep their own styling
   architecture instead of importing another page family's
   stylesheet purely to borrow a card.

   border-inline-start (not border-left) so the accent bar mirrors
   correctly under Arabic dir="rtl" automatically, matching the
   same logical-property convention used by the two sibling
   components above. Deliberately text-first with no thumbnail —
   calm and compact, clearly secondary to the article body it sits
   inside (.post-body), not a promotional block.
   ============================================================ */

.blog-related-video {
  background: #f7f9fc;
  border: 1px solid #e1e8f0;
  border-inline-start: 4px solid var(--brand-blue, #4a90e2);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.blog-related-video__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-blue-dark, #357abd);
  margin-bottom: 0.35rem;
}

.blog-related-video h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.blog-related-video h3 a {
  color: var(--ink, #2c3e50);
  text-decoration: none;
}

.blog-related-video h3 a:hover {
  color: var(--brand-blue-dark, #357abd);
  text-decoration: underline;
}

.blog-related-video p {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  color: #4a5568;
  line-height: 1.6;
}

.blog-related-video__link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue, #4a90e2);
  text-decoration: none;
}

.blog-related-video__link:hover {
  color: var(--brand-blue-dark, #357abd);
  text-decoration: underline;
}

.blog-related-video h3 a:focus-visible,
.blog-related-video__link:focus-visible {
  outline: 2px solid var(--brand-blue-dark, #357abd);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .blog-related-video {
    padding: 0.85rem 1rem;
  }
}

/* Print: fold the card down to a plain, ink-cheap text block. Every
   blog post's own <style> block already sets `.post-body` with a
   background/border/shadow meant for screen only; there is no
   existing @media print block on these templates to hook into, so
   this component carries its own minimal, self-contained print
   rule rather than introducing a sitewide blog print stylesheet. */
@media print {
  .blog-related-video {
    background: transparent;
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
}