/**
 * Case studies index.
 *
 * Follows the reference layout — image, bold title, summary, a ruled
 * "Continue reading" link — rendered in the DAStek palette and type rather
 * than the reference's own styling.
 */

/* -------------------------------------------------------------------------
 * Page hero
 *
 * Mirrors the banner on the rest of the site: a photo beneath a --dk-ink
 * overlay at 81%, with the transparent header sitting over it.
 * ---------------------------------------------------------------------- */

.dk-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: calc(var(--dk-header-height) + 5rem) 5rem;
	background-color: var(--dk-ink);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--dk-white);
}

.dk-page-hero::before {
	position: absolute;
	inset: 0;
	background: var(--dk-ink);
	opacity: 0.81;
	content: "";
}

.dk-page-hero .dk-container {
	position: relative;
	z-index: 1;
}

.dk-page-hero__inner {
	max-width: 48rem;
}

.dk-page-hero__title {
	margin-bottom: 0.5rem;
	color: var(--dk-white);
	font-size: var(--dk-h2);
}

.dk-page-hero__text {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
}

@media (min-width: 1024px) {
	.dk-page-hero {
		padding-block: calc(var(--dk-header-height) + 7rem) 7rem;
	}
}

/* -------------------------------------------------------------------------
 * Grid wrapper
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */

.dk-cases__grid {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 2.5rem 2rem;
	grid-template-columns: 1fr;
	list-style: none;
}

@media (min-width: 640px) {
	.dk-cases__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dk-cases__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Tile
 * ---------------------------------------------------------------------- */

.dk-case > article {
	display: flex;
	height: 100%;
	flex-direction: column;
}

/*
 * These are screenshots of wildly different shapes — a tall phone capture at
 * 0.46, a wide dashboard at 2.04 — so cropping to fill the box cut the logo
 * and headline off the wide ones. The whole image is shown instead, centred on
 * a neutral card, with the box keeping a fixed ratio so the grid stays even.
 */
.dk-case__media {
	display: block;
	box-sizing: border-box;
	aspect-ratio: 16 / 10;
	margin-bottom: 1.5rem;
	padding: 0.75rem;
	overflow: hidden;
	background: var(--dk-white);
	border: 1px solid var(--dk-border);
}

.dk-case__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform var(--dk-transition);
}

.dk-case:hover .dk-case__image {
	transform: scale(1.02);
}

.dk-case__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(135deg, #14261c, #1f3a2e);
}

.dk-case__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.dk-case__title {
	margin-bottom: 0.75rem;
	font-size: 20px;
	line-height: 1.35;
}

.dk-case__title a {
	color: var(--dk-ink);
	text-decoration: none;
}

.dk-case:hover .dk-case__title a,
.dk-case__title a:focus-visible {
	color: var(--dk-primary-dark);
}

.dk-case__text {
	flex: 1;
	margin-bottom: 1.5rem;
	color: var(--dk-body);
	font-size: 15px;
	line-height: 1.7;
}

/* The short rule before the label, as in the reference. */
.dk-case__more {
	display: inline-flex;
	margin-top: auto;
	align-items: center;
	gap: 0.6rem;
	color: var(--dk-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.dk-case__more-rule {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--dk-ink);
	transition: width var(--dk-transition), background-color var(--dk-transition);
}

.dk-case__more:hover,
.dk-case__more:focus-visible {
	color: var(--dk-primary-dark);
}

.dk-case__more:hover .dk-case__more-rule,
.dk-case__more:focus-visible .dk-case__more-rule {
	width: 34px;
	background: var(--dk-primary);
}

/* -------------------------------------------------------------------------
 * Misc
 * ---------------------------------------------------------------------- */

.dk-cases__empty {
	padding: 2.5rem;
	background: var(--dk-white);
	border: 1px solid var(--dk-border);
	text-align: center;
}

.dk-cases__body {
	margin-top: var(--dk-section-space);
}