/* Strona główna portaldom.info (/) - elementy własne marki na wspólnym układzie. Wyłącznie zmienne z M.wyglad; wyjątki: progi @media i wartości bezwymiarowe.
   Geometria mapy (promienie kropek, położenia) to dane w atrybutach SVG - liczy je backend/portaldom/strony/glowna.js. */

/* hasło: nagłówek i wyszukiwarka mają wygląd ze wspólnego arkusza (.hero, .szukaj) */
.gl-haslo .wstep{max-width:62ch}
/* jedna linia pod nagłówkiem na telefonie, zdanie z liczbami na szerokim ekranie */
.gl-podtytul{display:none}
/* „Ostatnio oglądane: miasto →”: wysokość zarezerwowana także wtedy, gdy linii nie ma (bez przesunięcia układu po wczytaniu skryptu) */
.gl-ostatnio{min-height:var(--pole-wys);margin-top:var(--o-1);display:flex;align-items:center;gap:var(--o-1);white-space:nowrap;overflow:hidden;font-size:var(--f-s);color:var(--tekst-2);max-width:var(--tekst-szer)}
.gl-ostatnio a{display:inline-flex;align-items:center;min-height:var(--pole-wys);min-width:var(--pole-wys);color:var(--akcent);font-weight:var(--waga-srednia);text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis}
/* kafle 2×2: transakcje, miasta, data danych, licznik dni (odnośnik) */
.gl-liczby{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--o-3);margin:var(--o-2) 0 var(--o-4);padding:0;list-style:none}
.gl-liczby li{display:flex;min-width:0}
.gl-liczba{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--o-1);background:var(--karta);border:var(--kreska) solid var(--linia);border-radius:var(--r-2);padding:var(--o-3) var(--o-4);min-width:0;min-height:var(--pole-wys);box-sizing:border-box;text-decoration:none;color:var(--tekst)}
.gl-liczba-n{font-size:var(--f-xs);color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-liczba b{font-size:var(--f-l);line-height:var(--interlinia-ciasna);font-weight:var(--waga-gruba);white-space:nowrap}
.gl-liczba-link b{color:var(--akcent)}
.gl-liczba-link:hover{border-color:var(--akcent)}
@media(max-width:767px){
  .gl-podtytul{display:block}.gl-wstep{display:none}
  .gl-haslo .gl-podtytul{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-xs);margin-top:var(--o-2)}
}
@media(min-width:768px){
  .gl-liczby{grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--wykres-maks)}
  .gl-liczba b{font-size:var(--f-xl)}
}

