/*
 * DF Tekst-kolonner — styles for the "df-tekst-kolonner" custom Bricks element.
 * Fuld-bredde bånd med 2–4 tekst-bokse side om side; hver boks har sit eget
 * farvevalg (Hvid / Lysegrøn / Grøn). Links er altid orange. Farver refererer
 * designsystemets CSS-variabler med hex-fallbacks (jf. mock-styles.css).
 */

/* section.-selektoren hæver specificiteten over tema-stilens sektions-padding,
 * så venstre/højre-padding sikkert nulstilles (på alle breakpoints). */
section.df-tekstkolonner {
	--df-tk-gap:          20px;
	--df-tk-orange:       var(--orange, #f78e1e);
	--df-tk-orange-hover: var(--orange-hover, #e07e12);

	width: calc(100% - 40px);
	max-width: 100%;
	margin-inline: auto;
	padding: 0;
}

@media (max-width: 767px) {
	section.df-tekstkolonner {
		width: calc(100% - 10px);
	}
}

.df-tekstkolonner__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), 1fr);
	gap: var(--df-tk-gap);
	width: 100%;
	align-items: stretch;
}

/* ── Boks: baggrund + indre afstand ─────────────────────────── */
.df-tekstkolonner__box {
	/* Standard (Hvid): papir-flade, mørk tekst. */
	--df-tk-bg:      var(--papir, #f5f4f1);
	--df-tk-heading: var(--petrol, #0f2e33);
	--df-tk-text:    var(--petrol, #0f2e33);

	display: flex;
	flex-direction: column;
	gap: 15px;
	/* Vandret: 5% af HELE sektionen (ikke af den smalle boks), så det matcher
	 * df-grid's 5%. En boks er ~1/N af bredden, så 5% × antal kolonner ≈ 5% af
	 * sektionen. --cols nedarves fra griddet. Lodret: 5% af boksen. */
	padding: calc(5% * var(--cols, 2));
	background-color: var(--df-tk-bg);
	color: var(--df-tk-text);
}

/* ── Boksfarver (standard-farvevalg pr. boks) ───────────────── */
.df-tekstkolonner__box--lys {
	--df-tk-bg:      var(--papir, #f5f4f1);
	--df-tk-heading: var(--petrol, #0f2e33);
	--df-tk-text:    var(--petrol, #0f2e33);
}

.df-tekstkolonner__box--blaa {
	--df-tk-bg:      var(--tonet, #e6eeed);
	--df-tk-heading: var(--petrol, #0f2e33);
	--df-tk-text:    var(--petrol, #0f2e33);
}

.df-tekstkolonner__box--groen {
	--df-tk-bg:      var(--kort-moerk, #173a40);
	--df-tk-heading: var(--creme, #eaf0ef);
	--df-tk-text:    var(--papir, #f5f4f1);
}

/* ── Overlinje (altid orange) ───────────────────────────────── */
.df-tekstkolonner__eyebrow {
	margin: 0 0 2px;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.36px;
	color: var(--df-tk-orange);
}

/* ── WYSIWYG-indhold ────────────────────────────────────────── */
.df-tekstkolonner__content {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--df-tk-text);
}

.df-tekstkolonner__content > :first-child {
	margin-top: 0;
}

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

/* Overskrifter: samme størrelser/afstande som resten af sidens WYSIWYG-indhold
 * (jf. custom-CSS-mønsteret i bl.a. komponenten "Tekst-billede"). */
.df-tekstkolonner__content h2,
.df-tekstkolonner__content h3,
.df-tekstkolonner__content h4 {
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	color: var(--df-tk-heading);
	line-height: 1.2;
	margin: 40px 0 20px;
}

.df-tekstkolonner__content h2 {
	font-size: 36px;
}

.df-tekstkolonner__content h3,
.df-tekstkolonner__content h4 {
	font-size: 30px;
}

.df-tekstkolonner__content p {
	margin: 0 0 1em;
	color: var(--df-tk-text);
}

.df-tekstkolonner__content strong {
	color: inherit;
}

/* Liste: firkantede orange punkttegn — samme stil som resten af siden. */
.df-tekstkolonner__content ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.df-tekstkolonner__content ul li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.5;
}

.df-tekstkolonner__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em; /* justér til baseline */
	width: 0.5em;
	height: 0.5em;
	background: #f18b21; /* accentfarve */
}

.df-tekstkolonner__content ol {
	margin: 20px 0 0;
	padding-left: 1.25em;
}

@media (max-width: 991px) {
	.df-tekstkolonner__content h2 {
		font-size: 30px;
	}

	.df-tekstkolonner__content h3,
	.df-tekstkolonner__content h4 {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.df-tekstkolonner__content h2 {
		font-size: 26px;
	}

	.df-tekstkolonner__content h3,
	.df-tekstkolonner__content h4 {
		font-size: 22px;
	}
}

/* Links i brødteksten altid orange. */
.df-tekstkolonner__content a {
	color: var(--df-tk-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.df-tekstkolonner__content a:hover {
	color: var(--df-tk-orange-hover);
}

/* ── Boksens link (orange) ──────────────────────────────────── */
.df-tekstkolonner__link {
	align-self: flex-start;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--df-tk-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.df-tekstkolonner__link:hover {
	color: var(--df-tk-orange-hover);
}

/* ── Responsiv kolonne-foldning ─────────────────────────────── */
/* Skemaet pr. valgt kolonne-antal:
 *             ≥1201  ≤1200  ≤991   ≤767   ≤478
 *   2 kol.:     2      2      2      1      1
 *   3 kol.:     3      3      2      1      1
 *   4 kol.:     4      3      2      2      1
 */

/* Mellemtrin: 4 kolonner → 3, før de senere trin folder videre til 2. */
@media (max-width: 1200px) {
	.df-tekstkolonner--cols-4 .df-tekstkolonner__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet stående: 991px og derned. */
@media (max-width: 991px) {
	.df-tekstkolonner--cols-3 .df-tekstkolonner__grid,
	.df-tekstkolonner--cols-4 .df-tekstkolonner__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobil liggende: 767px og derned. */
@media (max-width: 767px) {
	.df-tekstkolonner--cols-2 .df-tekstkolonner__grid,
	.df-tekstkolonner--cols-3 .df-tekstkolonner__grid {
		grid-template-columns: 1fr;
	}

	.df-tekstkolonner__grid {
		gap: 5px;
	}

	.df-tekstkolonner__box {
		padding: 40px 5%;
	}
}

/* Mobil stående: 478px og derned. */
@media (max-width: 478px) {
	.df-tekstkolonner--cols-4 .df-tekstkolonner__grid {
		grid-template-columns: 1fr;
	}
}