/*
 * Category cards -- used at BOTH levels of the directory: the sections on
 * /directory/, and a section's categories on /directory/category/<section>/.
 * Both grids are assembled as core blocks by
 * inc/queries/query-listing-category-cards.php, because core/categories renders
 * a bare <ul> with no card, grid or image option and a Query Loop has no
 * term-loop at all.
 *
 * Lives here rather than beside one template because the colocated loader
 * enqueues every templates/*.css site-wide, and these cards render on two
 * different templates.
 *
 * What is irreducible: making the whole card a click target, and cropping the
 * banner to one shape across separately generated images. A term with no
 * `wb_image` renders a text-only card, which is why nothing here assumes an
 * image is present.
 *
 * Tokens come from theme.json. No hardcoded colour or spacing values.
 */

.wb-section-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.wb-section-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
}

/* Eleven separately generated illustrations, normalised to one banner shape. */
.wb-section-card__media {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wb-section-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wb-section-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.wb-section-card h3 {
	margin: 0;
	line-height: 1.2;
}

.wb-section-card h3 a {
	text-decoration: none;
}

/* Whole card is the target. */
.wb-section-card h3 a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.wb-section-card__count {
	margin: 0;
}

/* --- Breadcrumb trail -------------------------------------------------- */

/* Built by inc/block-mods/block-mod-listing-breadcrumbs.php. The separator is
   decorative and aria-hidden; the links carry the structure. */
.wb-breadcrumbs__sep {
	opacity: 0.5;
}

.wb-breadcrumbs-trail a {
	text-decoration: none;
}

.wb-breadcrumbs-trail a:hover {
	text-decoration: underline;
}