/*
 * DF Grid — styles for the "Grids - moduler" custom Bricks element.
 * Colours reference the "DataFacility" design-system CSS variables emitted by
 * Bricks globally; hex fallbacks mirror mock-styles.css so the element also
 * renders correctly if the variables aren't present (e.g. isolated preview).
 */

.df-grid {
	--df-section-bg: var(--papir, #f5f4f1);
	--df-heading:    var(--petrol, #0f2e33);
	--df-marker:     var(--petrol, #0f2e33);
	--df-card-bg:    var(--tonet, #e6eeed);
	--df-card-hover: #d9e3e1;
	--df-title:      var(--petrol, #0f2e33);
	--df-text:       var(--tekst-lys, #5c6e71);
	--df-plate-bg:   var(--ikonflade, #1e4a50);
	--df-icon:       var(--creme, #eaf0ef);
	--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-grid__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	width: 100%;
	max-width: var(--container, 1600px);
	margin-inline: auto;
}

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

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

/* ── Heading ────────────────────────────────────────────────── */
.df-grid__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

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

.df-grid__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-grid__subheading {
	margin: 0;
	max-width: 720px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--df-text);
}

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

/* ── Card (shared) ──────────────────────────────────────────── */
.df-grid__card {
	display: flex;
	flex-direction: column;
	background-color: var(--df-card-bg);
	overflow: hidden;
}

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

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

.df-grid__link {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.46;
	color: var(--df-accent);
	text-decoration: underline;
}

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

/* ── Kort-stil: ikon-boks ───────────────────────────────────── */
.df-grid--ikon .df-grid__card {
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 28px;
	text-align: center;
}

.df-grid__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background-color: var(--df-plate-bg);
	color: var(--df-icon);
}

/* ── Ikon-boks: baggrundsfarve pr. kort (temaets 3 farver + orange) ──
 * color sættes med, så ikon/SVG (currentColor) får kontrast mod baggrunden. */
.df-grid__plate--groen {
	background-color: var(--ikonflade, #1e4a50);
	color: var(--creme, #eaf0ef);
}

.df-grid__plate--lysegroen {
	background-color: var(--tonet, #e6eeed);
	color: var(--petrol, #0f2e33);
}

.df-grid__plate--hvid {
	background-color: var(--white, #ffffff);
	color: var(--petrol, #0f2e33);
}

.df-grid__plate--orange {
	background-color: var(--orange, #f78e1e);
	color: var(--white, #ffffff);
}

.df-grid__plate svg,
.df-grid__plate i,
.df-grid__plate img {
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 1;
	color: inherit;
}

.df-grid--ikon .df-grid__title {
	font-size: 19px;
	line-height: 1.2;
}

/* ── Kort-stil: firkantet tekstboks ─────────────────────────── */
.df-grid--tekst .df-grid__card {
	align-items: flex-start;
	justify-content: flex-end;
	gap: 12px;
	padding: 26px;
	aspect-ratio: 1;
}

.df-grid__titlerow {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

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

.df-grid--tekst .df-grid__title {
	font-size: 18px;
	line-height: 1.16;
}

/* ── Kort-stil: linkboks ────────────────────────────────────── */
.df-grid--link .df-grid__card {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px;
}

.df-grid--link .df-grid__title {
	font-size: 18px;
	line-height: 1.16;
}

/* "Se mere"-knap i Fleksibel boks — samme mønster som de øvrige gittermoduler. */
.df-grid__btn {
	align-self: flex-start;
	margin-top: 4px;
	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;
	transition: background-color 0.15s ease;
}

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

/* Valgfri knap under gitteret: centreret på egen linje. Bruger .df-grid__btn,
 * så den ser ud som gitterets øvrige knapper. */
.df-grid__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

.df-grid__cta .df-grid__btn {
	align-self: center;
	margin-top: 0;
	padding-top: 17px;
	padding-bottom: 17px;
}

/* Kun klikbare bokse (dvs. med link) får hover-effekt. */
a.df-grid__card--link,
a.df-grid__card--linked {
	text-decoration: none;
	transition: background-color 0.15s ease;
}

a.df-grid__card--link:hover,
a.df-grid__card--linked:hover {
	background-color: var(--df-card-hover);
}

/* ── Kort-stil: billede-boks ────────────────────────────────── */
.df-grid--billede .df-grid__card--img {
	min-height: 272px;
	padding: 0;
}

.df-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 272px;
	object-fit: cover;
}

.df-grid__img--placeholder {
	background-color: var(--tonet, #e6eeed);
}

.df-grid--groen .df-grid__img--placeholder {
	background-color: var(--ikonflade, #1e4a50);
}

/* ── Responsive ─────────────────────────────────────────────── */
/* Tablet: 991px og derned. */
@media (max-width: 991px) {
	.df-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Mobil = 2 kolonner → tablet altid én kolonne mere (3). */
	.df-grid--mobil-2 .df-grid__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobil: 767px og derned. */
@media (max-width: 767px) {
	.df-grid .df-grid__head {
		padding: 0 calc(5% - 5px);
	}
	.df-grid {
		padding: 60px 5px 5px 5px !important;
	}
	.df-grid__grid {
		grid-template-columns: 1fr;
		gap: 5px;
	}
	/* Tilvalg: to kort ved siden af hinanden på mobil. */
	.df-grid--mobil-2 .df-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.df-grid.df-grid--kortstil-link .df-grid__card, .df-grid.df-grid--kortstil-tekst .df-grid__card{
		padding: 20px 15px;
	}

	.df-grid.df-grid--kortstil-ikon .df-grid__card{
		padding: 30px 20px;
	}

	.df-grid.df-grid--kortstil-link .df-grid__title {
		font-size: 15px;
	}

	.df-grid__heading {
		font-size: 28px;
	}
}