/* =====================================================================
   BLOG  (blog.css)

   /blog, /blog/category/<c>   -> title row, filter bar, results strip,
                                  hairline rows (browse.css vocabulary)
   /blog/<slug>                -> paper header, one reading column,
                                  tags line, navy closer, more articles

   Everything sits on theme.css: paper ground, 1200 content box, page
   margin that grows to centre the box, Libre Baskerville for titles,
   navy for the primary button, accent for links. No icons, no pills.
   ===================================================================== */

:root { --blog-edge: max(var(--margin), calc((100% - var(--content)) / 2)); }

/* ---------- Listing: title row (extends the browse.css hero rules) ---------- */
.blog-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-5) var(--blog-edge) var(--space-4);
    text-align: left;
    color: var(--text);
}
.blog-hero h1 {
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 var(--space-2);
}
.blog-hero p { font-size: var(--t-body); line-height: 24px; color: var(--muted); margin: 0; max-width: 44em; }
.blog-hero .hero-stats a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---------- Listing: rows ---------- */
.blog-container { padding-top: 0; }
/* Specificity beats browse.css's "rows without a badge" rule. */
.opinions-list .opinion-row.blog-row {
    grid-template-columns: 168px minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    padding: var(--space-4) 0;
}
.blog-row.is-hidden { display: none; }
.blog-row-thumb {
    width: 168px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--line);
    background: var(--paper-2);
    display: block;
}
.blog-row-thumb-empty {
    width: 168px;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-s);
    background: var(--paper-2);
}
.blog-row-cat {
    display: block;
    font-size: var(--t-label);
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 var(--space-1);
}
.blog-row .opinion-row-title {
    font-family: var(--font-logo);
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.01em;
    font-weight: 700;
    -webkit-line-clamp: 3;
    margin: 0 0 var(--space-1);
}
.blog-row:hover .opinion-row-title { color: var(--accent); }
.blog-row .opinion-row-preview { -webkit-line-clamp: 3; max-width: 68ch; }
.blog-row .opinion-row-meta { padding-top: 22px; }
.blog-row .opinion-row-meta span { display: block; }
.blog-empty { display: none; padding: var(--space-6) 0; color: var(--muted); font-size: var(--t-body); line-height: 24px; }
.blog-empty.is-visible { display: block; }
.blog-empty h3 { font-family: var(--font-logo); font-size: var(--t-h3); color: var(--navy); margin: 0 0 var(--space-2); }
.blog-empty p { margin: 0; }
.blog-filter-hint { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }

/* ---------- Closing band (listing foot and post foot) ---------- */
.blog-band { padding: var(--space-6) var(--blog-edge) var(--space-8); }
.blog-band-inner {
    background: var(--navy);
    color: var(--on-dark);
    border-radius: var(--radius-m);
    padding: var(--space-7);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--space-8);
    align-items: start;
}
.blog-band-inner > * { grid-column: 1; }
.blog-band h2 {
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--on-dark);
    max-width: 20ch;
    margin: 0 0 var(--space-3);
}
.blog-band-sub { font-size: 17px; line-height: 1.55; color: var(--on-dark-muted); max-width: 48ch; margin: 0 0 var(--space-5); }
.blog-band-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.blog-band-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 var(--space-5);
    background: var(--white); color: var(--navy);
    border: 1px solid var(--white); border-radius: var(--radius-pill);
    font: inherit; font-size: var(--t-body); font-weight: 600; text-decoration: none; cursor: pointer;
}
.blog-band-btn-quiet { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.blog-band-btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.blog-band-fine { color: var(--on-dark-muted); font-size: var(--t-small); margin: var(--space-3) 0 0; }
.blog-band-points {
    grid-column: 2; grid-row: 1 / span 6;
    list-style: none; margin: 6px 0 0; padding: 0;
    border-top: 1px solid var(--on-dark-line);
}
.blog-band-points li { padding: var(--space-3) 0; border-bottom: 1px solid var(--on-dark-line); font-size: 15px; line-height: 1.45; color: var(--on-dark); }

/* ---------- Post: header ---------- */
.post-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-5) var(--blog-edge) var(--space-6);
}
.post-header-inner { max-width: 760px; margin: 0 auto; }
.post-crumbs { margin: 0 0 var(--space-3); font-size: var(--t-small); line-height: 20px; color: var(--muted); }
.post-crumbs a { color: var(--accent); text-decoration: none; font-weight: 600; }
.post-crumbs a:hover { text-decoration: underline; }
.post-crumbs-sep { margin: 0 var(--space-2); color: var(--line-strong); }
.post-header h1 {
    font-family: var(--font-logo);
    font-size: var(--t-display);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 var(--space-3);
}
.post-lede { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); margin: 0 0 var(--space-4); max-width: 60ch; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--t-small); line-height: 20px; color: var(--muted); }
.post-meta strong { color: var(--navy); font-weight: 600; }
.post-meta-sep { color: var(--line-strong); }

