/*
 * Naturkartan (elementet st-naturkarta). Proportionen sätts på elementet
 * (aspect-ratio), kartan och reservbilden fyller den.
 */

.st-naturkarta {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--surface-subtle);
}

.st-naturkarta__karta {
	position: absolute;
	inset: 0;
}

.st-naturkarta__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Läget "öppnas i helskärm": kartbild med knapp, kartan i en dialog. */
.st-naturkarta--helskarm {
	height: 100%; /* fyller en sticky kolumn; annars gäller proportionen */
}

.st-naturkarta--helskarm .st-naturkarta__bild {
	position: absolute;
	inset: 0;
}

.st-naturkarta--helskarm::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.25), transparent 30%);
	pointer-events: none;
}

.st-naturkarta__oppna {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: var(--space-6);
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 5.2rem;
	padding: 0 var(--space-5);
	border: 0;
	background: var(--surface-brand);
	color: var(--text-on-dark);
	font: inherit;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.25);
	cursor: pointer;
}

/* Hela bilden är klickyta; knappen är det synliga målet. */
.st-naturkarta--helskarm.is-redo {
	cursor: zoom-in;
}

/* Ingen hover-färg: knappar mörknar inte (designsystemet). */

.st-naturkarta__oppna:focus-visible,
.st-naturkarta__stang:focus-visible {
	outline: 2px solid var(--action-primary);
	outline-offset: 2px;
}

.st-naturkarta__dialog {
	width: min(100% - 2 * var(--space-4), 140rem);
	max-width: none;
	height: min(100dvh - 2 * var(--space-4), 90rem);
	max-height: none;
	padding: 0;
	border: 0;
	background: var(--surface-subtle);
}

.st-naturkarta__dialog::backdrop {
	background: rgb(0 20 40 / 0.55);
}

.st-naturkarta__dialog-karta {
	width: 100%;
	height: 100%;
}

.st-naturkarta__stang {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 4.8rem;
	height: 4.8rem;
	border: 0;
	background: var(--surface-brand);
	color: var(--text-on-dark);
	font-size: 2.8rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

html:has(.st-naturkarta__dialog[open]) {
	overflow: hidden;
}