/* Follows DESIGN.md · tokens in main.css */
/* Ekspert na godziny: home #obszar (template-parts/home-area.php, home-area-map.php, assets/js/home-area.js).
   A real map built offline from OpenStreetMap: drive-time zones (Valhalla isochrones) in gold tints, Kraków in
   a pale navy tint with navy district lines (mixes in oklab: an oklch mix of gold and the cool paper swings through green), roads as ink lines and paired "pipes" for motorways, towns with real times.
   Replaces the old schematic map rules in home.css (they no longer match any markup). */

.en-area { --fs-note: 1rem; } /* small text never below 16px (40+ audience) */

.en-area { background: var(--paper-2); }
.en-area__head { max-width: 48rem; margin-bottom: var(--s-6); }
.en-area__grid { display: grid; gap: var(--s-6); align-items: start; }

/* ---------- Map frame ---------- */
.en-map {
	--map-city: color-mix(in oklab, var(--loden) 9%, var(--paper));
	--map-water: color-mix(in oklab, var(--loden-line) 62%, var(--paper));
	--map-route: var(--loden);
	margin: 0; min-width: 0;
	/* reset the old schematic-map box from home.css (.en-map / mobile max-width 17rem) */
	padding: 0; border: 0; background: none; overflow: visible; max-width: none;
}
.en-map__frame {
	position: relative; overflow: hidden;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2);
}
.en-map__svg { display: block; width: 100%; height: auto; font-family: var(--font-display); }

