/* =========================================================================
   Warszawskie Misie - misie.eagerbeaver.pl
   Jeden plik, bez frameworków. Mobile first, ale rośnie na dużych ekranach.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- kolory -----------------------------------------------------------
     Prowadzą barwy m.st. Warszawy: żółty Pantone 116 i czerwony Pantone 485.
     Żeby miały czym oddychać, tło jest neutralnym, jasnym papierem - żadnej
     kremowej żółci, która podgryzałaby żółć warszawską. Ciepło strony trzyma
     kakaowy atrament, nie tło.

     Każdy kolor ma jedno zadanie i nie robi nic poza nim:
       żółty     - "tu mamy szkołę"
       czerwony  - "to jest teraz wybrane" oraz główna akcja
       błękit    - logo, Wisła i odnośniki
       papier i kakao - cała reszta
  */
  --papier:         #F8F8F5;
  --papier-2:       #F1F1EC;
  --karta:          #FFFFFF;

  --kakao:          #3A3129;
  --kakao-2:        #6E6459;

  --linia:          #E5E4DD;
  --linia-mocna:    #D2D0C6;

  /* barwy Warszawy */
  --zolty:          #FFD600;   /* Pantone 116 - oficjalny */
  --zolty-mocny:    #FFE24D;
  --zolty-ciemny:   #DDB800;
  --zolty-mgla:     #FFF6D6;

  --czerwony:       #E11000;   /* biały tekst ma tu 4,9:1 */
  --czerwony-zywy:  #FF1100;   /* Pantone 485 - tam, gdzie nic nie piszemy */
  --czerwony-hover: #C90E00;
  --czerwony-ciemny:#A50B00;
  --czerwony-mgla:  #FDECE9;

  --blekit:         #1F6FA8;   /* z logotypu - odnośniki */
  --wisla:          #AFD5EE;

  --nieaktywna:     #E9E8E2;   /* dzielnice bez szkoły */
  --nieaktywna-h:   #DEDCD3;

  /* --- typografia --- */
  --display: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --tekst:   system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- wymiary --- */
  --obszar:    76rem;
  --czytelne:  36rem;
  --margines:  1.15rem;
  --promien:   1.15rem;
  --promien-s: .8rem;

  --cien:      0 1px 2px rgba(58, 49, 41, .06);
  --cien-uni:  0 8px 24px rgba(58, 49, 41, .09);
}

@media (max-width: 22.5rem) { :root { --margines: .85rem; } }
@media (min-width: 48rem)   { :root { --margines: 2rem; } }
@media (min-width: 64rem)   { :root { --margines: 2.5rem; } }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--kakao);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: var(--blekit); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--kakao);
  outline-offset: 3px;
  border-radius: .4rem;
}

.obszar {
  width: 100%;
  max-width: var(--obszar);
  margin-inline: auto;
  padding-inline: var(--margines);
}

.pomin {
  position: absolute;
  left: -9999px;
  background: var(--kakao);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--promien-s) 0;
  z-index: 20;
}
.pomin:focus { left: 0; top: 0; }

/* =========================================================================
   Nagłówek
   ========================================================================= */

.naglowek {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia);
  padding-block: .5rem;
  padding-top: max(.5rem, env(safe-area-inset-top));
}

.znak { display: flex; align-items: center; gap: .65rem; }

.znak__logo { width: 2.9rem; height: 2.9rem; flex: none; }

.znak__tekst { display: flex; flex-direction: column; }

.znak__nazwa {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.znak__podpis {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--kakao-2);
  letter-spacing: .04em;
}

/* =========================================================================
   Baner podglądu roboczego
   ========================================================================= */

.demo {
  max-width: calc(var(--obszar) - 2 * var(--margines));
  margin: 1rem auto 0;
  padding: .7rem .9rem;
  background: var(--zolty-mgla);
  border: 2px dashed var(--zolty-ciemny);
  border-radius: var(--promien-s);
  font-size: .85rem;
  line-height: 1.45;
}
.demo code { font-size: .95em; background: #fff9; padding: 0 .25em; border-radius: .2em; }

/* =========================================================================
   Start: tekst + mapa
   ========================================================================= */

.start { padding-block: 1.8rem 0; }

.start__siatka { display: grid; gap: 2rem; }

.start__tytul { font-size: clamp(2rem, 7.4vw, 2.6rem); }

/* Zakreślacz w żółci warszawskiej - tekst zostaje kakaowy, więc czyta się dobrze. */
.start__tytul em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--zolty) 58%, var(--zolty) 94%, transparent 94%);
  padding-inline: .1em;
  box-decoration-break: clone;
}

