/**
 * Customers / Case Study listing.
 * Figma: desktop 3428:21720 (1440) · tablet 3452:64160 (768) · mobile 3428:31141 (375).
 * Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px.
 */

.cs-page {
	background-color: var(--color-bg-default);
}

.cs-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--space-160) var(--space-128) var(--space-80);
	border-bottom: 1px solid var(--color-border-default);
	background-color: var(--color-bg-subtle);
}

.cs-hero__map {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.cs-hero__map picture {
	display: contents;
}

.cs-hero__map-img {
	position: absolute;
	display: block;
	max-width: none;
	pointer-events: none;
	top: 176px;
	left: -34px;
	width: 1509px;
	height: auto;
}

.cs-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32);
}

.cs-hero__copy {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.cs-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--color-bg-emphasis);
}

.cs-hero__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-text-subtle);
}

.cs-hero__eyebrow-text {
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
	color: var(--color-text-subtle);
	text-align: center;
	white-space: nowrap;
}

.cs-hero__heading {
	max-width: 1092px;
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: 0;
	color: var(--color-text-brand);
	text-align: center;
}

.cs-hero__search {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
}

.cs-hero__input {
	width: 457px;
	height: 49px;
	padding: 10px 15px;
	border: 1.233px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	color: var(--color-text-default);
}

.cs-hero__input::placeholder {
	color: var(--color-text-disabled);
}

.cs-hero__input::-webkit-search-decoration,
.cs-hero__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.cs-hero__input:focus {
	outline: 2px solid var(--color-brand-default);
	outline-offset: 2px;
}

.cs-hero__submit {
	flex-shrink: 0;
	height: 44px;
}

.cs-hero__search-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.cs-listing {
	background-color: var(--color-bg-default);
	padding: var(--space-64) var(--space-128) var(--space-112);
}

.cs-listing__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.cs-listing__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-16);
}

.cs-listing__count {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--text-display-h3-size);
	font-weight: 400;
	line-height: var(--text-display-h3-lh);
	color: var(--color-text-default);
	white-space: nowrap;
}

.cs-listing__sort {
	position: relative;
	flex-shrink: 0;
}

.cs-listing__sort-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 206px;
	height: 50px;
	padding: 10px 15px;
	border: 1.233px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	color: var(--color-text-subtle);
	cursor: pointer;
}

.cs-listing__sort-toggle:focus-visible {
	outline: 2px solid var(--color-brand-default);
	outline-offset: 2px;
}

.cs-listing__sort-caret {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.cs-listing__sort-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 5;
	width: 206px;
	margin: 0;
	padding: var(--space-8) 0;
	list-style: none;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-default);
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.cs-listing__sort-option {
	display: block;
	width: 100%;
	padding: var(--space-8) var(--space-16);
	border: 0;
	background: transparent;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
	color: var(--color-text-default);
	text-align: left;
	cursor: pointer;
}

.cs-listing__sort-option:hover,
.cs-listing__sort-option.is-selected {
	background-color: var(--color-bg-subtle);
}

.cs-listing__results {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.cs-listing__results:focus {
	outline: none;
}

.cs-listing__results:focus-visible {
	outline: 2px solid var(--color-brand-default);
	outline-offset: 4px;
}

.cs-listing__results.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.cs-listing__empty,
.cs-listing__error {
	margin: 0;
	padding: var(--space-48) 0;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
	color: var(--color-text-subtle);
	text-align: center;
}

.cs-listing__grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
}

.cs-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	height: 320px;
	overflow: hidden;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-xs);
	background-color: var(--color-surface-default);
}

.cs-card__body {
	display: flex;
	flex-direction: column;
	gap: 56px;
	width: 100%;
	padding: var(--space-16) var(--space-16) 0;
}

.cs-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 40px;
	overflow: hidden;
	border: 1px solid var(--color-border-default);
	border-radius: 2px;
	background-color: var(--color-surface-default);
}

.cs-card__logo img {
	width: 100px;
	height: auto;
    max-height: 50px;
    object-fit: contain;
}

