/*
 * Chennai Home Guide — generic card component.
 *
 * Shared shell for every card grid (tool actions, trending localities,
 * project listings, buyer tools, latest guides, and the Project archive
 * added in Slice 10). Card-*type*-specific styling (e.g. Project's
 * price row) lives in its own component file and layers on top of
 * this. See CLAUDE.md, "CSS Architecture."
 */

.chg-tool-grid,
.chg-locality-grid,
.chg-project-grid,
.chg-guide-grid,
.chg-builder-grid,
.chg-search-result-grid {
	gap: var(--wp--preset--spacing--sm);
	align-items: stretch;
}

/*
 * These rules size the card itself for grids where the card is the
 * *direct* flex child (the homepage's hand-authored markup). Where a
 * card is rendered by core/post-template (e.g. the Project archive),
 * WordPress wraps each item in its own <li> — that <li>, not our card
 * element, is the actual flex child, so it needs the equivalent sizing
 * separately (see the `> li` rules below). Without that, flex-basis on
 * the card is a no-op and it silently falls back to its content width.
 */
.chg-tool-card,
.chg-locality-card,
.chg-project-card,
.chg-guide-card,
.chg-builder-card,
.chg-search-result-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	height: 100%;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	/* V3 design-direction update: media/project-style cards get their
	 * own, slightly larger radius (--radius--card, theme.json) than
	 * smaller controls/panels -- a new token, not a repurposed one:
	 * --radius--lg already has other consumers (lead-popup.css,
	 * project-document-gate.css, single-project.css) out of scope this
	 * slice, so changing its value would have silently rippled into
	 * them. .chg-project-card__image's corners (components/
	 * project-card.css) already clip to whatever this radius is via
	 * the card's own overflow:hidden -- no separate change needed there. */
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--md);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.chg-tool-grid > li,
.chg-locality-grid > li,
.chg-project-grid > li,
.chg-guide-grid > li,
.chg-builder-grid > li,
.chg-search-result-grid > li {
	flex: 1 1 100%;
	margin: 0;
	list-style: none;
}

.chg-tool-card:hover,
.chg-locality-card:hover,
.chg-project-card:hover,
.chg-guide-card:hover,
.chg-builder-card:hover,
.chg-search-result-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--hover);
	transform: translateY(-2px);
}

.chg-tool-card__title,
.chg-locality-card__title,
.chg-project-card__title,
.chg-guide-card__title,
.chg-builder-card__title,
.chg-search-result-card__title {
	margin: 0 0 0.375rem;
	font-size: var(--wp--preset--font-size--medium);
}

.chg-tool-card__desc,
.chg-locality-card__desc {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Locality and Builder cards read as structured research entries, like
 * Project's card — same accent top-border treatment. Moved here (from
 * front-page.css, Locality-only) once the new archive pages (Slice 7)
 * needed both on a page that isn't the homepage.
 */
.chg-locality-card,
.chg-builder-card {
	border-top: 3px solid var(--wp--preset--color--accent);
}

/*
 * Tablet and up: two columns. flex-grow is reset to 0 here — otherwise a
 * card left alone on the last row (an odd card count) stretches to fill
 * the full row width instead of sitting at its normal card width.
 */
@media (min-width: 640px) {
	.chg-tool-card,
	.chg-locality-card,
	.chg-project-card,
	.chg-guide-card,
	.chg-builder-card,
	.chg-search-result-card,
	.chg-tool-grid > li,
	.chg-locality-grid > li,
	.chg-project-grid > li,
	.chg-guide-grid > li,
	.chg-builder-grid > li,
	.chg-search-result-grid > li {
		flex: 0 1 calc(50% - var(--wp--preset--spacing--sm));
	}
}

/* Desktop: three columns, where they fit naturally within the constrained column. */
@media (min-width: 860px) {
	.chg-tool-card,
	.chg-locality-card,
	.chg-project-card,
	.chg-guide-card,
	.chg-builder-card,
	.chg-search-result-card,
	.chg-tool-grid > li,
	.chg-locality-grid > li,
	.chg-project-grid > li,
	.chg-guide-grid > li,
	.chg-builder-grid > li,
	.chg-search-result-grid > li {
		flex: 0 1 calc(33.333% - var(--wp--preset--spacing--sm));
	}
}

/*
 * Sparse-grid guard (V3 Foundation Slice 1) -- a grid with only 1-2
 * cards left the rest of the row an empty band the full width of the
 * (up to 80rem-wide) content shell, reading as a broken/unfinished page
 * rather than "not many yet" at this stage of CHG's content inventory.
 * Detected via :has() -- no markup or query-logic change, and it
 * degrades harmlessly to today's existing full-width behaviour in the
 * rare browser without :has() support. Only engages below 3 items; the
 * responsive rules above are completely unchanged once a grid actually
 * has 3+ cards, which is the common and growing case.
 */
.chg-tool-grid:not(:has(> :nth-child(3))),
.chg-locality-grid:not(:has(> :nth-child(3))),
.chg-project-grid:not(:has(> :nth-child(3))),
.chg-guide-grid:not(:has(> :nth-child(3))),
.chg-builder-grid:not(:has(> :nth-child(3))),
.chg-search-result-grid:not(:has(> :nth-child(3))) {
	max-width: 40rem;
}

.chg-tool-grid:not(:has(> :nth-child(3))) > .chg-tool-card,
.chg-locality-grid:not(:has(> :nth-child(3))) > .chg-locality-card,
.chg-project-grid:not(:has(> :nth-child(3))) > .chg-project-card,
.chg-guide-grid:not(:has(> :nth-child(3))) > .chg-guide-card,
.chg-builder-grid:not(:has(> :nth-child(3))) > .chg-builder-card,
.chg-search-result-grid:not(:has(> :nth-child(3))) > .chg-search-result-card,
.chg-tool-grid:not(:has(> :nth-child(3))) > li,
.chg-locality-grid:not(:has(> :nth-child(3))) > li,
.chg-project-grid:not(:has(> :nth-child(3))) > li,
.chg-guide-grid:not(:has(> :nth-child(3))) > li,
.chg-builder-grid:not(:has(> :nth-child(3))) > li,
.chg-search-result-grid:not(:has(> :nth-child(3))) > li {
	flex: 0 1 18rem;
}