/* stylelint-disable selector-class-pattern -- Documented CS-C13 component contract. */

.cs-page-content {
	padding-block: clamp(2rem, 5vw, 5rem);
}

.cs-page-content > h1,
.cs-page-content > article > h1 {
	margin-block: 0 var(--cs-space-xl);
}

.cs-prose {
	max-width: none;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.cs-prose :where(a, code, pre) {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.cs-finder {
	margin-block-start: var(--cs-space-2xl);
	border-block-start: 1px solid var(--cs-color-line);
	padding-block-start: var(--cs-space-xl);
}

.cs-finder__heading,
.cs-finder__active ul,
.cs-pagination ul {
	display: flex;
	align-items: center;
	gap: var(--cs-space-m);
	flex-wrap: wrap;
}

.cs-finder__heading {
	justify-content: space-between;
}

.cs-finder__status,
.cs-result-card__type {
	color: var(--cs-color-muted);
}

.cs-collection-context__criteria {
	display: grid;
	gap: var(--cs-space-s);
	margin-block: var(--cs-space-l);
	padding: var(--cs-space-l);
	border-inline-start: 0.1875rem solid var(--cs-area-accent);
	background: var(--cs-color-surface);
}

.cs-collection-context__criteria :where(h3, ul) {
	margin-block: 0;
}

.cs-collection-context__criteria a {
	justify-self: start;
	color: var(--cs-area-accent);
}

.cs-button-secondary,
.cs-pagination a,
.cs-finder__active a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: var(--cs-space-s) var(--cs-space-m);
	border: 1px solid var(--cs-area-accent);
	background: transparent;
	color: var(--cs-color-text);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.cs-finder--compact {
	margin-block-start: var(--cs-space-xl);
	padding-block-start: var(--cs-space-m);
}

.cs-finder--compact .cs-finder__heading h2 {
	margin-block: 0;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.cs-finder--compact .cs-finder__status {
	font-size: 0.8125rem;
}

.cs-finder__active ul,
.cs-pagination ul {
	padding: 0;
	list-style: none;
}

.cs-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--cs-space-m);
}

.cs-result-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--cs-space-l);
	border: 1px solid var(--cs-color-line);
	background: var(--cs-color-surface);
}

.cs-result-card__type {
	margin-block: 0 var(--cs-space-xs);
	font-family: var(--cs-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cs-result-card h4 {
	margin-block: 0 var(--cs-space-s);
}

.cs-result-card a {
	margin-block-start: auto;
	padding-block-start: var(--cs-space-m);
	color: var(--cs-area-accent);
}

.cs-finder__empty,
.cs-finder__technical-error {
	padding: var(--cs-space-xl);
	border: 1px solid var(--cs-color-line);
	background: var(--cs-color-surface);
}

.cs-pagination {
	margin-block-start: var(--cs-space-xl);
}

/* Active filters are their own removal action; the full chip is the hit target. */
.cs-site .cs-finder__active li {
	max-width: 100%;
}

.cs-site .cs-finder__active .cs-filter-chip {
	position: relative;
	max-width: 100%;
	min-height: 3.5rem;
	justify-content: flex-start;
	padding: 1rem 3.75rem 1rem 1rem;
	color: var(--cs-color-text);
	text-align: start;
}

.cs-site .cs-finder__active .cs-filter-chip__label {
	color: var(--cs-color-text);
	overflow-wrap: anywhere;
}

.cs-filter-chip__remove {
	position: absolute;
	inset-block-start: 0.375rem;
	inset-inline-end: 0.375rem;
	display: grid;
	width: 1.5rem;
	height: 1.5rem;
	place-items: center;
	border: 1px solid currentcolor;
	border-radius: 50%;
	color: var(--cs-area-accent);
	font-family: var(--cs-font-body);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

/* Automatic language-scoped home cards share the regular button and frame styles. */
.cs-latest-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-space-6, 1.5rem); }
.cs-latest-content__card { display: flex; flex-direction: column; min-width: 0; padding: var(--cs-space-6, 1.5rem); }
.cs-latest-content__card > .wp-block-buttons { margin-top: auto; padding-top: var(--cs-space-4, 1rem); }
.cs-latest-content__card h3 { overflow-wrap: anywhere; }
@media (max-width: 767px) { .cs-latest-content__grid { grid-template-columns: 1fr; } }
