/* Strona główna (/) i strona /prywatnosc/ - dokłada się do styles.css (barwy, pismo, nagłówek i stopka stamtąd) */
.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- góra: nazwa, zdanie o Krajopisie, wyszukiwarka ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 28px 64px; align-items: end; padding-top: 76px; padding-bottom: 68px; }
.hero-h { margin: 0; font-stretch: 118%; font-weight: 800; font-size: clamp(40px, 6.2vw, 100px); line-height: 0.96; letter-spacing: -0.018em; }
.hero-p { margin: 0 0 26px; max-width: 32em; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.find-hint, .plate-d, .fm-t, .doc p { text-wrap: pretty; }

.find { position: relative; }
.find-l { display: block; margin: 0 0 8px; font-weight: 650; font-size: 16px; }
#gq { display: block; width: 100%; height: 60px; padding: 0 16px 0 50px; border: 2px solid var(--line); border-radius: 6px; scroll-margin-top: calc(var(--top) + 40px);
  background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237FA3AE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") no-repeat 17px 50% / 20px 20px;
  color: var(--bone); font: 600 20px/1.2 var(--sans); }
#gq::placeholder { color: rgba(127, 163, 174, 0.8); font-weight: 520; }
#gq:focus { outline: none; border-color: var(--signal); }
#gq::-webkit-search-cancel-button { display: none; }
.find-hint { margin: 10px 0 0; max-width: 34em; font-stretch: 88%; font-size: 15px; line-height: 1.4; color: var(--line); }
.find-hint[hidden], .moja[hidden] { display: none; }

/* podpowiedzi: przy każdej gminie mała mapka Polski z kropką - rozróżnia gminy o tej samej nazwie */
.gsugg { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 4px 0; list-style: none; background: var(--deep);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); max-height: min(60vh, 470px); overflow-y: auto; overscroll-behavior: contain; }
.gsugg li { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 10px; cursor: pointer; line-height: 1.25; }
.gsugg li[aria-selected="true"] { background: var(--land); }
@media (hover: hover) { .gsugg li[data-i]:hover { background: var(--land); } }
.gsugg .none { display: block; padding: 10px 14px; cursor: default; color: var(--line); }
.sg-t b { display: block; font-weight: 680; font-size: 17px; }
.sg-t span { display: block; font-stretch: 82%; font-size: 14px; color: var(--line); }
.loc { flex: none; width: 40px; height: 38px; overflow: visible; }
.loc use { fill: rgba(230, 223, 204, 0.17); stroke: rgba(230, 223, 204, 0.62); stroke-width: 26; stroke-linejoin: round; } /* jednostki ramki 1000: ok. 1 px */
.loc circle { fill: var(--signal); stroke: var(--deep); stroke-width: 26; }

.moja { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 16px; line-height: 1.4; }
.moja-t { min-width: 0; }
.moja .loc { width: 34px; height: 32px; }
.moja a { font-weight: 650; }
.moja-x { margin-left: 6px; padding: 0; border: 0; background: none; font-stretch: 85%; font-size: 14px; color: var(--line); text-decoration: underline; text-underline-offset: 3px; }
.moja-x:hover { color: var(--bone); }

/* ---------- najnowsza mapa: duża mapa z jedną liczbą dla Polski, skalą barw i filmem ---------- */
.nowa { padding-bottom: 96px; }
.nm { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "map ." "map head" "map body" "map ."; grid-template-rows: 1fr auto auto 1fr;
  column-gap: 72px; padding-top: 60px; border-top: 1px solid var(--rule); }
