/* ======================================================================
   page-section.image-map
   ====================================================================== */


/* --- Image container --- */

.image-map .image-wrap {
	position: relative;
}

.image-map .image-wrap > img {
	display: block;
	width: 100%;
	height: auto;
}


/* --- Visual crop (crop_top / crop_bottom fields) ---
   .image-wrap keeps its full size, so the hotspots' percentage positions
   stay valid. Negative margins pull the hidden strips out of the layout and
   clip-path hides them. Only the <img> is clipped, so the pulse ring and the
   popovers can still reach past the edge.
   --crop-* are % of image height; margins in % resolve against width, hence
   the --img-ratio (height / width) factor. */

.image-map .image-container {
	display: flow-root;	/* keep the negative margins inside this box */
}

.image-map .image-wrap.has-crop {
	margin-top: calc(var(--crop-top, 0%) * var(--img-ratio, 1) * -1);
	margin-bottom: calc(var(--crop-bottom, 0%) * var(--img-ratio, 1) * -1);
	pointer-events: none;	/* the hidden strip overlaps neighbouring content */
}

.image-map .image-wrap.has-crop > * {
	pointer-events: auto;
}

.image-map .image-wrap.has-crop > img {
	clip-path: inset(var(--crop-top, 0%) 0 var(--crop-bottom, 0%) 0);
}


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

.image-map .hotspot {
	position: absolute;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}

.image-map .hotspot-dot {
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	border-radius: 50%;
	background: var(--palette-gray-mid);
	transition: transform 0.2s, background-color 0.2s;
}

.image-map .hotspot:hover .hotspot-dot,
.image-map .hotspot:focus-visible .hotspot-dot {
	transform: scale(1.3);
}

.image-map .hotspot[aria-expanded="true"] .hotspot-dot {
	background: var(--palette-rose);
}

.image-map .hotspot:focus-visible {
	outline: 2px solid var(--palette-rose);
	outline-offset: 2px;
	border-radius: 50%;
}

/* Pulse animation on active dots */
.image-map .hotspot-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--palette-rose);
	opacity: 0;
	animation: none;
	pointer-events: none;
}

.image-map .hotspot[aria-expanded="true"] .hotspot-dot::after {
	animation: hotspot-pulse 2.5s ease-out infinite;
}

@keyframes hotspot-pulse {
	0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.5); }
}


/* --- Hotspot link --- */

.image-map .hotspot-link {
	display: inline-block;
	margin-top: 0.5em;
	font-weight: var(--font-weight-semibold);
	color: var(--ctx-accent);
	text-decoration: none;
}

.image-map .hotspot-link:hover {
	text-decoration: underline;
}


/* ======================================================================
   Mode: Panel (Accordion)
   ====================================================================== */

.image-map.mode-panel .panel-container {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.image-map.mode-panel .panel-default {
	padding: 0 0 var(--padding-card);
	color: var(--ctx-fg-muted);
}

.image-map.mode-panel .panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}


/* --- Accordion header --- */

/* Items are separated by a small gap of page background, no borders.
   Explicit here rather than relying on the theme's global li margin. */
.image-map.mode-panel .panel-item {
	margin: 0;
}

.image-map.mode-panel .panel-item + .panel-item {
	margin-top: 4px;
}

/* Whole active item is rose, with white text throughout */
.image-map.mode-panel .panel-item.is-active {
	--ctx-fg:         var(--palette-white);
	--ctx-fg-muted:   var(--palette-white);
	--ctx-fg-heading: var(--palette-white);
	--ctx-accent:     var(--palette-white);
	background: var(--palette-rose);
	color: var(--palette-white);
}

.image-map.mode-panel .panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	padding: 0.5em var(--padding-card);
	border: none;
	background: var(--palette-gray-mid);
	color: var(--palette-white);
	font: inherit;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s;
}

.image-map.mode-panel .panel-header:hover {
	background: color-mix(in srgb, var(--palette-gray-mid) 85%, black);
}

