/* ========================================================================================
* post-list.css - the blog: listing grid/search/pills/pagination and the single-post
* article body (L2 layer). One file for both, since both are the same "posts" capability
* (template-parts/blog/listing.php + card.php, home.php/archive.php/search.php/single.php)
* with no other consumer yet; split it if a second consumer of either half shows up.
* ======================================================================================== */
/* --- listing: category filter pills, under the search form in the hero -------------------
* Reuses .pill/.pill--accent as-is (pill.css); this only lays the row out and gives the
* hero a little breathing room above it.
* ----------------------------------------------------------------------------------------- */
/* --- post card -----------------------------------------------------------------------
* Built on plain .card/.card--link (card.css): the grid's default stretch + .card__actions'
* own margin-top:auto already equalize height and pin "Read article" to the bottom, no
* extra rules needed here for that. This file only covers what .card doesn't already do:
* an ![]()
(not a CSS background) filling __media so a real featured image can lazy-load
* and carry alt text, and the pill/date meta row above the title.
* ----------------------------------------------------------------------------------------- */
.post-card__media{overflow:hidden;padding:0}
.post-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Column, not row: a row wraps the date onto its own line only once the pill text is long
enough to force it, so short-pill cards showed pill+date side by side while long-pill
cards showed them stacked - the pill always gets its own line here, whatever its length. */
.post-card__meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cd-1)}
.post-card__date{font-size:var(--cd-small);color:var(--cd-ink-muted)}
/* --- empty state (no posts / no search results) ---------------------------------------- */
.post-empty{display:flex;flex-direction:column;align-items:center;gap:var(--cd-3);padding-block:var(--cd-8);text-align:center}
.post-empty__title{font-size:var(--cd-h4);font-weight:700;color:var(--cd-ink-strong)}
.post-empty__hint{color:var(--cd-ink-muted)}
/* --- pagination --------------------------------------------------------------------------
* Styles core's own paginate_links() markup (a.page-numbers / span.page-numbers.current /
* span.page-numbers.dots), the same helper archive.php and search.php both call.
* ----------------------------------------------------------------------------------------- */
.pagination{display:flex;flex-wrap:wrap;gap:var(--cd-2);justify-content:center;margin-top:var(--cd-6)}
.pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 var(--cd-3);
border:1px solid var(--cd-line);border-radius:var(--cd-r-sm);
font-family:var(--cd-mono);font-size:var(--cd-small);color:var(--cd-ink-strong);
text-decoration:none;
}
a.page-numbers:hover{border-color:var(--cd-line-strong);color:var(--cd-ink-brand)}
.pagination .page-numbers.current{background:var(--cd-accent);color:var(--cd-accent-ink);border-color:var(--cd-accent)}
.pagination .page-numbers.dots{border-color:transparent}
/* --- single post hero meta -------------------------------------------------------------- */
.post-hero__meta{font-size:var(--cd-small);color:var(--cd-ink-muted)}
.post-hero__media-wrap{max-width:var(--cd-container);margin-inline:auto;padding-inline:var(--cd-gutter)}
.post-hero__media{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2)}
/* --- article body (post content) --------------------------------------------------------
* base.css resets p{margin:0} globally (see its own comment on that rule), so block
* spacing here is a flex column + gap on the direct children, the same trick
* speaker-single.css's .speaker-single__bio already uses for the_content() output.
* ----------------------------------------------------------------------------------------- */
.article-body{display:flex;flex-direction:column;gap:var(--cd-4);max-width:var(--cd-measure);margin-inline:auto}
.article-body > *:first-child{margin-top:0}
.article-body p,.article-body li{line-height:1.7;color:var(--cd-ink)}
/* Defensive: the post body should never carry its own (the hero already prints the
title as the page's one h1), but at least one legacy post's content has a stray one
(a pasted block-editor title fragment, post 1106357, flagged for content cleanup) -
capped to the h2 step so a future occurrence can't blow up the layout to display size. */
.article-body h1{font-size:var(--cd-h3);margin-top:var(--cd-2)}
.article-body h2{font-size:var(--cd-h3);margin-top:var(--cd-2)}
.article-body h3{font-size:var(--cd-h4);margin-top:var(--cd-2)}
.article-body h4{margin-top:var(--cd-2)}
.article-body ul,.article-body ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:var(--cd-2)}
.article-body li::marker{color:var(--cd-ink-accent)}
.article-body img{border-radius:var(--cd-r-md);box-shadow:var(--cd-shadow-1)}
.article-body figure{margin:0;display:flex;flex-direction:column;gap:var(--cd-2)}
.article-body figcaption{font-size:var(--cd-small);color:var(--cd-ink-muted)}
.article-body blockquote{
margin:0;padding:var(--cd-4) var(--cd-5);
border-left:4px solid var(--cd-accent);border-radius:0 var(--cd-r-md) var(--cd-r-md) 0;
background:var(--cd-ground-tint);font-style:italic;color:var(--cd-ink-strong);
}
.article-body a{text-decoration:underline;text-underline-offset:.15em}
.post-back a{font-weight:700;text-decoration:none;color:var(--cd-ink-brand)}
.post-back a:hover{color:var(--cd-ink-strong)}