/*
 * RahkarTheme — blog.css
 * Loaded ONLY on blog listing surfaces: the posts index (is_home) and the
 * post archives — category / tag / author / date (see inc/enqueue.php).
 * Single posts have their own, heavier single.css; this file is just the
 * card grid + archive header + pagination, kept small.
 *
 * Everything is driven by theme.json tokens (colors, spacing, radius, font
 * weights) so the per-install skin can retint it for free. Logical
 * properties throughout for RTL. Mobile-first: one column, widening to two
 * then three only when the viewport can carry them (CLS-safe — the grid
 * reserves each card's aspect-ratio media box before the image loads).
 */

/* -------------------------------------------------------------------------
 *  Archive / index header — title + term description
 * ------------------------------------------------------------------------- */
.rahkar-blog-header {
	margin-block-end: var(--wp--preset--spacing--50);
}

.rahkar-blog-header .wp-block-query-title,
.rahkar-blog-header > h1 {
	font-size: clamp(1.625rem, 3vw + 0.5rem, 2.25rem);
	line-height: 1.25;
	font-weight: var(--wp--custom--fw--strong);
	letter-spacing: -0.01em;
	margin: 0;
}

.rahkar-blog-header .wp-block-term-description {
	margin-block-start: 0.625rem;
	max-inline-size: 60ch;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.8;
}

/* -------------------------------------------------------------------------
 *  Responsive card grid
 * -------------------------------------------------------------------------
 *  The grid lives on the core post-template <ul>. We strip its list styling
 *  and lay the items out ourselves so the column count is capped (auto-fill
 *  would over-pack on wide screens). Each <li> is a flex column so cards in
 *  the same row share a height and their meta rows bottom-align.
 */
.rahkar-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rahkar-blog-grid > li {
	display: flex;
	margin: 0;
}

@media (min-width: 600px) {
	.rahkar-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.rahkar-blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
 *  Card
 * ------------------------------------------------------------------------- */
.rahkar-blog-card {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	box-sizing: border-box; /* theme has no global border-box */
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.rahkar-blog-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border));
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-3px);
}

/* Media — fixed 16/9 box reserves layout space before the image arrives. */
.rahkar-blog-card-media {
	margin: 0;
}

.rahkar-blog-card-media,
.rahkar-blog-card-media img {
	display: block;
	inline-size: 100%;
}

.rahkar-blog-card-media img {
	aspect-ratio: 16 / 9;
	block-size: auto;
	object-fit: cover;
	background: var(--wp--preset--color--muted);
	transition: transform 400ms ease;
}

.rahkar-blog-card:hover .rahkar-blog-card-media img {
	transform: scale(1.03);
}

/* Body — flex column so the excerpt expands and the meta row sits at the
 * bottom, keeping every card's footer on the same baseline. */
.rahkar-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.rahkar-blog-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--fw--strong);
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.rahkar-blog-eyebrow a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.rahkar-blog-eyebrow a:hover {
	text-decoration: underline;
}

.rahkar-blog-card .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: var(--wp--custom--fw--strong);
	margin: 0;
}

.rahkar-blog-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rahkar-blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.rahkar-blog-card .wp-block-post-excerpt {
	flex: 1 1 auto;
	margin: 0;
}

.rahkar-blog-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--wp--preset--color--text-muted);
}

.rahkar-blog-card .wp-block-post-excerpt__more-text {
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
}

.rahkar-blog-card .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--primary);
	font-weight: var(--wp--custom--fw--strong);
	text-decoration: none;
}

/* Meta row — date · reading-time, muted, bottom of card. */
.rahkar-blog-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.25rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}

.rahkar-blog-card-meta > * {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--text-muted) !important;
}

.rahkar-blog-card-meta > *:not(:last-child)::after {
	content: "·";
	margin-inline-start: 0.5rem;
	color: var(--wp--preset--color--border);
	font-weight: var(--wp--custom--fw--strong);
}

.rahkar-blog-card-meta .rahkar-reading-time {
	gap: 0.3rem;
}

/* -------------------------------------------------------------------------
 *  Pagination
 * ------------------------------------------------------------------------- */
.rahkar-blog-pagination {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: 0.5rem;
	flex-wrap: wrap;
}

.rahkar-blog-pagination .wp-block-query-pagination-previous,
.rahkar-blog-pagination .wp-block-query-pagination-next,
.rahkar-blog-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.rahkar-blog-pagination .wp-block-query-pagination-previous:hover,
.rahkar-blog-pagination .wp-block-query-pagination-next:hover,
.rahkar-blog-pagination .wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rahkar-blog-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 *  Empty state
 * ------------------------------------------------------------------------- */
.rahkar-blog-empty {
	padding-block: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--text-muted);
}

/* -------------------------------------------------------------------------
 *  Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rahkar-blog-card,
	.rahkar-blog-card-media img {
		transition: none !important;
	}

	.rahkar-blog-card:hover {
		transform: none !important;
	}

	.rahkar-blog-card:hover .rahkar-blog-card-media img {
		transform: none !important;
	}
}