/*** Template: Archive — Client Stories ***/

/** Hero — intro + filters **/

.client-story-hero {
	padding-block: var(--module-spacing-large) var(--module-spacing-medium);
}

.client-story-hero .grid {
	row-gap: var(--text-spacing-small);
}

.client-story-hero .heading-2,
.client-story-hero .large-text {
	grid-column: 1 / span 8;
}

.client-story-hero .flex {
	align-items: end;
	gap: var(--text-spacing-small);
	justify-content: flex-start;
	margin-top: var(--text-spacing-large);
}

.client-story-hero .filter {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.client-story-hero .field {
	position: relative;
}

/* Chevron at the field's right edge — the select hides its native arrow. */
.client-story-hero .field::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 7px;
	pointer-events: none;
	position: absolute;
	right: 18px;
	rotate: 45deg;
	top: calc(50% - 6px);
	width: 7px;
}

.client-story-hero select {
	appearance: none;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
	color: var(--black);
	cursor: pointer;
	font-family: var(--body-font);
	font-size: calc(13rem / 16);
	font-weight: 600;
	min-width: 200px;
	padding: 14px 44px 14px 20px;
}

/* Inline Clear control — sits after the last select, centred against the field
   height (the row is align-items: end). Toggled by the filter-clear JS block. */
.client-story-hero .filter-clear {
	align-self: center;
	white-space: nowrap;
}

/* Clear is a dismiss control — swap the tertiary arrow glyph for an ✕ (keeps the
   base ::after's currentColor + center/contain sizing). */
.client-story-hero .filter-clear::after {
	mask-image: url('../svgs/close.svg');
}

/* .btn's display: inline-flex outranks the UA [hidden] rule — restore the hide. */
.client-story-hero .filter-clear[hidden] {
	display: none;
}

/** Roll — 2-up story cards on a parchment band **/

.client-story-grid {
	isolation: isolate;
	padding-bottom: var(--module-spacing-large);
	position: relative;
}

/* Band offset so the cards' tops overlap onto the page bg above it. */
.client-story-grid::before {
	background: var(--parchment);
	content: "";
	inset: var(--module-spacing-large) 0 0;
	position: absolute;
	z-index: -1;
}

/* No cards — the message sits on full parchment with ample padding, rather than
   the offset band that only exists to frame the overlapping cards. */
.client-story-grid:has(.no-results) {
	padding-block: var(--module-spacing-small);
}

.client-story-grid:has(.no-results)::before {
	inset: 0;
}

/* Jazzy injects the results as <ul jx-form-results-items> (no .cards class), so
   the 2-up roll lives on that ul. */
.client-story-grid ul[jx-form-results-items] {
	display: grid;
	gap: var(--module-spacing-medium);
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.client-story-hero .heading-2,
	.client-story-hero .large-text {
		grid-column: 1 / -1;
	}

	.client-story-grid ul[jx-form-results-items] {
		gap: var(--text-spacing-large);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.client-story-grid ul[jx-form-results-items] {
		grid-template-columns: 1fr;
	}

	.client-story-hero .flex {
		gap: var(--text-spacing-xsmall);
	}

	.client-story-hero .field,
	.client-story-hero .filter {
		width: 100%;
	}

}