/* Floor Plans block (acf/floorplans)
   Cream section (native bg, default) with a 1/3–2/3 grid: InnerBlocks content
   left, interactive building SVG right. Floor state (fills, labels, hover)
   is driven here — the SVG partial carries geometry only. The detail band is
   a white surface below, one hidden server-rendered panel per available
   floor; floorplans.js toggles .is-active (fade honors reduced motion). */

.floorplans--main {
	padding-block: clamp(48px, 6vw, 90px);
}

.floorplans--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media (min-width: 992px) {
	.floorplans--grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(40px, 5vw, 80px);
	}
}

/* --- building SVG ---------------------------------------------------------- */

.floorplans--building {
	margin-bottom: 28px;
}

.floorplans--svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Floor state: leased (default) or available in one of three space types.
   These are functional diagram colours, not brand palette entries — same
   reasoning as the Velocity Lab blue, which has never been a theme preset. */
.fp-floor .fp-color-fill {
	fill: #646263;
	transition: fill 0.2s ease;
}

.fp-floor.is-available.is-lab-office .fp-color-fill {
	fill: var(--wp--preset--color--lime);
}

.fp-floor.is-available.is-office .fp-color-fill {
	fill: #d9a140;
}

.fp-floor.is-available.is-velocity-lab .fp-color-fill {
	fill: #00aeef;
}

.fp-floor .fp-label {
	fill: #fff;
}

/* dark copy on the two light fills, white on the dark ones */
.fp-floor.is-available.is-lab-office .fp-label,
.fp-floor.is-available.is-office .fp-label {
	fill: #000;
}

/* leased floors show only LEASED (area is server-emptied too — belt & braces) */
.fp-floor.is-leased .sf-area {
	display: none;
}

/* the “V” lab mark: only on Velocity Lab floors that are available */
.fp-floor:not(.is-velocity-lab) .lab-v-logo,
.fp-floor.is-leased .lab-v-logo {
	display: none;
}

/* leased lab floors: LEASED slides into the spot the lab mark vacated */
.fp-floor.is-velocity-lab.is-leased .availability-wrap {
	transform: translateX(-30px);
}

.fp-floor.is-available {
	cursor: pointer;
}

.fp-floor.is-available:hover .fp-color-fill,
.fp-floor.is-available:focus-visible .fp-color-fill,
.fp-floor.is-available.is-selected .fp-color-fill {
	fill: var(--wp--preset--color--green);
}

.fp-floor.is-available:hover .fp-label,
.fp-floor.is-available:focus-visible .fp-label,
.fp-floor.is-available.is-selected .fp-label {
	fill: var(--wp--preset--color--lime);
}

.fp-floor.is-available:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fp-floor .fp-color-fill {
		transition: none;
	}
}

/* --- legend ---------------------------------------------------------------- */

.floorplans--legend-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
}

.floorplans--legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.floorplans--legend span {
	width: 16px;
	height: 16px;
	border-radius: 3px;
}

/* swatches reuse the floors' own state classes — one vocabulary, so a colour
   cannot drift between the diagram and the key that explains it */
.floorplans--legend.leased-mod span {
	background: #646263;
}

.floorplans--legend.is-lab-office span {
	background: var(--wp--preset--color--lime);
}

.floorplans--legend.is-office span {
	background: #d9a140;
}

.floorplans--legend.is-velocity-lab span {
	background: #00aeef;
}

.floorplans--legend-description {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	opacity: 0.75;
}

/* --- detail band ----------------------------------------------------------- */

.floorplans--details {
	background: var(--wp--preset--color--white);
	padding-block: clamp(40px, 5vw, 72px);
	scroll-margin-top: calc(var(--dy-header-h, 90px) + 16px);
}

.floorplans--back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--green);
}

.floorplans--back:hover,
.floorplans--back:focus-visible {
	text-decoration: underline;
}

.floorplans--panel {
	display: none;
}

.floorplans--panel.is-active {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	animation: floorplans-fade 0.25s ease both;
}

/* ≥992px: info 1/3, plan image 2/3 (client, 2026-08-10). The gap is drawn
   from the tracks, so the image is a touch under a literal two thirds. */
@media (min-width: 992px) {
	.floorplans--panel.is-active {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}
}

@keyframes floorplans-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.floorplans--panel.is-active {
		animation: none;
	}
}

.floorplans--floor-name {
	margin-bottom: 16px;
}

.floorplans--floor-space {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 28px;
}

.floorplans--floor-space-sf {
	font-size: var(--wp--preset--font-size--h-5, 24px);
	font-weight: 700;
}

.floorplans--floor-space-available {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
	color: var(--wp--preset--color--green);
}

.floorplans--panel-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.floorplans--panel-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- click to magnify ------------------------------------------------------ */

/* The trigger is a real link to the full-size plan (works with JS off);
   floorplans.js upgrades it to a GLightbox image slide. The badge is the only
   affordance a bare drawing gets, so it stays visible rather than hover-only. */
.floorplans--zoom {
	display: block;
	position: relative;
	cursor: zoom-in;
}

/* Top-right, not bottom-right: every plan bakes "VIEWS OF …" captions along
   its bottom edge, and this matches the media-slideshow ring's corner. */
.floorplans--zoom-badge {
	position: absolute;
	right: 14px;
	top: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--lime);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.floorplans--zoom:hover .floorplans--zoom-badge,
.floorplans--zoom:focus-visible .floorplans--zoom-badge {
	transform: scale(1.08);
}

.floorplans--zoom:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.floorplans--zoom-badge {
		transition: none;
	}

	.floorplans--zoom:hover .floorplans--zoom-badge,
	.floorplans--zoom:focus-visible .floorplans--zoom-badge {
		transform: none;
	}
}

.floorplans--empty {
	font-style: italic;
	opacity: 0.75;
}