/* ---------- Post: figure and body ---------- */
.post-wrap { padding: var(--space-6) var(--blog-edge) 0; }
.post-figure { max-width: 760px; margin: 0 auto var(--space-6); }
.post-figure img {
    display: block; width: 100%; max-height: 420px; object-fit: cover;
    border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--paper-2);
}
.post-body {
    max-width: 760px; margin: 0 auto;
    font-size: 18px; line-height: 1.7; color: var(--text);
}
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 var(--space-4); }
.post-body h2 {
    font-family: var(--font-logo);
    font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700;
    color: var(--navy);
    margin: var(--space-7) 0 var(--space-3);
}
.post-body h3 { font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--navy); margin: var(--space-6) 0 var(--space-2); }
.post-body h4 { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--navy); margin: var(--space-5) 0 var(--space-2); }
.post-body ul, .post-body ol { margin: 0 0 var(--space-4); padding-left: 24px; }
.post-body li { margin: 0 0 var(--space-2); }
.post-body li > p { margin: 0 0 var(--space-2); }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body strong { color: var(--navy); font-weight: 600; }
.post-body blockquote {
    margin: var(--space-5) 0; padding: var(--space-1) 0 var(--space-1) var(--space-4);
    border-left: 3px solid var(--navy); color: var(--text); font-style: normal;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body img { display: block; max-width: 100%; height: auto; margin: var(--space-5) 0; border-radius: var(--radius-s); border: 1px solid var(--line); }
.post-body hr { margin: var(--space-7) 0; border: 0; border-top: 1px solid var(--line); }
.post-body pre { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); background: var(--navy); color: var(--on-dark); border-radius: var(--radius-s); overflow-x: auto; font-size: 14px; line-height: 1.6; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.post-body :not(pre) > code { background: var(--paper-2); color: var(--navy); padding: 1px 6px; border-radius: 4px; }
.post-body table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--t-small); line-height: 20px; }
.post-body th, .post-body td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.post-body th { font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line-strong); }
.post-body .table-scroll { overflow-x: auto; }
.post-body em { font-style: italic; }

/* ---------- Post: tags, more articles ---------- */
.post-tags { max-width: 760px; margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 20px; color: var(--muted); }
.post-tags strong { color: var(--navy); font-weight: 600; }
.post-more { max-width: 760px; margin: 0 auto; padding: 0 0 var(--space-8); }
.post-more h2 { font-family: var(--font-logo); font-size: var(--t-h3); line-height: 32px; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 var(--space-2); }
.post-more-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: baseline;
    padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit;
}
.post-more-row:first-of-type { border-top: 1px solid var(--line); }
.post-more-title { font-size: var(--t-body); line-height: 24px; font-weight: 600; color: var(--navy); }
.post-more-row:hover .post-more-title { color: var(--accent); }
.post-more-meta { font-size: 13px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.post-more-wrap { padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .blog-band-inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); }
    .blog-band-points { grid-column: 1; grid-row: auto; margin-top: var(--space-5); }
}
@media (max-width: 640px) {
    .opinions-list .opinion-row.blog-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
    .blog-row-thumb, .blog-row-thumb-empty { width: 100%; aspect-ratio: 2 / 1; }
    .blog-row .opinion-row-title { font-size: 20px; line-height: 28px; }
    .blog-row .opinion-row-meta { padding-top: 0; text-align: left; white-space: normal; }
    .blog-row .opinion-row-meta span { display: inline; }
    .blog-row .opinion-row-meta span + span::before { content: ' · '; color: var(--line-strong); }
    .blog-band { padding: var(--space-5) var(--margin) var(--space-7); }
    .blog-band-inner { padding: var(--space-5) var(--space-4); }
    .blog-band-btn { width: 100%; }
    .post-header { padding-bottom: var(--space-5); }
    .post-body { font-size: 17px; }
    .post-body h2 { font-size: 26px; }
    .post-more-row { grid-template-columns: minmax(0, 1fr); }
    .post-more-meta { white-space: normal; }
}