.start__lead {
  margin-top: 1rem;
  max-width: var(--czytelne);
  color: var(--kakao-2);
  font-size: 1.02rem;
  text-wrap: pretty;
}

/* --- przełącznik mapa / lista (tylko wąski ekran) --- */

.przelacznik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  background: var(--papier-2);
  border: 1px solid var(--linia);
  border-radius: 99px;
}

.przelacznik__el {
  min-height: 2.9rem;
  padding: .4rem .8rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font-family: var(--display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--kakao-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.przelacznik__el:hover { color: var(--kakao); }
.przelacznik__el[aria-pressed="true"] {
  background: var(--karta);
  color: var(--kakao);
  box-shadow: var(--cien);
}

/* Poniżej dużego ekranu widać albo mapę, albo listę - nigdy obie naraz. */
@media (max-width: 63.99rem) {
  .start--mapa  .start__skrot { display: none; }
  .start--lista .start__mapa  { display: none; }
  .start--lista .skrot__lista { grid-template-columns: 1fr; }
  .start--lista .skrot__el    { min-height: 4rem; font-size: 1.08rem; }
}

/* --- mapa --------------------------------------------------------------- */

.mapa {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dzielnica {
  fill: var(--nieaktywna);
  stroke: var(--papier);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .15s ease;
}
.dzielnica--jest { fill: var(--zolty); }

@media (hover: hover) {
  .dzielnica:hover       { fill: var(--nieaktywna-h); }
  .dzielnica--jest:hover { fill: var(--zolty-mocny); }
}

.dzielnica[aria-pressed="true"],
.dzielnica--jest[aria-pressed="true"] {
  fill: var(--czerwony);
}

/* Obramowanie pojawia się wyłącznie przy sterowaniu klawiaturą.
   Kliknięcie myszą nie ustawia tu ogniskowej - patrz app.js. */
.dzielnica:focus-visible {
  outline: none;
  stroke: var(--kakao);
  stroke-width: 4;
}

.rzeka { fill: var(--wisla); pointer-events: none; }

.podpis {
  fill: var(--kakao);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
}
.podpis--wybrany { fill: #fff; stroke: rgba(110, 10, 0, .45); }
.podpis--ukryty  { display: none; }

/* Dopisek pod mapą. Stoi poza .start__mapa, bo na wąskim ekranie mapa chowa się
   po przełączeniu na listę dzielnic, a ta informacja ma zostać na oczach. */
.start__dopisek {
  max-width: var(--czytelne);
  padding: .8rem 1rem;
  background: var(--zolty-mgla);
  border-left: .28rem solid var(--zolty);
  border-radius: 0 var(--promien-s) var(--promien-s) 0;
  color: var(--kakao);
  font-size: .95rem;
  text-wrap: pretty;
}

/* Pierwsze słowa niosą całą informację, więc czytane z ukosa wystarczą. */
.start__dopisek strong { font-family: var(--display); font-weight: 800; }

/* --- legenda --- */

.legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.2rem;
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--kakao-2);
}
.legenda__el { display: inline-flex; align-items: center; gap: .4rem; }

.probka { width: 1rem; height: .8rem; border-radius: .25rem; flex: none; }
.probka--jest { background: var(--zolty); }
.probka--brak { background: var(--nieaktywna); }

/* --- lista dzielnic, w których są szkoły --- */

.skrot__tytul {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kakao-2);
  margin-bottom: .8rem;
}

.skrot__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .65rem;
}

.skrot__el {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 3.6rem;
  padding: .65rem .7rem .65rem 1rem;
  border: 2px solid var(--linia-mocna);
  border-radius: var(--promien-s);
  background: var(--karta);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--kakao);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.skrot__el:hover  { border-color: var(--czerwony); background: var(--czerwony-mgla); }
