/* Building Availability Map — Frontend styles (v3)
 *
 * ---------------------------------------------------------------------------
 * LAYOUT
 * ---------------------------------------------------------------------------
 * Two columns only:
 *   Column 1 — the building image / SVG map      (.bam2-col-map)
 *   Column 2 — the floor / suite details panel   (.bam2-col-details)
 *
 * The width split and the image side (left / right) are set in the admin
 * (Building Settings / Map Settings) and pushed in as an inline
 * `grid-template-columns` on `.bam2-grid` plus `data-image-position`.
 * The suite gallery (`.bam2-gallery`) slides open full-width *below* the grid.
 *
 * ---------------------------------------------------------------------------
 * THEMING / OVERRIDE GUIDE
 * ---------------------------------------------------------------------------
 * The plugin puts NO background/border/padding on the columns — style them
 * with your own classes (assigned in the settings screen, or via the
 * image_class / info_class shortcode attributes). Muted text uses
 * `color-mix(in srgb, currentColor X%, transparent)` so it adapts to whatever
 * text color your column class sets.
 *
 * Custom properties you can set on your own wrapper/column class:
 *   --bam2-row-active-color   Hover / active accent (settable in the admin too)
 *   --bam2-accent             Primary accent (buttons, focus ring)
 *   --bam2-accent-dark        Accent hover / darker shade
 *   --bam2-default-opacity    Fallback resting polygon opacity (the per-region
 *                            value from the settings wins; this is the default)
 *   --bam2-hover-opacity      Fallback polygon hover / active opacity (the
 *                            per-region value from the settings wins)
 *   --bam2-status-available-bg / -color   "Available" pill
 *   --bam2-status-leased-bg    / -color   "Leased" pill
 *   --bam2-status-reserved-bg  / -color   "Reserved" pill
 * ---------------------------------------------------------------------------
 */

