/* ==========================================================================
   Case studies
   ========================================================================== */

.cases {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

.cases__title {
	color: var(--brand-blue);
}

/* Stacked on phones, three across from 48em. */
.cases__grid {
	display: grid;
	gap: var(--space-7);
	margin-top: var(--space-7);
	padding: 0;
	list-style: none;
}

.cases__card {
	display: flex;
	flex-direction: column;
}

/* Fixed 3:2 box so the real image drops in without shifting the layout. */
.cases__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-md);
}

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

/* Placeholder: hatched grey so it cannot be mistaken for finished work. */
.cases__image:has(> p) {
	padding: var(--space-5);
	background-color: var(--surface-100);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--border-subtle) 0 2px,
		transparent 2px 14px
	);
	border: 1px solid var(--border-subtle);
}

.cases__image > p {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--ink-muted);
	text-align: center;
}

.cases__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--space-5);
}

/* Client and sector: a small label above the result. */
.cases__client {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-blue);
}

/* Middle dot between client and sector. Decorative, hidden from screen readers. */
.cases__sector::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin-inline-end: var(--space-2);
}

.cases__sector {
	color: var(--ink-muted);
}

/* The headline result is the dominant element in each card. */
.cases__result {
	margin-top: var(--space-2);
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	color: var(--brand-blue);
}

.cases__detail {
	margin-top: var(--space-3);
}

/* Pinned to the bottom so the three links line up. */
.cases__link {
	margin-top: auto;
	padding-top: var(--space-4);
	font-weight: var(--weight-bold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

@media (min-width: 48em) {
	.cases__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

@media (min-width: 64em) {
	.cases__grid {
		margin-top: var(--space-8);
	}
}