/* ── Case Study Archive ───────────────────────────────── */

.section-archive-case-study {
	background-color: var(--color-bg-light-50);
	background-blend-mode: multiply;}

.section-archive-case-study > .container {
	padding-block: var(--size-v-pad-md) var(--size-v-pad-sm);
}

/* Header container: strip bottom padding when grid follows */
.section-archive-case-study > .container:has(+ .container) {
	padding-bottom: 0;
}

/* Grid container: strip top padding */
.section-archive-case-study > .container + .container {
	padding-top: 0;
}

/* Tighten grid row-gap to match design */
.cs-grid {
	row-gap: 5rem;
}

.section-archive-case-study .archive-case-study-cta {
	margin-top: var(--size-section-cta-mt);
}

/* ── Card ───────────────────────────────────────────────── */

.cs-card__inner {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Image: full width, 4:3 ratio */
.cs-card__img-wrap {
	overflow: hidden;
	border-radius: var(--radius-media);
	aspect-ratio: 4 / 3;
	background: var(--color-bg-light-50);
	border: 1px solid var(--color-border-light-100);
}

.cs-card__img {
	width: 100%;
	height: 100%;
}

.cs-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-reveal);
}

.cs-card__img--placeholder {
	width: 100%;
	height: 100%;
}

.cs-card__body {
	padding-block: var(--size-pad-2xs) 0;
}

.cs-card__desc {
	color: var(--color-text-sec-dark);
}

.cs-card__title {
	color: var(--color-text-pri-dark);
	margin: 0 0 0.75rem;
	padding-right: 2rem;
	transition: var(--transition-fast);
}


/* ── Metric tags ────────────────────────────────────── */

.cs-card__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--metric-tag-row-gap);
	margin-top: 0.75rem;
}

.cs-card__metric {
	display: inline-flex;
	align-items: baseline;
	gap: var(--metric-tag-gap);
	padding: var(--metric-tag-pad);
	border: 1px solid var(--color-border-light-100);
	border-radius: var(--radius-btn);
	font-size: var(--metric-tag-fs);
	line-height: 1.3;
}

.cs-card__metric-val {
	font-weight: var(--fw-semibold);
	color: var(--color-text-pri-dark);
}

.cs-card__metric-lbl {
	color: var(--color-text-sec-dark);
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 991.98px) {
	.cs-grid {
		row-gap: 3rem;
	}

	.cs-card__body {
		padding-block: var(--size-pad-xxs) 0;
	}

}

/* Hover — desktop only */
@media (hover: hover) {
	.cs-card__inner:hover .cs-card__img img {
		transform: scale(1.05);
	}

	.cs-card__inner:hover .cs-card__title {
		color: var(--color-text-sec-dark);
	}
}