/*
 * Sandstone weather map (used both by the homepage section and the
 * widget-area version registered in inc/class-sandstone-weather-widget.php).
 */

.sandstone-weather {
	text-align: center;
}

.sandstone-weather__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-bottom: 20px;
	text-align: left;
}

.sandstone-map {
	background: var(--horezdar-gray-light, #f1f1f1);
	border-radius: var(--horezdar-radius, 16px);
	padding: 20px;
}

.sandstone-map__heading {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 12px;
}

/* Zoom wrapper clips the scaled/panned canvas so it never spills out of
 * the card; the canvas itself carries the transform (see js/sandstone-map.js). */
.sandstone-map__zoom-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

/* Aspect ratio matches images/cz-map-topo.svg's own viewBox (1949x1200)
 * so the background image is never stretched out of proportion. */
.sandstone-map__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 1949 / 1200;
	background: #eef3e7;
	transform-origin: 0 0;
	touch-action: none;
	cursor: grab;
}

.sandstone-map__canvas.is-zoomed {
	cursor: grab;
}

.sandstone-map__canvas.is-panning {
	cursor: grabbing;
}

.sandstone-map__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.sandstone-map__region-label {
	position: absolute;
	z-index: 1;
	/* Counter-scales against the canvas zoom (js/sandstone-map.js keeps
	 * --horezdar-map-zoom-counter at 1/scale) so labels stay a constant
	 * on-screen size instead of growing along with the map. */
	transform: translate(-50%, -50%) scale(var(--horezdar-map-zoom-counter, 1));
	font-size: .72rem;
	font-weight: 700;
	color: rgba(30, 30, 30, .6);
	text-shadow: 0 1px 2px rgba(255, 255, 255, .8);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
}

/* Pill labels, same visual language as the admin "Pískovcové lokality"
 * drag tool - name always visible (no hidden tooltip to fail silently),
 * green/red instead of the admin tool's orange/green override indicator.
 * A real <button> so hover, keyboard focus and touch tap all bring a dot
 * to the front the same way (js/sandstone-map.js adds the touch-tap
 * equivalent of :hover, since touch has no hover). */
/* Counter-scales against the canvas zoom the same way region labels do,
 * so pills stay a constant on-screen size while the map zooms in/out -
 * only their position (left/top %, set inline per dot) moves with the
 * map, not their rendered size. */
.sandstone-map__dot {
	appearance: none;
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	transform: translate(-50%, -50%) scale(var(--horezdar-map-zoom-counter, 1));
	transform-origin: center;
	background: #2f9e44;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50px;
	padding: 3px 10px;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: transform .15s ease;
}

.sandstone-map__dot--wet {
	background: #e03131;
}

.sandstone-map__dot:hover,
.sandstone-map__dot:focus-visible,
.sandstone-map__dot.is-active {
	z-index: 4;
	transform: translate(-50%, -50%) scale(calc(var(--horezdar-map-zoom-counter, 1) * 1.35));
	outline: none;
}

.sandstone-map__zoom-controls {
	position: absolute;
	z-index: 5;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sandstone-map__zoom-btn {
	appearance: none;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 6px;
	background: rgba(30, 30, 30, .75);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.sandstone-map__zoom-btn:hover,
.sandstone-map__zoom-btn:focus-visible {
	background: var(--horezdar-accent, #fb8b24);
}

.sandstone-map__legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 12px;
	font-size: .8rem;
	font-weight: 700;
}

.sandstone-map__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sandstone-map__legend-item::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.sandstone-map__legend-item--ok::before {
	background: #2f9e44;
}

.sandstone-map__legend-item--wet::before {
	background: #e03131;
}

.sandstone-map__list {
	margin-top: 14px;
	font-size: .82rem;
}

.sandstone-map__list summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--horezdar-accent, #fb8b24);
}

.sandstone-map__list ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.sandstone-map__list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid rgba(0, 0, 0, .06);
}

.sandstone-map__list li.is-ok .sandstone-map__list-status {
	color: #2f9e44;
}

.sandstone-map__list li.is-wet .sandstone-map__list-status {
	color: #e03131;
}

.sandstone-map__list-status {
	font-weight: 700;
	white-space: nowrap;
}

.sandstone-weather__note {
	font-weight: 700;
	margin-bottom: 8px;
	text-align: center;
}

.sandstone-weather__updated,
.sandstone-weather__source {
	font-size: .78rem;
	color: rgba(30, 30, 30, .55);
	margin-bottom: 4px;
	text-align: center;
}

.sandstone-weather__source a {
	color: var(--horezdar-accent, #fb8b24);
	font-weight: 700;
	margin-left: 4px;
}

.sandstone-weather__empty {
	color: rgba(30, 30, 30, .6);
	text-align: center;
}

.widget .sandstone-weather__grid {
	grid-template-columns: 1fr;
}

.widget .sandstone-map {
	background: #fff;
	padding: 14px;
}

@media (max-width: 768px) {
	.sandstone-weather__grid {
		grid-template-columns: 1fr;
	}

	.sandstone-map__region-label {
		font-size: .64rem;
	}

	.sandstone-map__dot {
		font-size: .6rem;
		padding: 2px 7px;
	}
}