.cs-card__logo--text {
	padding: 0 8px;
	font-family: var(--font-family-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text-default);
	text-align: center;
}

.cs-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	min-width: 0;
}

.cs-card__title {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--text-display-h6-medium-size);
	font-weight: 400;
	line-height: var(--text-display-h6-medium-lh);
	letter-spacing: 0;
	color: var(--color-text-brand);
}

.cs-card__title a {
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cs-card__title a:hover,
.cs-card__title a:focus-visible {
	color: inherit;
	text-decoration: none;
}

.cs-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding-top: var(--space-8);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	line-height: var(--text-body-sm-lh);
	color: var(--color-text-muted);
	text-decoration: none;
}

.cs-card__more:hover,
.cs-card__more:focus-visible {
	color: var(--color-text-muted);
	text-decoration: none;
}

.cs-card__more .btn__icon {
	width: 18px;
	height: 18px;
}

.cs-card__image {
	flex: 0 0 107px;
	width: 100%;
	height: 107px;
	overflow: hidden;
}

.cs-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-card__image--empty {
	background-color: var(--color-bg-emphasis);
}

.cs-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: var(--space-8);
}

.cs-pagination__arrow,
.cs-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	font-family: var(--font-family-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-subtle);
	cursor: pointer;
}

.cs-pagination__page.is-current {
	border-radius: var(--radius-xs);
	background-color: var(--color-green-900);
	color: var(--color-neutral-0);
	cursor: default;
}

.cs-pagination__page--ellipsis {
	cursor: default;
}

.cs-pagination__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.cs-pagination__arrow:not(:disabled):hover,
.cs-pagination__page:not(.is-current):not(.cs-pagination__page--ellipsis):hover {
	background-color: var(--color-bg-subtle);
}

.cs-pagination__chevron {
	display: block;
	width: 24px;
	height: 24px;
}

.cs-hero .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1024px){
	.cs-pagination__page {
		flex-shrink: 0;
		width: 39px;
		height: 39px;
		font-size: 12px;
	}
}

@media (max-width: 74.99875rem) {
	.cs-hero {
		padding: var(--space-160) var(--space-32) var(--space-80);
		gap: var(--space-32);
	}

	.cs-hero__map-img {
		top: auto;
		bottom: -13px;
		left: 0;
		width: 687px;
		height: 283px;
	}

	.cs-hero__inner {
		gap: var(--space-40);
	}

	.cs-hero__heading {
		max-width: 700px;
		font-size: 2rem;
		line-height: normal;
	}

	.cs-hero__search {
		flex-direction: column;
		gap: var(--space-20);
	}

	.cs-hero__input {
		width: 335px;
	}

	.cs-listing {
		padding: var(--space-64) var(--space-32);
	}

	.cs-listing__count {
		font-size: 1.25rem;
		line-height: normal;
	}

	.cs-listing__sort-toggle {
		width: 128px;
	}

	.cs-listing__sort-menu {
		width: 180px;
	}

	.cs-listing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.cs-pagination {
		width: 320px;
		gap: var(--space-8);
		padding: 0;
	}

	.cs-pagination__arrow {
		flex: 1 0 0;
		width: auto;
		min-width: 39px;
		height: auto;
		aspect-ratio: 1;
	}
}

@media (max-width: 47.99875rem) {
	.cs-hero {
		padding: var(--space-160) var(--space-20) var(--space-80);
	}

	.cs-hero__heading {
		max-width: none;
		width: 100%;
	}

	.cs-hero__search {
		width: 100%;
	}

	.cs-hero__input {
		width: 100%;
	}

	.cs-hero__map-img {
		left: 50%;
		width: 1101px;
		height: 411px;
		transform: translateX(calc(-50% + 148px));
	}

	.cs-listing {
		padding: var(--space-64) var(--space-20);
	}

	.cs-listing__inner,
	.cs-listing__results {
		gap: var(--space-24);
	}

	.cs-listing__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-24);
	}
}