/* ==========================================================================
   Super Przedszkole – motyw „Kredki i słońce”
   Nowoczesny, przyjazny design pasujący do tematyki przedszkolnej.
   ========================================================================== */

:root {
  /* Paleta: słoneczna, pastelowa, „przedszkolna” */
  --glowny: #ff7a59;          /* koral – główny akcent */
  --glowny-ciemny: #e85d3d;
  --morski: #0eb5a2;          /* morska zieleń – drugi akcent */
  --morski-ciemny: #0a9184;
  --sloneczny: #ffc94d;       /* żółty – detale */
  --lawenda: #8f7ae5;
  --rozowy: #ff9ecb;

  --akcent: #ff9f1c;
  --zielony: #12a15c;
  --czerwony: #e5484d;
  --szary: #7a7368;

  --tlo: #fff8ef;             /* ciepły kremowy */
  --karta: #ffffff;
  --ramka: #f0e4d3;
  --tekst: #33302b;

  --cien: 0 6px 24px rgba(90, 60, 20, .08);
  --cien-duzy: 0 14px 40px rgba(90, 60, 20, .12);
  --radius: 20px;
  --radius-maly: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tlo);
  background-image: radial-gradient(rgba(255, 201, 77, .13) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  color: var(--tekst);
  line-height: 1.6;
}

h1, h2, h3, .logo {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  letter-spacing: .2px;
}

