/**
 * Location Finder — feature-owned styles.
 *
 * Feature CSS lives here (NOT in the shared assets/blocks.css) and is enqueued
 * only when the block is on the page. Values come from the theme's prescribed
 * design tokens (spacing scale, font-size presets, radius/border/btn/color
 * custom properties) so the block inherits each child theme's system. Class
 * names follow the `.sg-block-*` convention.
 */

.sg-block-location-finder {
	--ccc-lf-gap: var(--wp--preset--spacing--30, 30px);
	display: flex;
	flex-direction: column;
	gap: var(--ccc-lf-gap);
}

.sg-block-location-finder__heading {
	margin: 0;
}

/* --- Search form ------------------------------------------------------- */
.sg-block-location-finder__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20, 20px);
	padding: var(--wp--preset--spacing--30, 30px);
	background-color: var(--wp--preset--color--panel);
	border-radius: var(--wp--custom--radius--default, 8px);
}

.sg-block-location-finder__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 10px);
}

.sg-block-location-finder__field--query {
	flex: 1 1 16rem;
}

.sg-block-location-finder__field--radius,
.sg-block-location-finder__field--type {
	flex: 0 1 auto;
}

.sg-block-location-finder__field--submit {
	flex: 0 0 auto;
}

.sg-block-location-finder__field label {
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 600;
}

.sg-block-location-finder__input,
.sg-block-location-finder__select {
	padding: var(--wp--custom--btn--padding-y, 0.75em) var(--wp--preset--spacing--20, 20px);
	border: var(--wp--custom--border--default-width, 1px) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--default, 8px);
	background-color: var(--wp--preset--color--canvas);
	font: inherit;
	line-height: 1.2;
}

.sg-block-location-finder__input:focus,
.sg-block-location-finder__select:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--border--default-width, 1px);
}

.sg-block-location-finder__submit {
	cursor: pointer;
}

/* --- Status line ------------------------------------------------------- */
.sg-block-location-finder__status:empty {
	display: none;
}

.sg-block-location-finder__status {
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

/* --- Layout: map + results -------------------------------------------- */
.sg-block-location-finder__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--ccc-lf-gap);
	align-items: stretch;
}

@media (max-width: 782px) {
	.sg-block-location-finder__layout {
		grid-template-columns: 1fr;
	}

	/* Stacked layout — let the list size to its content (capped) instead of
	   being locked to the map height. */
	.sg-block-location-finder__results {
		height: auto;
		max-height: 60vh;
	}
}

.sg-block-location-finder__map {
	width: 100%;
	/* Both the map and the results list read one shared height (set on the
	   layout by render.php from the block's map_height field), so the two
	   columns always line up. A definite height also lets Google Maps size
	   itself correctly. */
	height: var(--ccc-lf-panel-height, 480px);
	min-height: 320px;
	border-radius: var(--wp--custom--radius--default, 8px);
	overflow: hidden;
	background-color: var(--wp--preset--color--panel);
}

/* When Maps is unavailable (no key), the JS adds .ccc-lf-no-map on the root —
   collapse the map column so the results take the full width. Do NOT hide the
   map container via :empty: Google Maps initializes into it asynchronously, and
   a display:none container at init time renders a broken/blank map. */
.ccc-lf-no-map .sg-block-location-finder__layout {
	grid-template-columns: 1fr;
}

.ccc-lf-no-map .sg-block-location-finder__map {
	display: none;
}

/* --- Results list ------------------------------------------------------ */
.sg-block-location-finder__results {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Match the map height exactly and scroll internally, so the two columns
	   are the same height regardless of how many results come back. */
	height: var(--ccc-lf-panel-height, 480px);
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 10px);
}

.sg-block-location-finder__result {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 10px);
	padding: var(--wp--preset--spacing--20, 20px);
	border: var(--wp--custom--border--default-width, 1px) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--default, 8px);
	background-color: var(--wp--preset--color--canvas);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sg-block-location-finder__result.is-active,
.sg-block-location-finder__result:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--wp--custom--border--default-width, 1px) var(--wp--preset--color--primary);
}

.sg-block-location-finder__result-name {
	font-weight: 700;
}

.sg-block-location-finder__result-address {
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--ink-soft);
}

.sg-block-location-finder__result-meta {
	font-size: var(--wp--preset--font-size--small, 14px);
}

.sg-block-location-finder__result-distance {
	font-weight: 600;
}

.sg-block-location-finder__result-meta a {
	text-decoration: none;
}

.sg-block-location-finder__result-meta a:hover {
	text-decoration: underline;
}

/* Advanced marker active state (element flag toggled by the JS). */
.sg-block-location-finder__map .is-active {
	filter: drop-shadow(0 0 6px var(--wp--preset--color--primary));
}