.bam2-map {
	--bam2-text: #1a2333;
	--bam2-muted: #5b6577;
	--bam2-border: #e3e8f0;
	--bam2-bg: #ffffff;
	--bam2-bg-soft: #f7f9fc;
	--bam2-accent: #A1D6C3;
	--bam2-accent-dark: #0b3d6f;
	--bam2-radius: 12px;
	--bam2-download: #85A5B5;
	--bam2-default-opacity: 0.7;
	--bam2-hover-opacity: 0.7;
	--bam2-gap: 28px;

	color: var(--bam2-text);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

.bam2-map *,
.bam2-map *::before,
.bam2-map *::after {
	box-sizing: border-box;
}

/* ---------- 2-column grid (desktop) ---------- */
.bam2-grid {
	display: grid;
	/* Fallback ratio; the shortcode sets the real ratio inline. */
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: var(--bam2-gap);
	align-items: start;
}

/* Image on the right: the shortcode emits the columns as `info image`, so we
   just re-order the flow items to match. */
.bam2-grid[data-image-position="right"] .bam2-col-map {
	order: 2;
}
.bam2-grid[data-image-position="right"] .bam2-col-details {
	order: 1;
}

.bam2-col {
	min-width: 0;
}

/* ---------- Column 1: map ---------- */
.bam2-map-stage {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

.bam2-map-stage img,
.bam2-map-svg image {
	image-rendering: auto;
}

.bam2-map-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	shape-rendering: geometricPrecision;
}

.bam2-map-svg polygon {
	shape-rendering: geometricPrecision;
}

/* Each region is a <g class="bam2-region"> with two stacked polygons: the
   default / resting fill and the hover / active fill. On hover, focus, or
   selection the resting fill fades fully to 0 and the hover fill takes over at
   its configured opacity, so the resting color never shows through. Per-region
   colors are set as `fill` on each polygon; per-region opacities arrive as
   `--bam2-default-opacity` / `--bam2-hover-opacity` on the <g>. */
.bam2-region {
	cursor: pointer;
	outline: none;
}

.bam2-polygon {
	transition: opacity 0.3s ease;
}

.bam2-polygon-default {
	opacity: var(--bam2-default-opacity, 0.7);
}

.bam2-polygon-hover {
	opacity: 0;
}

.bam2-region:hover .bam2-polygon-default,
.bam2-region:focus-visible .bam2-polygon-default,
.bam2-region.is-hover .bam2-polygon-default,
.bam2-region.is-active .bam2-polygon-default {
	opacity: 0;
}

.bam2-region:hover .bam2-polygon-hover,
.bam2-region:focus-visible .bam2-polygon-hover,
.bam2-region.is-hover .bam2-polygon-hover,
.bam2-region.is-active .bam2-polygon-hover {
	opacity: var(--bam2-hover-opacity, 0.7);
}

.bam2-region:focus-visible .bam2-polygon-hover {
	stroke: #ffffff;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

/* ---------- Column 2: details ---------- */
.bam2-details-placeholder {
	text-align: center;
	padding: 40px 16px;
	color: color-mix(in srgb, currentColor 65%, transparent);
}

.bam2-details-placeholder h3 {
	margin: 0 0 8px;
	color: inherit;
	font-size: 18px;
}

.bam2-details-content[hidden] {
	display: none;
}

.bam2-details-title,
.bam2-details-suite-line, .bam2-details-floor {
	margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.25;
    color: #002458;
    font-family: Koulen;
}

.bam2-details-size {
	display: inline;
	margin: 0;
	color: #002458;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 22px;
	font-family: var(--bam2-heading-font, inherit);
}

/* Parent-floor label shown under a suite's name. */
.bam2-details-floor {
	/*display: inline-block;
	margin: 0 0 14px;
	font-size: 22px;
	color: #19365d;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	background: none;
	padding: 5px 0;
	text-align: center;
	font-family: var(--bam2-heading-font, inherit);*/
}

.bam2-details-status {
	display: inline-block;
	margin: 0 0 14px;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bam2-status-available { background: var(--bam2-status-available-bg, #e6f4ec); color: var(--bam2-status-available-color, #1e8e4e); }
.bam2-status-leased    { background: var(--bam2-status-leased-bg, #e8eef7); color: var(--bam2-status-leased-color, #1d70b8); }
.bam2-status-reserved  { background: var(--bam2-status-reserved-bg, #fdf1e0); color: var(--bam2-status-reserved-color, #b26a00); }

.bam2-details-desc {
	margin: 0 0 16px;
	color: inherit;
	white-space: pre-line;
}

.bam2-details-image {
	/*width: 100%;
	height: auto;*/
	border-radius: 8px;
	display: block;
	background: var(--bam2-bg-soft);

}

/* Clickable floor-plan (opens the lightbox) + its custom corner icon */
.bam2-plan-trigger {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
}

.bam2-plan-trigger:focus-visible {
	outline: 2px solid var(--bam2-accent-dark);
	outline-offset: 2px;
}

.bam2-plan-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: clamp(34px, 12%, 56px);
	line-height: 0;
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	display:none;
}

.bam2-plan-icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* Default "open / expand" affordance (bundled expand.svg) when a suite has no
   custom Plan Click Icon — a compact modern control chip. */
.bam2-plan-icon--expand {
	width: clamp(30px, 9%, 40px);
	padding: 9px;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 9px;
	box-shadow: 0 2px 10px rgba(6, 12, 22, 0.28);
	filter: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.bam2-plan-trigger:hover .bam2-plan-icon--expand,
.bam2-plan-trigger:focus-visible .bam2-plan-icon--expand {
	background: #ffffff;
	transform: translateY(-1px);
}

.bam2-plan-icon--lightbox {
	right: 16px;
	bottom: 16px;
	width: clamp(40px, 8vw, 64px);
}

/* ---------- Lightbox (plan + gallery) ---------- */
.bam2-scroll-lock,
.bam2-scroll-lock body {
	overflow: hidden !important;
}

.bam2-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.bam2-lightbox.is-open {
	opacity: 1;
}

.bam2-lightbox[hidden] {
	display: none;
}

.bam2-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 12, 22, 0.92);
	cursor: pointer;
}

.bam2-lightbox-stage {
	position: relative;
	max-width: min(1200px, 94vw);
	max-height: 92vh;
	display: flex;
}

.bam2-lightbox-toolbar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.bam2-lightbox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(6, 12, 22, 0.55);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(2px);
	transition: background 0.15s ease;
}

.bam2-lightbox-btn:hover,
.bam2-lightbox-btn:focus-visible {
	background: rgba(255, 255, 255, 0.32);
	outline: none;
}

.bam2-lightbox:not(.has-nav) .bam2-lightbox-prev,
.bam2-lightbox:not(.has-nav) .bam2-lightbox-next {
	display: none;
}

.bam2-lightbox-figure {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bam2-lightbox-img {
	display: block;
	max-width: min(1200px, 94vw);
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	background: #0b1220;
}

.bam2-lightbox-count {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(6, 12, 22, 0.7);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.bam2-gallery-open {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.bam2-gallery-open:focus-visible {
	outline: 2px solid var(--bam2-accent-dark);
	outline-offset: 2px;
}

.bam2-details-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Buttons are fully self-styled with !important on the layout-critical
   properties so a theme's global `a` / `.uk-button` rules can't blow up the
   size or push the label to the top. Do NOT add uk-button classes to these. */
.bam2-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 100%;
	padding: 12px 18px !important;
	border-radius: 8px;
	background: var(--bam2-accent);
	color: #ffffff;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4 !important;
	border: 1px solid var(--bam2-accent);
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bam2-btn:hover,
.bam2-btn:focus-visible {
	background: var(--bam2-accent-dark);
	border-color: var(--bam2-accent-dark);
	color: #ffffff;
}

.bam2-btn-ghost {
	background: #A1D6C3;
	color: #002458;
	border: 1px solid #A1D6C3;
	border-radius: 0 !important;
}
.bam2-btn-ghost:hover, .bam-btn-ghost:focus-visible {
    background: #fff;
    color: #002458;
    border-color: #002458;
}

.bam2-btn-download {
	background: #002458;
	color: var(--bam2-download);
	border: 1px solid #002458;
	border-radius: 0 !important;
}

/* "View Gallery" toggle */
.bam2-btn-gallery {
	background: transparent;
	color: #002458;
	border: 1px solid #002458;
	border-radius: 0 !important;
}

.bam2-btn-gallery:hover,
.bam2-btn-gallery:focus-visible {
	background: #002458;
	color: #ffffff;
	border-color: #002458;
}

.bam2-btn-gallery[aria-expanded="true"] {
	background: #002458;
	color: #ffffff;
}

.bam2-btn-gallery .bam2-btn-gallery-icon {
	margin-left: 8px;
	transition: transform 0.25s ease;
}

.bam2-btn-gallery[aria-expanded="true"] .bam2-btn-gallery-icon {
	transform: rotate(180deg);
}

/* ---------- Gallery (slides open below the grid) ---------- */
.bam2-gallery {
	overflow: hidden;
	height: 0;
	opacity: 0;
	margin-top: 0;
	transition: height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}

.bam2-gallery.is-open {
	opacity: 1;
	margin-top: var(--bam2-gap);
}

.bam2-gallery-inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	padding-top: 4px;
}

.bam2-gallery-item {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bam2-bg-soft);
	border: 1px solid var(--bam2-border);
}

.bam2-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bam2-gallery-empty {
	padding: 24px;
	text-align: center;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.bam2-empty {
	padding: 40px;
	text-align: center;
	color: color-mix(in srgb, currentColor 65%, transparent);
	background: var(--bam2-bg);
	border: 1px dashed var(--bam2-border);
	border-radius: var(--bam2-radius);
}

/* ---------- Accordion (mobile only) ---------- */
.bam2-accordion {
	display: none;
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
	.bam2-map {
		--bam2-gap: 20px;
	}

	.bam2-grid {
		/* Stack rather than crush two narrow columns. */
		grid-template-columns: 1fr !important;
	}

	.bam2-grid[data-image-position="right"] .bam2-col-map,
	.bam2-grid[data-image-position="right"] .bam2-col-details {
		order: 0;
	}
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 767px) {
	.bam2-grid {
		display: block;
	}

	.bam2-col-details {
		display: none;
	}

	.bam2-accordion {
		display: block;
		margin-top: 20px;
	}

	.bam2-map-stage {
		border: 1px solid var(--bam2-border);
		background: var(--bam2-bg);
		border-radius: var(--bam2-radius);
	}

	.bam2-acc-item {
		background: var(--bam2-acc-bg, var(--bam2-bg));
		border: 1px solid var(--bam2-border);
		border-radius: 10px;
		margin-bottom: 12px;
		overflow: hidden;
	}

	.bam2-acc-head {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 16px;
		background: transparent;
		border: 0;
		text-align: left;
		cursor: pointer;
		font-size: 16px;
		font-family: inherit;
		color: inherit;
	}

	.bam2-acc-head:focus-visible {
		outline: 2px solid var(--bam2-accent);
		outline-offset: -2px;
	}

	.bam2-acc-title {
		font-weight: 600;
		flex: 1;
		color: #002458;
	}

	.bam2-acc-meta {
		color: #002458;
		font-size: 13px;
	}

	.bam2-acc-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: rgb(161, 214, 195);
		transition: transform 0.18s ease;
	}

	.bam2-acc-item.is-open .bam2-acc-icon {
		transform: rotate(180deg);
	}

	.bam2-acc-panel[hidden] {
		display: none;
	}

	.bam2-acc-panel-inner {
		padding: 4px 16px 20px;
		background: #fff;
	}

	.bam2-acc-item.is-flash {
		box-shadow: 0 0 0 3px var(--bam2-accent);
	}

	/* Gallery: horizontal swipe carousel with scroll-snap. */
	.bam2-gallery.is-open {
		margin-top: 16px;
	}

	.bam2-gallery-inner {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.bam2-gallery-item {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}

	.bam2-gallery-item img {
		aspect-ratio: 3 / 2;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.bam2-gallery,
	.bam2-polygon,
	.bam2-btn-gallery .bam2-btn-gallery-icon,
	.bam2-lightbox,
	.bam2-acc-icon {
		transition: none;
	}
}