/**
 * Case Studies page.
 *
 * Enqueued only on the page with the slug "case-studies".
 *
 * Sizes come from the 1728-wide Figma frame and are used as CSS pixels at the
 * top of each clamp — the shell is widened to 1360 so its 1280 content column
 * matches the design.
 */

.zouma-cshero .zouma-shell,
.zouma-cslist .zouma-shell {
	max-width: 1360px;
}

/* 01 · Hero -------------------------------------------------------------- */

/* The same arrangement as the Industries hero: dark panel, photograph on the
 * right half, badge strip along the foot. */
.zouma-cshero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Full screen on any device — the same pair the homepage hero uses.
	 *
	 * min-height rather than height, so a short screen or large type pushes
	 * the section taller instead of clipping the copy. svh after vh because
	 * 100vh on a phone measures the viewport with the browser chrome
	 * retracted, which runs taller than what the visitor can actually see;
	 * vh stays first as the fallback.
	 *
	 * The section is already pulled up under the sticky header, so the
	 * header's height is counted inside this 100. */
	min-height: 100vh;
	min-height: 100svh;
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: var(--zouma-header-h);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.zouma-cshero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.zouma-cshero__photo {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 50%;
	display: block;
}

.zouma-cshero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.zouma-cshero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--zouma-dark) 0%,
		rgba(18, 18, 18, 0.45) 4%,
		rgba(18, 18, 18, 0) 13%
	);
}

.zouma-cshero__dots {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 50%;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
	background-size: 26px 26px;
}

.zouma-cshero__inner {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding-block: clamp(2.5rem, calc(4 * var(--zouma-vw)), 4.25rem);
}

.zouma-cshero__title {
	max-width: 640px;
	margin: 18px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: var(--zouma-size-hero);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.zouma-cshero__text {
	max-width: 585px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.875rem, 0.76rem + calc(0.42 * var(--zouma-vw)), 1rem);
	line-height: 1.78;
}

.zouma-cshero__bar {
	position: relative;
	background: rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(6px);
}

.zouma-cshero__bar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px clamp(1rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
	min-height: 52px;
	margin: 0;
	padding: 10px clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem);
	list-style: none;
}

.zouma-cshero__bar li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

/* The bullet between the items on the hero bar.
 *
 * A plain dot, not the cluster mark. This was a background-image of
 * icon-spark.png, which no longer exists — the file was superseded, and a
 * background that 404s fails silently, so the marks stopped drawing and the
 * bar read as labels with nothing between them.
 *
 * 6px and round, matching .zouma-pilhero__dot and .zouma-indhero__dot, so
 * every hero bar carries the same separator. Cyan rather than blue: this bar
 * sits on a dark photograph, where the darker blue disappears.
 */
.zouma-cshero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zouma-cyan);
	flex: none;
}

/* 02 · The listing ------------------------------------------------------- */

.zouma-cslist {
	padding-block: clamp(3rem, calc(6.4 * var(--zouma-vw)), 6.4rem);
	background: #fff;
}

.zouma-cslist__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.zouma-cslist__title {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.25rem, 1rem + calc(1 * var(--zouma-vw)), 1.625rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-cslist__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 17px;
}

/* The pill wraps the native select so the control keeps its own keyboard and
 * screen-reader behaviour; the mark on the right is decorative. */
.zouma-csfilter {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 145px;
	height: 36px;
	padding: 0 12px;
	background: #e8f2fb;
	border: 1px solid #cfe3f5;
	border-radius: 6px;
	color: var(--zouma-blue-dark);
}

.zouma-csfilter:focus-within {
	border-color: var(--zouma-sky);
}

.zouma-csfilter select {
	flex: 1;
	min-width: 0;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	cursor: pointer;
}

.zouma-csfilter select:focus {
	outline: none;
}

.zouma-csfilter .zouma-icon {
	flex: none;
	pointer-events: none;
}

.zouma-cslist__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 43px 40px;
	margin: clamp(2rem, calc(4.4 * var(--zouma-vw)), 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.zouma-cscard__media {
	aspect-ratio: 400 / 248;
	border-radius: 8px;
	overflow: hidden;
	background: var(--zouma-blue-pale);
}

.zouma-cscard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zouma-cscard__client {
	margin: 24px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The global heading rule balances lines; the design wraps these greedily,
 * filling each line before breaking. */
.zouma-cscard__title {
	text-wrap: initial;
	margin: 14px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.4 * var(--zouma-vw)), 1.25rem);
	font-weight: 700;
	line-height: 1.25;
}

.zouma-cscard__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.zouma-cscard__link .zouma-icon {
	transition: transform var(--zouma-transition);
}

.zouma-cscard__link:hover .zouma-icon {
	transform: translateX(3px);
}

.zouma-cslist__empty {
	margin: 32px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.9375rem;
}

/* 03 · Closing call to action -------------------------------------------- */

.zouma-cscta {
	padding-block: clamp(3rem, calc(6.6 * var(--zouma-vw)), 6.5rem);
	background: var(--zouma-blue-pale);
}

/* 1248 rather than the 1280 the rest of the page uses — the design insets this
 * section by an extra 16px either side. */
.zouma-cscta .zouma-shell {
	max-width: 1328px;
}

.zouma-cscta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px clamp(1.5rem, calc(3 * var(--zouma-vw)), 3rem);
}

.zouma-cscta__body {
	flex: 1 1 460px;
}

.zouma-cscta__title {
	margin: 14px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.zouma-cscta__text {
	max-width: 460px;
	margin: 18px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.22 * var(--zouma-vw)), 0.875rem);
	line-height: 1.66;
}

.zouma-cscta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zouma-cscta__actions .zouma-btn {
	padding: 10px 18px;
}

/* The design outlines the secondary button in the ink colour, not the pale
 * hairline the shared white variant carries. */
.zouma-cscta__actions .zouma-btn--white {
	border-color: var(--zouma-dark);
}

/* Narrow ----------------------------------------------------------------- */

@media (max-width: 1100px) {
	.zouma-cslist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.zouma-cshero {
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--zouma-header-h) + 32px);
	}

	.zouma-cshero__photo {
		width: 100%;
		opacity: 0.4;
	}

	.zouma-cshero__photo::after {
		background: linear-gradient(to bottom, rgba(18, 18, 18, 0.55), var(--zouma-dark));
	}

	.zouma-cshero__dots {
		width: 100%;
	}

	.zouma-cshero__inner {
		padding-block: 3rem;
	}
}

@media (max-width: 640px) {
	.zouma-cslist__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}