/* Strona główna portalu (PL i EN): od kraju do adresu. Pierwszy ekran — tekst i mapa Polski na pasie tła;
   niżej Warszawa: trzy części aplikacji, kartogram rejonów i pięć ostatnich transakcji z rejestru.
   Mapa Polski: 16 województw z PRG (GUGiK), scripts/portal/prg_map.py; Warszawa w kolorze skali cen
   (tu są ceny), razem z nazwą jest odnośnikiem do aplikacji, pozostałe miasta wojewódzkie — pusty krążek jak
   punkt bez ceny (DESIGN §2). Kartogram i tabela ostatnich transakcji: scripts/portal/kartogram.py. */

:root {
  --text-display: 3rem; /* 48 px / 400 — tylko H1 portalu; od 1600 px 56 */
  --halo: 0 0 2px var(--color-sheet), 0 0 2px var(--color-sheet), 0 0 3px var(--color-sheet);
}

@media (min-width: 1600px) {
  :root {
    --text-display: 3.5rem;
  }
}

/* Pierwszy ekran. Dół pasa 56 px, potem rytm sekcji do „Warszawy”. Mapa wysunięta do krawędzi okna
   nie może poszerzyć strony (100vw liczy też pasek przewijania tam, gdzie jest widoczny). */
.band-hero {
  padding-block: 48px 56px;
  overflow-x: clip;
}

.hero {
  align-items: center;
}

.hero-text {
  grid-column: 1 / span 5;
}