.skrot__el:active { background: #FADFDA; }

.skrot__el[aria-pressed="true"] {
  background: var(--czerwony);
  border-color: var(--czerwony);
  color: #fff;
}
.skrot__el[aria-pressed="true"] .skrot__ile { background: #fff; color: var(--czerwony); }

.skrot__etykieta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.skrot__okolice {
  font-family: var(--tekst);
  font-weight: 600;
  font-size: .78rem;
  color: var(--kakao-2);
}
.skrot__el[aria-pressed="true"] .skrot__okolice { color: rgba(255, 255, 255, .85); }

.skrot__ile {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 1.7rem;
  height: 1.7rem;
  padding-inline: .35rem;
  border-radius: 99px;
  background: var(--zolty);
  color: var(--kakao);
  font-family: var(--tekst);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================================
   Wyniki
   ========================================================================= */

.wyniki:not(:empty) {
  margin-top: 3rem;
  padding-block: 2.6rem;
  background: var(--papier-2);
  border-block: 1px solid var(--linia);
}
.wyniki:focus { outline: none; }

.wyniki__naglowek { margin-bottom: 1.2rem; }
.wyniki__tytul { font-size: clamp(1.45rem, 4.4vw, 2rem); }
.wyniki__podtytul { margin-top: .4rem; max-width: var(--czytelne); color: var(--kakao-2); font-size: .97rem; }

/* auto-fit zwija puste kolumny, więc jedna szkoła rozkłada się na cały kontener,
   dwie na pół, a od trzech w górę układają się w trzy kolumny. */
.wyniki__lista {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.szkola__info { display: contents; }

.szkola {
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1.2rem;
  box-shadow: var(--cien);
}

.szkola__nazwa { font-size: 1.25rem; }
.szkola__adres { margin-top: .35rem; color: var(--kakao-2); font-size: .96rem; }
.szkola__uwaga { margin-top: .5rem; font-size: .88rem; color: var(--czerwony-ciemny); font-weight: 700; }

.plakietki { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; padding: 0; list-style: none; }
.plakietka {
  font-size: .76rem;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 99px;
  background: var(--zolty-mgla);
  color: var(--kakao-2);
  border: 1px solid var(--zolty);
}

.szkola__akcje { margin-top: auto; padding-top: 1.2rem; }

/* Szeroka karta pojedynczej szkoły: opis po lewej, przyciski po prawej,
   inaczej czerwony przycisk rozciągałby się przez cały ekran. */
@media (min-width: 52rem) {
  .szkola:only-child { flex-direction: row; align-items: flex-start; gap: 2.5rem; }
  .szkola:only-child .szkola__info { display: block; flex: 1; }
  .szkola:only-child .szkola__akcje { flex: 0 0 20rem; margin-top: 0; padding-top: 0; }
}

.przycisk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .8rem 1rem;
  border: 0;
  border-radius: var(--promien-s);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.przycisk__ikona { width: 1.15em; height: 1.15em; flex: none; }

.przycisk--glowny {
  background: var(--czerwony);
  color: #fff;
}
.przycisk--glowny:hover  { background: var(--czerwony-hover); box-shadow: 0 4px 14px rgba(225, 16, 0, .28); }
.przycisk--glowny:active { background: var(--czerwony-ciemny); box-shadow: none; }

/* Flex, a nie grid: gdy przycisków jest nieparzyście (Zadzwoń, Napisz, Dojazd),
   ostatni sam rozciąga się na całą szerokość zamiast wisieć w połowie rzędu. */
.szkola__dodatkowe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .6rem;
}
.szkola__dodatkowe > .przycisk { flex: 1 1 7.5rem; width: auto; }

.przycisk--drugi {
  background: var(--karta);
  color: var(--kakao);
  border: 2px solid var(--linia-mocna);
  font-size: .98rem;
  font-weight: 700;
  min-height: 3.1rem;
}
.przycisk--drugi:hover  { border-color: var(--kakao-2); background: var(--papier); }
.przycisk--drugi:active { background: var(--papier-2); }

/* Wspólna część dzielnicy. Umowa mówi, że w jednej dzielnicy uczy jedna szkoła,
   więc jej logo, nazwa, kursy i przycisk stoją raz nad listą - karty niżej
   różnią się tylko adresem i kontaktem. */
.szkola-wspolna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 1.1rem;
  padding: 1.1rem 1.2rem;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}

/* Logotypy przychodzą w różnych proporcjach, więc trzymamy wysokość i szerokość
   w ryzach, a obrazek wpisuje się w tę ramkę bez zniekształcenia. */
.szkola-wspolna__logo {
  flex: none;
  width: auto;
  height: 3.2rem;
  max-width: 11rem;
  object-fit: contain;
}

.szkola-wspolna__tresc { flex: 1 1 14rem; min-width: 0; }
.szkola-wspolna__nazwa { font-size: 1.35rem; }
.szkola-wspolna__tresc .plakietki { margin-top: .6rem; }
.szkola-wspolna__akcja { flex: none; }

.wyniki__powtorka { margin-top: 1.1rem; }

@media (min-width: 52rem) {
  .szkola-wspolna { flex-wrap: nowrap; gap: 1.6rem; padding: 1.3rem 1.4rem; }
  .szkola-wspolna__logo { height: 3.8rem; }
  .szkola-wspolna__akcja { width: auto; min-width: 17rem; }

  .wyniki__powtorka { display: flex; justify-content: center; }
  .wyniki__powtorka .przycisk { width: auto; min-width: 20rem; }
}

/* dzielnica bez szkoły */
.pusto {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1.4rem;
  max-width: 42rem;
  box-shadow: var(--cien);
}
.pusto__tytul { font-size: 1.3rem; }
.pusto__tekst { margin-top: .5rem; color: var(--kakao-2); font-size: .97rem; }
.pusto__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .65rem;
  margin-top: 1.1rem;
}

/* =========================================================================
   Sekcje treściowe
   ========================================================================= */

.nadtytul {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--czerwony);
  margin-bottom: .55rem;
}

