/* The numbered space scale this stylesheet uses now lives in tokens.css at
   :root (REH-191). It was previously defined here, scoped to this page, as the
   REH-51 fix — which deliberately left treatment.css broken with the same
   dependency. Promoting it fixes both, and adds the --rehab-space-4 that was
   missing from the local block. */

.rehab-articles-index__hero {
	padding-block: var(--rehab-space-8) var(--rehab-space-7);
	text-align: center;
}

.rehab-articles-index__hero .rehab-cta__inner {
	max-width: 720px;
	margin-inline: auto;
}

.rehab-articles-index__hero h1 {
	margin: 0 0 var(--rehab-space-3);
}

.rehab-articles-index {
	padding-block: var(--rehab-space-9);
}

.rehab-articles-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--rehab-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rehab-articles-index__card {
	background: var(--rehab-color-white);
	border: 1px solid var(--rehab-color-line);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rehab-articles-index__card:hover {
	transform: translateY(-2px);
	border-color: var(--rehab-color-sage);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.rehab-articles-index__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.rehab-articles-index__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--rehab-color-cream);
}

.rehab-articles-index__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rehab-articles-index__body {
	padding: var(--rehab-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rehab-space-2);
	flex: 1;
}

.rehab-articles-index__title {
	/* Card titles stay on the body sans. This line previously read
	   `font-family: var(--rehab-font-serif)`, but that token was undefined, so
	   the declaration was dropped and the titles have always rendered sans.
	   Defining the token in REH-191 would have silently flipped them to serif;
	   keeping the shipped look is the deliberate choice (Robbin, 27 Jul). */
	font-family: var(--rehab-font-body);
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0;
	color: var(--rehab-color-ink);
}

.rehab-articles-index__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rehab-sage-text);
	margin: 0;
}

.rehab-articles-index__excerpt {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--rehab-color-ink-soft);
	margin: 0;
}

.rehab-articles-index__read-more {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--rehab-color-sage-deep);
	margin-top: auto;
	padding-top: var(--rehab-space-2);
}

.rehab-articles-index__pagination {
	margin-top: var(--rehab-space-8);
	display: flex;
	justify-content: center;
	gap: var(--rehab-space-2);
	flex-wrap: wrap;
}

/*
 * the_posts_pagination() wraps the numbers in a .nav-links div, so the flex gap
 * above applied to that single wrapper and the numbers themselves sat 3px apart
 * (sheet row 100). The template-articles-index.php markup has no wrapper, hence
 * the two selectors. Harmless where .nav-links does not exist.
 */
.rehab-articles-index__pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--rehab-space-2);
	flex-wrap: wrap;
	width: 100%;
}

.rehab-articles-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--rehab-space-3);
	border: 1px solid var(--rehab-color-line);
	color: var(--rehab-color-ink);
	text-decoration: none;
	font-size: 0.9rem;
	border-radius: 3px;
	transition: background 0.2s ease, color 0.2s ease;
}

.rehab-articles-index__pagination .page-numbers:hover,
.rehab-articles-index__pagination .page-numbers.current {
	background: var(--rehab-color-sage);
	color: var(--rehab-color-white);
	border-color: var(--rehab-color-sage);
}

.rehab-articles-index__pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

@media (max-width: 640px) {
	.rehab-articles-index__grid {
		grid-template-columns: 1fr;
	}
}