/*
 * DF Samarbejdsmodeller — styles for the "Samarbejdsmodeller - modul" element.
 * Colours reference the "DataFacility" design-system CSS variables, with hex
 * fallbacks mirroring mock-styles.css.
 */

.df-samarb {
	--df-section-bg: var(--papir, #f5f4f1);
	--df-heading:    var(--petrol, #0f2e33);
	--df-sub:        var(--tekst-lys, #5c6e71);
	--df-marker:     var(--petrol, #0f2e33);
	--df-card-bg:    var(--white, #ffffff);
	--df-card-kant:  var(--kant, #eaeaea);
	--df-title:      var(--petrol, #0f2e33);
	--df-lead:       var(--orange, #f78e1e);
	--df-text:       var(--tekst-lys, #5c6e71);
	--df-rule:       var(--faq-linje, #dedcd6);
	--df-accent:     var(--orange, #f78e1e);
	--df-btn-text:   var(--petrol, #0f2e33);
	--df-radius:     var(--radius, 2px);

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

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

/* ── Farvetema: Blå (tonet flade, hvide kort) ───────────────── */
.df-samarb--blaa {
	--df-section-bg: var(--tonet, #e6eeed);
}

/* ── Farvetema: Grøn (petrol flade, mørke kort) ─────────────── */
.df-samarb--groen {
	--df-section-bg: var(--petrol, #0f2e33);
	--df-heading:    var(--creme, #eaf0ef);
	--df-sub:        var(--muted-lys, #adbdbe);
	--df-marker:     var(--creme, #eaf0ef);
	--df-card-bg:    var(--kort-moerk, #173a40);
	--df-card-kant:  var(--ikonflade, #1e4a50);
	--df-title:      var(--creme, #eaf0ef);
	--df-text:       var(--muted, #9db0b2);
	--df-rule:       var(--ikonflade, #1e4a50);
}

/* ── Hoved (overskrift) ─────────────────────────────────────── */
.df-samarb__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 720px;
	text-align: center;
}

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

.df-samarb__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-heading);
}

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

/* ── Gitter ─────────────────────────────────────────────────── */
/* Flexbox frem for grid, så en ufuldstændig sidste række centreres
   (overskydende kort, der ikke kan fylde rækken ud, samles på midten). */
.df-samarb__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

/* ── Kort ───────────────────────────────────────────────────── */
.df-samarb__card {
	flex: 0 1 calc((100% - (var(--df-samarb-cols, 3) - 1) * 24px) / var(--df-samarb-cols, 3));
	display: flex;
	flex-direction: column;
	background-color: var(--df-section-bg);
	border-radius: var(--df-radius);
	overflow: hidden;
}

.df-samarb__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--df-card-kant);
	border-bottom: 0;
	border-radius: 0 40% 0 0;
}

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

.df-samarb__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	padding: 26px;
	background-color: var(--df-card-bg);
	border: 1px solid var(--df-card-kant);
	border-top: 0;
}

.df-samarb__title {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--df-title);
}

.df-samarb__lead {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--df-lead);
}

.df-samarb__text {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 14px;
	line-height: 1.6;
	color: var(--df-text);
}

.df-samarb__rule {
	margin: 6px 0;
	border: 0;
	border-top: 1px solid var(--df-rule);
}

.df-samarb__listtitle {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: 14px;
	color: var(--df-title);
}

.df-samarb__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.df-samarb__listitem {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--df-text);
}

.df-samarb__check {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	background-color: var(--df-accent);
}

/* ── Knap ───────────────────────────────────────────────────── */
.df-samarb__btn {
	align-self: flex-start;
	margin-top: auto;
	padding: 13px 24px;
	background-color: var(--df-accent);
	color: var(--df-btn-text);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border-radius: var(--df-radius);
	text-decoration: none;
}

.df-samarb__btn:hover {
	background-color: var(--orange-hover, #e07e12);
}

/* ── Responsiv ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.df-samarb__card {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 640px) {
	.df-samarb {
		padding: 48px 5%;
	}
	.df-samarb__card {
		flex-basis: 100%;
	}
	/* Tilvalg: to kort ved siden af hinanden på mobil. */
	.df-samarb--mobil-2 .df-samarb__card {
		flex-basis: calc((100% - 24px) / 2);
	}
	.df-samarb__heading {
		font-size: 28px;
	}
}