.sekcja__tytul { font-size: clamp(1.5rem, 4.6vw, 2.2rem); max-width: 30ch; }
.sekcja__lead { margin-top: .9rem; max-width: 46rem; color: var(--kakao-2); font-size: 1rem; text-wrap: pretty; }

.metody { padding-top: 3.6rem; }

.metody__lista { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .9rem; }

.metoda {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: .85rem;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1.1rem;
  box-shadow: var(--cien);
}

/* Nagłówek karty: po lewej wiek i nazwa, po prawej maskotka. Grafika skaluje
   się z szerokością ekranu, ale nie rośnie ponad swój rozmiar źródłowy (104 px). */
.metoda__naglowek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
}

.metoda__tytul { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.metoda__obrazek {
  width: clamp(5.5rem, 24vw, 6.5rem);
  height: clamp(5.5rem, 24vw, 6.5rem);
  border-radius: var(--promien-s);
  background: var(--zolty-mgla);
  object-fit: contain;
  padding: .4rem;
}
.metoda__obrazek--foto { object-fit: cover; padding: 0; }

.metoda__wiek {
  display: inline-block;
  align-self: flex-start;   /* .metoda__tytul jest flexem, inaczej plakietka rozciąga się na całą szerokość */
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .24rem .6rem;
  border-radius: 99px;
  background: var(--zolty);
  color: var(--kakao);
  margin-bottom: .45rem;
}

.metoda__tresc { display: flex; flex-direction: column; }

.metoda__nazwa { font-size: 1.12rem; text-wrap: balance; }
.metoda__opis { margin-top: .4rem; font-size: .93rem; line-height: 1.5; color: var(--kakao-2); text-wrap: pretty; }
.metoda__tresc > .metoda__opis:first-child { margin-top: 0; }

.metoda__cechy {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  font-size: .87rem;
  color: var(--kakao);
}
.metoda__cechy li { position: relative; padding-left: 1.3rem; }
.metoda__cechy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--zolty);
}

.metoda__zrodlo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blekit);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.metoda__zrodlo:hover { border-bottom-color: var(--blekit); }

/* Szósty kafelek: nie kurs, tylko cała ścieżka. Inny kolor mówi to bez słów. */
.metoda--sciezka {
  display: flex;
  flex-direction: column;
  background: var(--zolty-mgla);
  border-color: var(--zolty);
}

.metoda__nadtytul {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--czerwony);
  margin-bottom: .45rem;
}

.metoda--sciezka .metoda__zrodlo { margin-top: auto; padding-top: 1rem; }

