/* ==========================================================================
   PolarWx blog — layered on assets/css/style.css; colors come only from
   the site theme variables so light/dark mode follows automatically.
   ========================================================================== */

/* --- Shared bits ------------------------------------------------------------ */

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.blog-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.blog-chip {
    position: relative;
    z-index: 2;           /* above the card's full-cover link */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    transition: background 0.15s ease, color 0.15s ease;
}
.blog-chip:hover { background: var(--accent); color: #fff; }
.blog-chip-count { opacity: 0.7; font-weight: 500; }
.blog-chip-x span { font-size: 1rem; line-height: 1; }

.blog-crumbs { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.blog-crumbs a { font-weight: 600; }

.blog-page-title {
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

mark {
    background: color-mix(in srgb, #ffd54a 55%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.1em;
}

/* Dev-only draft marker (BLOG_SHOW_DRAFTS). */
.blog-draft-badge {
    display: inline-block;
    padding: 0.08rem 0.55rem;
    border-radius: 6px;
    background: #b45309;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}
.blog-draft-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.25rem;
    border: 1px dashed #b45309;
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* --- Home ------------------------------------------------------------------- */

.blog-masthead {
    background: var(--hero-gradient);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0 2rem;
}
.blog-masthead h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.blog-lead { color: var(--text-muted); font-size: 1.2rem; margin-top: 0.25rem; }

.blog-home { padding-top: 2.5rem; padding-bottom: 3.5rem; }

/* Recent posts (left) + browse sidebar (right). */
.blog-home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
    margin-top: 3rem;
}
.blog-home-recent .section-title { margin-bottom: 1.25rem; }
.blog-home-recent .blog-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.blog-sidebar {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.blog-archive-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
}
.blog-archive-count {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
    font-size: 0.85rem;
}

.blog-quicksearch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.blog-quicksearch:focus-within { border-color: var(--accent); }
.blog-quicksearch svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
.blog-quicksearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    outline: none;
}
.blog-quicksearch .btn {
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

.blog-side-cats {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 1rem 0.75rem 0.75rem;
}
.blog-side-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0.5rem 0.4rem;
}
.blog-side-cats ul { list-style: none; }
.blog-side-cats a {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    color: var(--text);
    font-weight: 500;
}
.blog-side-cats a:hover { background: var(--accent-soft); color: var(--accent); }
.blog-side-count { color: var(--text-muted); font-size: 0.88rem; }

.blog-featured {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.blog-featured:hover { border-color: var(--accent); transform: translateY(-3px); }
.blog-featured-media {
    min-height: 340px;
    background: center / cover no-repeat;
}
.blog-featured-body {
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
}
.blog-featured h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.blog-featured p { color: var(--text-muted); font-size: 1.08rem; }
.blog-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.blog-readmore { color: var(--accent); font-weight: 600; margin-top: 0.25rem; }

/* Whole-card link sits under the chips (which link to categories). */
.blog-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.blog-card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

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

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.blog-card-media {
    height: 180px;
    background: center / cover no-repeat;
}
[data-theme="dark"] .blog-card-media,
[data-theme="dark"] .blog-featured-media,
[data-theme="dark"] .blog-result-thumb { filter: brightness(0.85); }
.blog-card-media-empty {
    display: flex;
    align-items: flex-end;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--bg-card)) 100%);
}
.blog-card-media-empty span {
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    opacity: 0.9;
}
.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.4rem 1.4rem;
    flex: 1;
}
.blog-card h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.blog-card p { color: var(--text-muted); font-size: 0.98rem; flex: 1; }

/* --- Search ------------------------------------------------------------------ */

.blog-search-page { padding-top: 2rem; padding-bottom: 3.5rem; }

.blog-search-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.blog-filters {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.blog-field { display: flex; flex-direction: column; gap: 0.3rem; }
.blog-field-label, .blog-filter-group summary {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.blog-field input, .blog-field select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}
.blog-field input:focus, .blog-field select:focus { outline: none; border-color: var(--accent); }

.blog-filter-group summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.blog-filter-group summary::-webkit-details-marker { display: none; }
.blog-filter-group summary::after { content: "▾"; transition: transform 0.15s ease; }
.blog-filter-group:not([open]) summary::after { transform: rotate(-90deg); }

.blog-checks { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; }
.blog-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}
.blog-check:hover { background: var(--accent-soft); }
.blog-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.blog-check-count { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; }

