/* ==========================================================================
   Placówki oświatowe — /oswiata

   Strona czytana inaczej niż AED: nie w panice, tylko wieczorem, z telefonu,
   przez kogoś, kto się właśnie wprowadził i porównuje. Stąd trzy decyzje:

   1. Karta, nie wiersz. Placówka ma sześć różnych informacji i wiersz listy
      ich nie pomieści czytelnie na 375 px.
   2. Telefon i mail są CELAMI DOTYKOWYMI, nie tekstem. 44 px wysokości,
      bo to jest jedyna rzecz, którą ktoś na tej stronie naprawdę zrobi.
   3. Publiczna i niepubliczna różnią się paskiem z boku, nie kolorem tła.
      Tło w dwóch kolorach sugerowałoby, że jedna jest lepsza.
   ========================================================================== */

#oswiata h1 {
  margin-bottom: var(--s3);
}

.oswiata__wstep {
  max-width: 62ch;
  margin: 0 0 var(--s4);
  line-height: 1.6;
}

/* --- Odesłanie do felietonu ---
   Ramka, żeby było widać, że to nie nasz tekst, tylko cudzy i że go polecamy. */

.oswiata__felieton {
  max-width: 62ch;
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--akcent-drugi);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--akcent-drugi-tlo);
  font-size: 15px;
  line-height: 1.6;
}

/* --- Mapa ---
   Ten sam wygląd co /defibrylatory-aed, żeby serwis miał jedną mapę,
   nie dwie różne. Różnica jedna: kropki kolorowane rodzajem placówki,
   nie jednym czerwonym (AED to sytuacja nagła, tu spokojny przegląd). */

.oswiata__figura {
  margin: 0 0 var(--s5);
}

.oswiata__plotno {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tlo-delikatne);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
}

.oswiata__figura figcaption {
  margin-top: var(--s2);
  color: var(--tekst-przygaszony);
  font-size: 13px;
  line-height: 1.5;
}

.oswiata__tytul-svg {
  font-size: 15px;
  font-weight: 700;
  fill: var(--tekst);
  text-anchor: middle;
}

.oswiata__ksztalt {
  fill: var(--tlo-karta);
  stroke: var(--tlo);
  stroke-width: 1.2;
}

.oswiata__granica {
  fill: none;
  stroke: var(--tekst-przygaszony);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
}

.oswiata__podpis {
  font-size: 11px;
  fill: var(--tekst-przygaszony);
  stroke: var(--tlo-karta);
  stroke-width: 3;
  paint-order: stroke;
}

.oswiata__wyprowadzenie {
  stroke: var(--obwodka-mocna);
  stroke-width: 0.8;
}

/* Kreska od rozsuniętej pinezki do jej prawdziwego miejsca. */
.oswiata__wyprowadzenie--pin {
  stroke-dasharray: 2 2;
}

.oswiata__kotwica {
  fill: var(--obwodka-mocna);
}

.oswiata__zrodlo-svg {
  font-size: 8px;
  fill: var(--tekst-przygaszony);
}

/* Kropki - jeden kolor na grupę, te same barwy co legenda i paski kart. */
.oswiata__pin {
  cursor: pointer;
}

.oswiata__pin-tlo {
  fill: var(--akcent);
  stroke: var(--tlo-karta);
  stroke-width: 2;
  transition: r 150ms ease;
}

.oswiata__pin--zlobki .oswiata__pin-tlo {
  fill: var(--akcent-drugi);
}

.oswiata__pin--przedszkola .oswiata__pin-tlo {
  fill: var(--uclaBlue, var(--akcent-jasny));
}

.oswiata__pin--podstawowe .oswiata__pin-tlo {
  fill: var(--akcent);
}

.oswiata__pin--ponadpodstawowe .oswiata__pin-tlo {
  fill: var(--ostrzezenie);
}

/* Niepewne położenie: pusty środek, żeby było widać, że to szacunek. */
.oswiata__pin--niepewny .oswiata__pin-tlo {
  fill: var(--tlo-karta);
  stroke-width: 2.5;
}

.oswiata__plotno a:hover .oswiata__pin-tlo {
  r: 9;
}

.oswiata__plotno a:focus-visible .oswiata__pin-tlo {
  stroke: var(--tekst);
  stroke-width: 3;
}

/* --- Legenda pod mapą --- */

.oswiata__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
}

.oswiata__legenda-poz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.oswiata__legenda-poz::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--akcent);
}

.oswiata__legenda-poz--zlobki::before {
  background: var(--akcent-drugi);
}

.oswiata__legenda-poz--przedszkola::before {
  background: var(--akcent-jasny);
}

.oswiata__legenda-poz--podstawowe::before {
  background: var(--akcent);
}

.oswiata__legenda-poz--ponadpodstawowe::before {
  background: var(--ostrzezenie);
}

.oswiata__uwaga-mapa {
  display: block;
  margin-top: var(--s2);
}

/* --- Skróty do grup --- */

.oswiata__skroty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s5);
}

.oswiata__skrot {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--obwodka-mocna);
  border-radius: var(--r-pill);
  background: var(--tlo-karta);
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.oswiata__skrot:hover,
.oswiata__skrot:focus-visible {
  border-color: var(--akcent);
  background: var(--akcent-tlo);
}

.oswiata__ile,
.oswiata__wiek {
  color: var(--tekst-przygaszony);
  font-size: 13px;
  font-weight: 400;
}

.oswiata__ile {
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--tlo-delikatne);
}

/* --- Sekcje --- */

