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

.df-case {
	--df-case-accent:        var(--orange, #f78e1e);
	--df-case-accent-hover:  var(--orange-hover, #e07e12);
	/* Standardtema = mørk (petrol). Lys/lysegrøn overstyrer nedenfor. */
	--df-case-bg:            var(--petrol, #0f2e33);
	/* Indre boks (kortet oven på sektionsbaggrunden). Mørk = mørkt kort. */
	--df-case-boxbg:         var(--kort-moerk, #173a40);
	--df-case-heading:       var(--creme, #eaf0ef);
	--df-case-text:          var(--muted-lys, #c7d3d2);
	--df-case-branche-text:  var(--creme, #eaf0ef);
	--df-case-branche-line:  rgba(255, 255, 255);
	--df-case-mediabg:       var(--ikonflade, #1e4a50);
	--df-case-radius:        var(--radius, 2px);

	position: relative;
	padding: 88px 5%;
	background-color: var(--df-case-bg);
}

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

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

/* ── Layout ─────────────────────────────────────────────────── */
/* Indre boks: kortet der ligger oven på sektionsbaggrunden. Egen
 * baggrundsfarve + asymmetrisk padding (mere luft i venstre indholdskolonne)
 * jf. Figma "V1 · split" (pl 50 / pr 30 / py 30). */
.df-case__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	width: 100%;
	max-width: var(--container, 1600px);
	margin-inline: auto;
	padding: 30px 30px 30px 50px;
	background-color: var(--df-case-boxbg);
	border-radius: var(--df-case-radius);
}

.df-case__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

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

.df-case__badge {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: var(--df-case-radius);
	border: 1px solid transparent;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.df-case__badge--label {
	color: var(--petrol, #0f2e33);
	background-color: var(--df-case-accent);
	border-color: var(--df-case-accent);
}

.df-case__badge--branche {
	color: var(--df-case-branche-text);
	border-color: var(--df-case-branche-line);
}

/* ── Titel + tekst ──────────────────────────────────────────── */
.df-case__title {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--df-case-heading);
}

.df-case__text {
	margin: 0;
	max-width: 52ch;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--df-case-text);
}

/* WYSIWYG-resuméet kan indeholde flere afsnit; fjern kant-margin så blokken
 * flugter, men bevar afstand mellem afsnit. */
.df-case__text > :first-child {
	margin-top: 0;
}

.df-case__text > :last-child {
	margin-bottom: 0;
}

/* ── Knap ───────────────────────────────────────────────────── */
.df-case__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 15px 26px;
	border-radius: var(--df-case-radius);
	background-color: var(--df-case-accent);
	color: var(--petrol, #0f2e33);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.df-case__btn:hover {
	background-color: var(--df-case-accent-hover);
}

/* ── Billede ────────────────────────────────────────────────── */
.df-case__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 40% var(--df-case-radius) var(--df-case-radius) var(--df-case-radius);
	background-color: var(--df-case-mediabg);
}

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

/* ── Tom tilstand (ingen case valgt) ────────────────────────── */
.df-case__inner--empty {
	display: block;
	max-width: var(--container, 1600px);
	margin-inline: auto;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
	.df-case__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 30px;
	}
	.df-case__title{
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.df-case{
		padding: 60px 5% !important;
	}
	.df-case__inner {
		padding: 22px;
	}
	.df-case__title{
		font-size: 26px;
	}
}