.hero h1 {
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.lead {
  max-width: 30em;
  margin-top: 16px;
  font-size: var(--text-lead-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.bez {
  margin-top: 12px;
  font-size: var(--text-body);
  color: var(--color-ink-2);
}

/* Mapa Polski: od kolumny 6 do prawej krawędzi okna (24 px), wielkość ograniczona wysokością okna — cała
   mieści się na pierwszym ekranie. 1.074 = 1000/931 (viewBox). */
.kraj {
  position: relative;
  grid-column: 6 / -1;
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .kraj {
    --bleed: calc((100vw - min(var(--wrap), 100vw - 2 * var(--gutter))) / 2 - 24px);
    justify-self: end;
    width: calc(100% + var(--bleed));
    max-width: calc((100svh - 200px) * 1.074);
    margin-right: calc(-1 * var(--bleed));
  }
}

.kraj-mapa {
  position: relative;
  container-type: inline-size;
}

.pl-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Pola województw: jasny arkusz lądu na pasie i podpowiedź (title); po najechaniu — tło aktywnego elementu.
   Linie leżą nad polami i nie łapią kursora. */
.pl-pole {
  fill: var(--color-sheet);
  transition: fill 150ms;
}

.pl-pole:hover {
  fill: var(--color-paper-3);
}

/* Linie: kontur kraju ink-2 1,5 px nad granicami województw ink-3 1 px — obie ≥ 3:1 do lądu
   (WCAG 1.4.11), hierarchię niesie grubość i ton. */
.pl-kraj,
.pl-woj {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.pl-kraj {
  stroke: var(--color-ink-2);
  stroke-width: 1.5;
}

.pl-woj {
  stroke: var(--color-ink-3);
  stroke-width: 1;
}

/* Warszawa w kolorze skali cen; obrys nie łapie kursora, więc ciemnieje przy najechaniu na odnośnik nazwy. */
.pl-waw {
  fill: var(--color-seq-4);
  pointer-events: none;
  transition: fill 150ms;
}

.kraj-mapa:has(.m-waw > a:hover, .m-waw > a:focus-visible) .pl-waw {
  fill: var(--color-seq-5);
}

.pl-miasta {
  position: absolute;
  inset: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-ui);
  line-height: 1.2;
  pointer-events: none; /* podpowiedzi pól województw spod listy; klikalna jest tylko Warszawa */
}

/* Miasto: element zerowej wielkości w środku miasta; krążek i nazwa wokół niego. */
.m {
  position: absolute;
  width: 0;
  height: 0;
}

.m::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--color-ink-3);
  border-radius: 50%;
  background: var(--color-sheet);
}

.m > span {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  text-shadow: var(--halo); /* obwódka koloru lądu: nazwa czytelna na liniach granic */
}

.m.e > span {
  left: 8px;
}

.m.w > span {
  right: 8px;
}

.m.s > span {
  top: 6px;
  left: 0;
  transform: translateX(-50%);
}

/* Warszawa: odnośnik obejmuje obrys miasta (ok. 4,3% szerokości mapy) i nazwę. */
.m-waw::before {
  content: none;
}

.m-waw > a {
  position: absolute;
  top: 0;
  left: -16px; /* zapas dla przeglądarek bez jednostek kontenera (mapa ~600 px) */
  left: -2.6cqi;
  display: flex;
  align-items: center;
  min-height: 32px;
  min-height: max(5.2cqi, 24px);
  padding-left: 36px;
  padding-left: calc(5.2cqi + 4px);
  padding-right: 4px;
  transform: translateY(-50%);
  font-size: var(--text-lead);
  font-weight: 500;
  white-space: nowrap;
  text-shadow: var(--halo);
  pointer-events: auto;
}

.m-waw > a:hover {
  text-decoration-thickness: 2px;
}

/* Legenda mapy: od lewej krawędzi konturu (x = 9,8 z 1000). Na mapie od 420 px — w pustym rogu pod Dolnym
   Śląskiem (kontur dla x < 400 nie schodzi niżej niż y = 780 z 931), dolną krawędzią na wysokości
   najniższego punktu kraju (y = 921); na węższej — pod mapą. */
.kraj-pod {
  margin-top: 12px;
  padding-left: 0.98%;
}

@container (min-width: 420px) {
  .kraj-pod {
    position: absolute;
    left: 0.98%;
    bottom: 1.07%;
    margin: 0;
    padding: 0;
  }
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legenda li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
}

/* „Ceny już są” — kolor Warszawy; „Jeszcze bez cen” — ten sam pusty krążek co przy miastach. */
.legenda .k-tak::before {
  background: var(--color-seq-4);
}

.legenda .k-nie::before {
  border: 1.5px solid var(--color-ink-3);
  border-radius: 50%;
  background: var(--color-sheet);
}

/* Mapa do 440 px (telefon): na zachodzie pięć nazw (Szczecin, Bydgoszcz, Gorzów, Poznań, Zielona Góra) stało
   jedna przy drugiej. Jedna nazwa na województwo — druga stolica (Bydgoszcz, Gorzów) zostaje punktem, nazwę
   czyta czytnik ekranu (lista). Próg według mapy, nie okna: przy oknie 480–639 px mapa ma 450–600 px. */
@container (max-width: 440px) {
  .m-druga > span {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Powiększony tekst użytkownika (np. 150–200%) na wąskiej mapie: nazwy miast nachodziłyby na siebie.
   Wtedy na mapie zostają punkty i Warszawa, nazwy czyta dalej czytnik ekranu (lista). Próg w em
   kontenera: przy zwykłym tekście 17em = 272 px — mapa nigdy nie jest węższa (288 px przy 320). */
@container (max-width: 17em) {
  .m > span {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .m-waw > a {
    left: auto;
    right: -2.6cqi;
    padding-left: 4px;
    padding-right: calc(5.2cqi + 4px);
  }
}

/* Warszawa: trzy części aplikacji. Poniżej 1024 px — wiersze z linią włosową (jak strona Dane, DESIGN §4);
   od 1024 px — rząd trzech kolumn po 4 z 12, z liniami pionowymi w odstępach (DESIGN §3, „Wiersz liczb”). */
.czesci > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-rule);
}

.czesci > div:first-child {
  padding-top: 0;
}

.czesci dt {
  font-weight: 500;
}

.czesci dd {
  font-size: var(--text-body);
  color: var(--color-ink-2);
}

@media (min-width: 1024px) {
  .czesci {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .czesci > div {
    position: relative;
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .czesci > div + div::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--col-gap) / -2);
    width: 1px;
    background: var(--color-rule);
  }

  .czesci dt {
    margin-bottom: 4px;
    font-size: var(--text-lead-lg);
  }

  .czesci dd {
    max-width: 34em;
    font-size: var(--text-lead);
  }
}

/* Kartogram i ostatnie transakcje. Od 1280 px kartogram po lewej, obok legenda i tabela jako jedna grupa
   na środku wysokości kartogramu: kolumny 1–6 / 7–12, od 1680 px 1–7 / 8–12 (tabela sześciu kolumn
   potrzebuje ~640 px). Figura kartogramu dzieli siatkę sekcji (subgrid: wiersze 1fr · legenda · tabela · 1fr),
   więc jej podpis staje obok rysunku, a kolejność w dokumencie (mapa → legenda → tabela) zgadza się
   z kolejnością na ekranie. Węziej — jedno pod drugim. */
.waw-dane {
  row-gap: 48px;
  margin-top: 48px;
}

.kartogram,
.ostatnie {
  grid-column: 1 / -1;
}

.kg-mapa {
  /* rysunek najwyżej na wysokość okna bez paska; 0.957 = 1000/1045 (viewBox) */
  max-width: min(100%, calc((100svh - 120px) * 0.957));
}

@media (min-width: 1280px) {
  .waw-dane {
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 0;
  }

  .kartogram {
    display: grid;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }

  .kg-mapa {
    grid-column: 1 / span 6;
    grid-row: 1 / -1;
    max-width: calc((100svh - 120px) * 0.957);
  }

  .kartogram .kg-pod {
    grid-column: 7 / -1;
    grid-row: 2;
    margin: 0;
  }

  .ostatnie {
    grid-column: 7 / -1;
    grid-row: 3;
    margin-top: 48px;
  }
}

@media (min-width: 1680px) {
  .kg-mapa {
    grid-column: 1 / span 7;
  }

  .kartogram .kg-pod,
  .ostatnie {
    grid-column: 8 / -1;
  }
}

/* Cały kartogram to jeden odnośnik do mapy aplikacji; rejony mają podpowiedź <title> jak w aplikacji. */
.kg-mapa {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.kg-svg {
  display: block;
  width: 100%;
  height: auto;
}

.kg-svg path {
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* rejon z kolorem: wypełnienie klasy (bez podkładu — pełne, nie 0,62 jak w aplikacji), obrys koloru tła */
.kg-kolor path {
  stroke: var(--color-page);
  stroke-width: 1;
}

.kg-kolor .k1 {
  fill: var(--color-seq-1);
}

.kg-kolor .k2 {
  fill: var(--color-seq-2);
}

.kg-kolor .k3 {
  fill: var(--color-seq-3);
}

.kg-kolor .k4 {
  fill: var(--color-seq-4);
}

.kg-kolor .k5 {
  fill: var(--color-seq-5);
}

/* rejon bez mediany lub z < 5 transakcjami: bez wypełnienia, obrys ink-3 kreskowany (DESIGN §2); rysowany
   po kolorowych, żeby obrys sąsiada go nie przykrył */
.kg-brak path {
  fill: transparent;
  stroke: var(--color-ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.kg-svg path:hover {
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-dasharray: none;
}

/* Znacznik transakcji: numer w kółku, ten sam na kartogramie i w tabeli. Na mapie — obwódka tła, czytelny
   także na najciemniejszym rejonie; transakcje z jednego budynku mają wspólny znacznik („4, 5”). */
.kg-znaczniki {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.znacznik {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1.5px solid var(--color-ink);
  border-radius: 11px;
  background: var(--color-page);
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
}

.kg-znaczniki .znacznik {
  position: absolute;
  outline: 2px solid var(--color-page);
  transform: translate(-50%, -50%);
}

/* Legenda kartogramu jak w aplikacji: pasek 5 pól (192 px), granice kwantyli pod nim, osobna pozycja „brak”. */
.kg-pod {
  margin-top: 16px;
}

.kg-legenda {
  display: grid;
  grid-template-columns: 192px auto;
  justify-content: start;
  align-items: center;
  column-gap: 32px;
}

.kg-leg-tytul {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: var(--text-ui);
}

.kg-skala {
  display: flex;
  width: 192px;
  height: 8px;
}

.kg-skala span {
  flex: 1;
}

.kg-skala span:nth-child(1) {
  background: var(--color-seq-1);
}

.kg-skala span:nth-child(2) {
  background: var(--color-seq-2);
}

.kg-skala span:nth-child(3) {
  background: var(--color-seq-3);
}

.kg-skala span:nth-child(4) {
  background: var(--color-seq-4);
}

.kg-skala span:nth-child(5) {
  background: var(--color-seq-5);
}

.kg-granice {
  position: relative;
  grid-column: 1;
  width: 192px;
  height: 18px;
  margin-top: 2px;
  font-size: var(--text-meta);
  color: var(--color-ink-3);
}

.kg-granice span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.kg-leg-brak {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  gap: 8px;
  font-size: var(--text-meta);
  color: var(--color-ink-3);
}

.kg-leg-brak::before {
  content: "";
  flex: none;
  width: 16px;
  height: 8px;
  border: 1px dashed var(--color-ink-3);
}

.kg-stan {
  margin-top: 8px;
  font-size: var(--text-meta);
  color: var(--color-ink-3);
}

/* Legenda w kolumnie obok kartogramu i na telefonie — w wierszach, pozycja „brak” pod paskiem. */
@media (min-width: 1280px), (max-width: 639.98px) {
  .kg-legenda {
    display: block;
  }

  .kg-leg-brak {
    margin-top: 4px;
  }
}

/* Telefon: pasek na szerokość kartogramu — 192 px pod mapą 288–400 px czytał się jak przypis; tytuł 14 px,
   granice i pozycja „brak” 13 px. */
@media (max-width: 639.98px) {
  .kg-skala,
  .kg-granice {
    width: 100%;
  }

  .kg-leg-tytul {
    font-size: var(--text-body);
  }

  .kg-granice {
    height: 20px;
    font-size: var(--text-ui);
  }

  .kg-leg-brak {
    margin-top: 8px;
    font-size: var(--text-ui);
  }
}

/* Ostatnie transakcje. Krój tabeli zależy od miejsca w kolumnie, nie od okna; adres łamie się, gdy brakuje
   miejsca (numer domu zostaje z ulicą). */
.ostatnie {
  container-type: inline-size;
}

.ostatnie h3 {
  margin-bottom: 16px;
  font-size: var(--text-lead-lg);
  font-weight: 500;
  line-height: 1.3;
}

.ostatnie .tabela td {
  vertical-align: middle;
}

.ostatnie .tabela .adres {
  min-width: 8em;
  white-space: normal;
}

.ostatnie .tabela .nr {
  width: 1px; /* kolumna na szerokość znacznika */
  padding-right: 0;
}

/* jednostka w komórce tylko w wierszach telefonu — w tabeli stoi w nagłówku kolumny */
.ostatnie .j {
  display: none;
}

.ostatnie-link {
  margin-top: 16px;
  font-size: var(--text-body);
}

@media (min-width: 640px) and (max-width: 1279.98px) {
  .kartogram,
  .ostatnie {
    max-width: 720px;
  }
}

@container (min-width: 620px) {
  .ostatnie .tabela {
    font-size: var(--text-body);
  }

  .ostatnie .tabela td {
    padding-block: 12px;
  }
}

/* Telefon: każda transakcja w trzech wierszach jak w panelu punktu aplikacji — data i cena za m²,
   adres, powierzchnia i cena. Zmiana display zdejmuje w części przeglądarek semantykę tabeli, dlatego
   role ARIA są wpisane w HTML. */
@media (max-width: 639.98px) {
  .ostatnie .tabela,
  .ostatnie tbody {
    display: block;
  }

  .ostatnie thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ostatnie tbody {
    border-top: 1px solid var(--color-ink);
  }

  .ostatnie tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding-block: 10px;
    border-bottom: 1px solid var(--color-rule);
  }

  .ostatnie .tabela td {
    padding: 0;
    border: 0;
  }

  .ostatnie .tabela .nr {
    grid-row: 1 / span 3;
    align-self: start;
    width: auto;
  }

  .ostatnie td.data {
    grid-column: 2;
    grid-row: 1;
  }

  .ostatnie td.m2 {
    grid-column: 3;
    grid-row: 1;
    font-weight: 500;
  }

  .ostatnie .tabela .adres {
    grid-column: 2 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .ostatnie td.pow {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    color: var(--color-ink-3);
  }

  .ostatnie td.cena {
    grid-column: 3;
    grid-row: 3;
    color: var(--color-ink-2);
  }

  .ostatnie .j {
    display: inline;
  }

  /* Znacznik 20 px z numerem 12 px. Na kartogramie 288–400 px sąsiednie znaczniki stykały się obrysami —
     generator podaje im przesunięcie dla telefonu (--dx/--dy, kilka pikseli). */
  .znacznik {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: var(--text-meta);
    line-height: 17px;
  }

  .kg-znaczniki .znacznik {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  }
}

/* Poniżej 1024 px: tekst nad mapą, mapa na całą szerokość (najwyżej 640 px). */
@media (max-width: 1023.98px) {
  :root {
    --text-display: 2.5rem;
  }

  .hero-text,
  .kraj {
    grid-column: 1 / -1;
  }

  .hero-text {
    max-width: 40rem;
  }

  .kraj {
    max-width: 640px;
    margin-top: 40px;
  }
}

@media (max-width: 639.98px) {
  :root {
    --text-display: 2.125rem;
  }

  .band-hero {
    padding-block: 32px 40px;
  }

  .lead {
    font-size: var(--text-lead);
  }

  /* Dwa przyciski jeden pod drugim na całą szerokość kolumny, jak mapa pod nimi — dwie różne szerokości
     wyglądały na przypadek. */
  .actions {
    flex-direction: column;
  }

  .actions > a {
    justify-content: center;
  }

  .pl-miasta {
    font-size: var(--text-meta);
  }

  .m::before {
    left: -3.5px;
    top: -3.5px;
    width: 7px;
    height: 7px;
  }

  .m.e > span {
    left: 6px;
  }

  .m.w > span {
    right: 6px;
  }

  .m-waw > a {
    font-size: var(--text-body);
  }

  .czesci > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}