.oswiata__sekcja {
  margin: 0 0 var(--s6);
  /* Kotwica pod przyklejonym paskiem nawigacji - bez tego nagłówek
     grupy chowa się za navbarem przy skoku z listy skrótów. */
  scroll-margin-top: 90px;
}

.oswiata__sekcja h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--obwodka);
}

.oswiata__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Karta placówki --- */

.oswiata__karta {
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-left: 4px solid var(--obwodka-mocna);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
  box-shadow: var(--cien-1);
  scroll-margin-top: 90px;
}

.oswiata__karta:target {
  border-color: var(--akcent);
  box-shadow: var(--cien-2);
}

.oswiata__karta--publiczna,
.oswiata__karta--publiczny,
.oswiata__karta--publiczne {
  border-left-color: var(--akcent);
}

.oswiata__karta--niepubliczna,
.oswiata__karta--niepubliczny,
.oswiata__karta--niepubliczne {
  border-left-color: var(--akcent-drugi);
}

.oswiata__nazwa {
  margin: 0 0 var(--s2);
  font-size: 17px;
  line-height: 1.35;
}

.oswiata__potocznie {
  color: var(--tekst-przygaszony);
  font-size: 14px;
  font-weight: 400;
}

.oswiata__meta {
  margin: 0 0 var(--s3);
  color: var(--tekst-przygaszony);
  font-size: 13px;
  line-height: 1.5;
}

.oswiata__status {
  font-weight: 600;
}

.oswiata__adres {
  margin: 0 0 var(--s3);
  line-height: 1.5;
}

.oswiata__filia,
.oswiata__sklad,
.oswiata__dyrektor {
  display: block;
  color: var(--tekst-przygaszony);
  font-size: 13px;
}

.oswiata__sklad,
.oswiata__dyrektor {
  margin: 0 0 var(--s3);
}

/* --- Kontakt: jedyne, co ktoś na tej stronie naprawdę kliknie --- */

.oswiata__kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: 0 0 var(--s3);
}

.oswiata__tel,
.oswiata__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--akcent);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.oswiata__mail {
  font-size: 14px;
  font-weight: 400;
}

.oswiata__tel:hover,
.oswiata__tel:focus-visible,
.oswiata__mail:hover,
.oswiata__mail:focus-visible {
  text-decoration: underline;
}

.oswiata__odnosniki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--obwodka);
}

.oswiata__www,
.oswiata__nawiguj {
  color: var(--akcent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.oswiata__www:hover,
.oswiata__www:focus-visible,
.oswiata__nawiguj:hover,
.oswiata__nawiguj:focus-visible {
  text-decoration: underline;
}

/* Kotwica do jednej placówki - po to, żeby dało się wkleić odnośnik
   do jednej szkoły w komentarzu, a nie do całej listy. Blada, dopóki
   nie najedziesz: to narzędzie, nie treść. */
.oswiata__kotwica {
  margin-left: auto;
  color: var(--obwodka-mocna);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease;
}

.oswiata__kotwica:hover,
.oswiata__kotwica:focus-visible {
  color: var(--akcent);
}

.oswiata__uwaga {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  background: var(--tlo-delikatne);
  color: var(--tekst-przygaszony);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Trzy sprawdzone liczby --- */

/* Węziej niż lista placówek: to jest blok do czytania zdanie po zdaniu,
   a nie do przebiegania wzrokiem. */
.oswiata__liczby {
  max-width: 68ch;
}

.oswiata__liczba {
  max-width: 68ch;
  margin: 0 0 var(--s5);
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
  scroll-margin-top: 90px;
}

/* Werdykt kolorem paska u góry, nie tłem karty. Cytat z cudzego tekstu
   na czerwonym tle czytałby się jak wyrok, a to jest sprostowanie. */
.oswiata__liczba--potwierdzone {
  border-top: 3px solid var(--sukces);
}

.oswiata__liczba--czesciowo {
  border-top: 3px solid var(--ostrzezenie);
}

/* Obalone dostaje ostrzezenie, nie czerwien bledu. Autor felietonu sam
   napisal „zdaje sie" - to byla ostrozna hipoteza, a nie falsz. */
.oswiata__liczba--obalone {
  border-top: 3px solid var(--ostrzezenie);
}

.oswiata__cytat {
  margin: 0 0 var(--s3);
  padding-left: var(--s3);
  border-left: 3px solid var(--obwodka-mocna);
  color: var(--tekst-przygaszony);
  font-style: italic;
  line-height: 1.6;
}

.oswiata__werdykt {
  margin: 0 0 var(--s3);
  line-height: 1.55;
}

.oswiata__wartosci {
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
  line-height: 1.6;
}

.oswiata__wartosci li {
  margin-bottom: var(--s2);
}

.oswiata__zrodlo {
  display: inline-block;
  color: var(--tekst-przygaszony);
  font-size: 13px;
  text-decoration: underline;
}

.oswiata__zrodlo:hover,
.oswiata__zrodlo:focus-visible {
  color: var(--akcent);
}

.oswiata__porownanie,
.oswiata__komentarz {
  margin: 0 0 var(--s2);
  color: var(--tekst-przygaszony);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Źródła --- */

.oswiata__zrodla {
  max-width: 68ch;
}

.oswiata__zrodla ul {
  padding-left: var(--s4);
  line-height: 1.65;
}

.oswiata__zrodla li {
  margin-bottom: var(--s3);
}

/* --- Telefon: jedna kolumna, karty na całą szerokość --- */

@media (max-width: 640px) {
  .oswiata__lista {
    grid-template-columns: 1fr;
  }

  .oswiata__skrot {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}