/* ==========================================================================
   Blog — shared reading system + the six post templates.

   Loaded after home_redesign.css, which supplies the mc-* design tokens and the
   mc-header / mc-footer chrome. The body carries .mc-home so those tokens
   resolve, then .blog-body swaps the homepage's playful gradient for a calm
   reading surface — long-form text over a saturated background is unreadable.

   Layout contract:
     .blog-wrap    page container (1180px)
     .blog-content the prose measure (~68ch) — every template shares it, so
                   typography is defined once and never per template.
   ========================================================================== */

.blog-body {
    --blog-measure: 72ch;
    --blog-fg: #1b2440;
    --blog-muted: #5f6f89;
    --blog-line: rgba(22, 33, 62, 0.12);
    --blog-surface: #ffffff;
    --blog-tint: #f7f9fd;
    --blog-radius: 18px;
    --blog-accent: var(--mc-pink, #ff4f86);
    background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 22%, #ffffff 60%);
    color: var(--blog-fg);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.blog-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-main { padding-bottom: 72px; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.blog-crumbs { padding: 22px 0 6px; font-size: 0.83rem; color: var(--blog-muted); }
.blog-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.blog-crumbs li { display: flex; align-items: center; gap: 6px; }
.blog-crumbs a { color: var(--blog-muted); text-decoration: none; }
.blog-crumbs a:hover { color: var(--blog-accent); text-decoration: underline; }
.blog-crumbs span[aria-current] {
    color: var(--blog-fg); font-weight: 600;
    max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blog-crumb-sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */
.blog-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
    background: transparent; pointer-events: none;
}
.blog-progress-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--mc-pink, #ff4f86), var(--mc-coral, #ff7657), var(--mc-yellow, #ffc94a));
    transition: width 0.08s linear;
}

.blog-preview-bar {
    background: #1b2440; color: #fff; text-align: center;
    padding: 10px 16px; font-size: 0.9rem;
}
.blog-preview-bar strong { color: var(--mc-yellow, #ffc94a); }

/* --------------------------------------------------------------------------
   Post header
   -------------------------------------------------------------------------- */
.blog-head { padding: 18px 0 26px; }

.blog-eyebrow {
    display: inline-block; margin-bottom: 14px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cat-accent, var(--blog-accent)); text-decoration: none;
    border: 1px solid currentColor; border-radius: 999px; padding: 5px 12px;
}
.blog-eyebrow:hover { background: var(--cat-accent, var(--blog-accent)); color: #fff; }
.blog-eyebrow-light { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.blog-eyebrow-light:hover { background: #fff; color: #1b2440; }

.blog-body .blog-title {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    max-width: 20ch;
}
.blog-title-serif { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -0.01em; }

.blog-subtitle {
    font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.6; color: var(--blog-muted);
    max-width: 60ch; margin: 0 0 22px;
}

/* Byline row ---------------------------------------------------------------- */
.blog-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    padding: 16px 0; border-top: 1px solid var(--blog-line); border-bottom: 1px solid var(--blog-line);
    font-size: 0.88rem; color: var(--blog-muted);
}
.blog-byline { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.blog-byline-avatar { border-radius: 50%; object-fit: cover; }
.blog-byline-text { display: flex; flex-direction: column; line-height: 1.3; }
.blog-byline-name { font-weight: 700; color: var(--blog-fg); }
.blog-byline:hover .blog-byline-name { color: var(--blog-accent); }
.blog-byline-role { font-size: 0.78rem; }
.blog-meta-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-updated { font-weight: 600; color: var(--mc-green, #28c76f); }
.blog-dot { opacity: 0.45; }
.blog-meta-light, .blog-meta-light .blog-byline-name { color: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.25); }
.blog-meta-light { border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); }

/* --------------------------------------------------------------------------
   Hero images
   -------------------------------------------------------------------------- */
.blog-hero { margin: 0 0 34px; }
/* max-height + cover, not plain height:auto: editors upload portrait images,
   and an uncapped portrait hero pushes the entire article below the fold. */
.blog-hero img {
    width: 100%; height: auto; max-height: 58vh; object-fit: cover;
    display: block; border-radius: var(--blog-radius);
}
.blog-hero figcaption {
    margin-top: 10px; font-size: 0.82rem; color: var(--blog-muted); text-align: center;
}
.blog-hero-wide, .blog-hero-guide { max-width: 1000px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.blog-hero-bleed { margin-bottom: 0; }
.blog-hero-bleed img { border-radius: 0; max-height: 62vh; object-fit: cover; }
.blog-hero-inline img { border-radius: 14px; }
.blog-hero-credit { font-size: 0.82rem; color: var(--blog-muted); margin: 18px 0 0; }

/* --------------------------------------------------------------------------
   Prose — one measure, shared by every template
   -------------------------------------------------------------------------- */
.blog-content {
    max-width: var(--blog-measure);
    margin: 0 auto;
    font-size: 1.075rem;
    line-height: 1.78;
    color: #26304a;
}
.blog-content > * { margin-inline: auto; }
.blog-content p { margin: 0 0 1.35em; }
.blog-content a { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 3px; }
.blog-content a:hover { text-decoration-thickness: 2px; }

.blog-body .blog-content h2 {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    line-height: 1.25; font-weight: 800; letter-spacing: -0.015em;
    margin: 2.2em 0 0.7em; scroll-margin-top: 96px;
}
.blog-body .blog-content h3 {
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    line-height: 1.35; font-weight: 700;
    margin: 1.8em 0 0.55em; scroll-margin-top: 96px;
}
.blog-body .blog-content h4 { font-size: 1.06rem; font-weight: 700; margin: 1.5em 0 0.5em; }

.blog-content ul, .blog-content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.blog-content li { margin-bottom: 0.5em; }
.blog-content li::marker { color: var(--blog-accent); font-weight: 700; }

.blog-content img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 1.8em auto; }
.blog-content figure { margin: 2em auto; }
.blog-content figcaption { font-size: 0.84rem; color: var(--blog-muted); text-align: center; margin-top: 8px; }

.blog-content blockquote {
    margin: 1.9em auto; padding: 4px 0 4px 22px;
    border-left: 4px solid var(--blog-accent);
    font-size: 1.16rem; line-height: 1.6; color: #1b2440; font-weight: 500;
}
.blog-content blockquote p:last-child { margin-bottom: 0; }

.blog-content hr { border: 0; border-top: 1px solid var(--blog-line); margin: 2.6em auto; }

.blog-content code {
    background: var(--blog-tint); border: 1px solid var(--blog-line);
    border-radius: 6px; padding: 2px 6px; font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blog-content pre {
    background: #16213e; color: #e6ecff; border-radius: 14px;
    padding: 18px 20px; overflow-x: auto; margin: 1.8em auto; font-size: 0.92rem;
}
.blog-content pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Tables scroll inside their own box so a wide comparison table never forces
   the whole page to scroll sideways on mobile. `display: block` is what makes
   the table itself the scroll container — this must work without JS, since
   article bodies are authored in a WYSIWYG and will contain tables. */
.blog-content table {
    width: 100%; border-collapse: collapse; margin: 1.9em auto; font-size: 0.95rem;
    display: block; overflow-x: auto;
}
.blog-content th, .blog-content td { border: 1px solid var(--blog-line); padding: 10px 14px; text-align: left; }
.blog-content th { background: var(--blog-tint); font-weight: 700; }

/* Inline-SVG information diagrams (charts, matrices, curves) authored straight
   into the article body. They carry no HTTP request, cannot become a broken
   image path, and stay crisp at any width. The viewBox does the scaling, so the
   only rule needed is that the SVG fills its figure and keeps its ratio. */
.blog-content .blog-diagram { margin: 2.2em auto; }
.blog-content .blog-diagram svg {
    width: 100%; height: auto; display: block;
    border-radius: 14px; border: 1px solid var(--blog-line);
    background: #fdfbff;
}

/* Author-applied callouts: <p class="tip|warn|note"> or <div class="...">. */
.blog-content .tip, .blog-content .note, .blog-content .warn {
    border-radius: 14px; padding: 16px 18px; margin: 1.8em auto;
    border-left: 4px solid; font-size: 1rem;
}
.blog-content .tip  { background: #eafaf1; border-color: var(--mc-green, #28c76f); }
.blog-content .note { background: #eef4ff; border-color: var(--mc-cyan, #16c7d9); }
.blog-content .warn { background: #fff6e8; border-color: var(--mc-yellow, #ffc94a); }

/* Drop cap — magazine template only */
.blog-content-dropcap > p:first-of-type::first-letter {
    float: left; font-family: "Fraunces", Georgia, serif; font-size: 3.6em;
    line-height: 0.82; font-weight: 700; margin: 0.06em 0.1em 0 0; color: var(--blog-accent);
}
.blog-content-airy { font-size: 1.13rem; line-height: 1.85; }
.blog-content-airy p { margin-bottom: 1.5em; }

/* Numbered item cards — listicle + tutorial.
   Numbering comes from CSS counters, never typed into the heading, so
   reordering items can't leave the list mis-numbered. */
.blog-content-numbered, .blog-content-steps { counter-reset: blogitem; }
.blog-body .blog-content-numbered h2,
.blog-body .blog-content-steps h2 {
    counter-increment: blogitem;
    position: relative; padding-left: 62px; min-height: 48px;
    display: flex; align-items: center;
}
.blog-content-numbered h2::before, .blog-content-steps h2::before {
    content: counter(blogitem);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--mc-pink, #ff4f86), var(--mc-coral, #ff7657));
}
.blog-content-steps h2::before {
    background: linear-gradient(135deg, var(--mc-cyan, #16c7d9), #3b82f6);
    border-radius: 50%;
}

/* Opt a heading out of the count.
   A "20 games" listicle usually ends with sections that are not games —
   "how to choose", "keep reading" — and numbering those made the badges run
   past the number promised in the title, which is exactly the kind of
   inaccurate count the July 2026 SEO audit flagged. Seeders emit
   <h2 class="not-item"> for them via the section flag 'plain' => true. */
.blog-body .blog-content-numbered h2.not-item,
.blog-body .blog-content-steps h2.not-item {
    counter-increment: none;
    padding-left: 0; min-height: 0; display: block;
}
.blog-content-numbered h2.not-item::before,
.blog-content-steps h2.not-item::before { content: none; display: none; }

/* --------------------------------------------------------------------------
   Key takeaways / TL;DR
   -------------------------------------------------------------------------- */
.blog-takeaways {
    max-width: var(--blog-measure); margin: 0 auto 34px;
    background: linear-gradient(135deg, #fff7ed, #eef4ff);
    border: 1px solid var(--blog-line); border-radius: var(--blog-radius);
    padding: 22px 26px;
}
.blog-takeaways-title {
    margin: 0 0 12px; font-size: 0.8rem; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--blog-accent);
}
.blog-takeaways ul { margin: 0; padding-left: 1.2em; }
.blog-takeaways li { margin-bottom: 8px; line-height: 1.6; }
.blog-takeaways li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.blog-toc-title {
    margin: 0 0 10px; font-size: 0.76rem; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--blog-muted);
}
.blog-toc-list { list-style: none; margin: 0; padding: 0; }
.blog-toc-list li { margin: 0; }
.blog-toc-list a {
    display: block; padding: 6px 10px; border-radius: 8px;
    color: var(--blog-muted); text-decoration: none;
    font-size: 0.9rem; line-height: 1.45;
    border-left: 2px solid transparent;
}
.blog-toc-list a:hover { background: var(--blog-tint); color: var(--blog-fg); }
.blog-toc-list a.is-active {
    color: var(--blog-accent); font-weight: 600;
    border-left-color: var(--blog-accent); background: var(--blog-tint);
}
.blog-toc-l3 a { padding-left: 24px; font-size: 0.85rem; }

/* Stickiness lives on the RAIL, not on the TOC.
   A sticky TOC with siblings beneath it (author card, "more reading", the share
   rail) slides down over them as soon as it detaches — sticky does not reserve
   space once it starts travelling. Making the whole rail the sticky unit keeps
   its children in normal flow relative to each other. */
.blog-toc-sticky { position: static; max-height: none; overflow: visible; }
.blog-toc-inline {
    max-width: var(--blog-measure); margin: 0 auto 30px;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    border-radius: var(--blog-radius); padding: 16px 20px;
}
.blog-toc-inline > summary {
    cursor: pointer; font-weight: 700; font-size: 0.92rem; list-style: none;
}
.blog-toc-inline > summary::-webkit-details-marker { display: none; }
.blog-toc-inline > summary::after { content: " ▾"; color: var(--blog-muted); }
.blog-toc-inline[open] > summary::after { content: " ▴"; }
.blog-toc-inline .blog-toc-title { display: none; }
.blog-toc-inline .blog-toc { margin-top: 10px; }

/* Jump chips — listicle */
.blog-jumpnav {
    max-width: var(--blog-measure); margin: 0 auto 30px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.blog-jump-chip {
    font-size: 0.85rem; padding: 7px 14px; border-radius: 999px;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    color: var(--blog-muted); text-decoration: none;
}
.blog-jump-chip:hover, .blog-jump-chip.is-active {
    background: var(--blog-accent); border-color: var(--blog-accent); color: #fff;
}

/* --------------------------------------------------------------------------
   Share
   -------------------------------------------------------------------------- */
.blog-share {
    max-width: var(--blog-measure); margin: 34px auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-top: 22px; border-top: 1px solid var(--blog-line);
}
.blog-share-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blog-muted); margin-right: 4px; }
.blog-share-btn {
    font: inherit; font-size: 0.84rem; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    color: var(--blog-fg); text-decoration: none;
}
.blog-share-btn:hover { background: var(--blog-fg); border-color: var(--blog-fg); color: #fff; }
.blog-share-copy.is-copied { background: var(--mc-green, #28c76f); border-color: var(--mc-green, #28c76f); color: #fff; }
.blog-share-rail {
    max-width: none; margin: 22px 0 0; padding-top: 18px;
    flex-direction: column; align-items: flex-start; gap: 6px;
}
.blog-share-rail .blog-share-btn { width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   Tags, CTA, FAQ, author box, related
   -------------------------------------------------------------------------- */
.blog-tags { max-width: var(--blog-measure); margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tags a {
    font-size: 0.84rem; color: var(--blog-muted); text-decoration: none;
    background: var(--blog-tint); border: 1px solid var(--blog-line);
    border-radius: 999px; padding: 6px 13px;
}
.blog-tags a:hover { color: var(--blog-accent); border-color: var(--blog-accent); }

.blog-cta {
    max-width: var(--blog-measure); margin: 40px auto;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: linear-gradient(135deg, #16213e, #2b3a67);
    color: #fff; border-radius: 22px; padding: 26px 28px;
}
.blog-cta-img { border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.blog-cta-body { flex: 1 1 260px; }
.blog-cta-kicker { margin: 0 0 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mc-yellow, #ffc94a); }
.blog-body .blog-cta-title { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; color: #fff; }
.blog-cta-text { margin: 0 0 16px; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.6; }
.blog-cta-btn {
    display: inline-block; background: linear-gradient(135deg, var(--mc-pink, #ff4f86), var(--mc-coral, #ff7657));
    color: #fff; font-weight: 700; text-decoration: none;
    padding: 12px 24px; border-radius: 999px;
}
.blog-cta-btn:hover { filter: brightness(1.08); }

.blog-faq { max-width: var(--blog-measure); margin: 44px auto; }
.blog-body .blog-faq-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 18px; }
.blog-faq-item { border: 1px solid var(--blog-line); border-radius: 14px; background: var(--blog-surface); margin-bottom: 10px; }
.blog-faq-item > summary {
    cursor: pointer; padding: 15px 18px; font-weight: 700; list-style: none;
    display: flex; justify-content: space-between; gap: 12px;
}
.blog-faq-item > summary::-webkit-details-marker { display: none; }
.blog-faq-item > summary::after { content: "+"; color: var(--blog-accent); font-size: 1.3rem; line-height: 1; }
.blog-faq-item[open] > summary::after { content: "–"; }
.blog-faq-answer { padding: 0 18px 16px; color: #3a4665; line-height: 1.7; }
.blog-faq-answer p:last-child { margin-bottom: 0; }

.blog-author-box {
    max-width: var(--blog-measure); margin: 44px auto;
    display: flex; gap: 22px; flex-wrap: wrap;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    border-radius: var(--blog-radius); padding: 24px 26px;
}
.blog-author-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-author-body { flex: 1 1 260px; }
.blog-author-kicker { margin: 0 0 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blog-muted); }
.blog-body .blog-author-name { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.blog-author-name a { color: inherit; text-decoration: none; }
.blog-author-name a:hover { color: var(--blog-accent); }
.blog-author-role { margin: 0 0 10px; font-size: 0.88rem; color: var(--blog-muted); }
.blog-author-bio { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.65; color: #3a4665; }
.blog-author-topics { margin: 0 0 10px; font-size: 0.84rem; color: var(--blog-muted); }
.blog-author-topics em { font-style: normal; background: var(--blog-tint); border-radius: 999px; padding: 3px 10px; margin-right: 6px; }
.blog-author-links a { font-size: 0.85rem; margin-right: 14px; color: var(--blog-accent); text-decoration: none; }
.blog-author-links a:hover { text-decoration: underline; }

.blog-related { margin: 54px auto 0; max-width: 1180px; }
.blog-body .blog-related-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 20px; }
.blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* --------------------------------------------------------------------------
   Template grids
   -------------------------------------------------------------------------- */
.blog-guide-grid, .blog-doc-grid, .blog-mag-grid {
    width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px;
    display: grid; gap: 44px; align-items: start;
}
.blog-guide-grid { grid-template-columns: 250px minmax(0, 1fr); }
.blog-doc-grid   { grid-template-columns: minmax(0, 1fr) 250px; }
.blog-mag-grid   { grid-template-columns: minmax(0, 1fr) 300px; }

.blog-guide-main .blog-content, .blog-doc-main .blog-content,
.blog-mag-main .blog-content, .blog-guide-main .blog-takeaways,
.blog-doc-main .blog-takeaways, .blog-mag-main .blog-takeaways,
.blog-guide-main .blog-share, .blog-doc-main .blog-share,
.blog-mag-main .blog-share, .blog-guide-main .blog-faq,
.blog-doc-main .blog-faq, .blog-mag-main .blog-faq,
.blog-guide-main .blog-cta, .blog-doc-main .blog-cta, .blog-mag-main .blog-cta,
.blog-guide-main .blog-author-box, .blog-doc-main .blog-author-box,
.blog-mag-main .blog-author-box, .blog-guide-main .blog-tags,
.blog-doc-main .blog-tags, .blog-mag-main .blog-tags { max-width: none; }

.blog-side-card {
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    border-radius: var(--blog-radius); padding: 18px 20px; margin-top: 20px;
}
.blog-side-title { margin: 0 0 12px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blog-muted); }
.blog-side-avatar { border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.blog-side-name { margin: 0; font-weight: 700; }
.blog-side-role { margin: 2px 0 0; font-size: 0.84rem; color: var(--blog-muted); }
.blog-side-list { list-style: none; margin: 0; padding: 0; }
.blog-side-list li { margin-bottom: 10px; line-height: 1.45; }
.blog-side-list a { color: var(--blog-fg); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.blog-side-list a:hover { color: var(--blog-accent); }

/* align-self: start is required for sticky to have travel room — the grid sets
   align-items: start, and a stretched rail would fill its grid area and never
   detach. The rail scrolls internally if its own content outgrows the viewport. */
.blog-rail-left, .blog-rail-right {
    position: sticky; top: 90px; align-self: start;
    max-height: calc(100vh - 110px); overflow-y: auto;
    scrollbar-width: thin;
}

/* Immersive hero ------------------------------------------------------------ */
.blog-immersive-hero {
    position: relative; min-height: min(88vh, 760px);
    display: flex; align-items: flex-end;
    overflow: hidden; margin-bottom: 44px;
}
.blog-immersive-hero.is-plain { background: linear-gradient(135deg, #16213e, #3b3f7a); min-height: 46vh; }
.blog-immersive-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-immersive-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 15, 35, 0.25) 0%, rgba(10, 15, 35, 0.55) 55%, rgba(10, 15, 35, 0.88) 100%);
}
.blog-immersive-inner {
    position: relative; width: 100%; max-width: 1180px;
    margin: 0 auto; padding: 0 20px 64px; color: #fff;
}
.blog-immersive-inner .blog-title-hero { color: #fff; max-width: 18ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.blog-subtitle-light { color: rgba(255, 255, 255, 0.86); }
.blog-immersive-cue {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 12px;
}
.blog-immersive-cue::after {
    content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
    width: 3px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.85);
    animation: blogCue 1.7s ease-in-out infinite;
}
@keyframes blogCue { 0%, 100% { opacity: 0.3; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 9px); } }

/* --------------------------------------------------------------------------
   Listing pages
   -------------------------------------------------------------------------- */
.blog-listing-head { padding: 16px 0 26px; text-align: center; }
.blog-listing-kicker { margin: 0 0 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blog-accent); }
.blog-body .blog-listing-title {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800;
    letter-spacing: -0.02em; margin: 0 auto 12px; max-width: 22ch;
}
.blog-listing-sub { max-width: 62ch; margin: 0 auto 10px; color: var(--blog-muted); line-height: 1.65; }
.blog-listing-bio { max-width: 62ch; margin: 10px auto 0; color: #3a4665; line-height: 1.7; }
.blog-listing-count { font-size: 0.85rem; color: var(--blog-muted); margin: 6px 0 0; }
.blog-author-hero-avatar { border-radius: 50%; object-fit: cover; margin-bottom: 14px; }

.blog-chips { padding: 6px 0 26px; }
.blog-chips-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.blog-chip {
    font-size: 0.88rem; font-weight: 600; padding: 8px 16px; border-radius: 999px;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    color: var(--blog-muted); text-decoration: none;
}
.blog-chip:hover { border-color: var(--cat-accent, var(--blog-accent)); color: var(--cat-accent, var(--blog-accent)); }
.blog-chip.is-current { background: var(--blog-fg); border-color: var(--blog-fg); color: #fff; }

.blog-featured {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit;
    margin-bottom: 38px; box-shadow: var(--mc-shadow, 0 16px 44px rgba(36, 44, 84, 0.14));
}
.blog-featured:hover { transform: translateY(-2px); transition: transform 0.18s ease; }
/* Same reason as .blog-card-media: without a ratio and an out-of-flow image, a
   portrait hero makes the featured card several screens tall. */
.blog-featured-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blog-tint); }
.blog-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-flag {
    display: inline-block; align-self: flex-start; margin-bottom: 12px;
    background: var(--mc-yellow, #ffc94a); color: #4a3a00;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.blog-body .blog-featured-title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; margin: 8px 0 12px; line-height: 1.2; }
.blog-featured-excerpt { color: var(--blog-muted); line-height: 1.65; margin: 0 0 14px; }
.blog-featured-meta { font-size: 0.85rem; color: var(--blog-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; }

.blog-card {
    background: var(--blog-surface); border: 1px solid var(--blog-line);
    border-radius: 20px; overflow: hidden; height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--mc-shadow, 0 16px 44px rgba(36, 44, 84, 0.14)); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* The image is absolutely positioned rather than laid out in flow: aspect-ratio
   only sets a *preferred* size, so an in-flow portrait image would stretch the
   box back to its natural height and every card in the grid would be a
   different shape. Taking it out of flow makes the ratio authoritative. */
.blog-card-media {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--blog-tint); display: flex; align-items: center; justify-content: center;
}
.blog-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-placeholder { font-size: 2.4rem; font-weight: 800; color: var(--blog-accent); opacity: 0.35; }
.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card-eyebrow {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cat-accent, var(--blog-accent)); margin-bottom: 8px;
}
.blog-body .blog-card-title { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
.blog-card:hover .blog-card-title { color: var(--blog-accent); }
.blog-card-excerpt {
    font-size: 0.92rem; color: var(--blog-muted); line-height: 1.6; margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-meta { margin-top: auto; font-size: 0.8rem; color: var(--blog-muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.blog-card-compact .blog-card-media { aspect-ratio: 2 / 1; }
.blog-card-compact .blog-card-excerpt { display: none; }

.blog-empty { text-align: center; padding: 60px 20px; color: var(--blog-muted); font-size: 1.05rem; }
.blog-empty a { color: var(--blog-accent); }

.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 44px 0 0; }
.blog-page-btn, .blog-page-num {
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    padding: 9px 15px; border-radius: 10px;
    background: var(--blog-surface); border: 1px solid var(--blog-line); color: var(--blog-fg);
}
.blog-page-btn:hover, .blog-page-num:hover { border-color: var(--blog-accent); color: var(--blog-accent); }
.blog-page-num.is-current { background: var(--blog-fg); border-color: var(--blog-fg); color: #fff; }
.blog-page-gap { color: var(--blog-muted); padding: 0 2px; }

/* --------------------------------------------------------------------------
   Responsive — rails collapse before the measure does
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .blog-guide-grid, .blog-doc-grid, .blog-mag-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* The sticky rails become inline blocks above the body; the TOC keeps its
       value, the share rail would just be a duplicate of the one below the
       article, so it is hidden rather than shown twice. */
    .blog-rail { margin-bottom: 26px; position: static; max-height: none; overflow: visible; }
    .blog-rail-right { order: -1; }
    .blog-share-rail { display: none; }
    .blog-doc-grid { display: flex; flex-direction: column; }
}

@media (max-width: 780px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-media { aspect-ratio: 16 / 9; }
    .blog-featured-body { padding: 22px 22px 26px; }
    .blog-content { font-size: 1.02rem; line-height: 1.72; }
    .blog-body .blog-content h2 { margin-top: 1.9em; }
    .blog-body .blog-content-numbered h2, .blog-body .blog-content-steps h2 { padding-left: 52px; }
    .blog-content-numbered h2::before, .blog-content-steps h2::before { width: 38px; height: 38px; font-size: 0.98rem; }
    .blog-immersive-hero { min-height: 68vh; }
    .blog-immersive-inner { padding-bottom: 40px; }
    .blog-hero-bleed img { max-height: 44vh; }
    .blog-crumbs span[aria-current] { max-width: 24ch; }
    .blog-cta { padding: 22px; }
    .blog-author-box { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-progress-fill { transition: none; }
    .blog-immersive-cue::after { animation: none; }
    .blog-card:hover, .blog-featured:hover { transform: none; }
}

/* RTL — Arabic/Urdu. The measure and cards are direction-agnostic; only the
   deliberately left-anchored decorations need mirroring. */
[dir="rtl"] .blog-content ul, [dir="rtl"] .blog-content ol { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] .blog-content blockquote { border-left: 0; border-right: 4px solid var(--blog-accent); padding: 4px 22px 4px 0; }
[dir="rtl"] .blog-toc-list a { border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .blog-toc-list a.is-active { border-right-color: var(--blog-accent); }
[dir="rtl"] .blog-body .blog-content-numbered h2,
[dir="rtl"] .blog-body .blog-content-steps h2 { padding-left: 0; padding-right: 62px; }
[dir="rtl"] .blog-content-numbered h2::before, [dir="rtl"] .blog-content-steps h2::before { left: auto; right: 0; }
[dir="rtl"] .blog-content-dropcap > p:first-of-type::first-letter { float: right; margin: 0.06em 0 0 0.1em; }
[dir="rtl"] .blog-content .tip, [dir="rtl"] .blog-content .note, [dir="rtl"] .blog-content .warn {
    border-left: 0; border-right: 4px solid;
}