/**
 * pchs/service-cards
 *
 * The card is a single link target: the title carries the anchor and a
 * stretched ::after makes the whole card clickable without adding a second
 * tab stop or nesting interactive elements.
 */

/* The type is the shared .pchs-eyebrow role (theme/style.css); only its
   spacing in this block's head is set here. */
.pchs-service-cards .pchs-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
}

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

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

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

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

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

.pchs-service-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-service-cards__title {
	margin: 0;
}

.pchs-service-cards__more {
	font-weight: 700;
	white-space: nowrap;
}

/*
 * A wrapping flex row rather than a grid, so a short last row is centred
 * instead of leaving one card stranded at the left (three cards at 768 used
 * to go 2 + 1). Three across from 48em, the block's own column count from
 * 62em.
 */
.pchs-service-cards__grid {
	--pchs-per-row: 1;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.pchs-service-cards__grid {
		--pchs-per-row: 3;
	}
}

/*
 * Exactly four cards at the 3-up tablet band went 3 + 1 (home and /exteriors/
 * at 768). Two-by-two until the block's own column count takes over at 62em.
 * Three-card grids (bathrooms) keep 3-up.
 */
@media ( min-width: 48em ) and ( max-width: 61.99em ) {
	.pchs-service-cards__grid:has( > :nth-child( 4 ):last-child ) {
		--pchs-per-row: 2;
	}
}

@media (min-width: 62em) {
	.pchs-service-cards__grid {
		--pchs-per-row: var(--pchs-cols);
	}
}

/* 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, which can load after this file. */
.pchs-service-cards__card.pchs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--pchs-per-row) - 1) * var(--wp--preset--spacing--50)) / var(--pchs-per-row));
	overflow: hidden;
	padding: 0;
}

/* Card ratio, shared with post-cards. 4/3 rather than 16/9 because most of
   the service artwork is portrait or square: 16/9 threw away half of it. */
.pchs-service-cards__media {
	aspect-ratio: var(--wp--custom--ratio--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.pchs-service-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-service-cards__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
}

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

/* The title link carries a class so app.css's 44px tap minimum for bare
   heading links skips it: its stretched ::after already makes the whole card
   the target, and the minimum floated one-line titles 9px down their box.
   From 48em the cards sit side by side, and every title holds two lines so
   every body starts on the same line. */
.pchs-service-cards__card-title {
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 48em) {
	.pchs-service-cards__card-title {
		min-height: 2lh;
	}
}

/*
 * At 48–62em the grid is three across (~213px cards). "Complete Bathroom
 * Remodels" wraps to three lines while "Bathtubs"/"Showers" stay on one, so the
 * blurbs started 25px apart on /bathrooms/ at 768. Hold three lines until the
 * 62em column count widens the cards again.
 */
@media (min-width: 48em) and (max-width: 61.99em) {
	.pchs-service-cards__card-title {
		min-height: 3lh;
	}
}

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

/* Stretched hit area. Keeps one tab stop per card. */
.pchs-service-cards__card-title a::after {
	content: "";
	position: absolute;
	inset: 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-service-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-service-cards__card-title a:focus-visible {
	outline: none;
	box-shadow: none;
}

/*
 * Three lines held: short blurbs used to leave Explore cues on different
 * baselines across a row (city pages and the 404 "What we do" strip).
 */
.pchs-service-cards__blurb {
	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;
}

.pchs-service-cards__cue-end {
	white-space: nowrap;
}

.pchs-service-cards__cue {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--green);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	transition: color var(--pchs-duration-fast) var(--pchs-ease);
}

@media ( prefers-reduced-motion: reduce ) {
	.pchs-service-cards__cue {
		transition: none;
	}
}

/* The cue is a span under the stretched title link; darken it with the card. */
.pchs-service-cards__card:hover .pchs-service-cards__cue,
.pchs-service-cards__card:focus-within .pchs-service-cards__cue {
	color: var(--wp--preset--color--green-dark);
}