.public-weather {
	--weather-accent: #ff6415;
	--weather-accent-soft: #f8d7bd;
	--weather-surface: rgba(255,255,255,.45);
	--weather-surface-strong: rgba(255,255,255,.68);
	--weather-border: rgba(93,38,17,.18);
	--weather-text: #49251e;
	--weather-muted: #805e55;
	--weather-map: #edb88f;
	--weather-map-hover: #ffcfaa;
	color: var(--weather-text);
}
.weather-layout {
	display: grid;
	grid-template-columns: minmax(0,2fr) minmax(270px,1fr);
	border: 1px solid var(--weather-border);
	border-radius: 18px;
	overflow: hidden;
	background: var(--weather-surface);
	box-shadow: 0 16px 42px rgba(96,45,23,.1);
}
.weather-map-panel {
	min-width: 0;
	align-self: stretch;
	border-right: 1px solid var(--weather-border);
	background:
		radial-gradient(circle at 25% 18%, rgba(255,255,255,.7), transparent 34%),
		linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,100,21,.06));
}
.weather-map-wrap {
	position: relative;
	min-height: 480px;
	background: transparent;
	overflow: hidden;
	user-select: none;
}
.weather-map { display: block; width: 100%; height: 480px; }
.weather-municipality {
	fill: var(--weather-map);
	stroke: rgba(255,255,255,.78);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
	transition: fill .16s ease;
	cursor: default;
}
.weather-municipality:hover { fill: var(--weather-map-hover); }
.weather-marker { pointer-events: none; user-select: none; }
.weather-marker-symbol {
	font-size: 34px;
	text-anchor: middle;
	dominant-baseline: middle;
	filter: drop-shadow(0 3px 5px rgba(60,25,12,.2));
}
.weather-marker-temperature {
	fill: var(--weather-text);
	stroke: rgba(255,255,255,.85);
	stroke-width: 5px;
	paint-order: stroke fill;
	font-size: 17px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
}
.weather-map-period {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 7px 11px;
	border: 1px solid var(--weather-border);
	border-radius: 10px;
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(7px);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.weather-summary {
	height: auto;
	padding: 20px;
	overflow: visible;
	background: var(--weather-surface-strong);
}
.weather-kicker {
	display: block;
	color: var(--weather-accent);
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
}
.weather-copy { margin: 8px 0 0; line-height: 1.52; }
.weather-main-temperature { display: flex; align-items: center; gap: 13px; margin: 17px 0; }
.weather-main-icon { font-size: 3rem; line-height: 1; }
.weather-temperature-range { font-size: 2rem; line-height: 1; }
.weather-facts {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	border-top: 1px solid var(--weather-border);
	border-bottom: 1px solid var(--weather-border);
}
.weather-facts > div { padding: 13px 9px; min-width: 0; }
.weather-facts > div + div { border-left: 1px solid var(--weather-border); }
.weather-facts > div > span { display: block; color: var(--weather-muted); font-size: .72rem; }
.weather-facts strong { display: block; margin-top: 3px; font-size: .92rem; overflow-wrap: anywhere; }
.weather-wind-direction-icon { display: inline-block; margin-right: .35rem; color: var(--weather-accent); font-size: 1.2em; line-height: 1; }
.weather-updated { display: block; margin-top: 13px; color: var(--weather-muted); }
.weather-periods {
	display: grid;
	grid-template-columns: repeat(6,minmax(112px,1fr));
	gap: 9px;
	margin-top: 14px;
	overflow-x: auto;
	padding-bottom: 3px;
}
.weather-period {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	align-items: stretch;
	gap: 10px;
	min-height: 70px;
	padding: 11px 12px;
	border: 1px solid var(--weather-border);
	border-radius: 12px;
	background: var(--weather-surface);
	color: var(--weather-text);
	text-align: left;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.weather-period:hover { border-color: var(--weather-accent); }
.weather-period.is-active { border-color: var(--weather-accent); background: var(--weather-accent-soft); box-shadow: inset 0 0 0 1px var(--weather-accent); }
.weather-period-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 6px; }
.weather-period-copy > span { overflow: hidden; color: var(--weather-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.weather-period-copy strong { font-size: .96rem; white-space: nowrap; }
.weather-period-icon { display: flex; align-items: center; justify-content: flex-end; min-width: 38px; font-size: 2rem; line-height: 1; }
.weather-unavailable {
	padding: 42px;
	border: 1px solid var(--weather-border);
	border-radius: 18px;
	background: var(--weather-surface);
	text-align: center;
}
.weather-unavailable i { display: block; margin-bottom: 10px; color: var(--weather-accent); font-size: 2.5rem; }
@media (max-width: 991.98px) {
	.weather-layout { grid-template-columns: 1fr; }
	.weather-map-panel { border-right: 0; border-bottom: 1px solid var(--weather-border); }
	.weather-map-wrap,.weather-map { min-height: 300px; height: 300px; }
	.weather-periods { grid-template-columns: repeat(6,135px); }
}
@media (max-width: 575.98px) {
	.weather-map-wrap,.weather-map { min-height: 360px; height: 360px; }
	.weather-summary { padding: 18px; }
	.weather-facts { grid-template-columns: 1fr; }
	.weather-facts > div + div { border-left: 0; border-top: 1px solid var(--weather-border); }
	.weather-periods {
		grid-template-columns: repeat(2,minmax(0,1fr));
		overflow: visible;
	}
}