.blog-daterange { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.5rem; }
.blog-field input[type=date] { color-scheme: light; min-height: 2.4rem; }
[data-theme="dark"] .blog-field input[type=date] { color-scheme: dark; }

.blog-filter-actions { display: flex; align-items: center; gap: 1rem; }
.blog-filter-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.blog-reset { font-size: 0.9rem; font-weight: 600; }

.blog-archive-list ul { list-style: none; margin-top: 0.5rem; }
.blog-archive-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.4rem;
    font-size: 0.93rem;
}
.blog-archive-list li span { color: var(--text-muted); font-size: 0.85rem; }

.blog-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.blog-count { color: var(--text-muted); font-weight: 600; }
.blog-active { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.blog-month {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0 0.4rem;
    margin-bottom: 0.25rem;
}

.blog-result-list { list-style: none; }
.blog-result {
    display: grid;
    grid-template-columns: 3.2rem 150px minmax(0, 1fr);
    grid-template-areas: "date thumb body";
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
}
.blog-result:last-child { border-bottom: 0; }
.blog-result-date { grid-area: date; }
.blog-result-thumb { grid-area: thumb; }
.blog-result-body { grid-area: body; }
.blog-result-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.15rem;
    line-height: 1.1;
}
.blog-result-date .d { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.blog-result-date .m { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.blog-result-body { display: flex; flex-direction: column; gap: 0.35rem; }
.blog-result h3 { font-size: 1.2rem; line-height: 1.3; }
.blog-result h3 a { color: var(--text); }
.blog-result h3 a:hover { color: var(--accent); }
.blog-result p { color: var(--text-muted); }
.blog-result-thumb {
    width: 150px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: center / cover no-repeat;
}
/* No header image: same slot, category on the card gradient. */
.blog-result-thumb-empty {
    display: flex;
    align-items: flex-end;
    padding: 0.5rem 0.65rem;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--bg-card)) 100%);
}
.blog-result-thumb-empty span { color: #fff; font-weight: 800; font-size: 0.95rem; line-height: 1.15; opacity: 0.9; }

.blog-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 14px;
    margin-top: 1rem;
}
.blog-empty a { font-weight: 600; }

.blog-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 2rem;
    font-weight: 600;
}
.blog-pager a:last-child { text-align: right; }
.blog-pager-pos { color: var(--text-muted); font-weight: 500; font-size: 0.9rem; }

/* --- Post --------------------------------------------------------------------- */

