/* ==========================================================================
   Defibrylatory AED — /defibrylatory-aed

   Strona czytana w pośpiechu, często jedną ręką, często w nocy. Stąd trzy
   decyzje, których nie ma nigdzie indziej w serwisie:

   1. Instrukcja ratunkowa NA GÓRZE, w ramce, przed listą i przed mapą.
   2. Cele dotykowe większe niż zwykle — 44 px zamiast 24 px z WCAG.
   3. Czerwień tylko w dwóch miejscach: instrukcja i pinezki. Gdyby była
      wszędzie, przestałaby cokolwiek znaczyć.
   ========================================================================== */

#aed h1 {
  margin-bottom: var(--s4);
}

/* --- Instrukcja ratunkowa --- */

.aed__ratunek {
  max-width: 62ch;
  margin: 0 0 var(--s5);
  padding: var(--s4);
  border: 2px solid var(--blad);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
}

.aed__ratunek-krok {
  margin: 0 0 var(--s3);
  font-size: 16px;
  line-height: 1.55;
}

.aed__ratunek-krok:last-child {
  margin-bottom: 0;
}

.aed__ratunek-krok strong {
  color: var(--blad);
}

/* Numer alarmowy jako duży, wyraźny cel dotykowy — to jedyny odnośnik
   na tej stronie, który ktoś naciśnie, nie patrząc. */
.aed__ratunek a[href^="tel:"] {
  display: inline-block;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 16px;
  margin: 0 2px;
  border-radius: var(--r-m);
  background: var(--blad);
  color: #fff;
  font-size: 20px;
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.aed__wstep {
  max-width: 62ch;
  margin: 0 0 var(--s3);
  color: var(--tekst-przygaszony);
}

.aed__ostrzezenie {
  max-width: 68ch;
  margin: 0 0 var(--s6);
  padding: var(--s3) var(--s4);
  border-left: 5px solid var(--ostrzezenie);
  border-radius: var(--r-m);
  background: var(--tlo-delikatne);
  font-size: 15px;
}

/* --- Mapa --- */

.aed__figura {
  margin: 0 0 var(--s6);
}

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

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

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

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

/* Pinezka AED jest jedynym mocnym kolorem na rysunku — obrys gminy celowo
   pozostaje szary, żeby czerwień nie miała z czym konkurować. */
.aed__pin-tlo {
  fill: var(--blad);
  stroke: var(--tlo-karta);
  stroke-width: 2;
}

.aed__pin-nr {
  font-size: 9px;
  font-weight: var(--weight-bold);
  fill: #fff;
  pointer-events: none;
}

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

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

/* 7 px, nie 9 — płótno ma 1000 px szerokości, a wyświetla się na 1800.
   Ten sam powód co na mapie problemów. */
.aed__zrodlo-svg {
  font-size: 7px;
  fill: var(--tekst-przygaszony);
}

/* --- Sekcje po miejscowościach --- */

.aed__sekcja {
  margin-bottom: var(--s5);
}

.aed__sekcja h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: 15px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akcent-drugi);
}

.aed__ile {
  min-width: 1.8em;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--tlo-delikatne);
  color: var(--tekst-przygaszony);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0;
}

.aed__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.aed__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  scroll-margin-top: var(--s6);
}

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

.aed__nr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blad);
  color: #fff;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.aed__tresc {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.aed__adres {
  color: var(--tekst-przygaszony);
}

/* Godziny osobną linią i innym kolorem — to jest to, co ludzie przeoczą,
   a co decyduje, czy w ogóle warto tam iść o tej porze. */
.aed__godziny {
  color: var(--ostrzezenie);
  font-size: 14px;
}

/* „Prowadź" ma 44 px wysokości: naciskane jest w biegu, nie przy biurku. */
.aed__nawiguj {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s1);
  font-weight: var(--weight-semi-bold);
  text-decoration: none;
  color: var(--akcent);
}

.aed__nawiguj:hover,
.aed__nawiguj:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.aed__zrodla ul {
  max-width: 68ch;
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

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

.aed__zrodla strong {
  color: var(--tekst);
}

.aed__uwaga {
  max-width: 68ch;
  margin: var(--s3) 0 0;
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

.aed__stopka {
  padding-top: var(--s3);
  border-top: 1px solid var(--obwodka);
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

@media print {
  /* Wydruk trafia na tablicę ogłoszeń albo na lodówkę: instrukcja i lista
     zostają, mapa i odnośniki do nawigacji nie mają tam sensu. */
  .aed__figura,
  .aed__nawiguj,
  .aed__stopka {
    display: none;
  }

  .aed__punkt {
    break-inside: avoid;
  }
}