/* Native block supports supply author styles. These rules only define structure. */
:where(.swd-category-card) {
	--swd-card-gap: 0.5rem;
	--swd-card-justify: center;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: var(--swd-card-justify);
	box-sizing: border-box;
	min-height: 16rem;
	padding: 1.5rem;
	background-color: #262626;
	color: #fff;
	text-decoration: none;
}
/* Stacked cards default to the surrounding text colours; padding moves to the text area.
   Block spacing separates the image from the text as well as the text blocks from each other. */
:where(.swd-category-card--stacked) {
	justify-content: flex-start;
	gap: var(--swd-card-gap);
	min-height: 0;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
	color: inherit;
}
:where(.swd-category-card):hover { text-decoration: none; }
.swd-category-card:where(:not(.has-text-color, .swd-category-card--stacked)) { color: #fff; }
.swd-category-card:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
	box-shadow: 0 0 0 7px #1e1e1e;
}
.swd-category-card > .swd-category-card__image,
.swd-category-card > .swd-category-card__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
}
.swd-category-card > .swd-category-card__image { object-fit: cover; }
.swd-category-card > .swd-category-card__overlay { z-index: 0; }
.swd-category-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--swd-card-gap);
	width: 100%;
	min-width: 0;
}
.swd-category-card--stacked > .swd-category-card__media {
	display: block;
	flex: none;
	overflow: hidden;
}
.swd-category-card__media > .swd-category-card__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.swd-category-card--stacked > .swd-category-card__content {
	flex: 1 1 auto;
	justify-content: var(--swd-card-justify);
	box-sizing: border-box;
}
.swd-category-card > .swd-category-card__content--space-between {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}
.swd-category-card__content--space-between > .swd-category-card__title {
	flex: 1 1 0%;
	min-width: 0;
}
.swd-category-card__content--space-between > .swd-category-card__count {
	flex: 0 0 auto;
	max-width: 50%;
	margin-inline-start: auto;
}
.swd-category-card__title,
.swd-category-card__count,
.swd-category-card__description {
	margin: 0;
	overflow-wrap: anywhere;
}
/* The description always takes its own full-width row, even when the name and count share a line. */
.swd-category-card__content--space-between > .swd-category-card__description { flex: 0 0 100%; }
.swd-category-card__title:where(:not(.has-text-color)),
.swd-category-card__count:where(:not(.has-text-color)),
.swd-category-card__description:where(:not(.has-text-color)) { color: inherit; }
/* Image area kept when no image is set: 20% of the site's text colour, light grey on most themes. */
.swd-category-card__placeholder {
	display: block;
	background-color: color-mix(in srgb, var(--swd-card-foreground, #111) 20%, transparent);
}
:where(.swd-category-card--placeholder:not(.swd-category-card--stacked)) { background-color: transparent; }
/* Optional hover zoom. The card is the link, so hovering or focusing anywhere on it zooms the image. */
.swd-category-card--zoom { overflow: hidden; }
.swd-category-card--zoom .swd-category-card__image {
	transition: transform var(--swd-zoom-duration, 400ms) ease;
}
.swd-category-card--zoom:hover .swd-category-card__image,
.swd-category-card--zoom:focus-visible .swd-category-card__image {
	transform: scale(var(--swd-zoom-scale, 1.1));
}
@media (prefers-reduced-motion: reduce) {
	.swd-category-card--zoom .swd-category-card__image { transition: none; }
	.swd-category-card--zoom:hover .swd-category-card__image,
	.swd-category-card--zoom:focus-visible .swd-category-card__image { transform: none; }
}
/* Showcase display of SWD Product Category Cards: one image, a group name, an optional description, and category links.
   Mobile rules are added per breakpoint by the server, because a media query cannot read a custom property. */
.swd-category-cards--showcase { position: relative; }
.swd-category-showcase .wp-block-term-template {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}
.swd-category-showcase .wp-block-term-template > li { margin: 0; }
.swd-category-showcase > p:empty { display: none; }
.swd-showcase-image {
	position: relative;
	display: block;
	overflow: hidden;
}
:where(.swd-showcase-image) { aspect-ratio: 1; }
.swd-showcase-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--swd-showcase-fade, 400ms) ease;
}
.swd-showcase-image__img.is-active { opacity: 1; }
.swd-showcase-image--placeholder { background-color: color-mix(in srgb, var(--swd-card-foreground, #111) 20%, transparent); }
:where(.swd-category-link) { text-decoration: none; }
:where(.swd-category-link):hover { text-decoration: underline; }
.swd-category-link:where(:not(.has-text-color)) { color: inherit; }
/* The compact view's tap target covers the whole showcase; it is shown only below the breakpoint. */
.swd-category-showcase__group-link {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 1;
}
.swd-category-showcase__group-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
	.swd-showcase-image__img { transition: none; }
}