/**
 * Villa Map — front-end styles.
 *
 * Colours come from the block's own settings as CSS variables, so they can be
 * changed in the editor without touching this file.
 */

.villa-map {
	--vm-height: 620px;
	--vm-accent: #f2994a;
	--vm-accent-active: #1f6f5c;
	--vm-text: #2d3748;
	--vm-radius: 14px;
	margin-bottom: var( --global-kb-spacing-sm, 1.5rem );
	color: var( --vm-text );
}

/* ---------------------------------------------------------------- the bar */

.villa-map__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.villa-map--align-centre .villa-map__bar {
	justify-content: center;
}

/*
 * Right lines the toggle up with the Reset filters button above it.
 *
 * row-reverse puts the hint text first and the toggle last, and it also flips
 * which end "flex-start" means — so it is flex-start, not flex-end, that pushes
 * the pair against the right edge.
 */
.villa-map--align-right .villa-map__bar {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.villa-map__toggle,
.villa-map__mobile-toggle {
	display: inline-flex;
	background: rgba( 0, 0, 0, 0.05 );
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
}

.villa-map__tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	padding: 0.5em 1.4em;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.4;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.villa-map__tab:hover {
	background: rgba( 0, 0, 0, 0.06 );
}

.villa-map__tab.is-active {
	background: var( --vm-accent );
	color: #fff;
}

.villa-map__tab:focus-visible {
	outline: 2px solid var( --vm-accent-active );
	outline-offset: 2px;
}

.villa-map__hint {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.7;
}

.villa-map__notice {
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.04 );
	border-radius: var( --vm-radius );
}

/* -------------------------------------------------------------- the panel */

.villa-map__panel {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 1rem;
	height: var( --vm-height );
}

.villa-map__panel[hidden] {
	display: none;
}

.villa-map__mobile-toggle {
	display: none;
}

/* ------------------------------------------------------------- villa list */

.villa-map__list {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.villa-map__item {
	display: flex;
	/*
	 * The list is a fixed-height flex column, so without this every item
	 * shrinks to share the space between them — with 22 villas that squashes
	 * each card to a sliver and the text spills out over its neighbours.
	 */
	flex: 0 0 auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.6rem;
	border-radius: var( --vm-radius );
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
	cursor: pointer;
	border: 2px solid transparent;
	text-align: left;
	font: inherit;
	color: inherit;
	width: 100%;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

/*
 * These are <button> elements, so the theme's own button styling lands on them
 * — which is why hovering a villa turned it solid orange. Everything the theme
 * might set is pinned here, and the hover colours come from the block settings.
 */
.villa-map__item,
.villa-map__item:hover,
.villa-map__item:focus,
.villa-map__item:active {
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

.villa-map__item:hover,
.villa-map__item.is-active {
	border-color: var( --vm-item-border, var( --vm-accent-active ) );
	background: var( --vm-item-hover-bg, #fff );
	color: var( --vm-item-hover-text, var( --vm-text ) );
}

.villa-map__item:focus-visible {
	outline: 2px solid var( --vm-accent-active );
	outline-offset: 2px;
}

.villa-map__thumb {
	width: 84px;
	height: 66px;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: 10px;
	background: rgba( 0, 0, 0, 0.05 );
}

.villa-map__item-body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.villa-map__name,
.villa-map__area,
.villa-map__meta {
	display: block;
}

.villa-map__name {
	font-weight: 700;
	margin: 0 0 0.15em;
	line-height: 1.25;
}

.villa-map__area,
.villa-map__meta {
	margin: 0;
	font-size: 0.88em;
	opacity: 0.75;
	line-height: 1.4;
}

.villa-map__empty {
	padding: 1.5rem 0.5rem;
	opacity: 0.7;
}

/* -------------------------------------------------------------- the canvas */

.villa-map__canvas-wrap {
	position: relative;
	border-radius: var( --vm-radius );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.05 );
	min-height: 260px;
}

.villa-map__canvas {
	position: absolute;
	inset: 0;
}

.villa-map__map-buttons {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	bottom: 1rem;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
	pointer-events: none;
}

.villa-map__map-button {
	pointer-events: auto;
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 0.6em 1.3em;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	background: #fff;
	color: var( --vm-text );
	box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.2 );
}

.villa-map__map-button:hover {
	background: #fff;
	color: var( --vm-accent-active );
}

.villa-map__map-button[hidden] {
	display: none;
}

/*
 * Google draws its own Map / Satellite control inside the canvas, and the
 * theme's button rules were rounding each of those buttons individually — which
 * is why they looked like two overlapping pills. Hand them back to Google.
 */
.villa-map__canvas .gm-style button,
.villa-map__canvas .gm-style-mtc button {
	border-radius: 0;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.villa-map__canvas .gm-style-mtc:first-child button {
	border-radius: 2px 0 0 2px;
}

.villa-map__canvas .gm-style-mtc:last-child button {
	border-radius: 0 2px 2px 0;
}

/* ------------------------------------------------------- the villa card */

.villa-map__card {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 3;
	width: min( 320px, calc( 100% - 2rem ) );
	background: #fff;
	border-radius: var( --vm-radius );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.22 );
	overflow: hidden;
}

.villa-map__card[hidden] {
	display: none;
}

.villa-map__card-image {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	background: rgba( 0, 0, 0, 0.05 );
}

.villa-map__card-body {
	padding: 0.85rem 1rem 1rem;
}

/*
 * The theme's button padding was stretching this into an oval and pushing the
 * × off to one side. Everything is pinned so it stays a circle with the cross
 * centred in it.
 */
.villa-map__card-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 0;
	background: rgba( 255, 255, 255, 0.92 );
	color: #111;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.2 );
}

.villa-map__card-close:hover {
	background: #fff;
	color: #111;
}

.villa-map__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.villa-map__badge {
	background: var( --vm-accent );
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	line-height: 1.5;
}

.villa-map__cta {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 700;
	color: var( --vm-accent-active );
}

/* ----------------------------------------------- hiding the grid & paging */

/*
 * When the map is showing, the grid is hidden but stays in the page — the map
 * reads it to know which villas to pin. Do not replace this with anything that
 * removes the cards from the document.
 */
.villa-map-showing-map .wp-block-kadence-query-card,
.villa-map-showing-map .wp-block-kadence-query-pagination {
	display: none !important;
}

/* ------------------------------------------------------------- the editor */

.villa-map--editor .villa-map__panel {
	height: 320px;
}

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

@media all and (max-width: 767px) {
	.villa-map__panel {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		height: auto;
	}

	.villa-map__mobile-toggle {
		display: inline-flex;
		justify-self: start;
	}

	.villa-map__list,
	.villa-map__canvas-wrap {
		height: min( 70vh, 520px );
	}

	/* One pane at a time on a phone. */
	.villa-map__panel[data-pane="map"] .villa-map__list,
	.villa-map__panel[data-pane="list"] .villa-map__canvas-wrap {
		display: none;
	}

	/* The card sits along the bottom of the map rather than floating in it. */
	.villa-map__card {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		width: auto;
		display: flex;
		align-items: stretch;
	}

	.villa-map__card-image {
		width: 108px;
		height: auto;
		flex: 0 0 auto;
	}

	.villa-map__card-body {
		padding: 0.7rem 0.85rem;
	}

	.villa-map__card-image--none {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.villa-map__item,
	.villa-map__tab {
		transition: none;
	}
}