.nm-head { grid-area: head; }
.nm-map { grid-area: map; align-self: center; display: block; max-width: 680px; border-radius: 6px; }
.nm-map picture, .nm-map img { display: block; width: 100%; height: auto; }
.nm-map img { transition: filter 0.25s ease; }
.nm-map:hover img { filter: brightness(1.06); }
.nm-body { grid-area: body; }
.nm-k { display: flex; align-items: center; gap: 9px; margin: 0; font-stretch: 88%; font-weight: 650; font-size: 15px; color: var(--line); }
.nm-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.nm-h { margin: 12px 0 0; font-stretch: 118%; font-weight: 800; font-size: clamp(44px, 4.9vw, 76px); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
.nm-h a { text-decoration: none; }
.nm-h a:hover { color: var(--signal); }
.nm-d { margin: 12px 0 0; max-width: 24em; font-family: var(--note); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--line); text-wrap: pretty; }
.nm-f { margin-top: 36px; }
.nm-v { margin: 0; font-stretch: 125%; font-weight: 850; font-size: clamp(64px, 6.3vw, 100px); line-height: 0.88; letter-spacing: -0.025em; color: var(--signal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nm-t { margin: 12px 0 0; max-width: 24em; font-size: 19px; line-height: 1.38; text-wrap: pretty; }
.nm-z { margin: 6px 0 0; font-stretch: 88%; font-size: 14px; line-height: 1.4; color: var(--line); }
/* skala barw jak na stronie mapy */
.nm-leg { margin-top: 28px; max-width: 400px; }
.nm-leg p { margin: 0 0 7px; font-stretch: 82%; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.nm-bar { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: 28px; }
.nm-bar i { height: 10px; }
.nm-bar i:first-child { border-radius: 2px 0 0 2px; }
.nm-bar i:last-of-type { border-radius: 0 2px 2px 0; }
.nm-bar b { position: absolute; top: 13px; transform: translateX(-50%); font-stretch: 72%; font-weight: 520; font-size: 12.5px; color: var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nm-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; font-stretch: 85%; font-weight: 560; font-size: 14px; }
.nm-key span { display: inline-flex; align-items: center; gap: 8px; }
.nm-key i { width: 18px; height: 11px; border-radius: 2px; }
.nm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.nm-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border: 1.5px solid var(--signal); border-radius: 6px; background: var(--signal);
  color: var(--deep); font-weight: 700; font-size: 17px; text-decoration: none; }
.nm-btn:hover { border-color: var(--bone); background: var(--bone); color: var(--deep); }
.nm-film:empty { display: none; }
.nm-film a { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.3; }
.nm-film b { display: block; font-weight: 650; font-size: 16px; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.nm-film b + span { display: block; margin-top: 2px; font-stretch: 85%; font-size: 14px; color: var(--line); }
.nm-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 50%; }
.nm-play svg { width: 12px; height: 12px; margin-left: 2px; fill: var(--bone); }
.nm-film a:hover .nm-play { border-color: var(--signal); }
.nm-film a:hover b { color: var(--signal); }

/* ---------- pozostałe mapy: te same kontury Polski obok siebie, każda w barwach swojej mapy ---------- */
.atlas { padding-bottom: 88px; scroll-margin-top: calc(var(--top) + 16px); }
.sec-h { margin: 0 0 26px; font-stretch: 112%; font-weight: 760; font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; }
.plates { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 44px 32px; margin: 0; padding: 0; list-style: none; }
.plate { display: block; text-decoration: none; color: var(--bone); border-radius: 6px; }
.plate picture, .plate img { display: block; width: 100%; height: auto; }
.plate img { transition: transform 0.25s ease, filter 0.25s ease; }
.plate:hover img { transform: translateY(-4px); filter: brightness(1.07); }
.plate:focus-visible { outline: 2px solid var(--signal); outline-offset: 8px; }
.plate-n { display: block; margin: 8px 0 0; font-stretch: 108%; font-weight: 760; font-size: 21px; line-height: 1.15; }
.plate:hover .plate-n { color: var(--signal); }
.plate-d { display: block; margin: 4px 0 0; max-width: 22em; font-family: var(--note); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--line); }
.plate-new { display: inline-block; padding: 1px 6px 2px; border-radius: 3px; background: var(--signal); color: var(--deep); font-stretch: 88%; font-weight: 700; font-size: 12px;
  line-height: 1.3; letter-spacing: 0.01em; vertical-align: 3px; }
/* wiele map: tematy, każdy w jednym rzędzie */
.grp + .grp { margin-top: 52px; }
.grp-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-stretch: 108%; font-weight: 740; font-size: 21px; line-height: 1.15; }
.grp-h span { font-stretch: 85%; font-weight: 520; font-size: 15px; color: var(--line); }
.grp-more { display: none; height: 44px; margin-top: 26px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 6px; background: none; font-weight: 650; font-size: 15.5px; }
.grp-more:hover { border-color: var(--signal); color: var(--signal); }
@media (min-width: 1024px) {
  .grp-l { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 26px; }
  .grp-l .plate-n { font-size: 19px; }
  .grp-l .plate-d { font-size: 16px; }
  .grp-l:not(.open) > li:nth-child(n + 6) { display: none; }
  .grp-more { display: inline-block; }
}
/* przewijany w bok rząd (telefon i tablet): następna mapa wystaje zza krawędzi, więc widać, że jest ich więcej */
@media (max-width: 1023px) {
  .plates-shelf { display: flex; gap: 18px; margin: 0 -24px; padding: 0 24px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  .plates-shelf::-webkit-scrollbar { display: none; }
  .plates-shelf > li { flex: 0 0 29%; scroll-snap-align: start; }
}

/* ---------- gra i quiz: dwa równe kafle obok siebie, na telefonie jeden pod drugim (kafel .gb: styles.css; quiz: site/quiz-blok.js) ---------- */
.gb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gb-duo .gb { max-width: none; height: 100%; }
.qb-fig svg { overflow: visible; }
.qb-fig .qb-r { fill: rgba(230, 223, 204, 0.1); stroke: rgba(127, 163, 174, 0.45); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.qb-fig .qb-t { fill: rgba(230, 223, 204, 0.42); }
.qb-fig .qb-on { fill: var(--bone); transition: fill 0.2s; }
.qb-fig .qb-on-t { fill: var(--deep); opacity: 0.55; }
.qb-fig .qb-ok { fill: none; stroke: var(--deep); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.qb:hover .qb-fig .qb-on { fill: var(--signal); }
@media (max-width: 720px) { .gb-duo { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- filmy ---------- */
.films { padding-bottom: 48px; }
.fm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--deep); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.thumb:hover img { transform: scale(1.03); }
.thumb-p { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(10, 38, 48, 0.84); }
.thumb-p svg { width: 14px; height: 14px; margin-left: 2px; fill: var(--bone); }
.fm-t { margin: 0; }
.fm-t a { text-decoration: none; }
.fm-t a:hover { color: var(--signal); }
.fm-big .fm-t { margin: 18px 0 8px; font-stretch: 110%; font-weight: 780; font-size: 30px; line-height: 1.1; letter-spacing: -0.005em; max-width: 24em; }
.fm-meta { margin: 0 0 4px; font-stretch: 85%; font-size: 15px; color: var(--line); }
.fm-map { margin: 0; font-size: 16px; }
.fm-map a { font-weight: 650; }
.fm-rest { display: grid; gap: 26px; }
.fm-sm { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.fm-sm .fm-t { margin: 0 0 6px; font-weight: 700; font-size: 18px; line-height: 1.22; }
.fm-all { margin: 2px 0 0; font-size: 16px; }
.fm-all a { font-weight: 650; }
.fm-err { margin: 0; color: var(--line); }
.fm-pr { font-stretch: 100%; font-weight: 700; color: var(--signal); }

/* ---------- strona tekstowa (/prywatnosc/) ---------- */
.doc { max-width: 760px; padding-top: 56px; padding-bottom: 88px; }
.doc h1 { margin: 0 0 18px; font-stretch: 118%; font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -0.015em; }
.doc h2 { margin: 38px 0 8px; font-stretch: 108%; font-weight: 740; font-size: 22px; line-height: 1.2; }
.doc p { margin: 0 0 12px; max-width: 38em; }
.doc .lead { font-size: 19px; }
.doc .upd { margin-top: 40px; font-stretch: 85%; font-size: 14px; color: var(--line); }

.foot-col a[href="/prywatnosc/"] { white-space: nowrap; }

@media (max-width: 900px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero { grid-template-columns: 1fr; gap: 14px; padding-top: 26px; padding-bottom: 40px; }
  .hero-h { font-size: clamp(38px, 11.4vw, 72px); line-height: 0.98; }
  .hero-p { margin-bottom: 22px; font-size: 17px; }
  #gq { height: 56px; font-size: 19px; }
  .nowa { padding-bottom: 64px; }
  .nm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "body"; grid-template-rows: none; padding-top: 40px; }
  .nm-h { font-size: clamp(38px, 11vw, 60px); }
  .nm-d { font-size: 18px; }
  .nm-map { margin: 22px auto 0; width: 100%; }
  .nm-f { margin-top: 26px; }
  .nm-v { font-size: 68px; }
  .nm-t { font-size: 17.5px; }
  .nm-leg { margin-top: 24px; max-width: none; }
  .nm-act { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 28px; }
  .nm-btn { justify-content: center; }
  .atlas { padding-bottom: 60px; }
  .plates-shelf { gap: 14px; margin: 0 -16px; padding: 0 16px 10px; scroll-padding-inline: 16px; }
  .grp + .grp { margin-top: 36px; }
  .grp-h { margin-bottom: 14px; font-size: 19px; }
  .sec-h { margin-bottom: 20px; font-size: 23px; }
  .fm { grid-template-columns: 1fr; }
  .fm-big .fm-t { margin-top: 14px; font-size: 24px; }
  .fm-rest { gap: 20px; }
  .fm-sm { grid-template-columns: 136px minmax(0, 1fr); gap: 12px; }
  .fm-sm .fm-t { font-size: 16px; }
  .fm-meta { font-size: 14px; }
  .fm-map { font-size: 15px; }
  .films { padding-bottom: 24px; }
  .doc { padding-top: 32px; padding-bottom: 60px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* tablet pionowo: najnowsza mapa w jednej kolumnie, ale skala i przyciski w normalnej szerokości */
  .nm-leg { max-width: 480px; }
  .nm-act { flex-direction: row; align-items: center; gap: 18px 28px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  /* tablet: do czterech map w jednym rzędzie, jak na komputerze */
  .plates { gap: 36px 20px; }
  .plate-n { font-size: 18px; }
  .plate-d { font-size: 15.5px; }
}
@media (max-width: 640px) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .plates-shelf > li { flex-basis: 42%; }
  .plate-n { margin-top: 4px; font-size: 17px; }
  .plate-d { font-size: 15px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .plate img, .thumb img, .nm-map img { transition: none; }
  .plate:hover img, .thumb:hover img { transform: none; }
}