.image-map.mode-panel .panel-header:focus-visible {
	outline: 2px solid var(--palette-white);
	outline-offset: -4px;
}

.image-map.mode-panel .panel-item.is-active .panel-header {
	background: var(--palette-rose);
}


/* --- Chevron icon --- */

.image-map.mode-panel .panel-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.image-map.mode-panel .panel-icon::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.image-map.mode-panel .panel-item.is-active .panel-icon::after {
	transform: rotate(-135deg);
}


/* --- Accordion body (smooth expand/collapse) --- */

.js .image-map.mode-panel .panel-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.js .image-map.mode-panel .panel-item.is-active .panel-body {
	grid-template-rows: 1fr;
}

.image-map.mode-panel .panel-body-inner {
	overflow: hidden;
	padding: 0 var(--padding-card);
}

.image-map.mode-panel .panel-item.is-active .panel-body-inner {
	padding-bottom: 1em;
}

.image-map.mode-panel .panel-body-inner .content {
	margin: 0;
}


/* ======================================================================
   Mode: Popover
   ====================================================================== */

.image-map .hotspot-popover {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, 0);
	margin-top: 24px;
	width: max-content;
	max-width: 280px;
}

.js .image-map.mode-popover .hotspot-popover {
	display: none;
}

.js .image-map.mode-popover .hotspot-popover.is-active {
	display: block;
}

.image-map .popover-content {
	background: var(--ctx-surface);
	border-radius: var(--border-radius);
	padding: var(--padding-card);
	box-shadow: var(--box-shadow);
	animation: panel-fade-in 0.2s ease;
}

.image-map .popover-content h4 {
	margin-top: 0;
}


/* ======================================================================
   Mode: Labels — all popovers visible, no interaction needed
   ====================================================================== */

.image-map.mode-labels .hotspot-popover {
	display: block;
}

.image-map.mode-labels .hotspot {
	pointer-events: none;
}


/* ======================================================================
   Responsive — panel mode grid
   ====================================================================== */

@media screen and (min-width: 768px) {

	/* Same 12-column grid as standard_content, so 66/33 lines up with
	   the other layouts ("2fr 1fr" splits the gap differently) */
	.image-map.mode-panel .inner-wrap {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--gap-columns);
		align-items: start;
	}

	.image-map.mode-panel.cols_66-33 .image-container { grid-column: span 8; }
	.image-map.mode-panel.cols_66-33 .panel-container { grid-column: span 4; }

	.image-map.mode-panel.cols_50-50 .image-container { grid-column: span 6; }
	.image-map.mode-panel.cols_50-50 .panel-container { grid-column: span 6; }

	.image-map.mode-panel.cols_33-66 .image-container { grid-column: span 4; }
	.image-map.mode-panel.cols_33-66 .panel-container { grid-column: span 8; }

}


/* ======================================================================
   Responsive — mobile: collapse popovers, stack panel
   ====================================================================== */

@media screen and (max-width: 767px) {

	.image-map.mode-panel .panel-container {
		margin-top: var(--padding-content);
	}

	/* On mobile, show popover below the image area instead of floating */
	.image-map.mode-popover .hotspot-popover,
	.image-map.mode-labels .hotspot-popover {
		position: relative;
		left: auto !important;
		top: auto !important;
		transform: none;
		margin-top: 0;
		max-width: 100%;
		width: 100%;
	}

	.image-map.mode-popover .image-wrap,
	.image-map.mode-labels .image-wrap {
		margin-bottom: var(--padding-content);
	}

	/* Popovers flow below the image here, so a bottom crop has to close
	   the gap between image and popovers instead of below the wrap */
	.image-map.mode-popover .image-wrap.has-crop > img,
	.image-map.mode-labels .image-wrap.has-crop > img {
		margin-bottom: calc(var(--crop-bottom, 0%) * var(--img-ratio, 1) * -1);
	}

}