a { color: var(--morski-ciemny); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.kontener { max-width: 1120px; margin: 0 auto; padding: 0 18px; }

/* --------------------------------------------------------------------------
   Nagłówek: kremowy, przyklejony, z tęczową kreską jak od kredek
   -------------------------------------------------------------------------- */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 252, 246, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(90, 60, 20, .07);
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg,
    #ff7a59 0 20%, #ffc94d 20% 40%, #12a15c 40% 60%, #0eb5a2 60% 80%, #8f7ae5 80% 100%) 1;
}
/* Pasek na pelna szerokosc ekranu: logo | menu | przycisk certyfikatu */
.naglowek-srodek {
  display: flex; align-items: center; flex-wrap: wrap;
  width: 100%; padding: 11px 26px; gap: 12px;
}
.logo {
  color: var(--tekst);
  font-size: 1.45rem;
  font-weight: 800;
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; transform: rotate(-1deg); }
.logo svg { flex-shrink: 0; display: block; filter: drop-shadow(0 2px 3px rgba(90,60,20,.2)); }
.logo span {
  background: linear-gradient(90deg, var(--glowny), var(--akcent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.menu a {
  color: var(--tekst);
  font-weight: 700;
  font-size: .95rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.menu a:hover { background: #ffefd9; color: var(--glowny-ciemny); text-decoration: none; }

/* Wyrozniony przycisk certyfikatu - osobno, po prawej stronie paska */
.naglowek-cta {
  flex-shrink: 0;
  margin-left: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffd966 0%, #f0b429 100%);
  color: #5b4200;
  border: 1px solid #e8a91f;
  box-shadow: 0 3px 10px rgba(230, 170, 30, .38);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.naglowek-cta i { margin-right: 7px; }
.naglowek-cta:hover {
  background: linear-gradient(135deg, #ffe081 0%, #f5be3d 100%);
  color: #5b4200;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(230, 170, 30, .48);
}

/* Przycisk hamburgera - tylko na malych ekranach */
.burger {
  display: none; background: none; border: 2px solid var(--ramka); border-radius: 12px;
  color: var(--tekst); padding: 5px 7px; cursor: pointer; line-height: 0; flex-shrink: 0;
}
.burger:hover { background: #ffefd9; }
.cta-krotki { display: none; }

@media (max-width: 980px) {
  .naglowek-srodek { padding: 9px 14px; gap: 9px; }
  .logo { font-size: 1.15rem; gap: 7px; }
  .logo svg { width: 32px; height: 32px; }
  .burger { display: block; margin-left: auto; }
  .naglowek-cta { margin-left: auto; padding: 9px 15px; font-size: .85rem; }
  .cta-pelny { display: none; }
  .cta-krotki { display: inline; }

  /* Menu chowa sie pod hamburgerem */
  .menu {
    display: none; width: 100%; order: 3; margin: 6px 0 2px;
    flex-direction: column; gap: 2px;
  }
  .menu.otwarte { display: flex; }
  .menu a { padding: 12px 14px; border-radius: 10px; font-size: 1rem; }
}

/* Panel admina zachowuje ciemny nagłówek */
.admin-naglowek { background: #2b2640; border-image: none; border-bottom: 4px solid var(--lawenda); }
.admin-naglowek .logo, .admin-naglowek .menu a { color: #f3efff; }
.admin-naglowek .logo span { background: none; -webkit-text-fill-color: currentColor; }
.admin-naglowek .menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.admin-naglowek .naglowek-srodek { max-width: 1120px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Okruszki
   -------------------------------------------------------------------------- */
.okruszki { font-size: .85rem; color: var(--szary); padding: 12px 0 2px; }
.okruszki span { margin: 0 5px; color: var(--sloneczny); }
.okruszki .biezaca { color: var(--tekst); font-weight: 700; }

main { min-height: 60vh; padding-bottom: 48px; }
h1 { font-size: 2rem; margin: 20px 0 12px; line-height: 1.25; }
h2 { font-size: 1.4rem; margin: 30px 0 12px; }

/* --------------------------------------------------------------------------
   Hero: zachód słońca + chmurka i słonko
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9a6b 0%, var(--glowny) 45%, #f75590 100%);
  color: #fff;
  border-radius: 28px;
  padding: 46px 34px 42px;
  margin-top: 22px;
  box-shadow: var(--cien-duzy);
}
.hero::before {
  content: '';
  position: absolute; top: 16px; right: 24px;
  width: 68px; height: 68px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="13" fill="%23ffd966"/><g stroke="%23ffd966" stroke-width="5" stroke-linecap="round"><path d="M32 4v9M32 51v9M4 32h9M51 32h9M12 12l6.5 6.5M45.5 45.5L52 52M52 12l-6.5 6.5M18.5 45.5L12 52"/></g></svg>') no-repeat center / contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
  animation: bujanie 5s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute; bottom: -12px; right: 18px;
  width: 150px; height: 70px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><g fill="white" opacity=".28"><circle cx="30" cy="38" r="17"/><circle cx="56" cy="28" r="21"/><circle cx="85" cy="38" r="17"/><rect x="24" y="38" width="68" height="16" rx="8"/></g></svg>') no-repeat center / contain;
}
@keyframes bujanie {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}
.hero h1 { margin: 0 0 10px; color: #fff; font-size: 2.2rem; max-width: 78%; }
.hero p { margin: 0 0 22px; color: #ffe9dd; font-size: 1.05rem; max-width: 75%; }

.szukajka { display: flex; gap: 10px; flex-wrap: wrap; max-width: 640px; }
.szukajka input[type=text] {
  flex: 1; min-width: 220px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 3px solid #fff;
  font-size: 1.05rem;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  outline: none;
}
.szukajka input[type=text]:focus { border-color: var(--sloneczny); }
.szukajka button {
  background: var(--sloneczny);
  border: none;
  color: #5b4200;
  font-weight: 800;
  font-family: inherit;
  padding: 15px 30px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .12s, box-shadow .12s;
}
.szukajka button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(0,0,0,.18); }

/* --------------------------------------------------------------------------
   Kafelki statystyk – pastelowe kredki
   -------------------------------------------------------------------------- */
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin: 24px 0; }
.kafelek {
  background: var(--karta);
  border: 2px solid var(--ramka);
  border-radius: var(--radius);
  padding: 18px 14px 14px;
  text-align: center;
  box-shadow: var(--cien);
  border-top: 6px solid var(--morski);
  transition: transform .15s;
}
.kafelek:hover { transform: translateY(-3px); }
.kafelek:nth-child(2) { border-top-color: var(--sloneczny); }
.kafelek:nth-child(3) { border-top-color: var(--lawenda); }
.kafelek:nth-child(4) { border-top-color: var(--zielony); }
.kafelek:nth-child(5) { border-top-color: var(--rozowy); }
.kafelek .liczba { font-family: 'Baloo 2', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--glowny-ciemny); line-height: 1.2; }
.kafelek .opis { font-size: .85rem; color: var(--szary); font-weight: 600; }

/* --------------------------------------------------------------------------
   Karty i listy placówek
   -------------------------------------------------------------------------- */
.karta {
  background: var(--karta);
  border: 2px solid var(--ramka);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 14px 0;
  box-shadow: var(--cien);
}
.lista-placowek { list-style: none; margin: 0; padding: 0; }
.lista-placowek li {
  background: var(--karta);
  border: 2px solid var(--ramka);
  border-left: 6px solid var(--morski);
  border-radius: var(--radius-maly);
  padding: 15px 18px;
  margin: 12px 0;
  box-shadow: var(--cien);
  transition: transform .12s, border-color .12s;
}
.lista-placowek li:hover { transform: translateX(4px); border-left-color: var(--glowny); }
.lista-placowek li { display: flex; gap: 13px; align-items: flex-start; }
.lp-logo { width: 54px; height: 54px; object-fit: cover; border-radius: 12px; border: 2px solid var(--ramka); background: #fff; flex-shrink: 0; }
.lp-tresc { flex: 1; min-width: 0; }
.tb-logo { width: 30px; height: 30px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ramka); vertical-align: middle; margin-right: 7px; background: #fff; }
.lista-placowek .naz { font-weight: 800; font-size: 1.07rem; font-family: 'Baloo 2', sans-serif; }
.lista-placowek .adr { color: var(--szary); font-size: .9rem; margin: 3px 0 8px; }
.metki { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.metka {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f6efe3;
  color: #5f584c;
}
.wolne-tak { background: #dcf5e7; color: var(--zielony); }
.wolne-nie { background: #fde5e5; color: var(--czerwony); }
.wolne-brak { background: #f0ece5; color: var(--szary); }
.metka-pub { background: #e0f4f1; color: var(--morski-ciemny); }
.gwiazdki { color: #f5a623; font-weight: 800; }

/* Wyroznienie „Super Przedszkole" */
.metka-wyroznienie {
  display: inline-block; font-size: .78rem; font-weight: 800; padding: 4px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #ffd966 0%, #f6b73c 100%); color: #5b4200;
  border: 1px solid #e8a91f; box-shadow: 0 2px 8px rgba(230, 170, 30, .35); white-space: nowrap;
}
.karta-wyroznienie {
  background: linear-gradient(135deg, #fff6dd 0%, #ffeec2 100%);
  border-color: #f0d68f !important; text-align: center;
}
.karta-wyroznienie .wyr-ikona { font-size: 2.4rem; line-height: 1; }
.karta-wyroznienie h2 { border-bottom: none !important; justify-content: center; margin-bottom: 6px !important; padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Filtry wyszukiwarki
   -------------------------------------------------------------------------- */
.filtry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
  background: var(--karta);
  border: 2px solid var(--ramka);
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--cien);
}
.filtry label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--szary); display: block; margin-bottom: 4px; }
.filtry select, .filtry input[type=text] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ramka);
  border-radius: var(--radius-maly);
  font-size: .95rem;
  font-family: inherit;
  background: #fffdf9;
  transition: border-color .15s;
}
.filtry select:focus, .filtry input[type=text]:focus { border-color: var(--morski); outline: none; }
.filtry .pole-przycisk { display: flex; align-items: flex-end; }
.filtry button {
  width: 100%;
  background: var(--morski);
  color: #fff;
  border: none;
  padding: 11px;
  border-radius: 999px;
  font-weight: 800;
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.filtry button:hover { background: var(--morski-ciemny); transform: translateY(-1px); }
.zaznacz { display: flex; align-items: center; gap: 7px; font-size: .9rem; padding-top: 20px; }
.zaznacz input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--zielony); }

/* --------------------------------------------------------------------------
   Stronicowanie
   -------------------------------------------------------------------------- */
.stronicowanie { display: flex; gap: 7px; flex-wrap: wrap; margin: 24px 0; }
.stronicowanie a, .stronicowanie span {
  padding: 8px 15px;
  border-radius: 999px;
  border: 2px solid var(--ramka);
  background: var(--karta);
  font-weight: 700;
  font-size: .92rem;
}
.stronicowanie a:hover { border-color: var(--morski); text-decoration: none; }
.stronicowanie .biezaca { background: var(--glowny); color: #fff; border-color: var(--glowny); }

/* --------------------------------------------------------------------------
   Tabele
   -------------------------------------------------------------------------- */
table.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--karta);
  border-radius: var(--radius-maly);
  overflow: hidden;
  border: 2px solid var(--ramka);
  box-shadow: var(--cien);
}
table.tabela th, table.tabela td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--ramka); font-size: .92rem; }
table.tabela th {
  background: linear-gradient(180deg, #fff3dd, #ffedcf);
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  color: #6b5327;
}
table.tabela tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover td, table.tabela tr:hover td { background: #fffaf1; }
.tabela-przewijana { overflow-x: auto; border-radius: var(--radius-maly); }
td.num, th.num { text-align: right; }

/* --------------------------------------------------------------------------
   Układ dwukolumnowy i dane placówki
   -------------------------------------------------------------------------- */
.dwie-kolumny { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 800px) { .dwie-kolumny { grid-template-columns: 1fr; } }

.dl-dane { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.dl-dane dt { color: var(--szary); font-size: .85rem; font-weight: 700; }
.dl-dane dd { margin: 0; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */
.przycisk {
  display: inline-block;
  background: var(--glowny);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-family: inherit;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  box-shadow: 0 4px 14px rgba(232, 93, 61, .3);
  transition: transform .12s, box-shadow .12s;
}
.przycisk:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(232, 93, 61, .38); }
.przycisk-drugi { background: #f3ead9; color: var(--tekst) !important; box-shadow: none; }
.przycisk-drugi:hover { box-shadow: 0 4px 12px rgba(90, 60, 20, .15); }

/* --------------------------------------------------------------------------
   Opinie
   -------------------------------------------------------------------------- */
.opinia { border-top: 2px dashed var(--ramka); padding: 14px 0; }
.opinia .autor { font-weight: 800; }
.opinia .data { color: var(--szary); font-size: .82rem; }
.form-opinia label { display: block; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--szary); margin: 12px 0 4px; }
.form-opinia input[type=text], .form-opinia input[type=email], .form-opinia textarea, .form-opinia select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ramka);
  border-radius: var(--radius-maly);
  font-size: .95rem;
  font-family: inherit;
  background: #fffdf9;
}
.form-opinia input:focus, .form-opinia textarea:focus, .form-opinia select:focus { border-color: var(--morski); outline: none; }
.form-opinia textarea { min-height: 110px; resize: vertical; }
.pole-miodu { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   Alerty
   -------------------------------------------------------------------------- */
.alert { padding: 14px 18px; border-radius: var(--radius-maly); margin: 14px 0; font-weight: 600; border: 2px solid transparent; }
.alert-ok { background: #dcf5e7; color: #0c5c36; border-color: #b5e6cd; }
.alert-blad { background: #fde5e5; color: #8c1d21; border-color: #f6c6c8; }

/* --------------------------------------------------------------------------
   Siatka linków (województwa, miasta…)
   -------------------------------------------------------------------------- */
.siatka-linkow { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; margin: 14px 0; list-style: none; padding: 0; }
.siatka-linkow li {
  background: var(--karta);
  border: 2px solid var(--ramka);
  border-radius: var(--radius-maly);
  padding: 11px 14px;
  font-size: .93rem;
  box-shadow: var(--cien);
  transition: transform .12s, border-color .12s;
}
.siatka-linkow li:hover { transform: translateY(-2px); border-color: var(--sloneczny); }
.siatka-linkow li a { font-weight: 800; }
.siatka-linkow .ile { color: var(--szary); font-size: .8rem; }

/* --------------------------------------------------------------------------
   Pasek struktury wiekowej
   -------------------------------------------------------------------------- */
.pasek-wieku { display: flex; height: 26px; border-radius: 999px; overflow: hidden; margin: 10px 0; box-shadow: var(--cien); }
.pasek-wieku div { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   Mapy
   -------------------------------------------------------------------------- */
#mapa-glowna { height: 70vh; border-radius: var(--radius); border: 3px solid #fff; box-shadow: var(--cien-duzy); }
#mapa-placowki { height: 300px; border-radius: var(--radius-maly); border: 2px solid var(--ramka); margin-top: 10px; }

/* --------------------------------------------------------------------------
   Stopka: granat z tęczową kreską
   -------------------------------------------------------------------------- */
.stopka {
  background: #2b2640;
  color: #cfc9e8;
  margin-top: 40px;
  padding: 30px 0 26px;
  font-size: .87rem;
  border-top: 5px solid;
  border-image: linear-gradient(90deg,
    #ff7a59 0 20%, #ffc94d 20% 40%, #12a15c 40% 60%, #0eb5a2 60% 80%, #8f7ae5 80% 100%) 1;
}
.stopka a { color: #ffc94d; }
.stopka p { margin: 7px 0; }

.stopka-kolumny {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 24px;
}
.stopka-marka p { font-size: .85rem; line-height: 1.6; color: #b3aed0; margin: 12px 0 16px; max-width: 300px; }
.stopka-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Baloo 2', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff !important;
}
.stopka-logo:hover { text-decoration: none; }
.stopka-logo svg { flex-shrink: 0; }
.stopka-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  color: #ffd98a !important; border-radius: 999px; padding: 9px 18px;
  font-size: .87rem; font-weight: 800; transition: background .15s;
}
.stopka-cta:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.stopka-kol h3 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
  color: #fff; margin: 4px 0 12px;
}
.stopka-kol ul { list-style: none; margin: 0; padding: 0; }
.stopka-kol li { margin-bottom: 8px; }
.stopka-kol a { color: #cfc9e8; font-size: .88rem; }
.stopka-kol a:hover { color: #ffc94d; }
.stopka-dol {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px;
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.stopka-dol p { font-size: .78rem; color: #9b95bb; max-width: 720px; margin: 0; line-height: 1.6; }
.stopka-dol .prawa { white-space: nowrap; }

@media (max-width: 900px) {
  .stopka-kolumny { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stopka-marka { grid-column: 1 / -1; }
  .stopka-marka p { max-width: none; }
}
@media (max-width: 480px) {
  .stopka-kolumny { grid-template-columns: 1fr; gap: 20px; }
  .stopka-dol { gap: 10px; }
}

/* ==========================================================================
   WIDOK MOBILNY
   ========================================================================== */

/* Nic nie moze wypychac strony w bok */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, iframe, table { max-width: 100%; }

@media (max-width: 760px) {
  .kontener { padding: 0 14px; }
  h1 { font-size: 1.5rem; margin: 16px 0 10px; }
  h2 { font-size: 1.18rem; margin: 24px 0 10px; }
  h3 { font-size: 1.05rem; }
  main { padding-bottom: 32px; }

  /* Hero */
  .hero { padding: 26px 20px; border-radius: 20px; margin-top: 14px; }
  .hero h1 { font-size: 1.5rem; max-width: 100%; }
  .hero p { max-width: 100%; font-size: .95rem; margin-bottom: 16px; }
  .hero::before { width: 42px; height: 42px; top: 12px; right: 14px; }
  .hero::after { display: none; }
  .szukajka input[type=text] { padding: 13px 17px; font-size: 1rem; }
  .szukajka button { width: 100%; padding: 13px 20px; }

  /* Kafelki: dwie kolumny zamiast jednej dlugiej listy */
  .kafelki { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
  .kafelek { padding: 13px 9px 11px; border-radius: 14px; }
  .kafelek .liczba { font-size: 1.3rem; }
  .kafelek .opis { font-size: .76rem; }

  /* Listy placowek */
  .lista-placowek li { padding: 13px 14px; gap: 11px; border-radius: 12px; }
  .lp-logo { width: 44px; height: 44px; }
  .lista-placowek .naz { font-size: 1rem; }
  .lista-placowek .adr { font-size: .85rem; }
  .metka { font-size: .74rem; padding: 3px 10px; }

  /* Karty i siatki */
  .karta { padding: 16px 15px; border-radius: 16px; }
  .siatka-linkow { grid-template-columns: 1fr; gap: 8px; }
  .dwie-kolumny { gap: 14px; }

  /* Formularze i filtry - wygodne pola dotykowe */
  .filtry { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .filtry select, .filtry input[type=text],
  .form-opinia input, .form-opinia textarea, .form-opinia select {
    padding: 12px; font-size: 16px;   /* 16px zapobiega przybliżaniu na iOS */
  }
  .filtry button, .przycisk { padding: 13px 20px; }
  .filtry .pole-przycisk button { width: 100%; }

  /* Tabele - przewijanie poziome z wyraznym marginesem */
  .tabela-przewijana { margin: 0 -14px; padding: 0 14px; }
  table.tabela th, table.tabela td { padding: 8px 10px; font-size: .85rem; }

  /* Dane placowki */
  .dl-dane { grid-template-columns: 1fr; gap: 2px; }
  .dl-dane dt { margin-top: 8px; }
  .dl-dane dd { word-break: break-word; }

  /* Stronicowanie i przyciski */
  .stronicowanie a, .stronicowanie span { padding: 9px 14px; }
  .przycisk { font-size: .92rem; }

  /* Stopka */
  .stopka { padding: 22px 0 20px; font-size: .82rem; }
}

@media (max-width: 420px) {
  .kafelki { grid-template-columns: 1fr; }
  .lista-placowek li { flex-direction: column; }
  .lp-logo { width: 52px; height: 52px; }
}