/* ================================================================
   v2 hybrid — Listings, cards, empty states, tag header
   ----------------------------------------------------------------
   Styles for _ArticleCard, _EmptyState, and the page-head crumbs
   variant used by D-tag.html. Plus the archive grid that wraps
   _ArticleCard tiles on Blog landing / Author detail / Topic / Search.

   Loaded on: blog landing, authors list, author detail, topic/tag,
   search, 404 / empty states.
   ================================================================ */

/* Page-head crumbs row (used by topic/tag pages and search) */
.page-head .page-head-crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.page-head .page-head-crumbs a{color:var(--text-secondary);text-decoration:none}
.page-head .page-head-crumbs a:hover{color:var(--accent-secondary);text-decoration:underline;text-underline-offset:.15em}
.page-head .page-head-crumbs > *:not(:last-child)::after{content:"/";color:var(--text-tertiary);margin-left:8px}

/* ── Article archive grid (wraps a list of .article-grid-card) ── */
.archive-page{padding:56px 32px 96px;max-width:1160px;margin:0 auto}
.archive-page .year{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--text-secondary);border-bottom:1px solid var(--border-light);padding-bottom:10px;margin:48px 0 28px;letter-spacing:-.005em}
.archive-page .year:first-child{margin-top:0}
.archive-page .year em{font-style:italic;font-weight:300}
.archive-page .entries{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}

/* ── Latest Articles Row block grid ──────────────────────────── */
.latest-articles-row{display:block}
.latest-articles-row .entries{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
@media (max-width:820px){.latest-articles-row .entries{grid-template-columns:1fr;gap:32px}}

/* Filter + count bar (Blog landing, topic detail) */
.filters{padding:28px 32px;border-bottom:1px solid var(--border-light);background:var(--surface-primary)}
.filters-inner{max-width:1160px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.filters .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.filters button,
.filters .btn-filter{font-family:var(--font-body);font-size:13px;padding:5px 12px;border:1px solid var(--border-medium);background:var(--surface-primary);color:var(--text-primary);cursor:pointer;letter-spacing:.01em;text-decoration:none}
.filters button.on,
.filters .btn-filter.on{background:var(--text-primary);color:var(--surface-primary);border-color:var(--text-primary)}
.filters .spacer{flex:1}
.filters .count{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-secondary)}

/* Pager */
.pager{margin-top:64px;display:flex;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--border-light);color:var(--text-secondary);text-decoration:none}
.pager .on{background:var(--text-primary);color:var(--surface-primary);border-color:var(--text-primary)}

/* ── _ArticleCard ──────────────────────────────────────────────
   Reuses the existing .article-grid-card hooks declared by
   typography.css (link decoration on .card-title a) so card
   typography stays consistent with the existing site.       */
.article-grid-card{display:flex;flex-direction:column;gap:10px}
.article-grid-card .card-thumb{aspect-ratio:4/3;background:var(--surface-tertiary);overflow:hidden;display:block}
.article-grid-card .card-thumb img{width:100%;height:100%;object-fit:cover}
.article-grid-card .card-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--accent-secondary);margin:6px 0 0}
.article-grid-card .card-title{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.12;letter-spacing:-.01em;text-transform:none;margin:0}
.article-grid-card .card-title em{font-style:italic;font-weight:300}
.article-grid-card .card-title a{color:inherit}
.article-grid-card .card-sub{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1rem;line-height:1.45;color:var(--text-secondary);margin:0;max-width:36ch}
.article-grid-card .card-meta{font-family:var(--font-body);font-size:12px;letter-spacing:.02em;color:var(--text-secondary);margin:0}

/* ── Search page (D-search.html) ───────────────────────────── */
.search-wrap{padding:48px 32px 96px;max-width:1160px;margin:0 auto}
.search-wrap .s-form{display:flex;gap:0;border:1px solid var(--border-medium);background:var(--surface-primary);align-items:stretch;margin:0 0 8px}
.search-wrap .s-form input{flex:1;font-family:var(--font-display);font-weight:300;font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);padding:18px 22px;border:0;background:transparent;color:var(--text-primary);outline:none}
.search-wrap .s-form input::placeholder{color:var(--text-tertiary);font-style:italic}
.search-wrap .s-form button{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:0 28px;background:var(--text-primary);color:var(--surface-primary);border:0;cursor:pointer}
.search-wrap .s-meta{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-secondary)}
.search-wrap .s-meta .mode{font-family:var(--font-mono);text-transform:uppercase}
.search-wrap .s-meta .mode b{color:var(--accent-primary);font-weight:500}
.search-wrap .results{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}

/* ── _EmptyState ───────────────────────────────────────────── */
.empty-state{padding:72px 32px 96px}
.empty-state h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.625rem,calc(1.3rem + 1vw),2rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;max-width:22ch}
.empty-state h2 em{font-style:italic;font-weight:300}
.empty-state .dek{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.125rem;line-height:1.45;color:var(--text-secondary);margin:0 0 28px;max-width:42ch}
.empty-state .actions{display:flex;gap:14px;flex-wrap:wrap}
.empty-state .actions .btn{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:10px 20px;text-decoration:none;display:inline-block}
.empty-state .actions .btn-primary{background:var(--text-primary);color:var(--surface-primary);border:0}
.empty-state .actions .btn-primary:hover{background:var(--accent-primary)}
.empty-state .actions .btn-link{background:transparent;color:var(--text-primary);border:1px solid var(--border-medium)}
.empty-state .actions .btn-link:hover{border-color:var(--accent-primary);color:var(--accent-primary)}

@media (max-width:820px){
  .archive-page{padding:40px 22px 64px}
  .archive-page .entries{grid-template-columns:1fr;gap:32px}
  .filters-inner{gap:8px}
  .empty-state{padding:48px 22px 64px}
  .search-wrap{padding:32px 22px 64px}
  .search-wrap .results{grid-template-columns:1fr;gap:32px}
}
@media (max-width:620px){
  .search-wrap .s-form button{padding:0 16px}
}