/**
 * Sprawy z urzędu — karta, lista, szczegół i pas na stronie głównej
 * (docs/13 §7). Pas nagłówka, układ 80/20 i kolumnę z tematami dają klasy
 * `.kg-news__*` z `kg.css`; tu jest wyłącznie to, czego tam nie ma.
 * Mobile first, cele dotykowe z `--kg-tap`.
 */

/* Stan sprawy: tekst niesie znaczenie, kolor je wzmacnia (docs/05 §6.2). */
.kg-badge--sprawa-w-toku { --kg-badge-ink: var(--wp--preset--color--warning); --kg-badge-bg: var(--wp--preset--color--warning-soft); }
.kg-badge--sprawa-decyzja { --kg-badge-ink: var(--wp--preset--color--success); --kg-badge-bg: var(--wp--preset--color--success-soft); }

.kg-cases__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	max-width: 820px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kg-case {
	display: grid;
	gap: 8px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--border-warm);
	border-radius: var(--kg-radius-lg);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--kg-duration) ease, box-shadow var(--kg-duration) ease;
}

@media (hover: hover) {
	.kg-case:hover { border-color: var(--wp--preset--color--brand-soft); box-shadow: 0 12px 30px rgba(23, 33, 43, .08); }
}

.kg-case__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-case__title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.kg-case__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.kg-case__lead { margin: 0; color: var(--wp--preset--color--ink-muted); font-size: 16px; line-height: 1.55; }

.kg-case__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 15px;
}

.kg-case__source {
	margin: 2px 0 0;
	padding-top: 8px;
	border-top: 1px dashed var(--wp--preset--color--border-warm);
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Strona główna: te same karty, od tabletu w rzędzie. */
.kg-home-cases__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 28px;
}

.kg-home-cases__head h2 { margin: 0; }
.kg-cases__list--home { max-width: none; }
.kg-home-cases__source { margin: 18px 0 0; color: var(--wp--preset--color--ink-muted); font-size: 14px; }

@media (min-width: 900px) {
	.kg-cases__list--home { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Szczegół. */
.kg-case-detail__intro .kg-case__tags { margin-bottom: 14px; }
.kg-case-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.kg-case-detail__main { display: grid; gap: 22px; max-width: 760px; min-width: 0; }
.kg-case-detail__heading { margin: 0; font-size: 22px; }

@media (min-width: 1024px) {
	.kg-case-detail__layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(28px, 3vw, 56px); align-items: start; }
}

.kg-case-timeline {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 2px solid var(--wp--preset--color--border-warm);
	list-style: none;
}

.kg-case-timeline__item { position: relative; display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }

.kg-case-timeline__item::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -30px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--wp--preset--color--brand-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
}

.kg-case-timeline__item.is-latest::before { background: var(--wp--preset--color--brand-strong); }
.kg-case-timeline__item time { color: var(--wp--preset--color--ink-muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kg-case-timeline__what { margin: 0; font-weight: 600; font-size: 17px; }
.kg-case-timeline__source { margin: 0; color: var(--wp--preset--color--ink-muted); font-size: 14px; line-height: 1.5; }
.kg-case-timeline__item a { justify-self: start; display: inline-flex; align-items: center; min-height: var(--kg-tap); font-weight: 600; }

.kg-case-detail__aside { display: grid; gap: 20px; align-content: start; min-width: 0; }
.kg-case-detail__aside h2 { margin: 0 0 10px; font-size: 16px; }

.kg-case-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 16px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--border-warm);
	border-radius: var(--kg-radius-lg);
	background: var(--wp--preset--color--surface-warm);
	font-size: 15px;
}

.kg-case-facts dt { color: var(--wp--preset--color--ink-muted); }
.kg-case-facts dd { margin: 0; overflow-wrap: anywhere; }

.kg-case-detail__nearby ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.kg-case-detail__nearby span { display: block; color: var(--wp--preset--color--ink-muted); font-size: 13px; }
.kg-case-timeline__published { margin: 0; color: var(--wp--preset--color--ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Aktualności → Drogi: plakietka utrudnień i hero z mapą (docs/13 §6a). */
.kg-badge--utrudnienia { --kg-badge-ink: var(--wp--preset--color--warning); --kg-badge-bg: var(--wp--preset--color--warning-soft); }

.kg-roads__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }

@media (min-width: 1024px) {
	.kg-roads__hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 3vw, 56px); }
}

/* Mapa statyczna: SVG rysowany na serwerze z danych OSM, bez kafelków
   i skryptów zewnętrznych (docs/10 §5.2). */
.kg-map { margin: 0; min-width: 0; }

.kg-map__svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border-warm);
	border-radius: var(--kg-radius-lg);
	background: var(--wp--preset--color--surface);
}

.kg-map__area { fill: var(--wp--preset--color--brand-faint); }
.kg-map__edge { fill: none; stroke: var(--wp--preset--color--brand-strong); stroke-width: 2.5; stroke-dasharray: 8 5; }
.kg-map__way { fill: none; stroke: #cfc8bb; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kg-map__way--main { stroke: #b3aa99; stroke-width: 3; }

.kg-map__pin path { fill: var(--wp--preset--color--brand-strong); stroke: #fff; stroke-width: 2; }
.kg-map__pin--alert path { fill: var(--wp--preset--color--warning); }
.kg-map__count { fill: #fff; font-size: 12px; font-weight: 700; }
.kg-map__label { fill: var(--wp--preset--color--ink); font-size: 14px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.kg-map__pin:focus-visible path { stroke: var(--wp--preset--color--focus); stroke-width: 4; }

@media (hover: hover) {
	.kg-map__pin:hover path { filter: brightness(1.15); }
	.kg-map__pin:hover .kg-map__label { text-decoration: underline; }
}

.kg-map__caption { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--wp--preset--color--ink-muted); font-size: 13px; }
.kg-map__legend { display: inline-flex; align-items: center; gap: 6px; }
.kg-map__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--brand-strong); }
.kg-map__dot--alert { background: var(--wp--preset--color--warning); }
.kg-map__source { flex-basis: 100%; }

/* SVG skaluje się do szerokości kolumny, więc na telefonie pinezka i nazwa
   ulicy miałyby kilka pikseli. Grupa `.kg-map__mark` ma czubek w (0, 0),
   więc powiększenie nie przesuwa wskazania. */
.kg-map__mark { transform: scale(1); transform-box: view-box; transform-origin: 0 0; }
@media (max-width: 1023px) { .kg-map__mark { transform: scale(1.5); } }
@media (max-width: 639px) { .kg-map__mark { transform: scale(2.1); } }

/* Trzy zakładki Aktualności („Wszystkie”, „Z urzędu (n)”, „Drogi (n)”) przy
   390 px brakowało kilkunastu pikseli i ostatnia spadała do drugiego wiersza.
   Węższy odstęp i mniejszy krój; wysokość celu dotykowego zostaje 44 px. */
@media (max-width: 479px) {
	.kg-scope--news .kg-scope__link { padding: 0 11px; font-size: 14px; }
}

/* Aktualne | Archiwum nad listą wiadomości drogowych. */
.kg-roads .kg-scope--period { margin: 0 0 16px; }