/* mapa miast */
.gl-mapa{margin:var(--o-4) 0;max-width:var(--wykres-maks);position:relative}
.gl-mapa-pole{position:relative;aspect-ratio:20/19;width:100%}
.gl-mapa-pole picture,.gl-mapa-pole img{display:block;width:100%;height:100%}
.gl-mapa figcaption{margin-top:var(--o-2);font-size:var(--f-xs);color:var(--tekst-3)}
/* punkt miasta: odnośnik wyśrodkowany na współrzędnych; widoczne koło ma średnicę --d, mniejsze punkty leżą na wierzchu (kolejność w HTML) */
.gl-kropka{position:absolute;width:max(var(--d),24px);height:max(var(--d),24px);transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:var(--r-pelny);text-decoration:none}
.gl-kropka i{display:block;width:var(--d);height:var(--d);border-radius:var(--r-pelny);background:var(--s1);border:var(--kreska-gruba) solid #ffffff;box-shadow:0 1px 4px rgba(0,0,0,.55);box-sizing:border-box}
.gl-kropka:hover i,.gl-kropka:focus-visible i{background:var(--akcent-mocny)}
.gl-kropka:focus-visible{outline:var(--fokus-szer) solid #ffffff;outline-offset:1px}
.gl-kropka:hover,.gl-kropka:focus-visible{z-index:3}
.gl-etykieta{display:none;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:var(--f-xs);font-weight:var(--waga-gruba);color:#ffffff;text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;pointer-events:none;line-height:1}
.gl-ile{display:none;position:absolute;left:50%;top:50%;margin:calc(var(--d) / -2 - 9px) 0 0 calc(var(--d) / 2 - 5px);font-size:11px;font-weight:var(--waga-gruba);line-height:1;color:#0e1524;background:#ffffff;border-radius:var(--r-pelny);padding:2px 5px;pointer-events:none}
@media (min-width:701px){
  .gl-w-grupie-k{display:none}
  .gl-ile-k{display:block}
  .gl-et-kp .gl-etykieta{display:block;left:calc(50% + var(--d) / 2 + 4px)}
  .gl-et-kl .gl-etykieta{display:block;right:calc(50% + var(--d) / 2 + 4px)}
  .gl-et-kg .gl-etykieta{display:block;left:50%;top:auto;bottom:calc(50% + var(--d) / 2 + 3px);transform:translateX(-50%)}
  .gl-et-kd .gl-etykieta{display:block;left:50%;top:calc(50% + var(--d) / 2 + 3px);transform:translateX(-50%)}
}
@media (max-width:700px){
  /* telefon: cel dotyku 44 px; miasta z grupy większego sąsiada są w jego dymku („W pobliżu”) */
  .gl-kropka{width:44px;height:44px}
  .gl-kropka i{width:min(var(--d),26px);height:min(var(--d),26px)}
  .gl-w-grupie{display:none}
  .gl-ile{display:block;margin:-20px 0 0 6px}
  .gl-ile.gl-ile-k{display:none}
  .gl-et-tp .gl-etykieta{display:block;left:calc(50% + 16px)}
  .gl-et-tl .gl-etykieta{display:block;right:calc(50% + 16px)}
  .gl-et-tg .gl-etykieta{display:block;left:50%;top:auto;bottom:calc(50% + 15px);transform:translateX(-50%)}
  .gl-et-td .gl-etykieta{display:block;left:50%;top:calc(50% + 15px);transform:translateX(-50%)}
}

.gl-miasta{margin-top:var(--o-5);scroll-margin-top:var(--o-5)}
.gl-kafel-med,.gl-kafel-n,.gl-kafel-brak{margin:0}
.gl-kafel-med span,.gl-kafel-n,.gl-kafel-brak{font-size:var(--f-s);color:var(--tekst-2)}
.gl-kafel-med b{font-size:var(--f-l);font-weight:var(--waga-gruba);white-space:nowrap}
.gl-reszta summary{cursor:pointer;color:var(--akcent);font-weight:var(--waga-srednia);padding:var(--o-2) 0}
.gl-reszta summary:hover{color:var(--akcent-mocny)}

/* aktualności */
.gl-aktualnosci{list-style:none;margin:var(--o-3) 0;padding:0;max-width:var(--tekst-szer)}
.gl-aktualnosci li{padding:var(--o-3) 0;border-bottom:var(--kreska) solid var(--linia)}
.gl-aktualnosci a{font-weight:var(--waga-srednia)}
.gl-aktualnosci small{display:block;margin-top:var(--o-1)}

/* skrót porównania: na wąskim ekranie wiersz = blok (cecha, potem dwie odpowiedzi z podpisem kolumny); od 560 px zwykła tabela */
.gl-porownanie{max-width:var(--wykres-maks);background:var(--karta);border:var(--kreska) solid var(--linia);border-radius:var(--r-2);margin:var(--o-3) 0}
.gl-porownanie table{display:block;width:100%;border-collapse:collapse;font-size:var(--f-s)}
.gl-porownanie thead{display:none}
.gl-porownanie tbody,.gl-porownanie tr,.gl-porownanie th,.gl-porownanie td{display:block}
.gl-porownanie tr{padding:var(--o-3) var(--o-4);border-bottom:var(--kreska) solid var(--linia)}
.gl-porownanie tr:last-child{border-bottom:0}
.gl-porownanie th{text-align:left;font-weight:var(--waga-srednia)}
.gl-porownanie tbody th{font-size:var(--f-m);margin-bottom:var(--o-2)}
.gl-porownanie td{padding:var(--o-1) 0}
.gl-porownanie td::before{content:attr(data-etykieta);display:block;font-size:var(--f-xs);color:var(--tekst-3)}

.gl-tekst p{max-width:var(--tekst-szer)}
.gl-dalej{margin:var(--o-3) 0 0}
.gl-dalej a{font-weight:var(--waga-srednia)}

@media (min-width:560px){
  .gl-porownanie{max-width:100%;width:fit-content;overflow-x:auto}   /* karta obejmuje całą tabelę (tło i ramka), nic nie wychodzi poza nią */
  .gl-porownanie table{display:table}
  .gl-porownanie thead{display:table-header-group}
  .gl-porownanie tbody{display:table-row-group}
  .gl-porownanie tr{display:table-row;padding:0}
  .gl-porownanie th,.gl-porownanie td{display:table-cell;padding:var(--o-3) var(--o-4);vertical-align:top;border-bottom:var(--kreska) solid var(--linia)}
  .gl-porownanie tbody tr:last-child th,.gl-porownanie tbody tr:last-child td{border-bottom:0}
  .gl-porownanie thead th{background:var(--karta-2);color:var(--tekst-2);font-size:var(--f-xs)}
  .gl-porownanie thead th:first-child{border-top-left-radius:var(--r-2)}
  .gl-porownanie thead th:last-child{border-top-right-radius:var(--r-2)}
  .gl-porownanie tbody th{font-size:inherit;margin:0}
  .gl-porownanie td::before{content:none}
}
/* dymek miasta na mapie (pliki/pd.js): karta jak dymek mapy miast drugiej marki (.mapa-karta ze wspólnego arkusza) */
.gl-dymek{position:absolute;z-index:6;background:var(--karta-2);color:var(--tekst);border:var(--kreska) solid var(--linia-mocna);border-radius:var(--r-2);padding:var(--o-3) var(--o-5) var(--o-3) var(--o-3);box-shadow:var(--cien);min-width:200px}
.gl-dymek .btn{display:flex;align-items:center;justify-content:center;min-height:var(--pole-wys);text-decoration:none}
.gl-dymek-zamknij{position:absolute;top:0;right:0;width:var(--pole-wys);height:var(--pole-wys);border:0;background:none;color:var(--tekst-2);font-size:var(--f-xl);cursor:pointer}
.gl-dymek-obok{display:flex;flex-wrap:wrap;gap:var(--o-1) var(--o-3);align-items:center;font-size:var(--f-s);color:var(--tekst-2);max-width:240px}
.gl-dymek-obok a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--pole-wys);min-width:var(--pole-wys);color:var(--akcent);text-decoration:underline;text-underline-offset:3px}
/* kafle miast: przed rozwinięciem „Pozostałe miasta” trzy pełne rzędy (tyle kolumn, ile mieści szerokość) - dalsze rzędy mają wysokość 0 i są przycięte;
   odstęp między rzędami daje margines kafla (odstęp siatki liczyłby się także dla rzędów schowanych) */
.gl-kafle-miast{row-gap:0;grid-template-rows:repeat(3,auto);grid-auto-rows:0;overflow:hidden;margin-bottom:0;padding:var(--fokus-szer) var(--fokus-szer) 0;margin-left:calc(var(--fokus-szer) * -1);margin-right:calc(var(--fokus-szer) * -1)}
.gl-kafle-miast>*{margin-bottom:var(--o-3)}
.gl-miasta:has(.gl-reszta[open]) .gl-kafle-miast,.gl-kafle-miast.gl-rozwiniete{grid-template-rows:none;grid-auto-rows:auto;overflow:visible}
.gl-reszta-n{font-weight:var(--waga-zwykla,400);color:var(--tekst-2)}
/* mapa interaktywna po pierwszym geście (pliki/mapa-miast.js): leży na obrazie startowym w tym samym kadrze; punkty HTML znikają, dymek zostaje */
.gl-mapa-zywa{position:absolute;inset:0;opacity:0;transition:opacity .25s;border-radius:var(--r-2);overflow:hidden}
.gl-mapa-gotowa .gl-mapa-zywa{opacity:1}
.gl-mapa-gotowa .gl-kropka,.gl-mapa-gotowa picture,.gl-mapa-gotowa .gl-mapa-wlacz{visibility:hidden}
.gl-mapa-wlacz{position:absolute;right:var(--o-2);bottom:var(--o-2);z-index:4;min-height:var(--pole-wys);box-shadow:var(--cien)}
.gl-dymek{max-height:calc(100% - 8px);overflow-y:auto;box-sizing:border-box}

/* R21 PKT 6: obraz startowy w wyglądzie żywej mapy (skupiska, kropki) nad ortofotomapą; punkty-odnośniki i ortofotomapa ukryte (dane i źródło
   podkładu dla pliki/mapa-miast.js). Żywa mapa wczytuje się sama po chwili i przejmuje kadr (.gl-mapa-gotowa) - bez przesunięć. */
.gl-mapa-start{position:absolute;inset:0;z-index:1;pointer-events:none}
.gl-mapa-start img{display:block;width:100%;height:100%}
.gl-ze-startem .gl-mapa-pole>picture:not(.gl-mapa-start){display:none}   /* leniwe ortofoto nie pobiera się na starcie (LCP); żywa mapa bierze adres z <source> */
.gl-ze-startem .gl-kropka{visibility:hidden}
.gl-mapa-gotowa .gl-mapa-start{visibility:hidden}