/*
 * DF Cases (gitter) — styles for the "Grid" module ("Cases - fremhævet og
 * grid"). Colours reference the "DataFacility" design-system CSS variables;
 * hex fallbacks mirror mock-styles.css for isolated preview.
 */

.df-cases {
	--df-cases-accent:       var(--orange, #f78e1e);
	--df-cases-accent-hover: var(--orange-hover, #e07e12);
	/* Standardtema = mørk (petrol). Lys/lysegrøn overstyrer nedenfor. */
	--df-cases-bg:           var(--petrol, #0f2e33);
	--df-cases-heading:      var(--creme, #eaf0ef);
	--df-cases-sub:          var(--muted, #9db0b2);
	--df-cases-marker:       var(--creme, #eaf0ef);
	--df-cases-card-bg:      var(--kort-moerk, #173a40);
	--df-cases-title:        var(--creme, #eaf0ef);
	--df-cases-text:         var(--muted, #9db0b2);
	--df-cases-branche-text: var(--creme, #eaf0ef);
	--df-cases-branche-line: rgba(255, 255, 255, 0.25);
	--df-cases-mediabg:      var(--ikonflade, #1e4a50);
	--df-cases-radius:       var(--radius, 2px);

	padding: 72px 5%;
	background-color: var(--df-cases-bg);
}

/* ── Farvetema: Lys (papir, hvide kort) ─────────────────────── */
.df-cases--lys {
	--df-cases-bg:           var(--papir, #f5f4f1);
	--df-cases-heading:      var(--petrol, #0f2e33);
	--df-cases-sub:          var(--tekst-lys, #5c6e71);
	--df-cases-marker:       var(--petrol, #0f2e33);
	--df-cases-card-bg:      var(--white, #ffffff);
	--df-cases-title:        var(--petrol, #0f2e33);
	--df-cases-text:         var(--tekst-lys, #5c6e71);
	--df-cases-branche-text: var(--petrol, #0f2e33);
	--df-cases-branche-line: var(--kant, #eaeaea);
	--df-cases-mediabg:      #e3e8e9;
}

/* ── Farvetema: Lysegrøn (tonet, hvide kort) ────────────────── */
.df-cases--lysegroen {
	--df-cases-bg:           var(--tonet, #e6eeed);
	--df-cases-heading:      var(--petrol, #0f2e33);
	--df-cases-sub:          var(--tekst-lys, #5c6e71);
	--df-cases-marker:       var(--petrol, #0f2e33);
	--df-cases-card-bg:      var(--white, #ffffff);
	--df-cases-title:        var(--petrol, #0f2e33);
	--df-cases-text:         var(--tekst-lys, #5c6e71);
	--df-cases-branche-text: var(--petrol, #0f2e33);
	--df-cases-branche-line: rgba(15, 46, 51, 0.18);
	--df-cases-mediabg:      #d7e3e1;
}

/* ── Indre wrapper ──────────────────────────────────────────── */
.df-cases__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	width: 100%;
	max-width: var(--container, 1600px);
	margin-inline: auto;
}

/* ── Head ───────────────────────────────────────────────────── */
.df-cases__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 760px;
}

.df-cases__marker {
	display: block;
	color: var(--df-cases-marker);
}

.df-cases__heading {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
	letter-spacing: -0.936px;
	color: var(--df-cases-heading);
}

.df-cases__sub {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--df-cases-sub);
}

/* ── Grid ───────────────────────────────────────────────────── */
.df-cases__grid {
	display: grid;
	grid-template-columns: repeat(var(--df-cases-cols, 3), 1fr);
	gap: 30px;
	width: 100%;
}

/*
 * Færre kort end kolonner: centrér rækken, men bevar kortbredden som ved et
 * fuldt gitter. Kolonnebredden regnes ud fra det valgte kolonneantal, og de
 * faktiske kort (--df-cases-count) placeres centreret.
 */
.df-cases__grid--center {
	grid-template-columns: repeat(
		var(--df-cases-count, 1),
		calc((100% - (var(--df-cases-cols, 3) - 1) * 30px) / var(--df-cases-cols, 3))
	);
	justify-content: center;
}

/* ── Kort ───────────────────────────────────────────────────── */
.df-cases__card {
	display: flex;
	flex-direction: column;
	background-color: var(--df-cases-card-bg);
	border-radius: 0 40% 0 0;
	overflow: hidden;
}

.df-cases__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--df-cases-mediabg);
}

.df-cases__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.df-cases__img--placeholder {
	background-color: var(--df-cases-mediabg);
}

.df-cases__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px;
}

/* ── Badges ─────────────────────────────────────────────────── */
.df-cases__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.df-cases__badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: var(--df-cases-radius);
	border: 1px solid transparent;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
}

.df-cases__badge--label {
	color: var(--petrol);
	background-color: var(--df-cases-accent);
	border-color: var(--df-cases-accent);
}

.df-cases__badge--branche {
	color: var(--petrol);
	border-color: var(--petrol);
}

/* Mørkt farvetema: branche-tag i hvid (tekst + kant) for kontrast. */
.df-cases--moerk .df-cases__badge--branche {
	color: #ffffff;
	border-color: #ffffff;
}

/* ── Titel + tekst ──────────────────────────────────────────── */
.df-cases__title {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var(--df-cases-title);
}

.df-cases__title a {
	color: inherit;
	text-decoration: none;
}

.df-cases__title a:hover {
	color: var(--df-cases-accent);
}

.df-cases__text {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--df-cases-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.df-cases__link {
	margin-top: 4px;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	color: var(--df-cases-accent);
	text-decoration: underline;
}

/* ── Tom tilstand ───────────────────────────────────────────── */
.df-cases__empty {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	color: var(--df-cases-sub);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.df-cases__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.df-cases__grid--center {
		grid-template-columns: repeat(
			var(--df-cases-count, 1),
			calc((100% - 30px) / 2)
		);
	}
}

@media (max-width: 640px) {
	.df-cases {
		padding: 48px 5%;
	}
	.df-cases__grid {
		grid-template-columns: 1fr;
	}
	/* Tilvalg: to kort ved siden af hinanden på mobil. */
	.df-cases--mobil-2 .df-cases__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.df-cases__heading {
		font-size: 28px;
	}
}