/* Layers, bottom to top. Stroke widths are viewBox units (900 wide). */
#en-map-wood circle { fill: var(--loden-line); opacity: .42; }
.en-map__wood path { fill: url(#en-map-wood); }
.en-map__city { fill: var(--map-city); stroke: var(--loden); stroke-width: 1.8; stroke-linejoin: round; }
.en-map__dist { fill: none; stroke: var(--loden-line); stroke-width: .8; opacity: .45; stroke-linejoin: round; }
.en-map__zone { fill: var(--brass); fill-opacity: .17; stroke: var(--brass-deep); stroke-width: 1.4; stroke-linejoin: round; }
.en-map__zone--20 { fill-opacity: .22; }
.en-map__river { opacity: 1; fill: none; stroke: var(--map-water); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.en-map__trib { fill: none; stroke: var(--map-water); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.en-map__road { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-opacity: .42; stroke-linecap: round; stroke-linejoin: round; }
.en-map__pipe { fill: var(--paper); stroke: var(--ink); stroke-width: 1.15; stroke-opacity: .78; stroke-linejoin: round; }

/* Static labels: river name along the Wisła, road shields, zone pills. */
.en-map__rivername { font-size: 17px; font-weight: 600; letter-spacing: .22em; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.en-map__shield rect { fill: var(--loden-deep); }
.en-map__shield text { font-size: 13.5px; font-weight: 700; fill: var(--loden-ink); text-anchor: middle; dominant-baseline: middle; letter-spacing: .02em; }
.en-map__zl rect { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1; }
.en-map__zl text { font-size: 15px; font-weight: 700; fill: var(--brass-ink); text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.en-map__scale path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: square; }
.en-map__scale text { font-size: 14px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.en-map__cityname { font-size: 34px; font-weight: 800; letter-spacing: .03em; fill: var(--loden); paint-order: stroke; stroke: var(--map-city); stroke-width: 5px; stroke-linejoin: round; }

/* Routes (hidden until a town is picked) */
.en-map__route { fill: none; stroke: var(--map-route); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .18s var(--ease), stroke-dashoffset 0s .2s; }
.en-map__route.is-on { opacity: 1; stroke-dashoffset: 0; transition: opacity .12s var(--ease), stroke-dashoffset .4s var(--ease); }
.en-map__routecase { fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .18s var(--ease); }
.en-map__routecase.is-on { opacity: .9; }

/* Towns */
.en-map__place { transition: opacity var(--dur-state) var(--ease); }
.en-map__dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-state) var(--ease), fill var(--dur-state) var(--ease); }
.en-map__pulse { fill: none; stroke: var(--map-route); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.en-map__tname, .en-map__tmin { paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.en-map__tname { font-size: 23px; font-weight: 700; fill: var(--ink); stroke-width: 4.5px; }
.en-map__tmin { font-size: 19px; font-weight: 600; fill: var(--ink-2); stroke-width: 4px; font-variant-numeric: tabular-nums; }
.en-map__mark rect { fill: var(--loden-deep); stroke: var(--paper); stroke-width: 2.5; }
.en-map__mark circle, .en-map__mark path { fill: none; stroke: var(--brass); stroke-width: 2.6; stroke-linecap: round; }

/* Picked town: route drawn, dot grows and pulses, the rest steps back. */
.en-map.has-pick .en-map__place:not(.is-on) { opacity: .4; }
.en-map__place.is-on .en-map__dot { transform: scale(1.35); fill: var(--map-route); }
.en-map__place.is-on .en-map__tname { fill: var(--loden-deep); }
.en-map.is-city .en-map__city { stroke-width: 3.2; fill: color-mix(in oklab, var(--loden) 16%, var(--paper)); }
@media (prefers-reduced-motion: no-preference) {
	.en-map__place.is-on .en-map__pulse { animation: en-map-pulse 1.6s var(--ease) .3s 2; }
}
@media (prefers-reduced-motion: reduce) {
	.en-map__route, .en-map__route.is-on, .en-map__routecase, .en-map__dot { transition: none; }
}
@keyframes en-map-pulse {
	0% { opacity: .85; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.4); }
}

/* Caption: price chip, zone legend, note, OSM attribution */
.en-map__chip {
	display: flex; width: fit-content; flex-wrap: wrap; gap: .15rem .9rem; align-items: baseline;
	margin: 0; padding: .55rem .85rem; border-radius: var(--r-1);
	background: var(--loden); color: var(--loden-ink); font-size: var(--fs-note);
}
.en-map__chip b { font-family: var(--font-display); font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
.en-map__cap { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; text-align: left; font-size: var(--fs-note); color: var(--ink-2); }
.en-map__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.en-map__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.en-map__legend i { width: 1.1rem; height: .8rem; border: 1.5px solid var(--brass-deep); border-radius: 2px; background: color-mix(in oklab, var(--brass) var(--a), var(--paper)); }
.en-map__note { margin: 0; }
.en-map__osm { font-size: var(--fs-note); }
.en-map__osm a { color: inherit; }

/* ---------- Entrance: zones open from Rynek, roads draw outwards, towns arrive in order of drive time ---------- */
@media (prefers-reduced-motion: no-preference) {
	.en-map.is-armed .en-map__zone { opacity: 0; transform: scale(.55); transform-box: view-box; transform-origin: var(--cx) var(--cy); }
	.en-map.is-armed .en-map__road, .en-map.is-armed .en-map__pipe { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.en-map.is-armed .en-map__pipe { fill-opacity: 0; }
	.en-map.is-armed .en-map__place { opacity: 0; }
	.en-map.is-armed .en-map__dot { transform: scale(0); }
	.en-map.is-armed .en-map__static { opacity: 0; }

	.en-map.is-armed.is-in .en-map__zone { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
	.en-map.is-armed.is-in .en-map__zone--30 { transition-delay: .06s; }
	.en-map.is-armed.is-in .en-map__zone--20 { transition-delay: .12s; }
	.en-map.is-armed.is-in .en-map__road, .en-map.is-armed.is-in .en-map__pipe { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease) .1s, fill-opacity .3s var(--ease) .6s; }
	.en-map.is-armed.is-in .en-map__pipe { fill-opacity: 1; }
	.en-map.is-armed.is-in .en-map__static { opacity: 1; transition: opacity .4s var(--ease) .55s; }
	.en-map.is-armed.is-in .en-map__place { opacity: 1; transition: opacity .25s var(--ease) calc(.45s + var(--i, 0) * 50ms); }
	.en-map.is-armed.is-in .en-map__dot { transform: none; transition: transform .3s var(--ease) calc(.45s + var(--i, 0) * 50ms); }
}

/* ---------- Table ---------- */
.en-area__list { min-width: 0; }
.en-table { width: 100%; border-collapse: collapse; }
.en-table th, .en-table td { padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.en-table th:last-child, .en-table td:last-child { padding-right: 0; }
.en-table thead th { font-size: var(--fs-note); line-height: 1.3; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.en-table thead th:not(:first-child), .en-table td { text-align: right; }
.en-table td { white-space: nowrap; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.en-table tbody th { font-weight: 600; }
.en-table__city th, .en-table__city td { border-bottom-width: 2px; border-bottom-color: var(--ink-2); }
.en-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.en-table tbody tr.is-on { background: color-mix(in oklab, var(--brass) 22%, var(--paper-2)); }
.en-table tbody tr.is-on th { color: var(--loden-deep); }
/* JS turns each town name into a toggle button; the whole row stays the hover target. */
.en-area__pick {
	all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .5rem;
	min-height: 2.25rem; cursor: pointer; font: inherit; color: inherit;
	text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.en-area__pick[aria-pressed="true"] { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .en-area__pick:hover { text-decoration-color: currentColor; } }
.en-area__pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.en-table tbody tr:has(.en-area__pick) { cursor: pointer; }
.en-area__short { display: none; } /* phone label of the Kraków row, see the 599px block */
.en-area__how { margin: 0 0 var(--s-3); font-size: var(--fs-note); color: var(--ink-2); }
.en-area__note { display: flex; gap: .6rem; align-items: flex-start; margin: var(--s-5) 0 0; }
.en-area__note .en-ico { flex: none; color: var(--loden); margin-top: .2em; }

/* ---------- Responsive ---------- */
/* Phones: map text would render under 10px, so only the city name and the picked town keep labels (larger);
   the table and the SVG <desc> carry every name and time. */
@media (max-width: 599px) {
	/* One-line toggles on phones: "Kraków, każda dzielnica" → "Kraków" (the next cell already says "w mieście"). */
	.en-area__long { display: none; }
	.en-area__short { display: inline; }
	.en-area__pick { white-space: nowrap; }
}
@media (max-width: 559px) {
	.en-map__tname, .en-map__tmin, .en-map__zl, .en-map__shield, .en-map__rivername, .en-map__scale { display: none; }
	.en-map__place.is-on .en-map__tname, .en-map__place.is-on .en-map__tmin { display: inline; }
	.en-map__place.is-on .en-map__tname { font-size: 46px; stroke-width: 9px; }
	.en-map__place.is-on .en-map__tmin { font-size: 40px; stroke-width: 8px; transform: translateY(34px); }
	.en-map__cityname { font-size: 56px; stroke-width: 8px; }
	.en-map__dot { stroke-width: 3; }
	.en-map__road { stroke-width: 1.6; }
}
@media (min-width: 941px) {
	.en-area__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-7); }
	.en-map { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (max-width: 759px) {
	.en-area { --section: 3.25rem; }
}