/* Midrex — plant map hotspots + cards. */

/* Fills its wrapper and derives its height from the aspect ratio. Whether it
   is boxed or edge-to-edge is the WRAPPER's call — set that container to 100vw
   for full-bleed, or leave it boxed. Nothing here to change either way. */
.mdx-plantmap {
	position: relative;
	display: block;
	width: 100%;
}

/* Hotspots are positioned in % of this box, which is exactly the image box —
   so they stay pinned to the artwork at every viewport width. */
.mdx-plantmap__stage {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
}

.mdx-plantmap__img {
	display: block;
	width: 100%;
	height: auto;
	/* Reserves the right height before the image loads (no layout shift);
	   once loaded the intrinsic ratio drives it. */
	aspect-ratio: var(--mdx-pm-ratio, 1440 / 940);
	object-fit: cover;
}

/* ------------------------------------------------------------------- dots */

.mdx-plantmap__dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #05D16E;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 2px 10px rgba(0, 31, 62, .45);
	transition: transform .2s ease, background .2s ease;
	z-index: 2;
}

.mdx-plantmap__dot:hover,
.mdx-plantmap__dot:focus-visible {
	transform: translate(-50%, -50%) scale(1.18);
	outline: none;
}

.mdx-plantmap__dot.is-active {
	background: #fff;
	border-color: #05D16E;
}

/* Attention pulse — purely decorative. */
.mdx-plantmap__pulse {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid #05D16E;
	animation: mdx-pm-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes mdx-pm-pulse {
	0%   { transform: scale(1);   opacity: .85; }
	70%  { transform: scale(2.3); opacity: 0; }
	100% { transform: scale(2.3); opacity: 0; }
}

.mdx-plantmap__dot.is-active .mdx-plantmap__pulse {
	animation: none;
	opacity: 0;
}

/* ------------------------------------------------------------------- card */

.mdx-plantmap__card {
	position: absolute;
	z-index: 5;
	width: 378px;
	max-width: min(378px, 88%);
	background: #1D4F91;
	border-radius: 10px;
	overflow: visible;
	line-height: normal;
	box-shadow: 0 22px 54px rgba(0, 20, 45, .42);
	animation: mdx-pm-in .28s cubic-bezier(.2, .7, .3, 1) both;
}

.mdx-plantmap__card[hidden] {
	display: none;
}

@keyframes mdx-pm-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mdx-plantmap__card { animation-duration: .01ms; }
	.mdx-plantmap__pulse { animation: none; }
}

/* The pointer back to the dot. Sits on whichever side the card opened from,
   and is nudged vertically by JS so it lines up with the dot. Desktop only —
   on phone the card is a centred modal with nothing to point at. */
.mdx-plantmap__tail {
	position: absolute;
	inset-block-start: 40px;
	width: 0;
	height: 0;
	border-block-start: 16px solid transparent;
	border-block-end: 16px solid transparent;
}

.mdx-plantmap__card--right .mdx-plantmap__tail {
	inset-inline-start: -14px;
	border-inline-end: 15px solid #1D4F91;
}

.mdx-plantmap__card--left .mdx-plantmap__tail {
	inset-inline-end: -14px;
	border-inline-start: 15px solid #1D4F91;
}

.mdx-plantmap__close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: #fff;
	background: rgba(0, 27, 70, .55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease;
}

.mdx-plantmap__close:hover {
	background: rgba(0, 27, 70, .85);
}

.mdx-plantmap__close svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ photo */

/* Fixed 378:225 header (the design's proportions) with the photo covering it
   edge to edge — no letterboxing, whatever the source aspect ratio. */
.mdx-plantmap__figure {
	position: relative;
	aspect-ratio: 378 / 225;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	background: #0E3E75;
}

.mdx-plantmap__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.mdx-plantmap__bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 34px 16px 12px;
	background: linear-gradient(to bottom, rgba(0, 27, 70, 0) 0%, rgba(0, 27, 70, .88) 72%);
}

.mdx-plantmap__label {
	flex: 1 1 auto;
	min-width: 0;
	font: 400 14px/1.3 "Open Sans", sans-serif;
	color: #fff;
	overflow-wrap: anywhere;
}

.mdx-plantmap__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #05D16E;
	background: none;
	border: 0;
	cursor: pointer;
	transition: transform .2s ease, color .2s ease;
}

.mdx-plantmap__nav:hover {
	color: #24F08D;
	transform: scale(1.15);
}

.mdx-plantmap__nav svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Next sits at the far end of the bar. */
.mdx-plantmap__nav[data-dir="1"] {
	margin-inline-start: auto;
}

/* ------------------------------------------------------------------- copy */

.mdx-plantmap__body {
	padding: 22px 26px 26px;
	color: #fff;
}

/* Two classes (0,2,0) so these beat the Kit's `.elementor-kit-N h3` (0,1,1),
   which would otherwise force 30px on the title. No !important needed. */
.mdx-plantmap .mdx-plantmap__title {
	margin: 0 0 12px;
	font-family: "Titillium Web", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-transform: uppercase;
}

.mdx-plantmap .mdx-plantmap__text,
.mdx-plantmap .mdx-plantmap__text p,
.mdx-plantmap .mdx-plantmap__text li {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
	overflow-wrap: anywhere;
}

.mdx-plantmap .mdx-plantmap__text p {
	margin: 0 0 12px;
}

.mdx-plantmap .mdx-plantmap__text p:last-child {
	margin-bottom: 0;
}

.mdx-plantmap .mdx-plantmap__text ul {
	margin: 0;
	padding-inline-start: 18px;
}

.mdx-plantmap .mdx-plantmap__text li {
	margin: 0 0 8px;
}

.mdx-plantmap__error {
	padding: 16px;
	font: 14px/1.5 system-ui, sans-serif;
	color: #fff;
	background: #7a2020;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	/* A plain centred modal. The TOP is fixed so the arrows stay in the same
	   place as you cycle — only the bottom edge moves with the copy length.
	   JS clears its inline positioning at this width so these rules apply. */
	.mdx-plantmap__card {
		inset-inline: 0;
		inset-block-start: 24px;
		margin-inline: auto;
		width: 88%;
		max-width: 88%;
	}

	.mdx-plantmap__body {
		padding: 18px 20px 20px;
	}

	.mdx-plantmap__tail {
		display: none;
	}

	.mdx-plantmap .mdx-plantmap__title {
		font-size: 18px;
	}

	.mdx-plantmap .mdx-plantmap__text,
	.mdx-plantmap .mdx-plantmap__text p,
	.mdx-plantmap .mdx-plantmap__text li {
		font-size: 12px;
	}
}