/* Blog hub / category pages.
   Extracted from Views/Blog/Index.cshtml — keep edits here, not inline. */

        /* Re-tint the shared header to match this page's parchment surface
           via the --ih-page-* contract defined in _Layout.cshtml. */
        body {
            --ih-page-bg: #f5efe3;
            --ih-page-bg-blur: rgba(245, 239, 227, 0.88);
        }
        html[data-theme="dark"] body {
            --ih-page-bg: #14110d;
            --ih-page-bg-blur: rgba(20, 17, 13, 0.82);
        }

        /* ── Checklist palette + typography overlay ───────────────────────
           Re-skin the blog with the same warm-cream/forest/butter palette
           used on /checklist and Bricolage + Inter typography. We override
           the host CSS variables on :root so existing var(...) usage in the
           legacy blog styles below picks up the new colors automatically. */
        :root {
            --primary-color: #2d4a36;
            --primary-dark: #203526;
            --secondary-color: #c87c4f;
            --text-primary: #1f1a14;
            --text-secondary: #4a413a;
            --bg-primary: #f5efe3;
            --bg-secondary: #ebe2cf;
            --bg-tertiary: #fbf6ea;
            --border-color: #d8cdb6;
            --terra-dk: #a8613a;
            --butter: #e8c96d;
            --forest: #2d4a36;
        }
        :root[data-theme="dark"], :root[data-theme="dark"] body {
            --primary-color: #5e9176;
            --primary-dark: #4a7960;
            --secondary-color: #e0936a;
            --text-primary: #f0e9da;
            --text-secondary: #c8bda9;
            --bg-primary: #14110d;
            --bg-secondary: #1d1915;
            --bg-tertiary: #221d17;
            --border-color: #2e2820;
            --terra-dk: #d97a48;
            --butter: #f0d27a;
            --forest: #5e9176;
        }
        @media (prefers-color-scheme: dark) {
            :root[data-theme="auto"] {
                --primary-color: #5e9176;
                --primary-dark: #4a7960;
                --secondary-color: #e0936a;
                --text-primary: #f0e9da;
                --text-secondary: #c8bda9;
                --bg-primary: #14110d;
                --bg-secondary: #1d1915;
                --bg-tertiary: #221d17;
                --border-color: #2e2820;
                --terra-dk: #d97a48;
                --butter: #f0d27a;
                --forest: #5e9176;
            }
        }

        body { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }
        .blog-hub h1,
        .blog-hub h2,
        .blog-hub h3,
        .blog-hub .blog-hero-title,
        .blog-hero-title,
        .blog-card-title,
        .blog-cat-pill,
        .ih-related h2 {
            font-family: "Bricolage Grotesque", "Inter", sans-serif;
            letter-spacing: -0.015em;
        }
        .blog-hub .blog-hero-badge,
        .blog-hub .ih-eyebrow,
        .blog-hub .blog-card-meta,
        .blog-hub .blog-cat-pill {
            font-family: "JetBrains Mono", ui-monospace, monospace;
        }

        /* The site-wide stylesheet hides every <section> with opacity:0 until a scroll-reveal
           observer adds `.visible`. That observer only runs on the landing page. Force visibility
           for blog <section> elements so they render immediately. */
        .blog-hub section,
        section.blog-hero,
        section.blog-grid,
        section.ih-related {
            opacity: 1 !important;
            transform: none !important;
        }

        .blog-hub {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 24px 60px;
        }

        /* Filter rail — wrapping row of category pills above the grid. Collapses
           to the first 2 visible rows by default; JS measures how many pills
           overflow and renders a "+N more" toggle that expands to the full list.
           Row height budget: pill ~40px + 10px gap = 50px per row, + 4px padding top.
           Keep --rail-collapsed-rows in sync with the height math. */
        .blog-filter-rail-wrap { margin: 0 0 28px; }
        .blog-filter-rail {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 4px 2px 0;
            max-height: 104px;
            overflow: hidden;
            transition: max-height 200ms ease;
        }
        .blog-filter-rail.is-expanded {
            max-height: 1200px;  /* arbitrary large number — CSS max-height transition needs a concrete target */
        }
        .blog-cat-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
            transition: background 120ms, border-color 120ms, color 120ms;
        }
        .blog-cat-pill:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .blog-cat-pill.is-active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }
        .blog-cat-pill-count {
            font-size: 11px;
            padding: 1px 8px;
            border-radius: 999px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            font-weight: 500;
        }
        .blog-cat-pill.is-active .blog-cat-pill-count {
            background: rgba(255,255,255,0.22);
            color: #fff;
        }

        /* "+N more" toggle — sits on its own row below the rail. Hidden by
           default; JS reveals it only when there's actually overflow to expand. */
        .blog-filter-toggle {
            display: none;
            margin-top: 10px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            background: transparent;
            border: 0;
            cursor: pointer;
            letter-spacing: 0.02em;
        }
        .blog-filter-toggle.is-visible { display: inline-flex; align-items: center; gap: 6px; }
        .blog-filter-toggle:hover { color: var(--primary-color); }
        .blog-filter-toggle svg {
            width: 12px; height: 12px;
            transition: transform 160ms ease;
        }
        .blog-filter-rail.is-expanded ~ .blog-filter-toggle svg { transform: rotate(180deg); }

        /* Full-width cream hero — sits edge-to-edge like the reference design.
           Backed by --bg-primary so it tracks the theme automatically. */
        .blog-hero {
            background: var(--bg-primary);
            padding: 56px 20px 40px;
            margin-bottom: 32px;
        }
        .blog-hero-inner {
            max-width: 820px;
            margin: 0 auto;
            text-align: center;
        }
        /* Plain kicker to match the Know Your Home header (no pill). */
        .blog-hero-badge {
            display: inline-block;
            color: #2f5e2c;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        :root[data-theme="dark"] .blog-hero-badge { color: #9ccf98; }
        @media (prefers-color-scheme: dark) {
            :root[data-theme="auto"] .blog-hero-badge { color: #9ccf98; }
        }
        .blog-hero h1 {
            font-family: "Bricolage Grotesque", "Inter", sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.02;
            letter-spacing: -0.02em;
            margin: 0 0 18px;
        }
        .blog-hero p {
            font-size: 1.1rem;
            line-height: 1.55;
            color: var(--text-secondary);
            max-width: 640px;
            margin: 0 auto 28px;
        }

        /* Search bar */
        .blog-search-wrap {
            position: relative;
            margin: 0 auto 4px;
            max-width: 620px;
        }
        .blog-search-input {
            width: 100%;
            padding: 16px 18px 16px 50px;
            border-radius: 999px;
            border: 1px solid rgba(0,0,0,0.06);
            background: #ffffff;
            color: var(--text-primary);
            font-size: 15px;
            font-family: inherit;
            box-shadow: 0 4px 14px rgba(0,0,0,0.04);
            transition: border-color 120ms, box-shadow 120ms;
        }
        :root[data-theme="dark"] .blog-search-input { background: var(--bg-secondary); border-color: var(--border-color); }
        @media (prefers-color-scheme: dark) {
            :root[data-theme="auto"] .blog-search-input { background: var(--bg-secondary); border-color: var(--border-color); }
        }
        .blog-search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(85, 162, 80, 0.18);
        }
        .blog-search-icon {
            position: absolute;
            left: 20px; top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            pointer-events: none;
        }
        .blog-search-clear {
            position: absolute;
            right: 8px; top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 13px;
        }
        .blog-search-clear:hover { color: var(--primary-color); }

        /* Autocomplete dropdown */
        .blog-search-drop {
            position: absolute;
            top: calc(100% + 6px); left: 0; right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 12px 32px rgba(0,0,0,0.08);
            padding: 6px;
            display: none;
            z-index: 30;
            max-height: 60vh;
            overflow-y: auto;
        }
        .blog-search-drop.is-open { display: block; }
        .blog-search-drop a {
            display: block;
            padding: 10px 14px;
            border-radius: 10px;
            color: var(--text-primary);
            text-decoration: none;
            font-size: 14px;
        }
        .blog-search-drop a:hover { background: var(--bg-tertiary); }
        .blog-search-drop .blog-search-drop-cat {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-top: 2px;
        }

        /* Filter chips */
        .blog-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 32px;
        }
        .blog-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            transition: background 120ms, border-color 120ms, color 120ms;
        }
        .blog-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .blog-chip.is-active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .blog-chip .blog-chip-count {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 1px 7px;
            border-radius: 999px;
        }
        .blog-chip.is-active .blog-chip-count { background: rgba(255,255,255,0.2); color: #fff; }

        /* Tag pill used inside .blog-tag-strip. Smaller than category pills —
           secondary-level navigation, shouldn't compete with the top row. */
        .blog-tag {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 13px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            font-size: 13px;
            color: var(--text-primary);
            text-decoration: none;
            background: var(--bg-primary);
            white-space: nowrap;
            transition: color 120ms, border-color 120ms, background 120ms;
        }
        .blog-tag:hover { color: var(--primary-color); border-color: var(--primary-color); }
        .blog-tag.is-active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .blog-tag .blog-tag-count {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 1px 7px;
            border-radius: 999px;
        }
        .blog-tag.is-active .blog-tag-count { background: rgba(255,255,255,0.22); color: #fff; }

        /* Masonry grid via CSS columns — keeps HTML as a plain article list (SEO-clean),
           varying heights pack naturally without JS. Key: images are displayed at natural
           aspect-ratio so cards have different heights, which is what makes masonry actually
           look like masonry. Steps down 3 → 2 → 1 by viewport. */
        .blog-grid {
            column-count: 3;
            column-gap: 16px;
        }
        @media (max-width: 1024px) { .blog-grid { column-count: 2; column-gap: 14px; } }
        @media (max-width: 640px)  { .blog-grid { column-count: 1; } }

        .blog-card {
            break-inside: avoid;
            page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            display: block;
            width: 100%;
            margin: 0 0 16px;
            background: var(--bg-secondary);
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .blog-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 26px rgba(0,0,0,0.08);
            border-color: var(--primary-color);
        }
        .blog-card-img-wrap {
            display: block;                 /* <a> must be block for children to fill width */
            position: relative;
            width: 100%;
            background: linear-gradient(135deg, #d7e4d4 0%, #e8ece4 100%);
            overflow: hidden;
        }
        .blog-card-img-wrap img {
            display: block;
            width: 100%;
            height: auto;           /* natural aspect-ratio — this is what creates masonry */
        }
        /* Compact cards for articles without an image — no empty placeholder block. */
        .blog-card.no-image .blog-card-img-wrap { display: none; }
        .blog-card-body { padding: 14px 16px 18px; }
        .blog-card-meta {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        /* Inline category label under the title — visible even on no-image cards
           (where the floating .blog-card-category badge is hidden). */
        .blog-card-meta-cat {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 999px;
            background: var(--primary-color);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-decoration: none;
            text-transform: uppercase;
        }
        .blog-card-meta-cat:hover { opacity: 0.88; color: #fff; }
        .blog-card-title {
            font-size: 1.1rem; line-height: 1.3; font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .blog-card-title a { color: inherit; text-decoration: none; }
        .blog-card-title a:hover { color: var(--primary-color); }
        .blog-card-excerpt {
            font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary);
        }
        .blog-card-tags {
            display: flex; flex-wrap: wrap; gap: 5px;
            margin-top: 12px;
        }
        .blog-card-tag {
            font-size: 11px;
            color: var(--text-secondary);
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--bg-tertiary);
            text-decoration: none;
        }
        .blog-card-tag:hover { color: var(--primary-color); }

        .blog-empty {
            text-align: center;
            padding: 80px 20px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            border-radius: 16px;
        }

        /* Load-more row — sits below the masonry. Single centered button; its
           loading + "no more" states are styled via classes toggled in JS. */
        .blog-loadmore {
            display: flex;
            justify-content: center;
            margin-top: 24px;
        }
        .blog-loadmore-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background 120ms, border-color 120ms, color 120ms;
        }
        .blog-loadmore-btn:hover:not(:disabled) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .blog-loadmore-btn:disabled {
            opacity: 0.55;
            cursor: default;
        }
        .blog-loadmore-btn .blog-loadmore-spinner {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid currentColor;
            border-right-color: transparent;
            animation: blog-loadmore-spin 0.8s linear infinite;
            display: none;
        }
        .blog-loadmore-btn.is-loading .blog-loadmore-spinner { display: inline-block; }
        @keyframes blog-loadmore-spin { to { transform: rotate(360deg); } }

        /* Crawlable pagination row — small muted nav under the load-more button.
           Exists primarily for search engines (real ?page=N links); humans mostly
           use Load more, so it's intentionally low-key. */
        .blog-pages {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 4px;
            margin-top: 20px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .blog-pages a,
        .blog-pages span {
            display: inline-block;
            padding: 6px 10px;
            border-radius: 8px;
            color: var(--text-secondary);
            text-decoration: none;
        }
        .blog-pages a:hover { color: var(--primary-color); background: var(--bg-secondary); }
        .blog-pages .blog-pages-current {
            background: var(--primary-color);
            color: #fff;
            font-weight: 600;
        }
        .blog-pages .blog-pages-gap { padding: 6px 2px; }

        @media (max-width: 720px) {
            .blog-hub { padding: 0 14px 40px; }
            .blog-hero { padding: 110px 16px 48px; margin-bottom: 28px; }
            .blog-hero h1 { font-size: 2.2rem; }
            .blog-hero p { font-size: 1rem; }
        }