/* Poziomy jeden pod drugim - to jest ścieżka w czasie, nie zbiór odznak.
   W poziomie łamały się tak, że strzałka zostawała na końcu wiersza. */
.sciezka__kroki {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.sciezka__kroki li {
  padding: .3rem .65rem;
  border-radius: 99px;
  background: var(--karta);
  border: 1px solid var(--zolty);
  font-size: .8rem;
  font-weight: 700;
}
/* Wyższa swoistość niż reguła kafelków wyżej - inaczej strzałka też dostaje pigułkę. */
.sciezka__kroki .sciezka__strzalka {
  padding: 0;
  border: 0;
  background: none;
  font-size: .95rem;
  margin-left: 1.1rem;
  line-height: 1;
  color: var(--zolty-ciemny);
  font-weight: 800;
}
.metoda__zrodlo .przycisk__ikona { width: 1em; height: 1em; }

.czemu { padding-top: 3.6rem; }

.czemu__lista { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.4rem; }

.czemu__el { padding-left: 1.1rem; border-left: 4px solid var(--zolty); }
.czemu__el h3 { font-size: 1.08rem; }
.czemu__el p { margin-top: .35rem; font-size: .95rem; color: var(--kakao-2); text-wrap: pretty; }

/* =========================================================================
   Stopka
   ========================================================================= */

.stopka {
  margin-top: 4.5rem;
  padding-block: 2.4rem;
  padding-bottom: max(2.4rem, calc(2.4rem + env(safe-area-inset-bottom)));
  background: var(--papier-2);
  border-top: 4px solid var(--zolty);
  font-size: .9rem;
}
.stopka__siatka { display: grid; gap: 1.1rem; }
.stopka__glowna { max-width: 40rem; }
.stopka__drobne { color: var(--kakao-2); font-size: .84rem; }
.stopka__drobne + .stopka__drobne { margin-top: .6rem; }

/* =========================================================================
   Tablet
   ========================================================================= */

@media (min-width: 48rem) {
  body { font-size: 1.09375rem; }

  .start { padding-top: 2.6rem; }
  .start__siatka { gap: 2.6rem; }
  .start__lead { font-size: 1.12rem; }

  .mapa { max-width: 30rem; }

  .wyniki:not(:empty) { padding-block: 3.2rem; }
  .wyniki__lista { gap: 1.1rem; }

  .metody, .czemu { padding-top: 4.8rem; }
  .metody__lista { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .czemu__lista  { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.4rem; }

  .stopka__siatka { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* =========================================================================
   Duży ekran: tekst po lewej, mapa po prawej
   ========================================================================= */

@media (min-width: 64rem) {
  body { font-size: 1.125rem; }

  .znak__logo { width: 3.3rem; height: 3.3rem; }
  .znak__nazwa { font-size: 1.3rem; }

  .start { padding-top: 3.4rem; }

  .start__siatka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 2.6rem 4rem;
    align-items: start;
  }
  /* Mapa i lista są tu widoczne równocześnie, więc przełącznik jest zbędny. */
  .start__przelacznik { display: none; }

  .start__naglowek { grid-column: 1; grid-row: 1; }
  .start__skrot    { grid-column: 1; grid-row: 2; }
  .start__mapa     { grid-column: 2; grid-row: 1 / span 2; }
  /* Pod mapą i pod listą dzielnic naraz - to zdanie dotyczy wszystkich szkół. */
  .start__dopisek  { grid-column: 1 / -1; grid-row: 3; margin-top: -.6rem; }

  .start__tytul { font-size: clamp(2.6rem, 3.9vw, 3.5rem); }
  .start__lead  { font-size: 1.2rem; margin-top: 1.2rem; }

  .mapa { max-width: 100%; }

  .legenda { justify-content: flex-start; font-size: .9rem; }

  .skrot__tytul { font-size: 1.2rem; }
  .skrot__lista { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .skrot__el { min-height: 4rem; font-size: 1.08rem; }

  .metody__lista { grid-template-columns: repeat(3, 1fr); }

  .czemu__lista { grid-template-columns: 1fr 1fr; gap: 2rem 3.5rem; }

  .sekcja__lead { font-size: 1.1rem; }
}

@media (min-width: 90rem) {
  .start__tytul { font-size: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}