/* Blog bar under the site header: "PolarWx Blog" + the post's categories. */
.blog-bar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.blog-bar-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-height: 50px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.blog-bar-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--text);
}
.blog-bar-home svg { width: 20px; height: 20px; color: var(--accent); }
.blog-bar-home:hover { color: var(--accent); }
.blog-bar-sep { width: 1px; height: 22px; background: var(--border); }
.blog-bar-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blog-bar-cat {
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.blog-bar-cat:hover { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
    .blog-bar-sep { display: none; }
}

.blog-post { padding: 2.5rem 0 3rem; }

/* One column for every part of a post (head, hero, body, foot):
   1300px max, never closer than 15px (10px on phones) to the screen edge. */
.blog-post-wrap { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }

/* Post header: title block on its own, then one ruled strip holding the
   byline (author, date) and the share buttons. */
.blog-post-titles { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.blog-post-head h1 {
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #000;
}
.blog-post-subtitle {
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 60em;
}
[data-theme="dark"] .blog-post-head h1 { color: #fff; }

.blog-post-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.blog-post-meta strong { color: var(--text); font-weight: 650; }
.blog-post-meta-sep { width: 1px; height: 1.1em; background: var(--border); }
/* The byline strip draws the rules; the share row inside it doesn't. */
.blog-post-byline .share-bar { border: 0; padding: 0; margin: 0; }

.blog-post-hero { margin-top: 2rem; margin-bottom: 0.5rem; }
.blog-post-hero img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--border);
}
/* Banner: height from the inline aspect-ratio (image_ratio), cropped around
   the inline object-position (image_focus). */
.blog-post-hero.is-banner img { height: auto; max-height: none; }

/* Share row */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 0.5rem;
}
.share-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.35rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn svg { width: 15px; height: 15px; }
.share-btn[hidden] { display: none; }   /* author display beats the UA [hidden] rule */
.share-btn.is-copied { border-color: #2e9d5b; color: #2e9d5b; }

/* Article body */
.blog-prose { padding-top: 2rem; padding-bottom: 1rem; font-size: 1.12rem; line-height: 1.6; }
.blog-prose > * + * { margin-top: 1.15rem; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 {
    line-height: 1.25;
    letter-spacing: -0.02em;
    scroll-margin-top: 70px;
}
/* Headings at full strength (black / white); body copy slightly softened so
   they stand apart. Section titles (h2) also get a rule beneath them. */
.blog-prose {
    --prose-heading: #000;
    --prose-text: color-mix(in srgb, var(--text) 84%, transparent);
    color: var(--prose-text);
}
[data-theme="dark"] .blog-prose { --prose-heading: #fff; }

/* Text colors from the editor ({color:name}…{/color}); dark variants stay legible. */
.blog-prose {
    --tc-red: #c62828; --tc-orange: #c25400; --tc-green: #1e8e3e;
    --tc-blue: #1668c7; --tc-purple: #7b3fc4; --tc-gray: #6b7785;
}
[data-theme="dark"] .blog-prose {
    --tc-red: #ff6b6b; --tc-orange: #ffa94d; --tc-green: #51cf66;
    --tc-blue: #74b0f5; --tc-purple: #b197fc; --tc-gray: #9aa7b5;
}
.tc-red { color: var(--tc-red); }
.tc-orange { color: var(--tc-orange); }
.tc-green { color: var(--tc-green); }
.tc-blue { color: var(--tc-blue); }
.tc-purple { color: var(--tc-purple); }
.tc-gray { color: var(--tc-gray); }
/* Bold text at full strength (body copy is softened); inside a link or a
   colored span it keeps that color. */
.blog-prose strong, .blog-prose b { color: var(--text); }
.blog-prose a strong, .blog-prose a b, .blog-prose span[class^="tc-"] strong, .blog-prose span[class^="tc-"] b,
.blog-prose span[style*="color"] strong, .blog-prose span[style*="color"] b { color: inherit; }
.blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose th { color: var(--prose-heading); }
.blog-prose h2 {
    font-size: 1.95rem;
    font-weight: 750;
    margin-top: 3rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--border);
}
.blog-prose > h2:first-child { margin-top: 0; }
.blog-prose h3 { font-size: 1.45rem; margin-top: 2.25rem; }
.blog-prose h4 { font-size: 1.2rem; margin-top: 1.5rem; }
.heading-anchor {
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0;
    margin-left: 0.25rem;
    transition: opacity 0.15s ease;
}
.blog-prose h2:hover .heading-anchor,
.blog-prose h3:hover .heading-anchor,
.heading-anchor:focus { opacity: 1; }
/* Links: bold theme blue (lighter blue in dark mode), underline on hover. */
.blog-prose a:not(.heading-anchor) {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.blog-prose a:not(.heading-anchor):hover,
.blog-prose a:not(.heading-anchor):focus-visible { text-decoration: underline; }
.blog-prose ul, .blog-prose ol { padding-left: 1.5rem; }
.blog-prose li + li { margin-top: 0.35rem; }
.blog-prose li > ul, .blog-prose li > ol { margin-top: 0.35rem; }
.blog-prose blockquote {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    padding: 0.85rem 1.25rem;
    border-radius: 0 10px 10px 0;
}
.blog-prose blockquote > * + * { margin-top: 0.75rem; }
.blog-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--accent-soft);
    padding: 0.1em 0.35em;
    border-radius: 5px;
}
.blog-prose pre {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    line-height: 1.5;
}
.blog-prose pre code { background: none; padding: 0; font-size: 0.9rem; }
/* Floated figures: the body is its own formatting context so floats never
   poke out below it, h2 starts a fresh row, and lists/quotes/tables sit
   beside a float instead of under it (bullets would overlap the figure). */
.blog-prose { display: flow-root; }
.blog-prose h2 { clear: both; }
.blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .table-wrap { display: flow-root; }

.blog-prose figure { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.blog-prose img, .blog-prose figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.blog-prose figcaption { font-size: 0.92rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.5; }
.blog-fig { position: relative; width: var(--fig-w, 100%); min-width: min(var(--fig-min, 0px), 100%); }
.blog-fig-center { margin-left: auto; margin-right: auto; }
.blog-fig-center figcaption { text-align: center; }
/* Top margin = the normal gap between blocks, so the figure and the text
   beside it both start one gap below whatever precedes them (a section
   title's rule included) and line up with each other. */
.blog-prose .blog-fig-left {
    float: left;
    margin: 1.15rem 2.25rem 1.25rem 0;
}
/* Left figure that would take over half the column (blog.js): centered, no
   minimum, up to 85% of the column (phones below go full width). */
.blog-prose .blog-fig-left.is-stacked { float: none; width: 100%; max-width: 85%; min-width: 0; margin: 1.5rem auto; }
.blog-fig-left.is-stacked figcaption { text-align: center; }

/* Click-to-enlarge (blog.js adds .is-zoomable + the corner button). */
.blog-fig.is-zoomable img, .blog-fig.is-zoomable video[data-loop] { cursor: zoom-in; }
.blog-fig-zoom {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.blog-fig-zoom svg { width: 18px; height: 18px; }
.blog-fig:hover .blog-fig-zoom, .blog-fig-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .blog-fig-zoom { opacity: 0.85; } }

.blog-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 3.5rem 1rem 1.5rem;
    background: rgba(5, 10, 16, 0.92);
    cursor: zoom-out;
}
.blog-lightbox[hidden] { display: none; }
.blog-lightbox-media { display: flex; justify-content: center; max-width: 100%; }
.blog-lightbox img, .blog-lightbox video {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
}
.blog-lightbox-cap { color: #d6dee8; max-width: 900px; text-align: center; font-size: 1rem; }
.blog-lightbox-cap a { color: #9cc8f5; }
.blog-lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.blog-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
body.blog-lightbox-open { overflow: hidden; }
/* Mini divider inside a section (--- in a post): a light centered break,
   deliberately weaker than a section title's rule. Clears floats so the
   next block starts below any left figure. */
.blog-prose hr {
    clear: both;
    border: 0;
    height: auto;
    margin: 2.25rem 0;
    overflow: visible;
    text-align: center;
    line-height: 1;
}
.blog-prose hr::before {
    content: "\2022\2002\2022\2002\2022\2002\2022\2002\2022\2002\2022\2002\2022";
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    opacity: 0.8;
}
.blog-prose iframe, .blog-prose video { max-width: 100%; border-radius: 12px; }

/* Phones/narrow windows: figures go full width and stop floating. */
@media (max-width: 700px) {
    .blog-fig { width: 100%; min-width: 0; }
    .blog-prose .blog-fig-left { float: none; margin: 1.5rem 0; }
    .blog-prose .blog-fig-left.is-stacked { max-width: none; margin: 1.5rem 0; }

    /* Post header centered on phones: title, subtitle, byline and share row
       stack in one centered column. */
    .blog-post-titles { align-items: center; text-align: center; }
    .blog-post-byline { flex-direction: column; justify-content: center; text-align: center; }
    .blog-post-meta, .blog-post-byline .share-bar { justify-content: center; }
}
.table-wrap { overflow-x: auto; }
.blog-prose table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.blog-prose th, .blog-prose td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; }
.blog-prose th { font-weight: 700; border-bottom-width: 2px; }

.blog-post-foot { padding-bottom: 1rem; }

.blog-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}
.blog-adjacent a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
}
.blog-adjacent a:hover { border-color: var(--accent); }
.blog-adjacent a span { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.blog-adjacent-next { text-align: right; grid-column: 2; }


/* --- Narrow screens ------------------------------------------------------------ */

@media (max-width: 860px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-media { min-height: 220px; }
    .blog-featured-body { padding: 1.5rem; }

    .blog-home-layout { grid-template-columns: 1fr; gap: 2rem; }
    .blog-sidebar { position: static; order: -1; }
    .blog-search-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .blog-filters { position: static; max-height: none; }
    .blog-result { grid-template-columns: 2.6rem 110px minmax(0, 1fr); gap: 0.9rem; }
    .blog-result-thumb { width: 110px; height: 74px; }
}

@media (max-width: 600px) {
    .blog-post-wrap { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 560px) {
    /* Archive results: image becomes a strip above the title, date stays left. */
    .blog-result {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        grid-template-areas: "date thumb" "date body";
        row-gap: 0.7rem;
    }
    .blog-result-thumb { width: 100%; height: auto; aspect-ratio: 16 / 7; }
    .blog-adjacent { grid-template-columns: 1fr; }
    .blog-adjacent-next { grid-column: 1; }
    .blog-prose { font-size: 1.05rem; }
}