/*
 * blog.css — posts index (index.html) + category/tag/date/author archives (archive.html).
 * Matches the "blog" page of _design/site-mockup.html (article-card grid).
 *
 * REUSES (do NOT redefine here): .ka-rcard, .ka-rcard__thumb/__cat/__body/__meta,
 * .ka-rec-grid (style.css) and .ka-page-head, .ka-pager (assets/css/pages/_base.css).
 *
 * This file only adds the glue needed because the cards are built from CORE blocks
 * (post-featured-image / post-terms / post-title / post-excerpt / post-date) instead of
 * the static markup used elsewhere: make the featured image fill the thumb, style the
 * excerpt + meta, and ensure the post-title inherits the display font / heading colour.
 */

/* ---- the dynamic grid: reuse .ka-rec-grid spacing on the post-template ---- */
/* core's post-template adds its own list styling; strip it so .ka-rec-grid drives layout */
.ka-blog-grid.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* each query item is the <li> wrapper around our .ka-rcard group */
.ka-blog-grid.wp-block-post-template > li {
	margin: 0;
	min-width: 0;
}
/* the .ka-rcard group sits inside the <li>; make it own the full cell height */
.ka-blog-grid > li > .ka-rcard {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---- featured image fills the thumb (img cover, 16/11 via .ka-rcard__thumb) ---- */
/* .ka-rcard__thumb already sets position:relative; aspect-ratio:16/11; overflow:hidden */
.ka-rcard__thumb .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
.ka-rcard__thumb .wp-block-post-featured-image a,
.ka-rcard__thumb .wp-block-post-featured-image img {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 0;
}
.ka-rcard__thumb .wp-block-post-featured-image img {
	object-fit: cover;
	transition: transform .4s ease;
}
/* mirror the hover-zoom that style.css gives static .ka-rcard__thumb img */
.ka-rcard:hover .ka-rcard__thumb .wp-block-post-featured-image img {
	transform: scale(1.06);
}
/* placeholder fill when a post has no featured image */
.ka-rcard__thumb:empty,
.ka-rcard__thumb .wp-block-post-featured-image:empty {
	background: var(--wp--preset--color--surface-2);
}

/* ---- category chip on the image (post-terms rendered as the .ka-rcard__cat pill) ---- */
/* .ka-rcard__cat already positions the pill top/inline-start over the image */
.ka-rcard__cat.wp-block-post-terms {
	z-index: 2;
	margin: 0;
	line-height: 1.2;
}
.ka-rcard__cat.wp-block-post-terms a,
.ka-rcard__cat.wp-block-post-terms {
	color: #3f5417; /* fixed chip ink to read on the light pill, like static cards */
	text-decoration: none;
}
.ka-rcard__cat.wp-block-post-terms .wp-block-post-terms__separator {
	color: inherit;
}

/* ---- card body: title uses display font + heading colour ---- */
.ka-rcard__body {
	display: flex;
	flex-direction: column;
	flex: 1; /* push the date/meta to the bottom of the card */
}
.ka-rcard__body .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.ka-rcard__body .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.ka-rcard__body .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---- excerpt: muted, small, body font (mockup: color:muted, .92rem) ---- */
.ka-rcard__body .wp-block-post-excerpt {
	margin: .5rem 0 0;
}
.ka-rcard__body .wp-block-post-excerpt p,
.ka-rcard__body .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--contrast-muted);
	font-size: .92rem;
	line-height: 1.7;
	margin: 0;
}
.ka-rcard__body .wp-block-post-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: .5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
}
.ka-rcard__body .wp-block-post-excerpt .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/* ---- date meta: sits on the bottom border row (reuses .ka-rcard__meta) ---- */
/* .ka-rcard__meta already gives the top border + muted small text */
.ka-rcard__meta.wp-block-post-date {
	margin-top: .9rem;
	font-variant-numeric: tabular-nums;
}
.ka-rcard__meta.wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* ---- archive page-head (query-title + term-description) reuses .ka-page-head ---- */
.ka-page-head .wp-block-query-title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	margin: .2rem 0 0;
}
.ka-page-head .wp-block-term-description {
	color: var(--wp--preset--color--contrast-muted);
	max-width: 56ch;
	margin: .6rem auto 0;
}

/* ---- no-results message ---- */
.wp-block-query-no-results {
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
	padding: 2.5rem 0;
}