/**
 * pchs/post-cards
 */

.pchs-post-cards {
	--pchs-pad-x: var(--wp--preset--spacing--50);
	--pchs-cols: 3;

	padding-block: var(--wp--custom--section--y);
}

@media (min-width: 48em) {
	.pchs-post-cards {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

.pchs-post-cards--surface {
	background: var(--wp--preset--color--surface);
}

.pchs-post-cards__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
	box-sizing: border-box;
}

.pchs-post-cards__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--60);
}

/*
 * Section headings are sized by role, not by tag: the heading level is an
 * author choice per block, so an h3 section title must still read as a
 * section title.
 */
.pchs-post-cards__title {
	margin: 0;
}

.pchs-post-cards__more {
	/* 44px of height on a link that is only 26px of text, so the section
	   link is a thumb target rather than a line of type. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 700;
	white-space: nowrap;
}

/* -------------------------------------------------------------- filters -- */

.pchs-post-cards__filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

/*
 * At 360 the seven pills wrapped to four uneven rows ("Complete Bathroom
 * Remodels" alone on a line). A horizontal scroller keeps one row, peeks the
 * next pill, and matches the review-carousel affordance on phones.
 */
@media ( max-width: 37.5em ) {
	.pchs-post-cards__filters {
		margin-inline: calc( -1 * var(--pchs-pad-x, var(--wp--preset--spacing--50)) );
		padding-inline: var(--pchs-pad-x, var(--wp--preset--spacing--50));
	}

	.pchs-post-cards__filters ul {
		flex-wrap: nowrap;
		margin-block-end: var(--wp--preset--spacing--50);
		padding-block-end: var(--wp--preset--spacing--10);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pchs-post-cards__filters ul::-webkit-scrollbar {
		display: none;
	}

	.pchs-post-cards__filter {
		flex: 0 0 auto;
	}
}

/*
 * Measured 36px tall at 1440 and 390 — under the 44px tap floor. Same treatment
 * as city-chips: inline-flex + min-height grows the pill without drifting the
 * label off centre.
 */
.pchs-post-cards__filter {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--pchs-tap);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	/*
	 * border token is 1.26:1 on white — below WCAG 1.4.11's 3:1 for a control
	 * edge. navy-muted is 3.17:1 and still reads as a quiet pill outline.
	 */
	border: 1px solid var(--wp--custom--color--navy-muted);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.pchs-post-cards__filter:hover {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green-dark);
	text-decoration: none;
}

/* The current filter is stated, not just coloured. */
.pchs-post-cards__filter[aria-current="page"] {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

.pchs-post-cards__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--leading--body);
}

.pchs-post-cards__empty-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--pchs-tap);
	font-weight: var(--wp--custom--weight--bold);
}

.pchs-post-cards__empty-end {
	white-space: nowrap;
}

/* ---------------------------------------------------------------- cards -- */

.pchs-post-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 62em) {
	.pchs-post-cards__list {
		grid-template-columns: repeat(var(--pchs-cols), minmax(0, 1fr));
	}
}

/* The surface is the shared .pchs-card component; the photo runs to the
   card's edges, so the padding moves to the body. Compounded with .pchs-card
   so it outranks app.css. */
.pchs-post-cards__card.pchs-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	padding: 0;
}

/*
 * The title link's ::after covers the card, so the ring is drawn on the card
 * rather than round the title text. Same ring as app.css's global rule, and
 * only for keyboard focus: :has(:focus-visible), not :focus-within.
 */
.pchs-post-cards__card:has( a:focus-visible ) {
	outline: var(--pchs-focus-width) solid var(--pchs-focus-color);
	outline-offset: var(--pchs-focus-gap);
	box-shadow: var(--pchs-focus-halo);
}

.pchs-post-cards__card-title a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Card ratio, shared with service-cards. */
.pchs-post-cards__media {
	aspect-ratio: var(--wp--custom--ratio--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

/*
 * Posts without a featured image still reserve the photo slot so the grid
 * stays level. A quiet hatch reads as "no photo" rather than a broken load.
 */
.pchs-post-cards__media.is-empty {
	background-color: var(--wp--preset--color--surface);
	background-image: repeating-linear-gradient(
		-12deg,
		transparent,
		transparent 10px,
		color-mix( in srgb, var(--wp--preset--color--border) 70%, transparent ) 10px,
		color-mix( in srgb, var(--wp--preset--color--border) 70%, transparent ) 11px
	);
}

.pchs-post-cards__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
}

.pchs-post-cards__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--pchs-card-pad);
}

/* A category label, not an action — see the note in process-steps. Always
   exactly one line, empty or long, so every title in a row starts level.
   Green matches .pchs-eyebrow / other micro labels; muted made the line read
   as disabled rather than a topic. */
.pchs-post-cards__kicker {
	min-height: 1lh;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--green);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Three lines held and capped: a two-line min left a three-line title (home
 * "Top 5 Home Remodeling…") taller than its neighbours, so excerpts started
 * on different baselines across the row.
 */
.pchs-post-cards__card-title {
	display: -webkit-box;
	min-height: 3lh;
	margin: 0;
	overflow: hidden;
	text-wrap: balance;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.pchs-post-cards__card-title a {
	color: inherit;
	text-decoration: none;
}

.pchs-post-cards__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pchs-post-cards__excerpt {
	display: -webkit-box;
	flex: 1 1 auto;
	min-height: 3lh;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	text-wrap: pretty;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Pagination. Only rendered when this block is showing the main query. Sized to
   the 44px minimum hit area the foundation sets, because a page-2 link that is
   hard to hit on a phone is the same as no page-2 link. */
.pchs-post-cards__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--70);
}

.pchs-post-cards__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.pchs-post-cards__pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green-dark);
	text-decoration: none;
}

.pchs-post-cards__pagination .page-numbers.current {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

.pchs-post-cards__pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--wp--preset--color--muted);
}