/*
 * Rettelser på kommercielle sider.
 *
 * frontend.css indeholder reglen
 *     .breadtext ul, ol { margin-top: -1.5em; ... }
 * hvor kommaet gør, at det bare "ol" rammer HELE sitet — også uden for
 * .breadtext. Derfor blev hver nummereret liste trukket 24 px op over sin egen
 * overskrift. app.css sætter kun margin-bottom og overskriver den ikke.
 */
.e-content ol,
.e-content ul {
	margin-top: 0;
}

/* Brede tabeller skal rulle i egen kasse, ikke skubbe siden vandret. */
.e-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Kreditlinjen skal ombryde på smalle skærme i stedet for at stikke ud. */
.entry-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: baseline;
	max-width: 100%;
}

.entry-meta-people {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: baseline;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Typografi og spaltebredde på kommercielle sider.
 *
 * Live kører ikke det redaktionelle tema, så dets layout.css/frontend.css
 * findes slet ikke dér. Hos os ligger de på siden for at klæde header og
 * footer, og fordi de er ulagdelte slår de hele app.css, som ligger i @layer.
 * Resultatet var 13 px brødtekst og H2 i samme størrelse som brødteksten.
 *
 * Værdierne herunder er aflæst direkte på live med getComputedStyle.
 * ───────────────────────────────────────────────────────────────────────── */

body.gr-commercial-page {
	font-size: 16px;
	line-height: 26px;
}

body.gr-commercial-page .e-content p,
body.gr-commercial-page .e-content li,
body.gr-commercial-page .e-content table,
body.gr-commercial-page .intro {
	font-size: 16px;
	line-height: 24px;
}

body.gr-commercial-page .e-content h2,
body.gr-commercial-page .e-content h3,
body.gr-commercial-page .e-content h4 {
	font-size: 18px;
	line-height: 22.5px;
	font-weight: 700;
	margin-bottom: 16px;
}

body.gr-commercial-page .gambling-title {
	font-size: 36px;
	line-height: 36px;
	font-weight: 700;
	margin: 0 0 24px;
}

body.gr-commercial-page .entry-meta {
	font-size: 14px;
}

body.gr-commercial-page .gambling-disclosure {
	font-size: 10px;
	line-height: 11px;
}

/*
 * Spaltebredde. Live: ydre container 1000 px centreret, artikel 640 px,
 * højrespalte 300 px, 20 px imellem. Hos os er spalten 916 px bred og
 * venstrestillet, så linjelængden bliver 43 % længere end originalens.
 */
@media (min-width: 1024px) {
	/*
	 * Live: ydre container 1000 px centreret, artikel 640 px, højrespalte
	 * 300 px, 20 px imellem. Flex-rækken skal ligge på <article>, som er
	 * spalternes forælder — ikke på #main, hvis eneste barn er artiklen.
	 *
	 * refresh.css sætter ".colwide { width: … !important }" og det
	 * redaktionelle layout er float-baseret, derfor !important og float:none.
	 */
	body.gr-commercial-page #main {
		max-width: 1000px;
		margin-inline: auto;
		padding-inline: 20px;
	}

	body.gr-commercial-page article.gambling {
		display: flex;
		gap: 20px;
		align-items: flex-start;
		width: 100%;
	}

	body.gr-commercial-page .colwide {
		width: 640px !important;
		flex: 0 0 640px;
		min-width: 0;
		margin: 0 !important;
		float: none !important;
	}

	body.gr-commercial-page .colthin {
		width: 300px !important;
		flex: 0 0 300px;
		margin: 0 !important;
		float: none !important;
	}
}