.sj-kort {
	--sj-kort-green-dark: #013733;
	--sj-kort-green-mid: #2f5d58;
	--sj-kort-green-light: #a6b9b7;
	--sj-kort-green-bg: #eef3f2;
	--sj-kort-muted: #5b6b68;
	--sj-kort-focus: #f2b705;
	--sj-kort-radius: 12px;
	/* Overskriv fx med højden på en sticky header: .sj-kort { --sj-kort-sticky-top: 100px; } */
	--sj-kort-sticky-top: 1rem;

	display: grid;
	grid-template-columns: minmax(280px, 40%) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}
.sj-kort [hidden] { display: none !important; }

/* Kort */
.sj-kort__map {
	position: sticky;
	top: var(--sj-kort-sticky-top);
	padding: 1.5rem;
	border: 1px solid #dde7e5;
	border-radius: var(--sj-kort-radius);
	background: var(--sj-kort-green-bg);
	box-shadow: 0 1px 3px rgba(1, 55, 51, .08), 0 8px 24px rgba(1, 55, 51, .10);
}
.sj-kort .sj-kort__map-label {
	margin: 0 0 1rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sj-kort-green-mid);
}
.sj-kort__svg { display: block; width: 100%; height: auto; max-height: 80vh; }

.sj-kort .sj-kort__area {
	fill: var(--sj-kort-green-light);
	stroke: #fff;
	stroke-width: 1.5;
	cursor: pointer;
	outline: none;
	transition: fill .15s ease;
}
.sj-kort .sj-kort__area:hover,
.sj-kort .sj-kort__area:focus-visible { fill: var(--sj-kort-green-mid); }
.sj-kort .sj-kort__area.is-active { fill: var(--sj-kort-green-dark); }
.sj-kort .sj-kort__area:focus-visible { stroke: var(--sj-kort-focus); stroke-width: 4; }
.sj-kort .sj-kort__area.is-empty { fill: #d3dedc; cursor: default; }

/* Områdeknapper */
.sj-kort .sj-kort__areas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid #d3dedc;
	list-style: none;
}
.sj-kort .sj-kort__areas li { margin: 0; padding: 0; }
.sj-kort .sj-kort__areas li.is-extra:first-of-type { margin-left: .5rem; }
.sj-kort .sj-kort__areas button {
	margin: 0;
	padding: .35rem .8rem;
	border: 1px solid var(--sj-kort-green-light);
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var(--sj-kort-green-dark);
	font: inherit;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.sj-kort .sj-kort__areas button:hover { border-color: var(--sj-kort-green-dark); background: #fff; color: var(--sj-kort-green-dark); }
.sj-kort .sj-kort__areas button[aria-pressed="true"] { border-color: var(--sj-kort-green-dark); background: var(--sj-kort-green-dark); color: #fff; }
.sj-kort .sj-kort__areas button:focus-visible { outline: 3px solid var(--sj-kort-focus); outline-offset: 2px; }

/* Indhold */
.sj-kort__content { min-width: 0; }

.sj-kort__intro { padding: .5rem 0 .5rem 1.5rem; border-left: 4px solid var(--sj-kort-green-dark); }
.sj-kort .sj-kort__intro h2 { margin-top: 0; color: var(--sj-kort-green-dark); }
.sj-kort .sj-kort__cta {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.5rem;
	font-weight: 600;
	color: var(--sj-kort-green-dark);
}
.sj-kort__cta svg { flex: none; }

.sj-kort__panel { scroll-margin-top: calc(var(--sj-kort-sticky-top) + 1rem); }
.sj-kort .sj-kort__panel-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--sj-kort-green-bg); }
.sj-kort .sj-kort__panel-head h2 { margin: 0; font-size: 2rem; line-height: 1.2; color: var(--sj-kort-green-dark); outline: none; }
.sj-kort .sj-kort__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .5rem 0 0; margin-block-end: .9rem; color: var(--sj-kort-muted); }
.sj-kort .sj-kort__meta strong { color: #1c2624; }
.sj-kort .sj-kort__text { margin-top: .75rem; max-width: 70ch; }
.sj-kort .sj-kort__text p { margin: 0 0 .5rem; }
.sj-kort .sj-kort__text p:last-child { margin-bottom: 0; }
.sj-kort .sj-kort__text a { color: var(--sj-kort-green-dark); text-decoration: underline; }
.sj-kort .sj-kort__empty { color: var(--sj-kort-muted); }

@media (max-width: 899px) {
	.sj-kort { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.sj-kort__map { position: static; }
	.sj-kort__svg { max-height: 60vh; }
	.sj-kort__cta svg { transform: rotate(90deg); }
}