/* Blog article page.
   Extracted from Views/Blog/Article.cshtml — keep edits here, not inline. */

        /* Checklist warm palette + Bricolage typography. We override BOTH the
           article's own --ih-* variables AND the host layout's --text-primary /
           --bg-primary so navbar, footer, and article body all shift together
           between light cream and dark warm brown. Forest green is the accent;
           tip/warn/pro/info callouts keep semantic hue but warmed to fit. */
        :root, :root[data-theme="light"] {
            --ih-page-bg: #f5efe3;
            --ih-page-bg-blur: rgba(245, 239, 227, 0.88);
            --ih-text: #1f1a14;
            --ih-text-soft: #4a413a;
            --ih-text-muted: #8a7f73;
            --ih-bg: #fbf6ea;
            --ih-surface: #ebe2cf;
            --ih-border: #d8cdb6;
            --ih-accent: #2d4a36;
            --ih-accent-soft: #d8e3d3;
            --ih-tip-bg: #e7efe1;
            --ih-tip-border: #6f9466;
            --ih-tip-text: #1f3a26;
            --ih-warn-bg: #f5e8c7;
            --ih-warn-border: #d4a04c;
            --ih-warn-text: #5a3d12;
            --ih-pro-bg: #f0e2d3;
            --ih-pro-border: #c87c4f;
            --ih-pro-text: #5a2f12;
            --ih-info-bg: #e1eaef;
            --ih-info-border: #3b6b8a;
            --ih-info-text: #1d3a4f;
            --ih-shadow: 0 1px 2px rgba(31, 26, 20, 0.06), 0 8px 24px rgba(31, 26, 20, 0.08);
            --terra-dk: #a8613a;
            --butter: #e8c96d;
            --forest: #2d4a36;
            /* Host-layout variables — keep navbar/footer in the warm cream too. */
            --text-primary: #1f1a14;
            --text-secondary: #4a413a;
            --bg-primary: #f5efe3;
            --bg-secondary: #ebe2cf;
            --bg-tertiary: #fbf6ea;
            --border-color: #d8cdb6;
            --primary-color: #2d4a36;
            --primary-dark: #203526;
            --secondary-color: #c87c4f;
        }

        :root[data-theme="dark"] {
            --ih-page-bg: #14110d;
            --ih-page-bg-blur: rgba(20, 17, 13, 0.82);
            --ih-text: #f0e9da;
            --ih-text-soft: #c8bda9;
            --ih-text-muted: #8a8170;
            --ih-bg: #1d1915;
            --ih-surface: #221d17;
            --ih-border: #2e2820;
            --ih-accent: #5e9176;
            --ih-accent-soft: #2c4536;
            --ih-tip-bg: #1e2e22;
            --ih-tip-border: #5e9176;
            --ih-tip-text: #c5dec5;
            --ih-warn-bg: #2c2412;
            --ih-warn-border: #d4a04c;
            --ih-warn-text: #f5d893;
            --ih-pro-bg: #2c1f15;
            --ih-pro-border: #c87c4f;
            --ih-pro-text: #f0c8a4;
            --ih-info-bg: #15232c;
            --ih-info-border: #6b9bbb;
            --ih-info-text: #b6cad5;
            --ih-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.5);
            --terra-dk: #d97a48;
            --butter: #f0d27a;
            --forest: #5e9176;
            --text-primary: #f0e9da;
            --text-secondary: #c8bda9;
            --bg-primary: #14110d;
            --bg-secondary: #1d1915;
            --bg-tertiary: #221d17;
            --border-color: #2e2820;
            --primary-color: #5e9176;
            --primary-dark: #4a7960;
            --secondary-color: #e0936a;
        }
        @media (prefers-color-scheme: dark) {
            :root[data-theme="auto"] {
                --ih-page-bg: #14110d;
                --ih-page-bg-blur: rgba(20, 17, 13, 0.82);
                --ih-text: #f0e9da;
                --ih-text-soft: #c8bda9;
                --ih-text-muted: #8a8170;
                --ih-bg: #1d1915;
                --ih-surface: #221d17;
                --ih-border: #2e2820;
                --ih-accent: #5e9176;
                --ih-accent-soft: #2c4536;
                --ih-tip-bg: #1e2e22;
                --ih-tip-border: #5e9176;
                --ih-tip-text: #c5dec5;
                --ih-warn-bg: #2c2412;
                --ih-warn-border: #d4a04c;
                --ih-warn-text: #f5d893;
                --ih-pro-bg: #2c1f15;
                --ih-pro-border: #c87c4f;
                --ih-pro-text: #f0c8a4;
                --ih-info-bg: #15232c;
                --ih-info-border: #6b9bbb;
                --ih-info-text: #b6cad5;
                --ih-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.5);
                --terra-dk: #d97a48;
                --butter: #f0d27a;
                --forest: #5e9176;
                --text-primary: #f0e9da;
                --text-secondary: #c8bda9;
                --bg-primary: #14110d;
                --bg-secondary: #1d1915;
                --bg-tertiary: #221d17;
                --border-color: #2e2820;
                --primary-color: #5e9176;
                --primary-dark: #4a7960;
                --secondary-color: #e0936a;
            }
        }

        /* Bricolage display font for headings; Inter for body. JetBrains Mono
           for eyebrows + meta chips. Pulls fonts in via @section MetaTags
           below — same set as /checklist for visual consistency. */
        body, .ih-page, .ih-article {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .ih-page h1, .ih-page h2, .ih-page h3,
        .ih-article h1, .ih-article h2, .ih-article h3,
        .ih-article h4, .ih-article h5,
        .ih-related h2, .ih-related h3 {
            font-family: "Bricolage Grotesque", "Inter", sans-serif;
            letter-spacing: -0.015em;
        }
        .ih-eyebrow, .ih-tldr-label, .ih-meta, .ih-tag, .ih-affix-meta {
            font-family: "JetBrains Mono", ui-monospace, monospace;
        }

        /* Override host-layout's `overflow-x: hidden` on html/body — it breaks `position: sticky`.
           `overflow-x: clip` is the modern alternative that prevents horizontal scrolling WITHOUT
           creating a scroll container, so sticky still works. */
        html, body {
            overflow-x: clip !important;
            overflow-y: visible !important;
        }

        /* Article page surface — colours come from the host CSS variables we override above,
           so the navbar and footer inherit the same palette without us having to target them. */
        .ih-page {
            color: var(--ih-text);
            transition: color 180ms ease;
        }

        /* Neutralise the site-wide scroll-reveal that hides every <section> until a landing-page
           observer flips it visible. Blog pages don't run that observer. */
        .ih-page section { opacity: 1 !important; transform: none !important; }

        /* Progress bar — sticky at the very top of the viewport, scales with scroll. */
        .ih-progress {
            position: fixed; top: 0; left: 0; height: 3px; width: 0%;
            background: var(--ih-accent);
            z-index: 9999; transition: width 100ms linear;
        }

        /* Article shell — grid with article column + sticky TOC on desktop. */
        .ih-article-shell {
            display: grid;
            grid-template-columns: minmax(0, 720px) 260px;
            gap: 48px;
            max-width: 1080px;
            margin: 0 auto;
            padding: 120px 20px 40px;
        }
        @media (max-width: 1024px) {
            .ih-article-shell { grid-template-columns: 1fr; padding: 100px 16px 40px; }
            .ih-affix { display: none; }
        }

        .ih-article {
            font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
            font-size: 18px;
            line-height: 1.75;
            color: var(--ih-text);
            max-width: 65ch;
        }
        .ih-article h1,
        .ih-article h2,
        .ih-article h3,
        .ih-article strong { color: var(--ih-text); }
        .ih-article p,
        .ih-article li { color: var(--ih-text-soft); }
        .ih-article h1 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 10px 0; }
        .ih-article h2 { font-size: 1.5rem; line-height: 1.25; margin: 2em 0 0.6em; scroll-margin-top: 110px; }
        .ih-article h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.5em 0 0.5em; scroll-margin-top: 110px; }
        .ih-article p { margin: 0 0 1em 0; }
        .ih-article ul, .ih-article ol { padding-left: 1.4em; margin: 0 0 1em; }
        .ih-article li { margin-bottom: 0.4em; line-height: 1.7; }
        .ih-article img { max-width: 100%; height: auto; border-radius: 14px; }
        .ih-article a { color: var(--ih-accent); }
        .ih-article a:hover { text-decoration: underline; }

        .ih-hero-img { width: 100%; border-radius: 16px; margin-bottom: 20px; }
        .ih-meta {
            color: var(--ih-text-muted); font-family: system-ui, -apple-system, sans-serif;
            font-size: 0.95rem; margin-bottom: 24px;
            display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
        }
        .ih-meta a { color: var(--ih-text-muted); text-decoration: underline; text-underline-offset: 3px; }
        .ih-meta a:hover { color: var(--ih-accent); }
        .ih-meta > * + *::before { content: "·"; margin-right: 14px; opacity: .6; }
        .ih-excerpt {
            font-style: italic; color: var(--ih-text-muted);
            font-size: 1.15rem; margin-bottom: 24px;
        }

        /* TL;DR */
        .blog-tldr {
            background: var(--ih-info-bg); border: 1px solid var(--ih-info-border);
            color: var(--ih-info-text);
            border-radius: 14px; padding: 18px 22px; margin: 0 0 28px;
            font-family: system-ui, -apple-system, sans-serif; font-size: 16px;
        }
        .blog-tldr .ih-tldr-label {
            font-weight: 700; color: var(--ih-info-text); font-size: 13px;
            letter-spacing: 0.08em; text-transform: uppercase;
        }
        .blog-tldr ul { margin: 6px 0 0; padding-left: 18px; color: var(--ih-info-text); }
        .blog-tldr li { color: inherit; }

        /* TOC (mobile collapsible) */
        .ih-toc-inline { margin-bottom: 24px; }
        /* TOC is noise on narrow screens — article headings are close together
           visually, and the sticky sidebar TOC is already hidden at this size.
           Keep the markup for screen-reader discoverability but visually mute it. */
        @media (max-width: 720px) {
            .ih-toc-inline { display: none; }
        }
        .ih-toc-inline details {
            border: 1px solid var(--ih-border); border-radius: 12px;
            padding: 12px 18px; font-family: system-ui, -apple-system, sans-serif;
            background: var(--ih-surface);
        }
        .ih-toc-inline summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
        .ih-toc-inline summary::before { content: "↓"; transition: transform 160ms; }
        .ih-toc-inline details[open] summary::before { transform: rotate(180deg); }
        .ih-toc-inline ul { list-style: none; margin: 10px 0 0; padding: 0; }
        .ih-toc-inline li a { color: var(--ih-text); text-decoration: none; display: block; padding: 4px 0; font-size: 14px; }
        .ih-toc-inline li a:hover { color: var(--ih-accent); }
        .ih-toc-inline .ih-toc-h3 { padding-left: 18px; font-size: 13px; color: var(--ih-text-muted); }

        /* Right-side affix: TOC + article info panel (category, tags, quick links).
           `align-self: start` keeps it at natural height while the grid cell stays as tall
           as the article column — giving sticky a track to slide in. */
        .ih-affix {
            position: sticky;
            top: 110px;
            align-self: start;
            max-height: calc(100vh - 130px);
            overflow-y: auto;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .ih-affix::-webkit-scrollbar { width: 4px; }
        .ih-affix::-webkit-scrollbar-thumb { background: var(--ih-border); border-radius: 2px; }

        .ih-affix-block { margin: 0; }
        .ih-affix-title {
            font-size: 12px; font-weight: 700;
            letter-spacing: 0.08em; color: var(--ih-text-muted);
            text-transform: uppercase; margin: 0 0 12px;
        }

        /* TOC list inside affix */
        .ih-toc-sticky ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--ih-border); }
        .ih-toc-sticky li a { display: block; padding: 6px 12px; color: var(--ih-text-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; transition: color 120ms, border-color 120ms; }
        .ih-toc-sticky li a:hover { color: var(--ih-accent); }
        .ih-toc-sticky li a.is-active { color: var(--ih-accent); border-left-color: var(--ih-accent); font-weight: 600; }
        .ih-toc-sticky li.is-h3 a { padding-left: 24px; font-size: 13px; }

        /* Article meta card inside affix: category + tags + quick links. */
        .ih-affix-meta {
            background: var(--ih-surface);
            border: 1px solid var(--ih-border);
            border-radius: 14px;
            padding: 16px 18px;
        }
        .ih-affix-meta-row { margin-bottom: 14px; }
        .ih-affix-meta-row:last-child { margin-bottom: 0; }
        .ih-affix-meta-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--ih-text-muted);
            margin-bottom: 6px;
            font-weight: 600;
        }
        .ih-affix-category {
            display: inline-flex;
            align-items: center;
            padding: 5px 12px;
            border-radius: 999px;
            background: var(--ih-accent-soft);
            color: var(--ih-accent);
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
        }
        .ih-affix-category:hover { opacity: 0.85; }
        .ih-affix-tags {
            display: flex; flex-wrap: wrap; gap: 5px;
            list-style: none; padding: 0; margin: 0;
        }
        .ih-affix-tags a {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px solid var(--ih-border);
            background: var(--ih-bg);
            color: var(--ih-text-muted);
            font-size: 12px;
            text-decoration: none;
        }
        .ih-affix-tags a:hover { color: var(--ih-accent); border-color: var(--ih-accent); }
        .ih-affix-all {
            display: block;
            text-align: center;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--ih-accent);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            margin-top: 4px;
        }
        .ih-affix-all:hover { opacity: 0.92; }

        /* Callouts */
        .blog-callout {
            display: block;
            border-left: 4px solid var(--ih-info-border);
            background: var(--ih-info-bg);
            color: var(--ih-info-text);
            border-radius: 6px 12px 12px 6px;
            padding: 14px 18px;
            margin: 20px 0;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 16px;
        }
        .blog-callout strong { color: inherit; }
        .blog-callout--tip { border-left-color: var(--ih-tip-border); background: var(--ih-tip-bg); color: var(--ih-tip-text); }
        .blog-callout--warning { border-left-color: var(--ih-warn-border); background: var(--ih-warn-bg); color: var(--ih-warn-text); }
        .blog-callout--pro { border-left-color: var(--ih-pro-border); background: var(--ih-pro-bg); color: var(--ih-pro-text); }

        /* Steps */
        .blog-steps { counter-reset: step; padding-left: 0; list-style: none; margin: 24px 0; font-family: system-ui, -apple-system, sans-serif; font-size: 16px; }
        .blog-steps > li {
            counter-increment: step;
            position: relative;
            padding: 12px 16px 12px 56px;
            background: var(--ih-surface);
            color: var(--ih-text-soft);
            border: 1px solid var(--ih-border);
            border-radius: 12px;
            margin-bottom: 10px;
            line-height: 1.55;
        }
        .blog-steps > li strong { color: var(--ih-text); }
        .blog-steps > li::before {
            content: counter(step);
            position: absolute; left: 14px; top: 12px;
            width: 28px; height: 28px;
            border-radius: 50%;
            background: var(--ih-accent); color: #fff;
            font-weight: 700; font-size: 14px;
            display: flex; align-items: center; justify-content: center;
        }

        /* Pullquote */
        .blog-pullquote {
            font-family: Georgia, serif;
            font-size: 1.4rem; line-height: 1.4;
            border-left: 4px solid var(--ih-accent); padding-left: 18px;
            margin: 30px 0; color: var(--ih-text); font-style: italic;
        }

        /* Widgets */
        .blog-widget {
            background: var(--ih-surface);
            color: var(--ih-text);
            border: 1px solid var(--ih-border);
            border-radius: 14px;
            padding: 22px 26px;
            margin: 32px 0;
            font-family: system-ui, -apple-system, sans-serif;
            box-shadow: var(--ih-shadow);
        }
        .blog-widget h3 { margin: 0 0 14px; font-size: 1.1rem; color: var(--ih-text); }
        .blog-check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--ih-text-soft); }
        .blog-check input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ih-accent); flex-shrink: 0; }
        .blog-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ih-text-soft); }
        .blog-table th, .blog-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ih-border); }
        .blog-table th { background: var(--ih-accent); color: #ffffff; font-weight: 600; }
        .blog-table tr:last-child td { border-bottom: none; font-weight: 600; color: var(--ih-text); }
        .blog-quiz-q { padding: 10px 0; border-bottom: 1px solid var(--ih-border); color: var(--ih-text-soft); }
        .blog-quiz-q:last-child { border: none; }
        .blog-quiz-a { font-size: 0.92rem; color: var(--ih-text-muted); }

        /* Inline figures */
        .blog-inline-image { margin: 28px 0; }
        .blog-inline-image img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ih-shadow); }
        .blog-inline-image figcaption { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--ih-text-muted); text-align: center; margin-top: 8px; }

        /* Key takeaways */
        .blog-key-takeaways {
            background: var(--ih-warn-bg); border: 1px solid var(--ih-warn-border);
            color: var(--ih-warn-text);
            border-radius: 14px; padding: 22px 26px; margin: 40px 0 20px;
            font-family: system-ui, -apple-system, sans-serif; font-size: 16px;
        }
        .blog-key-takeaways .ih-kt-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ih-warn-text); margin-bottom: 8px; }
        .blog-key-takeaways ol { padding-left: 22px; margin: 0; color: inherit; }
        .blog-key-takeaways li { color: inherit; }

        /* FAQ */
        .blog-faq { margin-top: 40px; font-family: system-ui, -apple-system, sans-serif; }
        .blog-faq h2 { font-family: system-ui, -apple-system, sans-serif; margin-bottom: 16px; color: var(--ih-text); }
        .blog-faq details {
            background: var(--ih-surface); border: 1px solid var(--ih-border);
            border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; cursor: pointer;
            color: var(--ih-text);
        }
        .blog-faq summary { font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; color: var(--ih-text); }
        .blog-faq summary::after { content: "+"; font-size: 22px; color: var(--ih-text-muted); transition: transform 160ms; }
        .blog-faq details[open] summary::after { transform: rotate(45deg); }
        .blog-faq .blog-faq-a { margin-top: 10px; color: var(--ih-text-soft); font-size: 15px; line-height: 1.6; font-family: Georgia, serif; }

        /* Related posts */
        .ih-related { margin-top: 56px; }
        .ih-related h2 { font-family: system-ui, -apple-system, sans-serif; margin-bottom: 16px; color: var(--ih-text); }
        .ih-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
        /* Flat card — no outer border / no border-radius. The previous pill-shaped
           card with overflow:hidden was showing small visual notches at the image's
           bottom corners, where the rounding cut into the cover image. */
        .ih-related-card {
            display: block;
            text-decoration: none;
            color: var(--ih-text);
            background: transparent;
            transition: transform 120ms ease;
        }
        .ih-related-card:hover { transform: translateY(-2px); }
        .ih-related-card:hover .ih-related-title { color: var(--ih-accent); }
        .ih-related-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            display: block;
            border-radius: 10px;
        }
        .ih-related-card .ih-related-body {
            padding: 10px 2px 0;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 14px;
        }
        .ih-related-card .ih-related-title {
            font-weight: 600;
            line-height: 1.3;
            color: var(--ih-text);
            transition: color 120ms;
        }
        .ih-related-card .ih-related-meta { color: var(--ih-text-muted); font-size: 12px; margin-top: 4px; }

        /* Share panel styles + markup live in the shared _SharePanel partial
           (Views/Shared/_SharePanel.cshtml) — it reads this page's --ih-* vars. */

        /* Preview banner — shown only in /blog/{slug}?preview=<token> previews. */
        .ih-preview-banner {
            display: block;
            padding: 10px 14px;
            margin: 0 0 18px;
            border-radius: 10px;
            background: var(--ih-warn-bg);
            border: 1px solid var(--ih-warn-border);
            color: var(--ih-warn-text);
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 14px;
            line-height: 1.5;
        }
        .ih-preview-banner strong {
            color: inherit;
            font-weight: 700;
            margin-right: 4px;
        }

        /* Back-to-top FAB */
        .ih-back-top {
            position: fixed; right: 18px; bottom: 90px;
            width: 44px; height: 44px; border-radius: 50%;
            background: var(--ih-accent); color: #fff;
            display: none; align-items: center; justify-content: center;
            text-decoration: none; z-index: 40; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
        }
        .ih-back-top.is-visible { display: flex; }