/*
Theme Name: W Ramach – Brand V2
Theme URI: https://wramach.com
Description: Identyfikacja portalu wramach.com wg Brandbooka V2 (Yukii Creatives). Motyw potomny wramach-theme. Header wg s. 44/45: krem, sygnet coral, Cinzel w logo/nawigacji/tytułach, reszta Rubik, meander bramy zamkowej. Rollback: aktywacja wramach-theme. v1.4.0 (audyt przedpremierowy 17.08.2026): szablony search i 404, równe kafle we wszystkich siatkach, okruszki/czas czytania/udostępnianie/tagi w artykule, wyszukiwarka w nagłówku, skóra Punktu Informacyjnego i wzorce kafli PI.
Template: wramach-theme
Version: 1.94.0
Author: Redakcja w ramach
Text Domain: wramach-brand
*/

/* ════ TOKENY ════ */
:root:root {
  /* Rubik wszędzie – Cinzel tylko punktowo niżej (czytelność) */
  --wp--preset--font-family--display: 'Rubik', 'Archivo', sans-serif;
  --wp--preset--font-family--body: 'Rubik', 'Source Sans 3', sans-serif;
  --wp--preset--font-family--brand: 'Cinzel', serif;

  --wp--custom--wr--cat--newsy:       #005e73;
  --wp--custom--wr--cat--sport:       #7dbfa6;
  --wp--custom--wr--cat--historia:    #d9c499;
  --wp--custom--wr--cat--biznes:      #ed9c00;
  --wp--custom--wr--cat--polityka:    #7d3767;
  --wp--custom--wr--cat--kultura:     #a38c59;
  --wp--custom--wr--cat--zdrowie:     #f07066;
  --wp--custom--wr--cat--turystyka:   #1f91cc;
  --wp--custom--wr--cat--technologia: #7578ed;
  --wp--custom--wr--cat--edukacja:    #8fae4e; /* TYMCZASOWY – 10. kolor u Antoine'a */

  --wr-cream:    #FAF2E5;
  --wr-graphite: #2B4249;
  --wr-coral:    #E65956;
}

/* ════ HEADER: tylko kolory i fonty – layout w 100% rodzica ════ */
.wr-siteheader { background: var(--wr-cream); box-shadow: none !important; }

.wr-logo__mark { width: 80px; height: 80px; }   /* sygnet wyraźnie większy niż elementy UI */
.wr-logo__mark path { transition: fill .18s ease; }
.wr-logo:hover .wr-logo__mark path { fill: var(--wr-graphite); stroke: none; }
.wr-logo__name { color: var(--wr-coral); letter-spacing: .10em; }
.wr-logo:hover .wr-logo__name { color: var(--wr-graphite); }
.wr-logo__tag { color: #7d8f95; }

.wr-utils a { color: #5c6f76; }
.wr-utils a:hover { color: var(--wr-coral); }
.wr-utils a.is-pi {
  background: var(--wr-coral); color: #fff !important;
  border: 1px solid var(--wr-coral); border-radius: 999px;
  padding: .3rem .7rem; font-weight: 600;
}
.wr-utils a.is-pi:hover { background: #d64c49; border-color: #d64c49; color: #fff !important; }
.wr-mode {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wr-coral); color: #fff;
  border: 0; cursor: pointer;
}
.wr-mode:hover { background: #d64c49; color: #fff; }

.wr-navwrap { background: var(--wr-cream); box-shadow: none !important; }
.wr-navrow { border-top-color: rgba(43,66,73,.10); }
.wr-catnav a {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--wr-graphite);
}
.wr-catnav a:hover { color: var(--wr-coral); }
/* Zasada: Cinzel wyłącznie do nazw kategorii i do logo. „Twoja gmina" to
   etykieta narzędzia, nie nazwa działu – idzie Rubikiem, tak jak reszta
   interfejsu. */
details.wr-gminy summary {
  color: var(--wr-graphite) !important;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
}
.wr-gminy summary:hover { color: var(--wr-coral); }
.wr-gminy__menu { background: #fff; }

/* burger: koralowe kółko (widocznością steruje rodzic – zero display) */
.wr-mobilenav > summary {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--wr-coral); color: #fff;
  display: grid; place-items: center;
  cursor: pointer; list-style: none;
}
.wr-mobilenav > summary::-webkit-details-marker { display: none; }
.wr-mobilenav > summary:hover,
.wr-mobilenav[open] > summary { background: #d64c49; color: #fff; }
.wr-mobilenav__panel {
  background: var(--wr-cream);
  border-top-color: rgba(43,66,73,.12);
  box-shadow: 0 12px 24px rgba(43,66,73,.18);
}
.wr-mobilenav__panel a { color: var(--wr-graphite); border-bottom-color: rgba(43,66,73,.10); }
.wr-mobilenav__panel a:active { color: var(--wr-coral); }
.wr-mobilenav__label { color: var(--wr-coral); }
.wr-mobilenav__pi {
  background: var(--wr-coral); color: #fff !important;
  border-radius: 8px; border-bottom: 0 !important;
  padding: .65rem .75rem !important; margin: .55rem 0 .25rem;
  font-weight: 600; display: flex; align-items: center; gap: .6rem;
}
.wr-mobilenav__pi em { display: block; font-style: normal; font-weight: 400; font-size: .74rem; opacity: .85; }
[data-wr-theme="dark"] .wr-mobilenav__panel a { color: var(--wr-cream); border-bottom-color: rgba(250,242,229,.12); }
[data-wr-theme="dark"] .wr-mobilenav__label { color: #9DB0B5; }

/* mobile jak s. 45: sam romb (rodzic i tak centruje logo) */
@media (max-width: 781px) {
  .wr-logo__text { display: none; }
  .wr-logo__mark { width: 104px; height: 104px; }
  .wr-topbar { padding: .5rem 0 .45rem; }
  .wr-mode,
  .wr-mobilenav > summary {
    width: 42px; height: 42px;
    min-width: 42px; min-height: 42px;
    padding: 0;
  }
}

/* meander bramy zamkowej pod headerem */
/* Jeden wzór w całym serwisie – meander bramy zamkowej. Wersja z ornamentem
   zmiennym per dział została wycofana: cztery różne pasy robiły z nagłówka
   ruchomy element, a on ma być stały. Pas jest niższy i przygaszony, więc
   czyta się jako sygnatura, nie jako kreska oddzielająca. Ornament siedzi w
   warstwie `::before`, żeby dało się go przygasić bez ruszania tła paska. */
.wr-meanderbar {
  height: 26px;
  background-color: var(--wr-cream);          /* zlewa się z headerem – bez białych przerw */
  position: relative; z-index: 5;
  overflow: hidden;
  margin-bottom: -10px;                         /* ornament nachodzi na hero (jak u Antoine'a) */
}
.wr-meanderbar::before {
  content: "";
  position: absolute; inset: 0;
  background: url('assets/wr-meander-tile@3x.png') repeat-x left center / 72px 26px;
  opacity: .55;
}
[data-wr-theme="dark"] .wr-meanderbar { background-color: #0F1B20; }
@media (max-width: 781px) {
  .wr-meanderbar { height: 18px; margin-bottom: -7px; }
  .wr-meanderbar::before { background-size: 49px 18px; }
}

/* ════ TRYB CIEMNY: lustrzane kolory (layout rodzica) ════ */
[data-wr-theme="dark"] .wr-siteheader { box-shadow: none; }
[data-wr-theme="dark"] .wr-navwrap { background: #0F1B20; box-shadow: none !important; }
[data-wr-theme="dark"] details.wr-gminy summary { color: var(--wr-cream) !important; }
[data-wr-theme="dark"] .wr-logo__name { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-logo:hover .wr-logo__name { color: var(--wr-coral); }
[data-wr-theme="dark"] .wr-logo:hover .wr-logo__mark path { fill: var(--wr-cream); }
[data-wr-theme="dark"] .wr-utils a { color: #C9D2D5; }
[data-wr-theme="dark"] .wr-mode { background: var(--wr-coral); color: #fff; }
[data-wr-theme="dark"] .wr-catnav a { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-catnav a:hover { color: var(--wr-coral); }
[data-wr-theme="dark"] .wr-gminy summary { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-gminy__menu,
[data-wr-theme="dark"] .wr-mobilenav__panel { background: #111D21; }

/* ════ TYPOGRAFIA: Cinzel punktowo, reszta Rubik ════ */
h1.wp-block-post-title {
  font-family: 'Cinzel', serif;
  letter-spacing: .02em;
}
.wp-block-post-content a:hover { color: var(--wr-koral-text, #C44C4A); }


/* ═══════════════════════════════════════════════════════════════
   WR BRAND v1.3 – SEKCJA 1: STREFA OTWARCIA (wariant B – zatwierdzony)
   Hero wg Brandbooka V2 s. 44/45 + editorial (ref. Kraina Bugu).
   Zasada: zero zmian DOM rodzica – wyłącznie CSS (real DOM: query→ul→li).
   ═══════════════════════════════════════════════════════════════ */


/* front: hero przylega do headera (meander = jedyny separator) */
.home #wr-main, .blog #wr-main { padding-top: 0 !important; }
.home .wr-alertbar, .blog .wr-alertbar { margin-top: .9rem; }

/* ── ALERTBAR „Pilne" ── */
.wr-alertbar { margin-bottom: 1.4rem; }
.wr-alertbar__row { background: var(--wr-coral); padding: .55rem .9rem; gap: .8rem !important; align-items: center; }
.wr-alertbar__label {
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wr-coral); background: var(--wr-cream); padding: .18rem .55rem; flex: none;
}
.wr-alertbar__row .wp-block-post-title { font-family: 'Rubik', sans-serif; font-size: .95rem; font-weight: 500; margin: 0; }
.wr-alertbar__row .wp-block-post-title a { color: #fff; text-decoration: none; }
.wr-alertbar__row .wp-block-post-title a:hover { text-decoration: underline; }

/* ── HERO wg s. 44/45: meander + panel kategorii + fotografia ── */
.wr-hero.wr-open-frame { border: 0; padding: 0; background: none; position: relative; margin-top: 0; }
.wr-hero.wr-open-frame::after,
.wr-hero.wr-open-frame::before { content: none; }         /* wyłącz „otwartą bramę" i zawiasy rodzica */
/* Nadtytuł hero: ikona i nazwa działu tego materiału, nie stała etykieta.
   Cinzel tylko tutaj – reszta panelu idzie Rubikiem.
   UWAGA: `text-transform: uppercase`, NIE `font-variant: small-caps`. Cinzel
   w podzbiorze latin-ext nie ma kapitalików z ogonkami, więc „Aktualności"
   wyszłoby jako „AktualnoŚCi". Wersaliki mają komplet znaków. */
.wr-hero .wr-kicker {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: .5rem;
  margin: 2.2rem 2.2rem 0 !important;
  padding: 0;
  background: none;
  color: rgba(255,255,255,.92);
  font-family: 'Cinzel', serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; font-variant: normal; text-transform: uppercase;
  line-height: 1;
}
.wr-hero .wr-kicker a { color: inherit; text-decoration: none; }
.wr-hero .wr-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ikona brana z mapy kategorii, ale malowana kolorem tekstu – panel bywa
   raz ciemny, raz jasny, a znak ma być czytelny na obu */
/* `main#wr-main` w selektorze nie dla ozdoby: niżej w pliku stoi reguła
   `main#wr-main .wr-kicker::before` z ikoną jako tłem i bez tego przebijała
   maskę, zostawiając pusty kwadrat przed nazwą działu. */
main#wr-main .wr-hero .wr-kicker::before,
.wr-hero .wr-kicker::before {
  content: "";
  width: 19px; height: 19px; flex: 0 0 auto;
  background: currentColor none;
  -webkit-mask: var(--wr-ico-color) no-repeat center / contain;
          mask: var(--wr-ico-color) no-repeat center / contain;
}
.wr-hero .wp-block-query { margin: 0; }
.wr-hero .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.wr-hero .wp-block-post-template > li {
  display: grid;
  grid-template-columns: 43% 57%;
  grid-template-rows: auto auto auto 1fr;   /* nadtytuł, tytuł, lead, przycisk */
  background: var(--wr-hero-panel, var(--wr-graphite));
  box-shadow: 0 14px 34px rgba(43,66,73,.16);
  margin: 0;
}
.wr-hero .wp-block-post-featured-image {
  grid-column: 2; grid-row: 1 / -1; height: 100%;
  margin: 0 !important; padding: 0; border: 0; background: none; box-shadow: none;
}
.wr-hero .wp-block-post-featured-image a { display: block; height: 100%; }
.wr-hero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#wr-main .wr-hero .wp-block-post-title,
.wr-hero .wp-block-post-title {
  grid-column: 1; grid-row: 2;
  margin: .75rem 2.2rem .5rem !important;
  /* tytuł Rubikiem – Cinzel zostaje tylko przy nazwie działu */
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-variant: normal; text-transform: none;
  font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1.2; letter-spacing: -.005em;
  text-wrap: balance;
}
.wr-hero .wp-block-post-title a { color: #fff; text-decoration: none; }
.wr-hero .wp-block-post-title a:hover { color: var(--wr-cream); text-decoration: underline; text-decoration-thickness: 1px; }
#wr-main .wr-hero .wp-block-post-excerpt,
.wr-hero .wp-block-post-excerpt {
  grid-column: 1; grid-row: 3; margin: 0 2.2rem 1rem !important;
  font-family: 'Rubik', sans-serif; font-weight: 300;
  font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.88);
}
.wr-hero .wp-block-post-excerpt .wp-block-post-excerpt__more-link { display: none; }
.wr-hero .wp-block-read-more {
  grid-column: 1; grid-row: 4; justify-self: start; align-self: start;
  margin: .2rem 2.2rem 2.2rem;
  padding: .55rem 1.35rem;
  border: 0;
  background: var(--wr-coral); color: #fff;
  font-family: 'Rubik', sans-serif; font-weight: 600; font-size: .9rem;
  text-decoration: none;
}
.wr-hero .wp-block-read-more:hover { background: #d64c49; color: #fff; }
.wr-hero li.category-zdrowie .wp-block-read-more { box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); }

/* panel hero w kolorze kategorii artykułu (WP dokleja category-{slug} do li) */
.wr-hero li.category-newsy       { --wr-hero-panel: var(--wp--custom--wr--cat--newsy); }
.wr-hero li.category-sport       { --wr-hero-panel: var(--wp--custom--wr--cat--sport); }
.wr-hero li.category-historia    { --wr-hero-panel: var(--wp--custom--wr--cat--historia); }
.wr-hero li.category-biznes      { --wr-hero-panel: var(--wp--custom--wr--cat--biznes); }
.wr-hero li.category-polityka    { --wr-hero-panel: var(--wp--custom--wr--cat--polityka); }
.wr-hero li.category-kultura     { --wr-hero-panel: var(--wp--custom--wr--cat--kultura); }
.wr-hero li.category-zdrowie     { --wr-hero-panel: var(--wp--custom--wr--cat--zdrowie); }
.wr-hero li.category-turystyka   { --wr-hero-panel: var(--wp--custom--wr--cat--turystyka); }
.wr-hero li.category-technologia { --wr-hero-panel: var(--wp--custom--wr--cat--technologia); }
.wr-hero li.category-edukacja    { --wr-hero-panel: var(--wp--custom--wr--cat--edukacja); }
/* jasne panele → grafitowy tekst dla kontrastu (WCAG) */
.wr-hero li.category-historia .wp-block-post-title a,
.wr-hero li.category-sport .wp-block-post-title a { color: var(--wr-graphite); }
.wr-hero li.category-historia .wp-block-post-excerpt,
.wr-hero li.category-sport .wp-block-post-excerpt { color: rgba(43,66,73,.85); }
/* na jasnych panelach nadtytuł i jego ikona też schodzą na grafit –
   ikona bierze kolor z `currentColor`, więc wystarczy zmienić tekst */
.wr-hero li.category-historia .wr-kicker,
.wr-hero li.category-sport .wr-kicker { color: rgba(43,66,73,.9); }

/* ── KOLUMNY Najnowsze + Podcasty ── */
@media (min-width: 782px) {
  .wr-streams { flex-wrap: nowrap !important; }
  .wr-streams > .wp-block-column:nth-child(1) { flex: 1 1 56%; min-width: 0; }
  .wr-streams > .wp-block-column:nth-child(2) { flex: 0 1 42%; min-width: 0; }
}

/* ── NAJNOWSZE: ticker, coral godziny ── */
.wr-stream-head span { color: var(--wr-graphite); letter-spacing: .18em; }
.wr-stream-head::after { background: #EAE2D4; }
.wr-stream li { border-bottom-color: #EFE9DD; }
.wr-stream__item .wp-block-post-date { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: .72rem; color: var(--wr-coral); }
.wr-stream__item .wp-block-post-title { font-size: .93rem; }
.wr-stream__item .wp-block-post-title a { color: var(--wr-graphite); }
.wr-stream__item .wp-block-post-title a:hover { color: var(--wr-coral); }

/* ── PODCASTY: grafitowy panel, okładki w 2 kolumnach ── */
.wr-minipod { background: var(--wr-graphite); padding: 1.05rem 1.05rem 1.15rem; position: relative; }
.wr-minipod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--wp--preset--color--accent); }
.wr-minipod .wr-stream-head--static span { color: var(--wr-cream); }
.wr-minipod .wr-stream-head--static::after { background: rgba(250,242,229,.18); }
@media (min-width: 782px) {
  .wr-minipod .wp-block-post-template,
  .wr-minipod__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .wr-minipod__item { margin-bottom: 0; }
}
.wr-minipod__item .wp-block-post-featured-image { border: 1px solid rgba(250,242,229,.25); }
.wr-minipod__list li:nth-child(n+2) .wp-block-post-featured-image { display: block; }  /* rodzic chował okładki 2+ */
.wr-minipod__list li:nth-child(n+2) { border-top: 0; padding-top: 0; }
.wr-minipod__item .wp-block-post-title { font-family: 'Rubik', sans-serif; font-size: .88rem; font-weight: 500; line-height: 1.35; margin: .5rem 0 0; }
.wr-minipod__item .wp-block-post-title a { color: var(--wr-cream); text-decoration: none; }
.wr-minipod__item .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.wr-minipod__all { display: inline-block; margin-top: .6rem; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; }
.wr-minipod__all:hover { color: var(--wr-cream); }

/* ── NEWSLETTER: krem + rama ze zwojów bramy (scrolls) ── */
.wr-newsletter { margin-top: 3rem; }
.wr-newsletter__frame.wr-open-frame {
  background: var(--wr-cream);
  background-clip: border-box;
  border: 26px solid transparent;
  padding: 1.6rem 1.4rem;
  position: relative;
}
.wr-newsletter__frame.wr-open-frame::before,
.wr-newsletter__frame.wr-open-frame::after { content: none; }
@media (max-width: 781px) {
  .wr-newsletter__frame.wr-open-frame { border-width: 20px; padding: 1.1rem .9rem; }
}
.wr-newsletter__text h2 { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -.005em; color: var(--wr-graphite); }
.wr-newsletter__text p { font-family: 'Rubik', sans-serif; font-weight: 300; }
.wr-newsletter__form input { font-family: 'Rubik', sans-serif; border: 1px solid rgba(43,66,73,.35); background: #fff; padding: .65rem .8rem; }
.wr-newsletter__form button { font-family: 'Rubik', sans-serif; font-weight: 600; letter-spacing: .06em; background: var(--wr-coral); border: 1px solid var(--wr-coral); color: #fff; padding: .65rem 1.2rem; cursor: pointer; }
.wr-newsletter__form button:hover { background: #d64c49; border-color: #d64c49; }

/* ── STOPKA: sygnet nad nazwą (identyfikacja s. 23) ── */
.wr-foot-mark { width: 72px; height: 72px; display: block; margin-bottom: .65rem; }
.wr-footcol--brand .wr-foot-logo { letter-spacing: .14em; }

/* ── REKLAMA: cicha ramka ── */
.wr-ad { border: 1px dashed rgba(43,66,73,.25); color: #8a979c; background: transparent; }

/* ── TRYB CIEMNY ── */
[data-wr-theme="dark"] [data-wr-theme="dark"] .wr-hero .wp-block-post-template > li { box-shadow: 0 14px 34px rgba(0,0,0,.5); }
[data-wr-theme="dark"] .wr-stream-head span { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-stream-head::after { background: #24363E; }
[data-wr-theme="dark"] .wr-stream li { border-bottom-color: #24363E; }
[data-wr-theme="dark"] .wr-stream__item .wp-block-post-title a { color: #E7E0D2; }
[data-wr-theme="dark"] .wr-minipod { background: #16262C; }
[data-wr-theme="dark"] .wr-newsletter__frame.wr-open-frame { background: #16262C; }
[data-wr-theme="dark"] .wr-newsletter__text h2 { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-newsletter__form input { background: #0F1B20; color: var(--wr-cream); border-color: rgba(250,242,229,.30); }

/* ── MOBILE wg s. 45: zdjęcie na górze, panel z tytułem pod nim ── */
@media (max-width: 781px) {
  .wr-hero .wp-block-post-template > li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .wr-hero .wp-block-post-featured-image { grid-column: 1; grid-row: 1; height: auto; }
  .wr-hero .wp-block-post-featured-image img { aspect-ratio: 4 / 3; }
  .wr-hero .wr-kicker { margin: 1.2rem 1.2rem 0 !important; font-size: .72rem; }
  main#wr-main .wr-hero .wr-kicker::before { width: 17px; height: 17px; }
  #wr-main .wr-hero .wp-block-post-title { grid-row: 3; margin: .55rem 1.2rem .3rem !important; font-size: 1.45rem; }
  #wr-main .wr-hero .wp-block-post-excerpt { grid-row: 4; margin: 0 1.2rem .9rem !important; }
  .wr-hero .wp-block-post-template > li { grid-template-rows: auto auto auto auto auto; }
  .wr-hero .wr-kicker { grid-row: 2; }
  .wr-hero .wp-block-read-more { grid-row: 5; margin: 0 1.2rem 1.5rem; }
  .wr-minipod { margin-top: .6rem; }
}


/* ═══ HOTFIX v1.3.1 (audyt żywej strony 4.08) ═══ */
/* WP constrained layout ściskał hero do 720 px i centrował – wyłączamy w hero */
.wr-hero > .wp-block-query,
.wr-hero > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Reguła wyżej dotyczy tylko bezpośrednich dzieci hero. Nadtytuł siedzi
   teraz w pętli wpisu, więc jej nie podlega i wyjątek na niego jest zbędny. */


/* ═══ v1.3.2: nagłówki sekcji w foncie głównym (Cinzel) ═══ */
.wr-section-head .wp-block-heading {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: .06em;
}
.wr-section-head a { font-family: 'Rubik', sans-serif; }


/* ═══ v1.3.11: NAGŁÓWKI STRON STATYCZNYCH I ARCHIWÓW – styl modułu newslettera ═══ */
.page main h1.wp-block-post-title,
h1.wp-block-query-title,
.wp-block-query-title {
  background: var(--wr-cream);
  background-clip: border-box;
  border: 18px solid transparent;
  padding: 1.05rem 1.5rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--wr-graphite);
  letter-spacing: .03em;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  text-align: center;
  margin-top: .4rem;
  margin-bottom: 1.6rem;
}
/* nagłówki treści na stałych stronach – Cinzel jak w module */
.page .wp-block-post-content h2,
.page .wp-block-post-content h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--wr-graphite);
  letter-spacing: .02em;
}
[data-wr-theme="dark"] .page main h1.wp-block-post-title,
[data-wr-theme="dark"] .wp-block-query-title { background: #16262C; color: var(--wr-cream); }
[data-wr-theme="dark"] .page .wp-block-post-content h2,
[data-wr-theme="dark"] .page .wp-block-post-content h3 { color: var(--wr-cream); }
@media (max-width: 781px) {
  .page main h1.wp-block-post-title,
  .wp-block-query-title { border-width: 14px; padding: .8rem .9rem; font-size: 1.35rem; }
}


/* ═══ v1.3.12 ═══ */
/* 1) Stara „otwarta brama" (grafit) była tylko próbnym mockupem – wyłączona globalnie.
      Nasze moduły (hero, newsletter, nagłówki) mają wyższą specyficzność i własne ramy. */
.wr-open-frame { border: 0; }
.wr-open-frame::before,
.wr-open-frame::after { content: none; }

/* 2) Archiwa kategorii: pas tytułu w kolorze kategorii (background-color, żeby nie zgubić clip) */
.category .wp-block-query-title { color: #fff; }
.category-newsy       .wp-block-query-title { background-color: var(--wp--custom--wr--cat--newsy); }
.category-sport       .wp-block-query-title { background-color: var(--wp--custom--wr--cat--sport); }
.category-historia    .wp-block-query-title { background-color: var(--wp--custom--wr--cat--historia); }
.category-biznes      .wp-block-query-title { background-color: var(--wp--custom--wr--cat--biznes); }
.category-polityka    .wp-block-query-title { background-color: var(--wp--custom--wr--cat--polityka); }
.category-kultura     .wp-block-query-title { background-color: var(--wp--custom--wr--cat--kultura); }
.category-zdrowie     .wp-block-query-title { background-color: var(--wp--custom--wr--cat--zdrowie); }
.category-turystyka   .wp-block-query-title { background-color: var(--wp--custom--wr--cat--turystyka); }
.category-technologia .wp-block-query-title { background-color: var(--wp--custom--wr--cat--technologia); }
.category-edukacja    .wp-block-query-title { background-color: var(--wp--custom--wr--cat--edukacja); }
/* jasne kolory → grafitowy tekst (WCAG) */
.category-historia .wp-block-query-title,
.category-sport    .wp-block-query-title { color: var(--wr-graphite); }

/* ════ KREDYTY ZDJĘĆ (v1.3.13) ════ */
main#wr-main .wr-has-credit,
main#wr-main .wp-block-post-featured-image { position: relative; }
main#wr-main .wr-photo-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-family: Rubik, sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: .02em; line-height: 1; color: #fff;
  background: rgba(43,66,73,.58); /* grafit */
  padding: 4px 8px; border-radius: 2px; pointer-events: none;
  max-width: 82%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-wr-theme="dark"] main#wr-main .wr-photo-credit { background: rgba(10,18,21,.66); }
@media (max-width: 600px) {
  main#wr-main .wr-photo-credit { font-size: 10px; padding: 3px 6px; right: 6px; bottom: 6px; }
}


/* ═══════════════════════════════════════════════════════════════
 * v1.4.0 – AUDYT PRZEDPREMIEROWY (17.08.2026)
 * 1) równe kafle w każdej siatce (podcasty, sekcje, archiwa)
 * 2) szablony wyników wyszukiwania i 404
 * 3) artykuł: okruszki, czas czytania, tagi, udostępnianie, nawigacja
 * 4) Punkt Informacyjny: kafle huba + jednolity styl baz
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1. RÓWNE KAFLE ─────────────────────────────────────────────
 * Przyczyna rozjazdów: WordPress dokłada margines „block gap" kolejnym
 * elementom listy (li + li), a karta w środku nie rozciąga się na całą
 * wysokość komórki siatki. Efekt: sąsiednie kafle zaczynały się i kończyły
 * na różnych wysokościach. Zerujemy marginesy i rozciągamy kartę. */
main#wr-main .wp-block-post-template.is-layout-grid,
main#wr-main .wr-minipod__list,
main#wr-main .wr-mixzone { align-items: stretch; }

main#wr-main .wp-block-post-template.is-layout-grid > li,
main#wr-main .wr-minipod__list > li,
main#wr-main .wr-mixzone > li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

main#wr-main .wp-block-post-template.is-layout-grid > li > .wp-block-group,
main#wr-main .wr-minipod__list > li > .wp-block-group,
main#wr-main .wr-mixzone > li > .wp-block-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* obrazki kart zawsze w tej samej proporcji – bez skoków przy ładowaniu */
main#wr-main .wr-card .wp-block-post-featured-image img,
main#wr-main .wr-mix__item .wp-block-post-featured-image img,
main#wr-main .wr-minipod__item .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* stała liczba wierszy tytułu i zajawki = wspólny rytm kafli */
main#wr-main .wr-card .wp-block-post-title,
main#wr-main .wr-mix__item .wp-block-post-title,
main#wr-main .wr-minipod__item .wp-block-post-title { overflow: hidden; }
main#wr-main .wr-card .wp-block-post-title a,
main#wr-main .wr-mix__item .wp-block-post-title a,
main#wr-main .wr-minipod__item .wp-block-post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main#wr-main .wr-card .wp-block-post-excerpt p,
main#wr-main .wr-card--podcast .wp-block-post-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* data / meta zawsze przy dolnej krawędzi karty */
main#wr-main .wr-card .wp-block-post-date { margin-top: auto; padding-top: .5rem; }
main#wr-main .wr-mix__item .wp-block-post-date { margin-top: auto; }
main#wr-main .wr-mix__body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* mini-podcasty w kolumnie prawej: bez przesunięcia drugiego kafla */
main#wr-main .wr-minipod__list > li:nth-child(n+2) { margin-top: 0 !important; padding-top: 0; border-top: 0; }
main#wr-main .wr-minipod__item .wp-block-post-title { margin-top: .5rem; }

/* ── 2. WYNIKI WYSZUKIWANIA I 404 ─────────────────────────────── */
.wr-searchbar { margin: 0 auto 2rem; }
.wr-searchbar .wp-block-search__inside-wrapper {
  border: 1px solid rgba(43,66,73,.30);
  background: #fff;
  padding: .2rem;
}
.wr-searchbar .wp-block-search__input {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  border: 0;
  padding: .65rem .8rem;
  background: transparent;
  color: var(--wr-graphite);
}
.wr-searchbar .wp-block-search__button {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  background: var(--wr-coral);
  border: 0;
  color: #fff;
  padding: .65rem 1.2rem;
  cursor: pointer;
}
.wr-searchbar .wp-block-search__button:hover { background: #d64c49; }

.wr-empty {
  border: 1px solid rgba(43,66,73,.18);
  background: var(--wr-cream);
  padding: 1.6rem 1.5rem;
  margin: 0 auto 2.5rem;
}
.wr-empty h2 { font-family: 'Cinzel', serif; font-weight: 600; margin-top: 0; }
.wr-empty__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.wr-empty__links a {
  font-family: 'Rubik', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--wr-graphite);
  border: 1px solid rgba(43,66,73,.28);
  padding: .4rem .8rem;
  background: #fff;
}
.wr-empty__links a:hover { border-color: var(--wr-coral); color: var(--wr-coral); }

.wr-404title {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--wr-graphite);
  margin-bottom: 1.2rem;
}
.wr-section-head--404 { margin-top: 2.5rem; }

.wr-pagination { margin-top: 2.4rem; gap: .35rem; font-family: 'Rubik', sans-serif; }
.wr-pagination .page-numbers {
  display: inline-block;
  min-width: 2.2rem;
  text-align: center;
  padding: .45rem .6rem;
  border: 1px solid rgba(43,66,73,.22);
  text-decoration: none;
  color: var(--wr-graphite);
  font-size: .9rem;
}
.wr-pagination .page-numbers:hover { border-color: var(--wr-coral); color: var(--wr-coral); }
.wr-pagination .page-numbers.current { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; font-weight: 600; }

/* ── 3. KARTY ARCHIWÓW: kategoria, zajawka, data po polsku ────── */
main#wr-main .wr-card__cat {
  font-family: 'Rubik', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: .8rem .9rem 0;
}
main#wr-main .wr-card__cat a { color: var(--wr-coral); text-decoration: none; }
main#wr-main .wr-card__cat a:hover { text-decoration: underline; }
main#wr-main .wr-card .wp-block-post-title { margin: .35rem .9rem .35rem; }
main#wr-main .wr-card .wp-block-post-excerpt {
  margin: 0 .9rem .4rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--wp--preset--color--muted, #5c6f76);
}
main#wr-main .wr-card .wp-block-post-excerpt__more-link { display: none; }
main#wr-main .wr-card .wp-block-post-date {
  margin: 0 .9rem .9rem;
  font-size: .76rem;
  color: var(--wp--preset--color--muted, #5c6f76);
}

/* ── 4. ARTYKUŁ ────────────────────────────────────────────────── */
.wr-crumbs {
  font-family: 'Rubik', sans-serif;
  font-size: .78rem;
  color: #5c6f76;
  margin: 0 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.wr-crumbs a { color: #5c6f76; text-decoration: none; }
.wr-crumbs a:hover { color: var(--wr-coral); }
/* tytuł w ścieżce ucinamy dopiero, gdy naprawdę nie ma miejsca – wiersz i tak
   zwolnił się po wycięciu nadtytułu */
.wr-crumbs__here { color: var(--wr-graphite); font-weight: 500; max-width: min(62ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dom zamiast słów „Strona główna" – nazwa zostaje dla czytników ekranu */
.wr-tylko-czytnik {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.wr-crumbs__dom {
  display: inline-block;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: url('assets/wr-ico-dom.svg') no-repeat center / contain;
          mask: url('assets/wr-ico-dom.svg') no-repeat center / contain;
}
/* romb kategorii przy jej nazwie: znak sekcji zostaje, mimo że nadtytuł
   nad tytułem został wycięty. Ikonę bierze z reguł `.wr-sec-*`. */
.wr-crumbs__kat { display: inline-flex; align-items: center; gap: .3rem; }
.wr-crumbs__kat::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 auto;
  background: var(--wr-ico-color, none) no-repeat center / contain;
}

.wr-byline { gap: .6rem !important; align-items: baseline; font-family: 'Rubik', sans-serif; font-size: .82rem; color: #5c6f76; }
.wr-byline .wp-block-post-author-name { font-weight: 600; color: var(--wr-graphite); }
.wr-byline .wp-block-post-date::before,
.wr-readtime::before { content: "·"; margin-right: .6rem; color: rgba(43,66,73,.35); }
.wr-readtime { font-size: .82rem; color: #5c6f76; }

/* długość wiersza w treści: 680 px ≈ 70 znaków (czytelność) */
main#wr-main .wp-block-post-content > *:not(.alignwide):not(.alignfull):not(.wr-pi-grid):not(.wr-pi-alarm):not(.wr-pi-cols):not(.wp-block-columns) {
  max-width: min(100%, 680px);
  margin-left: auto;
  margin-right: auto;
}
main#wr-main .single .wp-block-post-content { font-size: 1.02rem; }

.wr-postfoot { margin-top: 2rem; border-top: 1px solid rgba(43,66,73,.15); padding-top: 1.1rem; }
.wr-tags { font-family: 'Rubik', sans-serif; font-size: .82rem; color: #5c6f76; margin-bottom: 1rem; }
.wr-tags a { color: var(--wr-graphite); text-decoration: none; border-bottom: 1px solid rgba(43,66,73,.25); }
.wr-tags a:hover { color: var(--wr-coral); border-bottom-color: var(--wr-coral); }

.wr-postnav { margin-top: 2rem; gap: 1rem !important; font-family: 'Rubik', sans-serif; font-size: .88rem; }
.wr-postnav .wp-block-post-navigation-link { max-width: 48%; }
.wr-postnav a { color: var(--wr-graphite); text-decoration: none; }
.wr-postnav a:hover { color: var(--wr-coral); }
.wr-related-empty { font-size: .85rem; color: #5c6f76; }

.wr-side-pi { margin-top: 2rem; border: 1px solid rgba(43,66,73,.18); background: var(--wr-cream); padding: 1rem 1.1rem; }
.wr-side-pi__label { display: block; font-family: 'Rubik', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-coral); margin-bottom: .6rem; }
.wr-side-pi a { display: block; font-family: 'Rubik', sans-serif; font-size: .88rem; color: var(--wr-graphite); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid rgba(43,66,73,.10); }
.wr-side-pi a:last-child { border-bottom: 0; }
.wr-side-pi a:hover { color: var(--wr-coral); }
.wr-side-pi__all { font-weight: 600; color: var(--wr-coral) !important; }

/* ── 5. WYSZUKIWARKA W NAGŁÓWKU ────────────────────────────────── */
.wr-hsearch { display: flex; align-items: center; }
.wr-hsearch form { display: flex; align-items: center; border: 1px solid rgba(43,66,73,.22); background: #fff; }
.wr-hsearch input[type="search"] {
  font-family: 'Rubik', sans-serif;
  font-size: .82rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wr-graphite);
  padding: .38rem .5rem;
  width: 8.5rem;
  transition: width .18s ease;
}
.wr-hsearch input[type="search"]:focus { width: 12rem; }
.wr-hsearch button {
  border: 0; background: transparent; cursor: pointer; color: #5c6f76;
  padding: .3rem .5rem; display: flex; align-items: center;
}
.wr-hsearch button:hover { color: var(--wr-coral); }
.wr-mobilenav__search { padding: .8rem 1rem 0; }
.wr-mobilenav__search form { display: flex; border: 1px solid rgba(43,66,73,.22); background: #fff; }
.wr-mobilenav__search input[type="search"] { flex: 1; border: 0; outline: 0; background: transparent; padding: .6rem .7rem; font-family: 'Rubik', sans-serif; font-size: .95rem; }
.wr-mobilenav__search button { border: 0; background: var(--wr-coral); color: #fff; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: .82rem; padding: 0 .9rem; cursor: pointer; }
@media (max-width: 900px) { .wr-hsearch input[type="search"] { width: 6.5rem; } }

/* ── 6. DOSTĘPNOŚĆ: widoczny fokus klawiatury ─────────────────── */
main#wr-main a:focus-visible,
.wr-siteheader a:focus-visible,
.wr-siteheader button:focus-visible,
footer a:focus-visible,
input:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wr-coral);
  outline-offset: 2px;
}

/* ── 7. TRYB CIEMNY dla nowych komponentów ────────────────────── */
[data-wr-theme="dark"] .wr-empty,
[data-wr-theme="dark"] .wr-side-pi { background: #16262C; border-color: #24363E; }
[data-wr-theme="dark"] .wr-empty__links a { background: #0F1B20; color: var(--wr-cream); border-color: #2F444C; }
[data-wr-theme="dark"] .wr-searchbar .wp-block-search__inside-wrapper,
[data-wr-theme="dark"] .wr-hsearch form,
[data-wr-theme="dark"] .wr-mobilenav__search form { background: #0F1B20; border-color: #2F444C; }
[data-wr-theme="dark"] .wr-searchbar .wp-block-search__input,
[data-wr-theme="dark"] .wr-hsearch input[type="search"],
[data-wr-theme="dark"] .wr-mobilenav__search input[type="search"] { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-404title,
[data-wr-theme="dark"] .wr-empty h2 { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-crumbs__here,
[data-wr-theme="dark"] .wr-byline .wp-block-post-author-name,
[data-wr-theme="dark"] .wr-tags a,
[data-wr-theme="dark"] .wr-side-pi a,
[data-wr-theme="dark"] .wr-postnav a { color: #E7E0D2; }
[data-wr-theme="dark"] .wr-pagination .page-numbers { border-color: #2F444C; }
[data-wr-theme="dark"] .wr-pagination .page-numbers { color: #E7E0D2; }
[data-wr-theme="dark"] .wr-postfoot { border-top-color: #24363E; }

/* ═══════════════════════════════════════════════════════════════
 * v1.4.0 – PUNKT INFORMACYJNY
 * A) hub: kafle baz (wzorzec „Punkt Informacyjny – kafle baz")
 * B) bazy (apteki, urzędy, szkoły, msze, rozkłady, odpady):
 *    wspólna skóra w tokenach marki nałożona na istniejący markup –
 *    selektor main#wr-main bije style osadzone w treści strony.
 * ═══════════════════════════════════════════════════════════════ */

/* ── A. HUB ──────────────────────────────────────────────────── */
.wr-pi-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto 2rem;
  color: var(--wr-graphite);
}
main#wr-main .wr-pi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  max-width: 100%;
  margin: 0 0 2.6rem;
}
.wr-pi-tile {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #fff;
  border: 1px solid rgba(43,66,73,.16);
  border-top: 3px solid var(--wr-pi-accent, var(--wr-coral));
  padding: 1.15rem 1.15rem 1.25rem;
  text-decoration: none;
  color: var(--wr-graphite);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.wr-pi-tile:hover {
  box-shadow: 0 10px 24px rgba(43,66,73,.13);
  transform: translateY(-2px);
  border-color: rgba(43,66,73,.28);
  border-top-color: var(--wr-pi-accent, var(--wr-coral));
}
.wr-pi-tile__icon { width: 30px; height: 30px; color: var(--wr-pi-accent, var(--wr-coral)); }
.wr-pi-tile__name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .02em;
  line-height: 1.25;
}
.wr-pi-tile__desc { font-family: 'Rubik', sans-serif; font-size: .88rem; line-height: 1.5; color: #5c6f76; flex: 1 1 auto; }
.wr-pi-tile__cta {
  font-family: 'Rubik', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wr-koral-text, #C44C4A);
}
.wr-pi-tile--msze     { --wr-pi-accent: var(--wp--custom--wr--cat--historia, #d9c499); }
.wr-pi-tile--apteki   { --wr-pi-accent: var(--wp--custom--wr--cat--zdrowie, #f07066); }
.wr-pi-tile--rozklady { --wr-pi-accent: var(--wp--custom--wr--cat--turystyka, #1f91cc); }
.wr-pi-tile--odpady   { --wr-pi-accent: var(--wp--custom--wr--cat--newsy, #005e73); }
.wr-pi-tile--szkoly   { --wr-pi-accent: var(--wp--custom--wr--cat--edukacja, #8a9254); }
.wr-pi-tile--urzedy   { --wr-pi-accent: var(--wp--custom--wr--cat--polityka, #7d3767); }

/* pas numerów alarmowych */
main#wr-main .wr-pi-alarm {
  max-width: 100%;
  background: var(--wr-graphite);
  color: var(--wr-cream);
  padding: 1.3rem 1.4rem;
  margin: 0 0 2.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem 1.4rem;
}
.wr-pi-alarm__title {
  grid-column: 1 / -1;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .06em;
  margin: 0;
  color: var(--wr-cream);
}
.wr-pi-alarm__item { font-family: 'Rubik', sans-serif; font-size: .9rem; line-height: 1.45; }
.wr-pi-alarm__num { display: block; font-size: 1.35rem; font-weight: 600; color: var(--wr-coral); letter-spacing: .02em; }
.wr-pi-alarm__item--main .wr-pi-alarm__num { font-size: 1.9rem; }

/* skrócone spisy tematyczne */
main#wr-main .wr-pi-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem 2rem;
  max-width: 100%;
  margin: 0 0 2.4rem;
  align-items: start;
}
.wr-pi-col h2 {
  font-family: 'Cinzel', serif !important;
  font-size: 1.12rem !important;
  letter-spacing: .04em;
  margin: 0 0 .6rem !important;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(43,66,73,.18);
}
.wr-pi-col ul { list-style: none; margin: 0; padding: 0; }
.wr-pi-col li { font-family: 'Rubik', sans-serif; font-size: .9rem; line-height: 1.5; padding: .42rem 0; border-bottom: 1px solid rgba(43,66,73,.08); }
.wr-pi-col li:last-child { border-bottom: 0; }
.wr-pi-col a { color: var(--wr-graphite); text-decoration: none; border-bottom: 1px solid rgba(230,89,86,.45); }
.wr-pi-col a:hover { color: var(--wr-coral); border-bottom-color: var(--wr-coral); }
.wr-pi-soon { font-style: italic; color: #8a979c; }

.wr-pi-foot { max-width: 720px; margin: 0 auto; font-size: .92rem; color: #5c6f76; border-top: 1px solid rgba(43,66,73,.15); padding-top: 1rem; }

/* ── B. BAZY: wspólna skóra ──────────────────────────────────── */
main#wr-main .wr-apt,
main#wr-main .wr-urz,
main#wr-main .wr-szk,
main#wr-main .wr-msze,
main#wr-main .wr-roz,
main#wr-main .wr-odp { font-family: 'Rubik', sans-serif; }

/* karta wyróżniona (dyżur, całodobowa, ważna informacja) */
main#wr-main .wr-apt .cd,
main#wr-main .wr-urz .cd,
main#wr-main .wr-roz .cd,
main#wr-main .wr-odp .cd {
  border: 1px solid rgba(230,89,86,.55);
  border-left: 4px solid var(--wr-coral);
  background: rgba(230,89,86,.06);
  padding: 1.05rem 1.2rem;
}
main#wr-main .wr-apt .med {
  border: 1px solid rgba(43,66,73,.25);
  border-left: 4px solid var(--wr-graphite);
  background: rgba(43,66,73,.05);
  padding: 1.05rem 1.2rem;
}
main#wr-main .wr-apt .cd .b,
main#wr-main .wr-urz .cd .b,
main#wr-main .wr-roz .cd .b,
main#wr-main .wr-odp .cd .b { background: var(--wr-coral); font-weight: 600; }
main#wr-main .wr-apt .med .b { background: var(--wr-graphite); font-weight: 600; }

/* pasek filtrów – przyklejony pod nagłówkiem, chipy w marce */
main#wr-main .wr-apt .box,
main#wr-main .wr-szk .box,
main#wr-main .wr-msze .box,
main#wr-main .wr-roz .pick,
main#wr-main .wr-odp .pick {
  border: 1px solid rgba(43,66,73,.18);
  background: var(--wr-cream);
  padding: .9rem 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
}
main#wr-main .wr-apt select,
main#wr-main .wr-szk select,
main#wr-main .wr-msze select,
main#wr-main .wr-roz select,
main#wr-main .wr-odp select {
  font-family: 'Rubik', sans-serif;
  font-size: .95rem;
  border: 1px solid rgba(43,66,73,.28);
  background: #fff;
  padding: .5rem .7rem;
  min-height: 44px;
  color: var(--wr-graphite);
}
main#wr-main .chips button,
main#wr-main .wr-roz .bt,
main#wr-main .wr-odp .k {
  font-family: 'Rubik', sans-serif;
  font-size: .85rem;
  min-height: 40px;
  border: 1px solid rgba(43,66,73,.28);
  background: #fff;
  color: var(--wr-graphite);
  padding: .4rem .9rem;
  cursor: pointer;
}
main#wr-main .chips button:hover,
main#wr-main .wr-roz .bt:hover,
main#wr-main .wr-odp .k:hover { border-color: var(--wr-coral); color: var(--wr-coral); }
main#wr-main .chips button.on,
main#wr-main .wr-roz .bt.on,
main#wr-main .wr-odp .k.on { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; font-weight: 600; }

/* nagłówki grup (gminy, typy placówek) */
main#wr-main .wr-apt .grp h2,
main#wr-main .wr-urz .grp h2,
main#wr-main .wr-szk .grp h2,
main#wr-main .wr-msze .grp h2,
main#wr-main .wr-roz .grp h2,
main#wr-main .wr-odp .grp h2 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--wr-graphite);
  margin: 2rem 0 .2rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid rgba(43,66,73,.15);
  scroll-margin-top: 5rem;
}

/* pozycje baz jako czytelne karty w siatce */
main#wr-main .wr-apt .grp,
main#wr-main .wr-urz .grp,
main#wr-main .wr-szk .grp,
main#wr-main .wr-msze .grp { display: block; }
main#wr-main .wr-apt .card,
main#wr-main .wr-urz .card,
main#wr-main .wr-szk .card {
  border-bottom: 1px solid rgba(43,66,73,.10);
  padding: .8rem 0;
}
main#wr-main .wr-apt .card strong,
main#wr-main .wr-urz .card strong,
main#wr-main .wr-szk .card strong { font-size: 1.02rem; color: var(--wr-graphite); }
main#wr-main .wr-apt .card small,
main#wr-main .wr-urz .card small,
main#wr-main .wr-szk .card small { color: #5c6f76; }
main#wr-main .wr-apt a,
main#wr-main .wr-urz a,
main#wr-main .wr-szk a,
main#wr-main .wr-msze a,
main#wr-main .wr-roz a,
main#wr-main .wr-odp a { color: var(--wr-graphite); text-decoration-color: rgba(230,89,86,.5); text-underline-offset: 2px; }
main#wr-main .wr-apt a:hover,
main#wr-main .wr-urz a:hover,
main#wr-main .wr-szk a:hover,
main#wr-main .wr-msze a:hover,
main#wr-main .wr-roz a:hover,
main#wr-main .wr-odp a:hover { color: var(--wr-coral); }

/* na desktopie bazy w dwóch kolumnach – krótszy wiersz, mniej przewijania */
@media (min-width: 1000px) {
  main#wr-main .wr-apt .grp,
  main#wr-main .wr-urz .grp,
  main#wr-main .wr-szk .grp { columns: 2; column-gap: 2.4rem; }
  main#wr-main .wr-apt .grp h2,
  main#wr-main .wr-urz .grp h2,
  main#wr-main .wr-szk .grp h2 { column-span: all; }
  main#wr-main .wr-apt .card,
  main#wr-main .wr-urz .card,
  main#wr-main .wr-szk .card { break-inside: avoid; }
}

/* tekst wprowadzający na stronach baz: czytelna długość wiersza */
main#wr-main .page .wp-block-post-content > p { max-width: 720px; }

/* ── C. TRYB CIEMNY dla Punktu Informacyjnego ─────────────────── */
[data-wr-theme="dark"] .wr-pi-tile { background: #16262C; border-color: #24363E; color: #E7E0D2; }
[data-wr-theme="dark"] .wr-pi-tile__desc { color: #9fb2ba; }
[data-wr-theme="dark"] .wr-pi-lead,
[data-wr-theme="dark"] .wr-pi-col a { color: #E7E0D2; }
[data-wr-theme="dark"] .wr-pi-col h2 { border-bottom-color: #24363E; }
[data-wr-theme="dark"] .wr-pi-col li { border-bottom-color: #1D2E35; }
[data-wr-theme="dark"] .wr-pi-alarm { background: #0F1B20; }
[data-wr-theme="dark"] main#wr-main .wr-apt .box,
[data-wr-theme="dark"] main#wr-main .wr-szk .box,
[data-wr-theme="dark"] main#wr-main .wr-msze .box,
[data-wr-theme="dark"] main#wr-main .wr-roz .pick,
[data-wr-theme="dark"] main#wr-main .wr-odp .pick { background: #16262C; border-color: #24363E; }
[data-wr-theme="dark"] main#wr-main .chips button,
[data-wr-theme="dark"] main#wr-main .wr-roz .bt,
[data-wr-theme="dark"] main#wr-main .wr-odp .k,
[data-wr-theme="dark"] main#wr-main .wr-apt select,
[data-wr-theme="dark"] main#wr-main .wr-szk select,
[data-wr-theme="dark"] main#wr-main .wr-msze select,
[data-wr-theme="dark"] main#wr-main .wr-roz select,
[data-wr-theme="dark"] main#wr-main .wr-odp select { background: #0F1B20; color: #E7E0D2; border-color: #2F444C; }
[data-wr-theme="dark"] main#wr-main .wr-apt .grp h2,
[data-wr-theme="dark"] main#wr-main .wr-urz .grp h2,
[data-wr-theme="dark"] main#wr-main .wr-szk .grp h2,
[data-wr-theme="dark"] main#wr-main .wr-msze .grp h2,
[data-wr-theme="dark"] main#wr-main .wr-roz .grp h2,
[data-wr-theme="dark"] main#wr-main .wr-odp .grp h2 { color: var(--wr-cream); border-bottom-color: #24363E; }

/* etykieta tylko dla czytników ekranu */
.wr-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* siatka kafli Punktu Informacyjnego: 1 / 2 / 3 kolumny */
@media (min-width: 620px) { main#wr-main .wr-pi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { main#wr-main .wr-pi-grid { grid-template-columns: repeat(3, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
 * v1.4.3 – POPRAWKI PO PRZEGLĄDZIE MICHAŁA (18.08)
 * 1) wyszukiwarka na początku paska (przed „Msze Św."), bez łamania wierszy
 * 2) rama barokowa NAŁOŻONA na pas koloru, w tonacji nagłówka
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1. PASEK GÓRNY: nic się nie łamie ─────────────────────────── */
.wr-topbar .wr-hsearch { flex: 0 0 auto; margin-right: .9rem; }  /* kolejność ustawiona w markupie */
.wr-utils { flex-wrap: nowrap; }
.wr-utils a { white-space: nowrap; flex: 0 0 auto; }
.wr-hsearch input[type="search"] { width: 7.5rem; }
.wr-hsearch input[type="search"]:focus { width: 11rem; }
@media (max-width: 1200px) {
  .wr-hsearch input[type="search"] { width: 5.5rem; }
  .wr-hsearch input[type="search"]:focus { width: 9rem; }
}
@media (max-width: 1040px) {
  .wr-hsearch input[type="search"] { width: 0; padding-left: 0; padding-right: 0; }
  .wr-hsearch input[type="search"]:focus { width: 8rem; padding-left: .5rem; padding-right: .5rem; }
}

/* ── 2. RAMA NA PASIE KOLORU ────────────────────────────────────
 * Było: ornament rysowany na obramowaniu, a tło kończyło się pod nim –
 * pas koloru i rama czytały się jak dwa osobne obiekty. Teraz tło płynie
 * pod ornamentem (background-clip: border-box wyżej), a na archiwach
 * kategorii ornament jest przemalowany na tonację nagłówka. */
body.category .wp-block-query-title {   /* ornament ton w ton z kolorem kategorii */
}
body.category-historia .wp-block-query-title,
body.category-sport .wp-block-query-title { /* jasne kategorie: grafit jak tekst */
}

/* ═══════════════════════════════════════════════════════════════
 * v1.4.4 – DRUGA TURA UWAG (18.08)
 * 1) artefakty ram: wycinek 19% wchodził w zdobienia wnętrza kafla
 *    (pod meandrem pojawiał się urwany rząd łuków i kreskowania).
 *    Zmierzone na renderze pliku: pas meandra kończy się na 16,7%,
 *    kolejny element zaczyna się na 18,2%. Stąd wycinek 17/17/14/17.
 * 2) wyszukiwarka po prawej, w formie pigułki pod przełącznik dzień/noc
 * 3) slogan przy logo zawsze w jednej linii
 * ═══════════════════════════════════════════════════════════════ */

/* ── slogan: jedna linia ──────────────────────────────────────── */
.wr-logo__tag { white-space: nowrap; }
.wr-logo { flex: 0 0 auto; }

/* ── wyszukiwarka: pigułka domykająca pasek razem z trybem dzień/noc ── */
.wr-topbar .wr-hsearch { margin: 0 .55rem 0 auto; }   /* dosunięta do prawej, tuż przed trybem */
.wr-hsearch form {
  height: 38px;
  border: 1px solid var(--wr-coral);
  border-radius: 999px;
  background: transparent;
  padding: 0 .2rem 0 .9rem;
  gap: .1rem;
  transition: background .18s ease, border-color .18s ease;
}
.wr-hsearch form:focus-within { background: #fff; }
.wr-hsearch input[type="search"] {
  font-size: .8rem;
  padding: 0;
  color: var(--wr-graphite);
  width: 6.5rem;
}
.wr-hsearch input[type="search"]::placeholder { color: #8a979c; }
.wr-hsearch input[type="search"]:focus { width: 9.5rem; }
.wr-hsearch button {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--wr-coral);
  padding: 0;
  flex: 0 0 auto;
}
.wr-hsearch button:hover { background: var(--wr-coral); color: #fff; }
@media (max-width: 1200px) { .wr-hsearch input[type="search"] { width: 5rem; } }
@media (max-width: 1040px) {
  .wr-hsearch form { padding-left: .35rem; }
  .wr-hsearch input[type="search"] { width: 0; }
  .wr-hsearch input[type="search"]:focus { width: 8rem; padding-left: .55rem; }
}
[data-wr-theme="dark"] .wr-hsearch form { border-color: var(--wr-coral); background: transparent; }
[data-wr-theme="dark"] .wr-hsearch form:focus-within { background: #0F1B20; }
[data-wr-theme="dark"] .wr-hsearch input[type="search"] { color: var(--wr-cream); }


/* ═══════════════════════════════════════════════════════════════
 * v1.5.0 – PAKIET FINAŁÓW ANTOINE'A
 * Ramy i paski budowane z oficjalnych pasów (PATTERN SET, 854×36),
 * przyciętych do bezszwowego kafla i obróconych do wersji pionowych.
 * Ikony kategorii (ICON SET, 202×202) w nagłówkach sekcji, archiwów
 * i w kickerze artykułu. Każda kategoria ma własny wzór pasa.
 * ═══════════════════════════════════════════════════════════════ */

/* ── komponent ramy z pasa ─────────────────────────────────────── */
main#wr-main .wp-block-query-title,
.page main h1.wp-block-post-title,
.wr-newsletter__frame.wr-open-frame {
  --wr-band:   url('assets/wr-band-v1-coral.svg');
  --wr-band-v: url('assets/wr-band-v1-coral-vert.svg');
  --wr-band-h: 20px;
  --wr-band-bg: var(--wr-cream);
  position: relative;
  border: 0 !important;
  border-image: none !important;
  background:
    var(--wr-band)   repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band)   repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
  background-clip: border-box;
  padding: calc(var(--wr-band-h) + 1.1rem) 2.4rem;
}
main#wr-main .wp-block-query-title::before,
main#wr-main .wp-block-query-title::after,
.page main h1.wp-block-post-title::before,
.page main h1.wp-block-post-title::after,
.wr-newsletter__frame.wr-open-frame::before,
.wr-newsletter__frame.wr-open-frame::after {
  content: "" !important;
  position: absolute;
  top: var(--wr-band-h);
  bottom: var(--wr-band-h);
  /* rodzic ustawia .wr-open-frame::after { height: 8px } dla starej „bramy" –
     bez tego pionowe pasy w newsletterze zostawały 8-pikselowymi kikutami */
  height: auto !important;
  width: var(--wr-band-h) !important;
  background: var(--wr-band-v) repeat-y center top / var(--wr-band-h) auto !important;
  border: 0 !important;
  pointer-events: none;
}
main#wr-main .wp-block-query-title::before,
.page main h1.wp-block-post-title::before,
.wr-newsletter__frame.wr-open-frame::before { left: 0 !important; right: auto !important; transform: none !important; margin: 0 !important; }
main#wr-main .wp-block-query-title::after,
.page main h1.wp-block-post-title::after,
.wr-newsletter__frame.wr-open-frame::after { right: 0 !important; left: auto !important; transform: none !important; margin: 0 !important; }

@media (max-width: 781px) {
  main#wr-main .wp-block-query-title,
  .page main h1.wp-block-post-title,
  .wr-newsletter__frame.wr-open-frame { --wr-band-h: 15px; padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* pasek pod nagłówkiem zostaje na oryginalnym kafelku PNG (v1.2) – bez zmian skali */

/* ── ikony kategorii ──────────────────────────────────────────── */
/* nagłówek archiwum: ikona wyśrodkowana nad tytułem */
body.category main#wr-main .wp-block-query-title {
  padding-top: calc(var(--wr-band-h) + 3.6rem);
  background:
    var(--wr-ico) no-repeat center calc(var(--wr-band-h) + .9rem) / 44px 44px,
    var(--wr-band)   repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band)   repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
}
/* nagłówki sekcji na stronie głównej: romb rodzica zastąpiony ikoną */
.wr-section-head::before {
  width: 26px !important;
  height: 26px !important;
  transform: none !important;
  border-radius: 0 !important;
  background: var(--wr-ico-color, none) no-repeat center / contain !important;
  align-self: center;
}
/* kicker w artykule */
main#wr-main .wr-kicker { display: flex; align-items: center; gap: .45rem; }
main#wr-main .wr-kicker::before {
  content: "";
  width: 20px; height: 20px; flex: 0 0 auto;
  background: var(--wr-ico-color, none) no-repeat center / contain;
}

/* ── mapa kategorii: wzór pasa + ikona ─────────────────────────── */

body.category-newsy main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v1-cream.svg');
  --wr-band-v: url('assets/wr-band-v1-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--newsy);
  --wr-ico: url('assets/wr-ico-newsy-cream.svg');
}
.wr-sec-newsy { --wr-ico-color: url('assets/wr-ico-newsy.svg'); --wr-kat: var(--wp--custom--wr--cat--newsy); }
body.category-newsy main#wr-main .wr-kicker,
main#wr-main .category-newsy .wr-kicker { --wr-ico-color: url('assets/wr-ico-newsy.svg'); }

body.category-polityka main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v1-cream.svg');
  --wr-band-v: url('assets/wr-band-v1-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--polityka);
  --wr-ico: url('assets/wr-ico-polityka-cream.svg');
}
.wr-sec-polityka { --wr-ico-color: url('assets/wr-ico-polityka.svg'); --wr-kat: var(--wp--custom--wr--cat--polityka); }
body.category-polityka main#wr-main .wr-kicker,
main#wr-main .category-polityka .wr-kicker { --wr-ico-color: url('assets/wr-ico-polityka.svg'); }

body.category-technologia main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v1-cream.svg');
  --wr-band-v: url('assets/wr-band-v1-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--technologia);
  --wr-ico: url('assets/wr-ico-technologia-cream.svg');
}
.wr-sec-technologia { --wr-ico-color: url('assets/wr-ico-technologia.svg'); --wr-kat: var(--wp--custom--wr--cat--technologia); }
body.category-technologia main#wr-main .wr-kicker,
main#wr-main .category-technologia .wr-kicker { --wr-ico-color: url('assets/wr-ico-technologia.svg'); }

body.category-biznes main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v2-cream.svg');
  --wr-band-v: url('assets/wr-band-v2-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--biznes);
  --wr-ico: url('assets/wr-ico-biznes-cream.svg');
}
.wr-sec-biznes { --wr-ico-color: url('assets/wr-ico-biznes.svg'); --wr-kat: var(--wp--custom--wr--cat--biznes); }
body.category-biznes main#wr-main .wr-kicker,
main#wr-main .category-biznes .wr-kicker { --wr-ico-color: url('assets/wr-ico-biznes.svg'); }

body.category-edukacja main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v2-cream.svg');
  --wr-band-v: url('assets/wr-band-v2-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--edukacja);
  --wr-ico: url('assets/wr-ico-edukacja-cream.svg');
}
.wr-sec-edukacja { --wr-ico-color: url('assets/wr-ico-edukacja.svg'); --wr-kat: var(--wp--custom--wr--cat--edukacja, #7FBF6E); }
body.category-edukacja main#wr-main .wr-kicker,
main#wr-main .category-edukacja .wr-kicker { --wr-ico-color: url('assets/wr-ico-edukacja.svg'); }

body.category-historia main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v3-graphite.svg');
  --wr-band-v: url('assets/wr-band-v3-graphite-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--historia);
  --wr-ico: url('assets/wr-ico-historia-graphite.svg');
}
.wr-sec-historia { --wr-ico-color: url('assets/wr-ico-historia.svg'); --wr-kat: var(--wp--custom--wr--cat--historia); }
body.category-historia main#wr-main .wr-kicker,
main#wr-main .category-historia .wr-kicker { --wr-ico-color: url('assets/wr-ico-historia.svg'); }

body.category-kultura main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v3-cream.svg');
  --wr-band-v: url('assets/wr-band-v3-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--kultura);
  --wr-ico: url('assets/wr-ico-kultura-cream.svg');
}
.wr-sec-kultura { --wr-ico-color: url('assets/wr-ico-kultura.svg'); --wr-kat: var(--wp--custom--wr--cat--kultura); }
body.category-kultura main#wr-main .wr-kicker,
main#wr-main .category-kultura .wr-kicker { --wr-ico-color: url('assets/wr-ico-kultura.svg'); }

body.category-turystyka main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v3-cream.svg');
  --wr-band-v: url('assets/wr-band-v3-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--turystyka);
  --wr-ico: url('assets/wr-ico-turystyka-cream.svg');
}
.wr-sec-turystyka { --wr-ico-color: url('assets/wr-ico-turystyka.svg'); --wr-kat: var(--wp--custom--wr--cat--turystyka); }
body.category-turystyka main#wr-main .wr-kicker,
main#wr-main .category-turystyka .wr-kicker { --wr-ico-color: url('assets/wr-ico-turystyka.svg'); }

body.category-sport main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v4-graphite.svg');
  --wr-band-v: url('assets/wr-band-v4-graphite-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--sport);
  --wr-ico: url('assets/wr-ico-sport-graphite.svg');
}
.wr-sec-sport { --wr-ico-color: url('assets/wr-ico-sport.svg'); --wr-kat: var(--wp--custom--wr--cat--sport); }
body.category-sport main#wr-main .wr-kicker,
main#wr-main .category-sport .wr-kicker { --wr-ico-color: url('assets/wr-ico-sport.svg'); }

body.category-zdrowie main#wr-main .wp-block-query-title {
  --wr-band:   url('assets/wr-band-v4-cream.svg');
  --wr-band-v: url('assets/wr-band-v4-cream-vert.svg');
  --wr-band-bg: var(--wp--custom--wr--cat--zdrowie);
  --wr-ico: url('assets/wr-ico-zdrowie-cream.svg');
}
.wr-sec-zdrowie { --wr-ico-color: url('assets/wr-ico-zdrowie.svg'); --wr-kat: var(--wp--custom--wr--cat--zdrowie); }
body.category-zdrowie main#wr-main .wr-kicker,
main#wr-main .category-zdrowie .wr-kicker { --wr-ico-color: url('assets/wr-ico-zdrowie.svg'); }


/* strony statyczne, newsletter, wyniki wyszukiwania i 404: pas V1 koralowy na kremie */
.wr-newsletter__frame.wr-open-frame { --wr-band-bg: var(--wr-cream); }
[data-wr-theme="dark"] main#wr-main .wp-block-query-title,
[data-wr-theme="dark"] .page main h1.wp-block-post-title,
[data-wr-theme="dark"] .wr-newsletter__frame.wr-open-frame { --wr-band-bg: #16262C; }
[data-wr-theme="dark"] body:not(.category) main#wr-main .wp-block-query-title,
[data-wr-theme="dark"] .page main h1.wp-block-post-title,
[data-wr-theme="dark"] .wr-newsletter__frame.wr-open-frame {
  --wr-band:   url('assets/wr-band-v1-cream.svg');
  --wr-band-v: url('assets/wr-band-v1-cream-vert.svg');
}

/* ═══════════════════════════════════════════════════════════════
 * v1.5.1 – UWAGI MICHAŁA (18.08)
 * 1) nagłówek archiwum: duża ikona po lewej stronie nazwy,
 *    bez prefiksu „Kategoria:” (zdjęty w szablonie)
 * 2) wyszukiwarka otwiera sekcję paska, przełącznik dzień/noc ją zamyka
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1. nagłówek archiwum kategorii ───────────────────────────── */
body.category main#wr-main .wp-block-query-title {
  text-align: left;
  padding-top: calc(var(--wr-band-h) + 1.1rem);
  padding-left: calc(var(--wr-band-h) + 7.6rem);   /* 68 px ikony + oddech */
  min-height: 0;
  background:
    var(--wr-ico) no-repeat left calc(var(--wr-band-h) + 1.9rem) center / 68px 68px,
    var(--wr-band)   repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band)   repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
}
@media (max-width: 781px) {
  body.category main#wr-main .wp-block-query-title {
    padding-left: calc(var(--wr-band-h) + 4.9rem);
    background-size: 46px 46px, auto var(--wr-band-h), auto var(--wr-band-h), auto;
    background-position: left calc(var(--wr-band-h) + 1rem) center, left top, left bottom, 0 0;
  }
}

/* ── 2. kolejność w pasku górnym ──────────────────────────────── */
.wr-topbar .wr-hsearch { margin: 0 1.1rem 0 auto; }   /* otwiera sekcję: szukaj → bazy → Punkt Info → tryb */

/* ═══════════════════════════════════════════════════════════════
 * v1.5.2 – RÓWNY RYTM PASKA I MOCNIEJSZE NAGŁÓWKI ARCHIWÓW
 * ═══════════════════════════════════════════════════════════════ */

/* pasek górny: jeden odstęp wszędzie (topbar ma gap 19,2 px – nie dokładamy drugiego) */
.wr-topbar .wr-hsearch { margin: 0 0 0 auto; }

/* archiwa: pas +30% (20 → 26 px), ikona +32% (68 → 90 px) */
body.category main#wr-main .wp-block-query-title {
  --wr-band-h: 26px;
  padding-top: calc(var(--wr-band-h) + 1.3rem);
  padding-bottom: calc(var(--wr-band-h) + 1.3rem);
  padding-left: calc(var(--wr-band-h) + 9.4rem);
  background-size: 90px 90px, auto var(--wr-band-h), auto var(--wr-band-h), auto;
  background-position: left calc(var(--wr-band-h) + 2rem) center, left top, left bottom, 0 0;
}
/* nagłówki stron statycznych, newsletter i pasek pod menu w tym samym rytmie */
.page main h1.wp-block-post-title,
.wr-newsletter__frame.wr-open-frame { --wr-band-h: 26px; }

@media (max-width: 781px) {
  body.category main#wr-main .wp-block-query-title {
    --wr-band-h: 18px;
    padding-left: calc(var(--wr-band-h) + 5.4rem);
    background-size: 58px 58px, auto var(--wr-band-h), auto var(--wr-band-h), auto;
    background-position: left calc(var(--wr-band-h) + 1rem) center, left top, left bottom, 0 0;
  }
  .page main h1.wp-block-post-title,
  .wr-newsletter__frame.wr-open-frame { --wr-band-h: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
 * v1.5.3 – NAGŁÓWEK ARCHIWUM: ikona i nazwa wyśrodkowane razem,
 * pas w proporcji paska pod nagłówkiem, więcej powietrza w środku
 * ═══════════════════════════════════════════════════════════════ */

/* pas w tej samej skali co pasek pod menu (30 px / 26 px na mobile) */
body.category main#wr-main .wp-block-query-title,
.page main h1.wp-block-post-title,
.wr-newsletter__frame.wr-open-frame { --wr-band-h: 30px; }

body.category main#wr-main .wp-block-query-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  text-align: center;
  /* powietrze w środku boksu */
  padding: calc(var(--wr-band-h) + 2.8rem) calc(var(--wr-band-h) + 2.4rem);
  /* ikona wraca do warstwy elementu – tło to już tylko pas i kolor */
  background:
    var(--wr-band)   repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band)   repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
}
.wr-cat-ico {
  flex: 0 0 auto;
  width: 92px; height: 92px;
  background: var(--wr-ico) no-repeat center / contain;
}
.wr-cat-name { display: block; }

@media (max-width: 781px) {
  body.category main#wr-main .wp-block-query-title,
  .page main h1.wp-block-post-title,
  .wr-newsletter__frame.wr-open-frame { --wr-band-h: 26px; }
  body.category main#wr-main .wp-block-query-title {
    gap: 1rem;
    padding: calc(var(--wr-band-h) + 1.6rem) calc(var(--wr-band-h) + 1rem);
  }
  .wr-cat-ico { width: 56px; height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════
 * v1.5.4 – SKALA: nic w nagłówku działu nie może przebijać logo
 * Sygnet portalu ma 80 px, nazwa „W ramach" 27,2 px – ikona kategorii
 * i nazwa działu muszą zmieścić się poniżej tych wartości.
 * Wzór pasa wraca do skali sprzed powiększenia (20 px), rośnie tylko
 * powietrze w boksie.
 * ═══════════════════════════════════════════════════════════════ */

body.category main#wr-main .wp-block-query-title,
.page main h1.wp-block-post-title,
.wr-newsletter__frame.wr-open-frame { --wr-band-h: 20px; }

body.category main#wr-main .wp-block-query-title {
  gap: 1.3rem;
  padding: calc(var(--wr-band-h) + 2.6rem) calc(var(--wr-band-h) + 2.2rem);
  font-size: clamp(1.25rem, 2vw, 1.6rem);   /* 25,6 px < 27,2 px nazwy w logo */
}
.wr-cat-ico { width: 64px; height: 64px; }  /* < 80 px sygnetu portalu */

@media (max-width: 781px) {
  body.category main#wr-main .wp-block-query-title,
  .page main h1.wp-block-post-title,
  .wr-newsletter__frame.wr-open-frame { --wr-band-h: 15px; }
  body.category main#wr-main .wp-block-query-title {
    gap: .9rem;
    padding: calc(var(--wr-band-h) + 1.4rem) calc(var(--wr-band-h) + .9rem);
    font-size: 1.15rem;
  }
  .wr-cat-ico { width: 44px; height: 44px; }
}

/* v1.5.5 – boks kategorii odrobinę niższy */
body.category main#wr-main .wp-block-query-title {
  padding: calc(var(--wr-band-h) + 1.8rem) calc(var(--wr-band-h) + 2.2rem);
}
@media (max-width: 781px) {
  body.category main#wr-main .wp-block-query-title {
    padding: calc(var(--wr-band-h) + 1.1rem) calc(var(--wr-band-h) + .9rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
 * v1.5.6 – DUŻE IKONY W NAGŁÓWKACH SEKCJI
 * Ikona wychodzi z układu (position:absolute), więc wysokość paska
 * nagłówka nadal wyznacza sam tytuł – odstępy między sekcjami
 * zostają dokładnie takie jak były (44 px paska, 40 px marginesu).
 * ═══════════════════════════════════════════════════════════════ */
.wr-section-head { position: relative; padding-left: 72px; }
.wr-section-head::before {
  position: absolute !important;
  left: 0;
  top: 40%;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  align-self: auto;
}
@media (max-width: 781px) {
  .wr-section-head { padding-left: 52px; }
  .wr-section-head::before { width: 42px !important; height: 42px !important; }
}


/* ═══════════════════════════════════════════════════════════════
 * v1.5.7 – WYKOŃCZONE ROGI RAM
 * Pasy Antoine'a nie mają narożników, więc styk poziomu z pionem
 * czytał się jako litera T. Wracamy do rozety z ramy brandbookowej:
 * wycięta z wr-frame-baroque.svg (22 × 22 j.), w czterech obrotach
 * i trzech tonacjach. Kolejność warstw tła: rozety → łatki w kolorze
 * boksu (zasłaniają pas pod rozetą) → pasy → kolor.
 * ═══════════════════════════════════════════════════════════════ */

main#wr-main .wp-block-query-title,
.page main h1.wp-block-post-title,
.wr-newsletter__frame.wr-open-frame {
  --wr-corner-tl: url('assets/wr-corner-coral-tl.png');
  --wr-corner-tr: url('assets/wr-corner-coral-tr.png');
  --wr-corner-br: url('assets/wr-corner-coral-br.png');
  --wr-corner-bl: url('assets/wr-corner-coral-bl.png');
  background:
    var(--wr-corner-tl) no-repeat left  top    / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-tr) no-repeat right top    / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-br) no-repeat right bottom / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-bl) no-repeat left  bottom / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat left  top    / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat right top    / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat right bottom / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat left  bottom / var(--wr-band-h) var(--wr-band-h),
    var(--wr-band) repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band) repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
}

body.category-newsy main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-polityka main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-technologia main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-biznes main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-edukacja main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-historia main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-graphite-tl.png');
  --wr-corner-tr: url('assets/wr-corner-graphite-tr.png');
  --wr-corner-br: url('assets/wr-corner-graphite-br.png');
  --wr-corner-bl: url('assets/wr-corner-graphite-bl.png');
}
body.category-kultura main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-turystyka main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}
body.category-sport main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-graphite-tl.png');
  --wr-corner-tr: url('assets/wr-corner-graphite-tr.png');
  --wr-corner-br: url('assets/wr-corner-graphite-br.png');
  --wr-corner-bl: url('assets/wr-corner-graphite-bl.png');
}
body.category-zdrowie main#wr-main .wp-block-query-title {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}

/* tryb ciemny: kremowe rozety na grafitowym tle */
[data-wr-theme="dark"] body:not(.category) main#wr-main .wp-block-query-title,
[data-wr-theme="dark"] .page main h1.wp-block-post-title,
[data-wr-theme="dark"] .wr-newsletter__frame.wr-open-frame {
  --wr-corner-tl: url('assets/wr-corner-cream-tl.png');
  --wr-corner-tr: url('assets/wr-corner-cream-tr.png');
  --wr-corner-br: url('assets/wr-corner-cream-br.png');
  --wr-corner-bl: url('assets/wr-corner-cream-bl.png');
}

/* rogi także na archiwach kategorii – reguła z v1.5.3 ma wyższą specyficzność,
   więc trzeba powtórzyć pełny zestaw warstw */
body.category main#wr-main .wp-block-query-title {
  background:
    var(--wr-corner-tl) no-repeat left  top    / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-tr) no-repeat right top    / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-br) no-repeat right bottom / var(--wr-band-h) var(--wr-band-h),
    var(--wr-corner-bl) no-repeat left  bottom / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat left  top    / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat right top    / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat right bottom / var(--wr-band-h) var(--wr-band-h),
    linear-gradient(var(--wr-band-bg), var(--wr-band-bg)) no-repeat left  bottom / var(--wr-band-h) var(--wr-band-h),
    var(--wr-band) repeat-x left top    / auto var(--wr-band-h),
    var(--wr-band) repeat-x left bottom / auto var(--wr-band-h),
    var(--wr-band-bg);
}

/* v1.5.8 – ikony sekcji: mniejsze i z gwarantowanym odstępem od kreski
   Pozycjonujemy od DOŁU (bottom liczy się od krawędzi paddingu, czyli
   tuż nad linią), więc odstęp jest stały niezależnie od wysokości tytułu. */
.wr-section-head { padding-left: 60px; }
.wr-section-head::before {
  top: auto !important;
  bottom: 6px !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
}
@media (max-width: 781px) {
  .wr-section-head { padding-left: 46px; }
  .wr-section-head::before {
    bottom: 5px !important;
    width: 34px !important;
    height: 34px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
 * v1.6.0 – DATY W STRUMIENIU, SEKCJA „ŁAŃCUT W RAMACH", AUDIO
 * ═══════════════════════════════════════════════════════════════ */

/* 1) „Najnowsze": data zamiast godziny – cyfry o stałej szerokości,
      żeby kolumna tytułów startowała równo w każdym wierszu. */
main#wr-main .wr-stream__time {
  min-width: 3.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* 2) Sygnet WR w rombie jako ikona sekcji podcastowej. */
.wr-sec-podcasty { --wr-ico-color: url('assets/wr-ico-wr.svg'); }

/* 3) Odcinki audio ze Spotify pod kaflami wideo. */
.wr-podaudio { margin-top: 1.6rem; }
.wr-podaudio__head {
  display: flex; align-items: baseline; gap: .8rem;
  padding-bottom: .5rem; margin-bottom: .9rem;
  border-bottom: 1px solid rgba(31,58,68,.14);
}
.wr-podaudio__label {
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted, #6B7B82);
}
.wr-podaudio__all {
  margin-left: auto;
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wr-koral-text, #C4403D); text-decoration: none;
}
.wr-podaudio__all:hover { text-decoration: underline; }
.wr-podaudio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wr-podaudio__item { min-width: 0; }
.wr-podaudio__item iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
@media (max-width: 781px) {
  .wr-podaudio__grid { grid-template-columns: 1fr; }
  .wr-podaudio__head { flex-wrap: wrap; }
  .wr-podaudio__all { margin-left: 0; }
}
[data-wr-theme="dark"] .wr-podaudio__head { border-bottom-color: rgba(250,242,229,.16); }

/* ── v1.6.1 – odcinki audio także w panelu przy „Najnowszych" ── */
.wr-minipod .wr-podaudio--mini { margin-top: 1.1rem; }
.wr-minipod .wr-podaudio--mini .wr-podaudio__head {
  padding-bottom: .45rem; margin-bottom: .7rem;
  border-bottom-color: rgba(250,242,229,.18);
}
.wr-minipod .wr-podaudio--mini .wr-podaudio__label { color: rgba(250,242,229,.62); }
.wr-minipod .wr-podaudio--mini .wr-podaudio__all { color: var(--wp--preset--color--accent); }
.wr-minipod .wr-podaudio--mini .wr-podaudio__all:hover { color: var(--wr-cream); }
.wr-minipod .wr-podaudio--mini .wr-podaudio__grid {
  grid-template-columns: 1fr;
  gap: .7rem;
}
.wr-minipod .wr-podaudio--mini .wr-podaudio__item iframe { border-radius: 10px; }


/* ═══════════════════════════════════════════════════════════════
 * v1.7.0 – MOBILE: PASEK BEZ LUPKI, CZYTELNE MENU, ROMBY KATEGORII
 * 1) na telefonie wracamy do paska sprzed pigułki wyszukiwarki:
 *    tryb dzień/noc – sygnet – menu. Szukanie żyje w menu.
 * 2) szukajka w menu w stylu desktopu (pigułka, koralowe kółko z lupą).
 * 3) menu: większe pola dotyku, mocniejszy kontrast, kolory działów
 *    w małych rombach (kształt z sygnetu), nie w kropkach.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 781px) {

  /* ── 1. pasek górny bez wyszukiwarki ── */
  .wr-topbar .wr-hsearch { display: none !important; }

  /* ── 2. szukajka w menu: pigułka jak na desktopie ── */
  .wr-mobilenav__search { padding: .85rem 0 .2rem; }
  .wr-mobilenav__search form {
    display: flex; align-items: center;
    height: 46px;
    border: 1.5px solid var(--wr-coral);
    border-radius: 999px;
    background: #fff;
    padding: 0 .3rem 0 1rem;
    gap: .4rem;
  }
  .wr-mobilenav__search input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 0;
    font-family: 'Rubik', sans-serif; font-size: .95rem;
    color: var(--wr-graphite);
  }
  .wr-mobilenav__search input[type="search"]::placeholder { color: #8a979c; }
  .wr-mobilenav__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  .wr-mobilenav__search button {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; padding: 0;
    background: var(--wr-coral); color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
  }

  /* ── 3. czytelność menu ── */
  .wr-mobilenav__panel { max-height: 82vh; padding-bottom: 1.4rem; }

  .wr-mobilenav__pi {
    border-radius: 10px;
    padding: .8rem .9rem !important;
    margin: .7rem 0 .35rem;
    font-size: 1.05rem;
  }
  .wr-mobilenav__pi em { color: rgba(255,255,255,.88) !important; opacity: 1; font-size: .78rem; }
  .wr-mobilenav__pi svg { color: #fff; }

  .wr-mobilenav__bazy { gap: .5rem; margin: .25rem 0 .1rem; }
  .wr-mobilenav__bazy a {
    background: #fff;
    border: 1px solid rgba(43,66,73,.16) !important;
    border-radius: 8px;
    min-height: 46px;
    padding: .5rem .7rem !important;
    font-size: .95rem; font-weight: 600;
    color: var(--wr-graphite) !important;
  }
  .wr-mobilenav__bazy a svg { opacity: 1; color: var(--wr-coral); }

  .wr-mobilenav__label {
    font-family: 'Rubik', sans-serif; font-weight: 600;
    font-size: .68rem; letter-spacing: .18em;
    color: var(--wr-coral) !important;
    padding: 1.15rem 0 .4rem;
    border-bottom: 1px solid rgba(43,66,73,.14);
    margin-bottom: .15rem;
  }

  .wr-mobilenav__cats a,
  .wr-mobilenav__gminy a,
  .wr-mobilenav__panel > a {
    min-height: 46px;
    display: flex; align-items: center;
    font-size: .98rem; font-weight: 600;
    border-bottom-color: rgba(43,66,73,.10) !important;
  }

  /* romb w kolorze działu – kształt wzięty z sygnetu, nie kropka */
  .wr-mobilenav__cats a::before {
    width: 13px; height: 13px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--wr-dot, #9DB0B5);
    box-shadow: 0 0 0 1px rgba(255,255,255,.65);
  }
  .wr-mobilenav__cats a { gap: .7rem; }

  /* gminy: mały grafitowy romb konturowy, żeby lista miała ten sam rytm */
  .wr-mobilenav__gminy a { gap: .7rem; }
  .wr-mobilenav__gminy a::before {
    content: ""; flex: none;
    width: 10px; height: 10px;
    border-radius: 2px;
    transform: rotate(45deg);
    border: 1.5px solid rgba(43,66,73,.35);
  }

  /* ── tryb ciemny ── */
  [data-wr-theme="dark"] .wr-mobilenav__search form { background: #0F1B20; border-color: var(--wr-coral); }
  [data-wr-theme="dark"] .wr-mobilenav__search input[type="search"] { color: var(--wr-cream); }
  [data-wr-theme="dark"] .wr-mobilenav__bazy a {
    background: #16262C;
    border-color: rgba(250,242,229,.18) !important;
    color: var(--wr-cream) !important;
  }
  [data-wr-theme="dark"] .wr-mobilenav__label {
    color: var(--wr-coral) !important;
    border-bottom-color: rgba(250,242,229,.14);
  }
  [data-wr-theme="dark"] .wr-mobilenav__cats a,
  [data-wr-theme="dark"] .wr-mobilenav__gminy a,
  [data-wr-theme="dark"] .wr-mobilenav__panel > a { border-bottom-color: rgba(250,242,229,.12) !important; }
  [data-wr-theme="dark"] .wr-mobilenav__cats a::before { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
  [data-wr-theme="dark"] .wr-mobilenav__gminy a::before { border-color: rgba(250,242,229,.35); }
}


/* ═══════════════════════════════════════════════════════════════
 * v1.7.1 – IKONY KATEGORII W MENU MOBILNYM + ŁAMANIE NAGŁÓWKÓW SEKCJI
 * Ikony Antoine'a mają romb w rysunku, więc zastępują nasz kwadrat
 * obrócony o 45° – jeden kształt zamiast dwóch nałożonych.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 781px) {

  /* ── ikony działów zamiast rombów ── */
  .wr-mobilenav__cats a { gap: .55rem; }
  .wr-mobilenav__cats a::before {
    width: 27px; height: 27px;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    background: var(--wr-ico-cat, none) no-repeat center / contain;
  }
  .wr-mobilenav__cats a[data-cat="newsy"] { --wr-ico-cat: url('assets/wr-ico-newsy.svg'); }
  .wr-mobilenav__cats a[data-cat="sport"] { --wr-ico-cat: url('assets/wr-ico-sport.svg'); }
  .wr-mobilenav__cats a[data-cat="kultura"] { --wr-ico-cat: url('assets/wr-ico-kultura.svg'); }
  .wr-mobilenav__cats a[data-cat="historia"] { --wr-ico-cat: url('assets/wr-ico-historia.svg'); }
  .wr-mobilenav__cats a[data-cat="biznes"] { --wr-ico-cat: url('assets/wr-ico-biznes.svg'); }
  .wr-mobilenav__cats a[data-cat="polityka"] { --wr-ico-cat: url('assets/wr-ico-polityka.svg'); }
  .wr-mobilenav__cats a[data-cat="zdrowie"] { --wr-ico-cat: url('assets/wr-ico-zdrowie.svg'); }
  .wr-mobilenav__cats a[data-cat="edukacja"] { --wr-ico-cat: url('assets/wr-ico-edukacja.svg'); }
  .wr-mobilenav__cats a[data-cat="turystyka"] { --wr-ico-cat: url('assets/wr-ico-turystyka.svg'); }
  .wr-mobilenav__cats a[data-cat="technologia"] { --wr-ico-cat: url('assets/wr-ico-technologia.svg'); }

  /* ── nagłówki sekcji: link schodzi do niższej linijki, tytuł zostaje w jednej ── */
  .wr-section-head { flex-wrap: wrap; row-gap: .25rem; }
  .wr-section-head .wp-block-heading {
    flex: 1 0 auto;
    white-space: nowrap;
    font-size: clamp(1.1rem, 5.1vw, 1.55rem);
  }
  .wr-section-head > a { flex: 0 0 auto; white-space: nowrap; }
}


/* ── v1.7.2 – dwie korekty po podglądzie na telefonie ────────────
   1) ikona nagłówka sekcji trzyma się PIERWSZEJ linii (a nie dołu
      boksu), więc przy zawiniętym nagłówku stoi przy tytule,
      a nie przy linku. Dla jednolinijkowych nagłówków pozycja
      jest identyczna jak dotąd (bottom: 5px ≡ top: -3px).
   2) najjaśniejsze ikony działów (piaskowa historia, oliwkowa
      kultura, miętowy sport) przyciemnione, żeby nie ginęły na kremie. */
@media (max-width: 781px) {
  .wr-section-head::before { top: -3px !important; bottom: auto !important; }

  .wr-mobilenav__cats a::before { width: 28px; height: 28px; }
  .wr-mobilenav__cats a[data-cat="historia"]::before,
  .wr-mobilenav__cats a[data-cat="kultura"]::before,
  .wr-mobilenav__cats a[data-cat="sport"]::before { filter: brightness(.84); }
}


/* ═══════════════════════════════════════════════════════════════
 * v1.7.3 – STOPKA NA TELEFONIE: WYŚRODKOWANA I PODZIELONA NA BLOKI
 * Rodzic zwija siatkę do jednej kolumny dopiero przy 480 px, a treść
 * zostawia dosuniętą do lewej – na wąskim ekranie czyta się to jak
 * urwana kolumna. Centrujemy całość i rozdzielamy grupy kreską,
 * żeby „Serwis / Redakcja / Twoja gmina” były osobnymi blokami.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  .wr-footgrid {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    justify-items: center;
  }
  .wr-footgrid > .wr-footcol { width: 100%; align-items: center; }

  .wr-footcol--brand { padding-bottom: 1.5rem; }
  .wr-foot-mark { margin: 0 auto .7rem; }
  .wr-foot-logo { margin-bottom: .7rem; }
  .wr-footcol--brand p { max-width: 32ch; margin: 0 auto; }

  .wr-footcol:not(.wr-footcol--brand) {
    padding: 1.25rem 0 .25rem;
    border-top: 1px solid rgba(250,242,229,.14);
    gap: .5rem;
  }
  .wr-footcol__h {
    color: #B7C4C8;
    margin-bottom: .5rem;
    font-family: 'Rubik', sans-serif; font-weight: 600;
  }
  .wr-footcol a { font-size: .92rem; line-height: 1.35; }

  .wr-footlegal { margin-top: 1.7rem; padding-top: 1.3rem; }
}


/* ── v1.7.4 – łamanie wierszy ────────────────────────────────────
   Twarde spacje po „a i o u w z" robi filtr `wr_no_orphans()`
   w functions.php. Tu tylko domykamy temat od strony układu:
   krótkie bloki tekstu równoważymy, dłuższe – chronimy przed
   pojedynczym wyrazem w ostatnim wierszu. */
main#wr-main .wp-block-post-title,
.wr-section-head .wp-block-heading,
.wr-footcol--brand p,
.wr-mobilenav__pi span,
.wr-newsletter__frame h2 { text-wrap: balance; }

main#wr-main p,
.wr-footlegal,
.wr-pi-col li { text-wrap: pretty; }


/* ═══════════════════════════════════════════════════════════════
 * v1.7.5 – NAGŁÓWEK ARTYKUŁU I NAWIGACJA MIĘDZY TEKSTAMI
 * 1) tytuł artykułu w Rubiku (Cinzel zostaje w logo, nagłówkach
 *    sekcji, stronach stałych i module PI),
 * 2) nazwa działu przy ikonie w Cinzelu – mniejsza od tytułu,
 * 3) powietrze w boksie nagłówka: rodzic kasował górny margines
 *    tytułu regułą dla stron stałych (`.wr-open-frame .wp-block-post-title`),
 *    więc tytuł stykał się z kickerem (zmierzone: 0 px odstępu),
 * 4) strzałki „poprzedni / następny": własna kolumna zamiast pływania
 *    w tekście – przy zawijaniu tytułu strzałka zostawała w połowie zdania.
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1–3. nagłówek artykułu ──
   Kremowa rama zniknęła razem z klasą `wr-open-frame` w szablonie – tytuł
   i lead stoją teraz wprost na tle strony, nad zdjęciem. */
body.single main#wr-main .wr-article-header {
  padding: 0;
}

body.single main#wr-main .wr-kicker {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .85rem;                 /* wyraźnie mniej niż tytuł */
  letter-spacing: .1em;
  line-height: 1.3;
  gap: .55rem;
  margin: 0 0 .9rem !important;
}
body.single main#wr-main .wr-kicker::before { width: 22px; height: 22px; }

body.single main#wr-main h1.wp-block-post-title {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0 0 1.1rem !important;     /* rodzic dawał 0 0 .5rem – tytuł uciekał w górę */
  text-wrap: balance;
}

/* śródtytuły w treści artykułu też Rubikiem – Cinzel zostaje stronom stałym */
body.single .wp-block-post-content h2,
body.single .wp-block-post-content h3,
body.single .wp-block-post-content h4 {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.28;
  margin-top: 2rem;
}

body.single main#wr-main .wr-byline { margin-top: 0 !important; }

@media (max-width: 781px) {
  body.single main#wr-main .wr-article-header { padding: 1.25rem 1.1rem 1.2rem; }
  body.single main#wr-main .wr-kicker { font-size: .78rem; margin-bottom: .75rem !important; }
  body.single main#wr-main h1.wp-block-post-title { margin-bottom: .9rem !important; }
}

/* ── 4. nawigacja poprzedni / następny ── */
main#wr-main .wr-postnav {
  margin-top: 2.2rem;
  gap: 1.4rem !important;
  align-items: flex-start;
}
main#wr-main .wr-postnav .wp-block-post-navigation-link {
  max-width: 48%;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  line-height: 1.4;
}
main#wr-main .wr-postnav .post-navigation-link-next {
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
}
main#wr-main .wr-postnav [class*="wp-block-post-navigation-link__arrow-"] {
  flex: 0 0 auto;
  margin: 0 !important;
  color: var(--wr-coral);
  font-size: 1.05rem;
  line-height: 1.35;
}
main#wr-main .wr-postnav a { display: block; }

@media (max-width: 781px) {
  main#wr-main .wr-postnav { flex-direction: column; gap: 0 !important; }
  main#wr-main .wr-postnav .wp-block-post-navigation-link {
    max-width: 100%;
    width: 100%;
    padding: .8rem 0;
    border-top: 1px solid rgba(43,66,73,.14);
    margin-left: 0;
  }
  [data-wr-theme="dark"] main#wr-main .wr-postnav .wp-block-post-navigation-link {
    border-top-color: rgba(250,242,229,.14);
  }
}




/* ═══════════════════════════════════════════════════════════════
 * v1.8.0 – TYPOGRAFIA ARTYKUŁU, SOCIAL, KOMENTARZE
 * Wzorzec z serwisów informacyjnych przełożony na naszą siatkę:
 * lead większy od tekstu, śródtytuły z dużym marginesem górnym
 * i małym dolnym, cytat wyjęty poza kolumnę, podpis pod zdjęciem
 * oddzielony kreską. Wszystko Rubikiem – Cinzel zostaje kategoriom.
 * ═══════════════════════════════════════════════════════════════ */

/* ── A. TREŚĆ ARTYKUŁU ─────────────────────────────────────────── */
body.single .wp-block-post-content {
  font-size: 1.07rem;
  line-height: 1.72;
  color: var(--wr-graphite);
}
body.single .wp-block-post-content > p { margin: 0 0 1.15em; }

/* lead: pierwszy akapit tekstu */
body.single .wp-block-post-content > p:first-child {
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 400;
  color: #3C555E;
  margin-bottom: 1.5rem;
}

/* śródtytuły: dużo powietrza nad, mało pod – wiążą się z akapitem poniżej */
body.single .wp-block-post-content h2 { font-size: 1.42rem; margin: 2.4rem 0 .7rem; }
body.single .wp-block-post-content h3 { font-size: 1.16rem; margin: 2rem 0 .6rem; }

/* odnośniki w tekście */
body.single .wp-block-post-content a {
  color: var(--wr-koral-text, #C4403D);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
body.single .wp-block-post-content a:hover { text-decoration-thickness: 2px; }

/* listy */
body.single .wp-block-post-content ul,
body.single .wp-block-post-content ol { margin: 0 0 1.3em; padding-left: 1.3em; }
body.single .wp-block-post-content li { margin-bottom: .45em; }
body.single .wp-block-post-content ul { list-style: none; padding-left: 1.5em; }
body.single .wp-block-post-content ul > li { position: relative; }
body.single .wp-block-post-content ul > li::before {
  content: ""; position: absolute; left: -1.15em; top: .62em;
  width: 7px; height: 7px; border-radius: 1px;
  transform: rotate(45deg);
  background: var(--wr-coral);
}

/* cytat: wyjęty poza kolumnę tekstu, z koralową pionową kreską */
body.single .wp-block-post-content blockquote,
body.single .wp-block-post-content .wp-block-quote {
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--wr-coral);
  font-size: 1.24rem;
  line-height: 1.5;
  font-style: normal;
  color: var(--wr-graphite);
}
body.single .wp-block-post-content blockquote p { margin: 0 0 .6em; }
body.single .wp-block-post-content blockquote p:last-child { margin-bottom: 0; }
body.single .wp-block-post-content blockquote cite,
body.single .wp-block-post-content .wp-block-quote__citation {
  display: block;
  margin-top: .8rem;
  font-size: .78rem; font-style: normal; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #5c6f76;
}
@media (min-width: 782px) {
  body.single .wp-block-post-content blockquote { margin-left: -1.4rem; }
}

/* pullquote – wersja na całą szerokość kolumny */
body.single .wp-block-post-content .wp-block-pullquote {
  margin: 2.4rem 0; padding: 1.4rem 0;
  border-top: 2px solid var(--wr-coral);
  border-bottom: 2px solid var(--wr-coral);
  text-align: center;
}
body.single .wp-block-post-content .wp-block-pullquote p {
  font-size: 1.35rem; line-height: 1.4; font-style: normal; margin: 0;
}

/* zdjęcia: podpis pod fotografią, kredyt wyrównany do prawej */
body.single .wp-block-post-content figure { margin: 1.9rem 0; }
body.single .wp-block-post-content figure img { display: block; width: 100%; height: auto; }
body.single .wp-block-post-content figcaption {
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(43,66,73,.16);
  font-size: .84rem; line-height: 1.5; color: #5c6f76;
}
main#wr-main .wr-photo-credit {
  display: block;
  margin-top: .4rem;
  font-size: .72rem; letter-spacing: .04em;
  color: #7d8d93;
}
main#wr-main figure.wr-has-credit { position: relative; }

/* wyróżniony obraz artykułu – ten sam rytm co zdjęcia w treści */
body.single .wp-block-post-featured-image { margin-bottom: 1.6rem; }

/* ── B. MEDIA SPOŁECZNOŚCIOWE ──────────────────────────────────── */
.wr-social__label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .6rem;
}
.wr-social__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.wr-soc {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.wr-soc::before {
  content: "";
  width: 19px; height: 19px;
  background: currentColor;
  -webkit-mask: var(--wr-soc) no-repeat center / contain;
          mask: var(--wr-soc) no-repeat center / contain;
}
.wr-soc--fb { --wr-soc: url('assets/soc-facebook.svg'); }
.wr-soc--ig { --wr-soc: url('assets/soc-instagram.svg'); }
.wr-soc--yt { --wr-soc: url('assets/soc-youtube.svg'); }
.wr-soc--tt { --wr-soc: url('assets/soc-tiktok.svg'); }
.wr-soc--x  { --wr-soc: url('assets/soc-x.svg'); }
.wr-soc--fl { --wr-soc: url('assets/soc-flickr.svg'); }
.wr-soc--sp { --wr-soc: url('assets/soc-spotify.svg'); }

/* stopka: kremowe kontury na grafitowym tle */
.wr-social--footer { margin-top: 1.3rem; }
.wr-social--footer .wr-social__label { color: #9DB0B5; }
.wr-social--footer .wr-soc { color: #E8E2D6; border-color: rgba(250,242,229,.35); }
.wr-social--footer .wr-soc:hover { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; }

/* menu mobilne */
.wr-social--menu { margin-top: 1.3rem; }
.wr-social--menu .wr-social__label { color: var(--wr-coral); }
.wr-social--menu .wr-soc { color: var(--wr-graphite); border-color: rgba(43,66,73,.25); }
.wr-social--menu .wr-soc:hover { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; }
[data-wr-theme="dark"] .wr-social--menu .wr-soc { color: var(--wr-cream); border-color: rgba(250,242,229,.28); }

/* karta w kolumnie bocznej artykułu */
.wr-social--card {
  margin-top: 2rem;
  border: 1px solid rgba(43,66,73,.18);
  background: var(--wr-cream);
  padding: 1rem 1.1rem 1.1rem;
}
.wr-social--card .wr-social__label { color: var(--wr-coral); }
.wr-social__note {
  font-family: 'Rubik', sans-serif;
  font-size: .84rem; line-height: 1.5; color: #5c6f76;
  margin: 0 0 .85rem;
}
.wr-social--card .wr-soc { color: var(--wr-graphite); border-color: rgba(43,66,73,.25); }
.wr-social--card .wr-soc:hover { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; }
[data-wr-theme="dark"] .wr-social--card { background: #16262C; border-color: #2F444C; }
[data-wr-theme="dark"] .wr-social--card .wr-soc { color: var(--wr-cream); border-color: #2F444C; }
[data-wr-theme="dark"] .wr-social__note { color: #9DB0B5; }

/* ── C. KOMENTARZE ─────────────────────────────────────────────── */
main#wr-main .wr-comments {
  border-top: 1px solid rgba(43,66,73,.18);
  padding-top: 1.8rem;
  margin-top: 2.6rem;
}
main#wr-main .wr-comments > h2 {
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: 1.3rem; margin: 0 0 1.2rem;
}
main#wr-main .wp-block-comments-title { font-family: 'Rubik', sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }

main#wr-main .wr-comment {
  border: 1px solid rgba(43,66,73,.14);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  background: #fff;
}
main#wr-main .wr-comment .wp-block-avatar img { border-radius: 999px; }
main#wr-main .wr-comment .wp-block-comment-author-name { font-weight: 600; }
main#wr-main .wr-comment .wp-block-comment-author-name a { text-decoration: none; color: var(--wr-graphite); }
main#wr-main .wr-comment .wp-block-comment-date a { color: #7d8d93; text-decoration: none; font-size: .8rem; }
main#wr-main .wr-comment .wp-block-comment-content { margin: .7rem 0 .6rem; line-height: 1.6; }
main#wr-main .wr-comment .wp-block-comment-reply-link a {
  display: inline-block;
  border: 1px solid rgba(43,66,73,.25);
  border-radius: 999px;
  padding: .28rem .85rem;
  font-size: .78rem; font-weight: 500;
  color: var(--wr-graphite); text-decoration: none;
}
main#wr-main .wr-comment .wp-block-comment-reply-link a:hover {
  background: var(--wr-coral); border-color: var(--wr-coral); color: #fff;
}

/* formularz – pola i przycisk w duchu pigułki „szukaj" */
main#wr-main .wp-block-post-comments-form { margin-top: 1.8rem; }
main#wr-main .comment-reply-title {
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: 1.05rem; margin: 0 0 .7rem;
}
main#wr-main .wr-comment-rules {
  font-size: .84rem; line-height: 1.55; color: #5c6f76;
  border-left: 3px solid var(--wr-coral);
  padding-left: .9rem;
  margin: 0 0 1.1rem;
}
main#wr-main .wp-block-post-comments-form label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #5c6f76;
  margin-bottom: .35rem;
}
main#wr-main .wp-block-post-comments-form input[type="text"],
main#wr-main .wp-block-post-comments-form input[type="email"],
main#wr-main .wp-block-post-comments-form input[type="url"],
main#wr-main .wp-block-post-comments-form textarea {
  width: 100%;
  border: 1px solid rgba(43,66,73,.25);
  border-radius: 18px;
  background: #fff;
  color: var(--wr-graphite);
  font-family: 'Rubik', sans-serif;
  font-size: .95rem;
  padding: .7rem 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
main#wr-main .wp-block-post-comments-form input[type="text"],
main#wr-main .wp-block-post-comments-form input[type="email"] { border-radius: 999px; }
main#wr-main .wp-block-post-comments-form textarea { min-height: 140px; line-height: 1.6; resize: vertical; }
main#wr-main .wp-block-post-comments-form :is(input, textarea):focus {
  outline: 0;
  border-color: var(--wr-coral);
  box-shadow: 0 0 0 3px rgba(230,89,86,.18);
}
main#wr-main .comment-form-author,
main#wr-main .comment-form-email { margin-bottom: .9rem; }
@media (min-width: 620px) {
  main#wr-main .wp-block-post-comments-form form.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  main#wr-main .comment-notes,
  main#wr-main .comment-form-comment,
  main#wr-main .form-submit,
  main#wr-main .comment-form-cookies-consent { grid-column: 1 / -1; }
}
main#wr-main .comment-form-cookies-consent {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .82rem; color: #5c6f76; margin: .9rem 0 0;
}
main#wr-main .comment-form-cookies-consent label {
  text-transform: none; letter-spacing: normal; font-size: .82rem;
  font-weight: 400; color: #5c6f76; margin: 0;
}
main#wr-main .comment-form-cookies-consent input { margin-top: .2rem; accent-color: var(--wr-coral); }
main#wr-main .form-submit { margin-top: 1.1rem; }
main#wr-main .wp-block-post-comments-form .submit,
main#wr-main .form-submit input[type="submit"] {
  background: var(--wr-coral);
  border: 1px solid var(--wr-coral);
  border-radius: 999px;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-weight: 600; font-size: .9rem;
  letter-spacing: .02em;
  padding: .7rem 1.6rem;
  min-height: 46px;
  cursor: pointer;
  transition: background .16s ease;
}
main#wr-main .wp-block-post-comments-form .submit:hover,
main#wr-main .form-submit input[type="submit"]:hover { background: #d64c49; }

main#wr-main .wp-block-comments-pagination { margin-top: 1.2rem; }
main#wr-main .wp-block-comments-pagination a { text-decoration: none; color: var(--wr-graphite); }

[data-wr-theme="dark"] main#wr-main .wr-comment { background: #16262C; border-color: #2F444C; }
[data-wr-theme="dark"] main#wr-main .wr-comment .wp-block-comment-author-name a,
[data-wr-theme="dark"] main#wr-main .wr-comment .wp-block-comment-reply-link a { color: #E7E0D2; }
[data-wr-theme="dark"] main#wr-main .wp-block-post-comments-form input[type="text"],
[data-wr-theme="dark"] main#wr-main .wp-block-post-comments-form input[type="email"],
[data-wr-theme="dark"] main#wr-main .wp-block-post-comments-form textarea {
  background: #0F1B20; border-color: #2F444C; color: var(--wr-cream);
}
[data-wr-theme="dark"] body.single .wp-block-post-content { color: #E7E0D2; }
[data-wr-theme="dark"] body.single .wp-block-post-content > p:first-child { color: #D6CFC0; }
[data-wr-theme="dark"] body.single .wp-block-post-content figcaption { border-top-color: rgba(250,242,229,.16); color: #9DB0B5; }

@media (max-width: 781px) {
  body.single .wp-block-post-content { font-size: 1.03rem; }
  body.single .wp-block-post-content > p:first-child { font-size: 1.13rem; }
  body.single .wp-block-post-content h2 { font-size: 1.26rem; }
  main#wr-main .wr-comment { padding: .9rem .95rem; border-radius: 12px; }
}


/* ── v1.8.1 – drobiazgi po podglądzie ──────────────────────────
   1) zgody na powiadomienia (Jetpack) dziedziczyły styl etykiet
      formularza i wychodziły WERSALIKAMI z rozstrzeleniem,
   2) blok „Śledź nas" przeniesiony w menu mobilnym nad kategorie –
      panel ma `max-height: 82vh`, więc na samym dole nikt by go nie zobaczył. */
main#wr-main .comment-subscription-form {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: .55rem;
  margin: .45rem 0 0;
}
main#wr-main .comment-subscription-form label,
main#wr-main .comment-form-cookies-consent label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: .82rem;
  color: #5c6f76;
  margin: 0;
}
main#wr-main .comment-subscription-form input[type="checkbox"] {
  margin: .2rem 0 0;
  accent-color: var(--wr-coral);
  width: auto;
}
[data-wr-theme="dark"] main#wr-main .comment-subscription-form label,
[data-wr-theme="dark"] main#wr-main .comment-form-cookies-consent label { color: #9DB0B5; }


/* ── v1.8.2 – komunikaty i zgoda na newsletter (wtyczka wr-spolecznosc) ── */
main#wr-main .wr-komunikat,
.wr-newsletter .wr-komunikat {
  font-family: 'Rubik', sans-serif;
  font-size: .9rem; line-height: 1.5;
  border-radius: 14px;
  padding: .8rem 1rem;
  margin: 0 0 1.1rem;
}
main#wr-main .wr-komunikat--ok,
.wr-newsletter .wr-komunikat--ok {
  background: rgba(150,188,0,.14);
  border: 1px solid rgba(150,188,0,.45);
  color: #3F5210;
}
main#wr-main .wr-komunikat--err,
.wr-newsletter .wr-komunikat--err {
  background: rgba(230,89,86,.10);
  border: 1px solid rgba(230,89,86,.45);
  color: var(--wr-koral-text, #C4403D);
}
.wr-newsletter .wr-komunikat { flex-basis: 100%; }

main#wr-main .comment-form-wr-newsletter {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: .55rem;
  margin: .9rem 0 0;
}
main#wr-main .comment-form-wr-newsletter label {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: .82rem; line-height: 1.5; color: #5c6f76; margin: 0;
}
main#wr-main .comment-form-wr-newsletter input[type="checkbox"] {
  width: auto; margin: .2rem 0 0; accent-color: var(--wr-coral);
}
[data-wr-theme="dark"] main#wr-main .comment-form-wr-newsletter label { color: #9DB0B5; }

/* pułapka na boty – niewidoczna, ale nie display:none (część botów to wykrywa) */
.wr-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   v1.9.0 – zgłaszanie komentarzy (DSA art. 16)
   Link „Zgłoś” stoi obok „Odpowiedz”, formularz otwiera się nad
   polem komentarza – ten sam język kształtów co reszta portalu.
   ══════════════════════════════════════════════════════════════ */

main#wr-main .wr-comment .wp-block-comment-reply-link {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
main#wr-main .wr-zglos-link {
  font-family: 'Rubik', sans-serif;
  font-size: .78rem; letter-spacing: .01em;
  color: #7d8d93; text-decoration: none;
  padding: .28rem .7rem;
  border: 1px solid rgba(43,66,73,.16);
  border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
main#wr-main .wr-zglos-link:hover {
  color: var(--wr-coral); border-color: rgba(230,89,86,.5);
  background: rgba(230,89,86,.06);
}
[data-wr-theme="dark"] main#wr-main .wr-zglos-link {
  color: #9DB0B5; border-color: rgba(231,224,210,.22);
}

main#wr-main .wr-zglos {
  border: 1px solid rgba(43,66,73,.14);
  border-radius: 20px;
  background: rgba(250,242,229,.55);
  padding: 1.3rem 1.4rem 1.1rem;
  margin: 0 0 1.6rem;
  scroll-margin-top: 90px;
}
[data-wr-theme="dark"] main#wr-main .wr-zglos {
  background: rgba(43,66,73,.5); border-color: rgba(231,224,210,.18);
}
main#wr-main .wr-zglos__tytul {
  font-family: 'Rubik', sans-serif; font-size: 1rem; font-weight: 600;
  margin: 0 0 .6rem;
}
main#wr-main .wr-zglos__cytat {
  font-size: .88rem; line-height: 1.55; color: #4b616a;
  border-left: 3px solid var(--wr-coral);
  padding: .1rem 0 .1rem .8rem; margin: 0 0 1rem;
}
main#wr-main .wr-zglos__cytat span { font-size: .78rem; color: #7d8d93; }
[data-wr-theme="dark"] main#wr-main .wr-zglos__cytat { color: #C9D5D8; }

main#wr-main .wr-zglos__hp { position: absolute; left: -9999px; }
main#wr-main .wr-zglos__powody {
  border: 0; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .4rem;
}
main#wr-main .wr-zglos__powody legend {
  font-family: 'Rubik', sans-serif; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: #7d8d93;
  margin: 0 0 .5rem; padding: 0;
}
main#wr-main .wr-zglos__powody label {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .88rem; line-height: 1.45; color: #3C555E;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
[data-wr-theme="dark"] main#wr-main .wr-zglos__powody label { color: #E7E0D2; }
main#wr-main .wr-zglos__powody input[type="radio"] {
  width: auto; margin: .18rem 0 0; accent-color: var(--wr-coral);
}

main#wr-main .wr-zglos__pole { margin: 0 0 .9rem; }
main#wr-main .wr-zglos__pole label {
  display: block; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: #7d8d93;
  margin: 0 0 .35rem;
}
main#wr-main .wr-zglos__pole label span {
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
main#wr-main .wr-zglos__pole textarea,
main#wr-main .wr-zglos__pole input[type="email"] {
  width: 100%; font-family: 'Rubik', sans-serif; font-size: .92rem;
  border: 1.5px solid rgba(43,66,73,.2); border-radius: 16px;
  background: #fff; padding: .7rem .95rem; color: var(--wr-graphite);
}
main#wr-main .wr-zglos__pole input[type="email"] { border-radius: 999px; height: 44px; }
main#wr-main .wr-zglos__pole textarea:focus,
main#wr-main .wr-zglos__pole input[type="email"]:focus {
  outline: none; border-color: var(--wr-coral);
}
[data-wr-theme="dark"] main#wr-main .wr-zglos__pole textarea,
[data-wr-theme="dark"] main#wr-main .wr-zglos__pole input[type="email"] {
  background: rgba(0,0,0,.18); color: #F4EFE4; border-color: rgba(231,224,210,.25);
}

main#wr-main .wr-zglos__stopka {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 .8rem;
}
main#wr-main .wr-zglos__btn {
  font-family: 'Rubik', sans-serif; font-size: .88rem; font-weight: 600;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wr-coral); color: #fff;
  padding: .7rem 1.5rem;
  transition: filter .15s;
}
main#wr-main .wr-zglos__btn:hover { filter: brightness(1.06); }
main#wr-main .wr-zglos__stopka a {
  font-size: .85rem; color: #7d8d93; text-decoration: none;
}
main#wr-main .wr-zglos__nota {
  font-size: .76rem; line-height: 1.5; color: #7d8d93; margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.9.1 – zgody pod formularzem komentarza równo w pionie
   WordPress dokłada własny margines do checkboxa „zapamiętaj
   dane”, przez co dwie zgody stały w różnych osiach. Wspólna
   siatka: kolumna na checkbox + kolumna na tekst, zawijanie
   trzyma się linii tekstu.
   ══════════════════════════════════════════════════════════════ */

main#wr-main .comment-form-cookies-consent,
main#wr-main .comment-form-wr-newsletter,
main#wr-main .comment-subscription-form {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: 15px 1fr;
  align-items: start;
  column-gap: .6rem;
  margin: .8rem 0 0;
}
main#wr-main .comment-form-cookies-consent input[type="checkbox"],
main#wr-main .comment-form-wr-newsletter input[type="checkbox"],
main#wr-main .comment-subscription-form input[type="checkbox"] {
  width: 15px; height: 15px; min-width: 15px;
  margin: .22rem 0 0 !important;
  accent-color: var(--wr-coral);
}
main#wr-main .comment-form-cookies-consent label,
main#wr-main .comment-form-wr-newsletter label,
main#wr-main .comment-subscription-form label {
  margin: 0; padding: 0;
  font-family: 'Rubik', sans-serif;
  font-size: .82rem; line-height: 1.55; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  color: #5c6f76;
}
[data-wr-theme="dark"] main#wr-main .comment-form-cookies-consent label,
[data-wr-theme="dark"] main#wr-main .comment-form-wr-newsletter label,
[data-wr-theme="dark"] main#wr-main .comment-subscription-form label { color: #9DB0B5; }

/* ── v1.9.2 – „Śledź nas" na końcu menu mobilnego ──
   Blok wylądował pod listą „W ramach", więc potrzebuje odstępu od góry
   i kreski oddzielającej – żeby nie sklejał się z linkami redakcyjnymi. */
.wr-mobilenav__panel .wr-social--menu {
  margin-top: 1.6rem;
  padding-top: 0;
  border-top: 0;                    /* kreskę rysuje już ostatnia pozycja menu */
}

/* ══════════════════════════════════════════════════════════════
   v1.10.0 – PUNKT INFORMACYJNY
   Wizytówka portalu: szeroki układ, kolumna z szybką nawigacją,
   a wszystkie elementy interfejsu w tym samym języku co przyciski
   w nagłówku strony – pigułki, zaokrąglenia, koral na akcent.
   Bazy budują się w przeglądarce i mają własne, krótkie klasy
   (.card, .grp, .chips, .box…), dlatego stylujemy je przez korzeń
   strony (.wr-apt, .wr-msze, …), nie globalnie.
   ══════════════════════════════════════════════════════════════ */

body.wr-pi {
  --wr-pi-radius: 18px;
  --wr-pi-linia: rgba(43,66,73,.14);
  --wr-pi-cien: 0 1px 2px rgba(43,66,73,.05);
}

/* ── szerokość: PI dostaje pełne 1200 px, nie kolumnę tekstu ── */
body.wr-pi main#wr-main .wp-block-post-content > *:not(.alignfull) {
  max-width: none !important;
}
body.wr-pi main#wr-main .wp-block-post-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ── nagłówek strony ─────────────────────────────────────────── */
body.wr-pi main#wr-main .wr-hero,
body.wr-pi main#wr-main .wp-block-post-title {
  font-family: 'Rubik', sans-serif !important;
}
body.wr-pi main#wr-main .wp-block-post-title {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.18;
  text-wrap: balance;
}
body.wr-pi main#wr-main .wp-block-post-title::before {
  content: "Punkt Informacyjny";
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wr-coral);
  margin-bottom: .7rem;
}
body.wr-pi--hub main#wr-main .wp-block-post-title::before { content: none; }

body.wr-pi main#wr-main .wp-block-post-content > p:first-of-type {
  font-size: 1.06rem;
  line-height: 1.65;
  color: #4b616a;
  max-width: 62ch !important;
}

/* ── układ: treść + kolumna boczna (składa pi-nav.js) ────────── */
.wr-pi-uklad { display: block; }
@media (min-width: 1000px) {
  .wr-pi-uklad {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
  }
  .wr-pi-boczna { position: sticky; top: 96px; }
}
.wr-pi-boczna[hidden] { display: none; }

.wr-pi-boczna__panel {
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  background: #fff;
  padding: 1.1rem 1rem 1rem;
  box-shadow: var(--wr-pi-cien);
}
.wr-pi-boczna__label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #7d8d93;
  margin-bottom: .8rem;
}
.wr-pi-spis { display: flex; flex-direction: column; gap: .15rem; }
.wr-pi-spis__poz {
  font-family: 'Rubik', sans-serif;
  font-size: .88rem; line-height: 1.35;
  color: var(--wr-graphite);
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.wr-pi-spis__poz:hover { background: rgba(230,89,86,.08); color: var(--wr-coral); }
.wr-pi-spis__poz.is-tu {
  background: var(--wr-coral); color: #fff; font-weight: 500;
  border-color: var(--wr-coral);
}
.wr-pi-boczna__wroc {
  display: inline-block; margin-top: .9rem;
  font-family: 'Rubik', sans-serif; font-size: .8rem;
  color: #7d8d93; text-decoration: none;
}
.wr-pi-boczna__wroc:hover { color: var(--wr-coral); }

/* wersja mobilna spisu – poziomy pasek pigułek */
.wr-pi-pasek { display: none; }
@media (max-width: 999px) {
  .wr-pi-pasek {
    display: flex; gap: .45rem;
    overflow-x: auto; scrollbar-width: none;
    padding: .2rem .1rem 1rem;
    margin: 0 0 .4rem;
    position: sticky; top: 0; z-index: 5;
    background: linear-gradient(var(--wr-cream) 72%, rgba(250,242,229,0));
  }
  .wr-pi-pasek::-webkit-scrollbar { display: none; }
  .wr-pi-pasek a {
    flex: 0 0 auto;
    font-family: 'Rubik', sans-serif; font-size: .82rem;
    color: var(--wr-graphite); text-decoration: none;
    background: #fff;
    border: 1px solid var(--wr-pi-linia);
    border-radius: 999px;
    padding: .45rem .95rem;
    white-space: nowrap;
  }
  .wr-pi-pasek a.is-tu { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; }
}

/* ── wspólny język baz (apteki, msze, szkoły, urzędy, rozkłady, odpady) ── */
.wr-apt, .wr-msze, .wr-szk, .wr-urz, .wr-roz, .wr-odp {
  font-family: 'Rubik', sans-serif;
}

/* filtry i przełączniki → pigułki jak w nagłówku strony */
.wr-apt .chips, .wr-msze .chips, .wr-szk .chips,
.wr-apt .box, .wr-msze .box, .wr-szk .box, .wr-urz .box,
.wr-roz .pick, .wr-odp .pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.2rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  box-shadow: var(--wr-pi-cien);
}
.wr-apt .chips button, .wr-msze .chips button, .wr-szk .chips button,
.wr-msze .mode button, .wr-roz .bt, .wr-odp .seg button {
  font-family: 'Rubik', sans-serif;
  font-size: .84rem; font-weight: 500;
  color: var(--wr-graphite);
  background: #fff;
  border: 1px solid rgba(43,66,73,.2);
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wr-apt .chips button:hover, .wr-msze .chips button:hover, .wr-szk .chips button:hover,
.wr-msze .mode button:hover, .wr-roz .bt:hover, .wr-odp .seg button:hover {
  border-color: var(--wr-coral); color: var(--wr-coral);
}
.wr-apt .chips button.on, .wr-msze .chips button.on, .wr-szk .chips button.on,
.wr-msze .mode button.on, .wr-roz .bt.on, .wr-odp .seg button.on {
  background: var(--wr-coral); border-color: var(--wr-coral); color: #fff;
}

/* pola wyboru i wyszukiwania w bazach */
.wr-pi select, .wr-pi input[type="search"], .wr-pi input[type="text"] {
  font-family: 'Rubik', sans-serif; font-size: .88rem;
  color: var(--wr-graphite);
  background: #fff;
  border: 1.5px solid rgba(43,66,73,.2);
  border-radius: 999px;
  padding: .5rem 1rem;
  height: 42px;
}
.wr-pi select:focus, .wr-pi input:focus { outline: none; border-color: var(--wr-coral); }

/* nagłówki grup – kicker koralowy z kreską, bez Cinzela */
.wr-apt .grp > h2, .wr-szk .grp > h2, .wr-urz .grp > h2,
.wr-pi main#wr-main .wp-block-post-content h2 {
  font-family: 'Rubik', sans-serif;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--wr-coral);
  display: flex; align-items: center; gap: .8rem;
  margin: 2.2rem 0 1rem;
  scroll-margin-top: 100px;
}
.wr-apt .grp > h2::after, .wr-szk .grp > h2::after, .wr-urz .grp > h2::after,
.wr-pi main#wr-main .wp-block-post-content h2::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--wr-pi-linia);
}

/* karty pozycji */
.wr-apt .card, .wr-szk .card, .wr-urz .card, .wr-roz .card, .wr-odp .card,
.wr-msze .par {
  background: #fff;
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  box-shadow: var(--wr-pi-cien);
  padding: 1.05rem 1.2rem;
  margin: 0 0 .8rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wr-apt .card:hover, .wr-szk .card:hover, .wr-urz .card:hover,
.wr-roz .card:hover, .wr-odp .card:hover, .wr-msze .par:hover {
  border-color: rgba(230,89,86,.45);
  box-shadow: 0 6px 18px rgba(43,66,73,.09);
  transform: translateY(-1px);
}
.wr-apt .card strong, .wr-szk .card strong, .wr-urz .card strong,
.wr-roz .card strong, .wr-odp .card strong {
  display: block; font-size: 1.02rem; font-weight: 600;
  color: var(--wr-graphite); margin-bottom: .25rem;
}
.wr-apt .card small, .wr-szk .card small, .wr-urz .card small,
.wr-roz .card small, .wr-odp .card small {
  display: block; font-size: .87rem; line-height: 1.55; color: #5c6f76;
}
.wr-pi .card a { color: var(--wr-coral); text-decoration: none; border-bottom: 1px solid rgba(230,89,86,.4); }
.wr-pi .card a:hover { border-bottom-color: var(--wr-coral); }
.wr-pi .u { font-size: .82rem; color: #7d8d93; margin-top: .4rem; }
.wr-pi .hrs { font-size: .84rem; color: #4b616a; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--wr-pi-linia); }
.wr-pi .hrs .x { color: #9aa8ad; }

/* plakietki (całodobowa, dyżur, itp.) */
.wr-pi .badge {
  display: inline-block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--wr-coral);
  border-radius: 999px;
  padding: .25rem .7rem;
  margin: 0 0 .45rem;
}

/* siatka kafelków na stronie głównej PI – luźniej i większe zaokrąglenie */
main#wr-main .wr-pi-grid { gap: 1rem; }
.wr-pi-tile { border-radius: var(--wr-pi-radius); box-shadow: var(--wr-pi-cien); }
.wr-pi-tile:hover { box-shadow: 0 8px 22px rgba(43,66,73,.10); transform: translateY(-2px); }

/* ciemny motyw */
[data-wr-theme="dark"] body.wr-pi .wr-pi-boczna__panel,
[data-wr-theme="dark"] .wr-pi .card,
[data-wr-theme="dark"] .wr-msze .par,
[data-wr-theme="dark"] .wr-pi .box,
[data-wr-theme="dark"] .wr-pi .chips {
  background: rgba(43,66,73,.55);
  border-color: rgba(231,224,210,.16);
}
[data-wr-theme="dark"] .wr-pi .card strong { color: #F4EFE4; }
[data-wr-theme="dark"] .wr-pi .card small,
[data-wr-theme="dark"] .wr-pi .hrs { color: #C9D5D8; }
[data-wr-theme="dark"] .wr-pi-spis__poz { color: #E7E0D2; }

/* ── v1.10.1 – poprawki po pierwszym podglądzie PI ── */

/* nadtytuł wstawiany skryptem (pseudoelement przy tytule zajmuje rama rodzica) */
.wr-pi-nad {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wr-coral);
  text-align: center;
  margin: 0 0 .7rem;
}
body.wr-pi main#wr-main .wp-block-post-title::before { content: none; }

/* na telefonie zostaje sam pasek – panel boczny byłby powtórzeniem */
@media (max-width: 999px) {
  .wr-pi-boczna { display: none; }
}

/* pasek filtrów baz przykleja się pod nagłówkiem, a nie na styk z górą okna */
.wr-pi .box, .wr-pi .chips, .wr-pi .pick {
  top: 12px !important;
}
.wr-pi .box, .wr-pi .chips, .wr-pi .pick {
  backdrop-filter: saturate(1.4) blur(6px);
}

/* etykiety nad polami w paskach filtrów */
.wr-pi .box label, .wr-pi .pick label {
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #7d8d93;
}


/* ══════════════════════════════════════════════════════════════
   v1.11.0 – ikony Punktu Informacyjnego
   Zestaw rysowany w konstrukcji z pakietu Antoine'a (romb 202×202,
   krata, motyw w tej samej grubości linii) – generator gen_ikony_pi.py.
   Wstawia je pi-nav.js w miejsce emoji z treści stron.
   ══════════════════════════════════════════════════════════════ */

.wr-pi-ico {
  display: inline-block;
  width: 1.35em; height: 1.35em;
  margin-right: .5em;
  vertical-align: -.28em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--wr-pi-i) no-repeat center / contain;
          mask: var(--wr-pi-i) no-repeat center / contain;
}
.wr-pi-ico--alarm { --wr-pi-i: url('assets/wr-pi-ico-alarm.svg'); }
.wr-pi-ico--apteki { --wr-pi-i: url('assets/wr-pi-ico-apteki.svg'); }
.wr-pi-ico--msze { --wr-pi-i: url('assets/wr-pi-ico-msze.svg'); }
.wr-pi-ico--odpady { --wr-pi-i: url('assets/wr-pi-ico-odpady.svg'); }
.wr-pi-ico--oplaty { --wr-pi-i: url('assets/wr-pi-ico-oplaty.svg'); }
.wr-pi-ico--pociagi { --wr-pi-i: url('assets/wr-pi-ico-pociagi.svg'); }
.wr-pi-ico--pomoc { --wr-pi-i: url('assets/wr-pi-ico-pomoc.svg'); }
.wr-pi-ico--rozklady { --wr-pi-i: url('assets/wr-pi-ico-rozklady.svg'); }
.wr-pi-ico--szkoly { --wr-pi-i: url('assets/wr-pi-ico-szkoly.svg'); }
.wr-pi-ico--taxi { --wr-pi-i: url('assets/wr-pi-ico-taxi.svg'); }
.wr-pi-ico--terminy { --wr-pi-i: url('assets/wr-pi-ico-terminy.svg'); }
.wr-pi-ico--urzedy { --wr-pi-i: url('assets/wr-pi-ico-urzedy.svg'); }

/* w plakietkach ikona jest mniejsza i trzyma się linii tekstu */
.wr-pi .badge .wr-pi-ico { width: 1em; height: 1em; margin-right: .4em; vertical-align: -.15em; }
/* w nagłówkach sekcji ikona bierze kolor koralowy po nagłówku */
.wr-pi h2 .wr-pi-ico, .wr-pi h3 .wr-pi-ico { width: 1.5em; height: 1.5em; }


/* ── v1.11.1 – ikony w wierszu tekstu i kafle ── */
/* W wierszu tekstu (18–26 px) krata zlewa się w plamę, więc inline
   bierzemy wariant „mini": sam romb z motywem, grubsza kreska.
   Pełną konstrukcję zostawiamy dla kafli i dużych użyć. */
.wr-pi-ico--alarm { --wr-pi-i: url('assets/wr-pi-ico-alarm-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-alarm.svg'); }
.wr-pi-ico--apteki { --wr-pi-i: url('assets/wr-pi-ico-apteki-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-apteki.svg'); }
.wr-pi-ico--msze { --wr-pi-i: url('assets/wr-pi-ico-msze-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-msze.svg'); }
.wr-pi-ico--odpady { --wr-pi-i: url('assets/wr-pi-ico-odpady-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-odpady.svg'); }
.wr-pi-ico--oplaty { --wr-pi-i: url('assets/wr-pi-ico-oplaty-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-oplaty.svg'); }
.wr-pi-ico--pociagi { --wr-pi-i: url('assets/wr-pi-ico-pociagi-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-pociagi.svg'); }
.wr-pi-ico--pomoc { --wr-pi-i: url('assets/wr-pi-ico-pomoc-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-pomoc.svg'); }
.wr-pi-ico--rozklady { --wr-pi-i: url('assets/wr-pi-ico-rozklady-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-rozklady.svg'); }
.wr-pi-ico--szkoly { --wr-pi-i: url('assets/wr-pi-ico-szkoly-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-szkoly.svg'); }
.wr-pi-ico--taxi { --wr-pi-i: url('assets/wr-pi-ico-taxi-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-taxi.svg'); }
.wr-pi-ico--terminy { --wr-pi-i: url('assets/wr-pi-ico-terminy-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-terminy.svg'); }
.wr-pi-ico--urzedy { --wr-pi-i: url('assets/wr-pi-ico-urzedy-mini.svg'); --wr-pi-i-duza: url('assets/wr-pi-ico-urzedy.svg'); }

.wr-pi-ico { width: 1.5em; height: 1.5em; vertical-align: -.35em; }
.wr-pi-ico--duza {
  width: 56px; height: 56px; margin: 0 0 .6rem;
  -webkit-mask-image: var(--wr-pi-i-duza);
          mask-image: var(--wr-pi-i-duza);
}

/* odnośnik „przejdź dalej" w bazach – grafitowa pigułka zamiast prostokąta */
.wr-pi .go {
  display: inline-block;
  background: var(--wr-graphite) !important;
  color: var(--wr-cream) !important;
  font-family: 'Rubik', sans-serif;
  font-size: .84rem; font-weight: 500;
  text-decoration: none;
  border: 0; border-radius: 999px;
  padding: .5rem 1.1rem;
  margin-top: .6rem;
}
.wr-pi .go:hover { background: var(--wr-coral) !important; color: #fff !important; }

/* ── v1.11.2 – rozmiary ikon w kontekstach ── */
.wr-pi main#wr-main h2 .wr-pi-ico,
.wr-pi .grp > h2 .wr-pi-ico { width: 28px; height: 28px; vertical-align: -.5em; margin-right: .55rem; }
.wr-pi .badge .wr-pi-ico { width: 16px; height: 16px; vertical-align: -.2em; }
.wr-pi .bt .wr-pi-ico, .wr-pi .card .wr-pi-ico { width: 20px; height: 20px; vertical-align: -.3em; }

/* ══════════════════════════════════════════════════════════════
   v1.12.0 – PI: kolor jako narzędzie nawigacji + marginesy na telefonie
   Ściana tekstu w bazach potrzebuje punktów zaczepienia. Każda baza
   dostaje własny kolor z palety kategorii Antoine'a (ten sam, co jej
   kafel na stronie Punktu), a w środku strony kolor niesie znaczenie:
   limonka = czynne/otwarte, szary z księgi = nieczynne, koral = alarm.
   ══════════════════════════════════════════════════════════════ */

body.wr-pi { --wr-pi-akcent: var(--wr-coral); --wr-pi-akcent-tlo: rgba(230,89,86,.08); }

body.wr-pi--apteki      { --wr-pi-akcent: var(--wp--custom--wr--cat--zdrowie);     --wr-pi-akcent-tlo: rgba(240,112,102,.10); }
body.wr-pi--msze-swiete { --wr-pi-akcent: #B99A55;                                 --wr-pi-akcent-tlo: rgba(185,154,85,.12); }
body.wr-pi--rozklady    { --wr-pi-akcent: var(--wp--custom--wr--cat--turystyka);   --wr-pi-akcent-tlo: rgba(31,145,204,.10); }
body.wr-pi--odpady      { --wr-pi-akcent: var(--wp--custom--wr--cat--newsy);       --wr-pi-akcent-tlo: rgba(0,94,115,.10); }
body.wr-pi--szkoly      { --wr-pi-akcent: var(--wp--custom--wr--cat--edukacja);    --wr-pi-akcent-tlo: rgba(143,174,78,.12); }
body.wr-pi--urzedy      { --wr-pi-akcent: var(--wp--custom--wr--cat--polityka);    --wr-pi-akcent-tlo: rgba(125,55,103,.10); }

/* nadtytuł, nagłówki sekcji i ikony biorą kolor bazy */
body.wr-pi .wr-pi-nad,
body.wr-pi main#wr-main .wp-block-post-content h2,
body.wr-pi .grp > h2 { color: var(--wr-pi-akcent); }
body.wr-pi .wr-pi-ico { color: var(--wr-pi-akcent); }

/* spis sekcji: aktywna pozycja w kolorze bazy, nie zawsze koralowa */
body.wr-pi .wr-pi-spis__poz.is-tu,
body.wr-pi .wr-pi-pasek a.is-tu {
  background: var(--wr-pi-akcent); border-color: var(--wr-pi-akcent);
}
body.wr-pi .wr-pi-spis__poz:hover { background: var(--wr-pi-akcent-tlo); color: var(--wr-pi-akcent); }

/* filtry: wybrany w kolorze bazy */
body.wr-pi .chips button.on, body.wr-pi .mode button.on,
body.wr-pi .bt.on, body.wr-pi .seg button.on {
  background: var(--wr-pi-akcent); border-color: var(--wr-pi-akcent);
}
body.wr-pi .chips button:hover, body.wr-pi .bt:hover, body.wr-pi .seg button:hover {
  border-color: var(--wr-pi-akcent); color: var(--wr-pi-akcent);
}

/* karta: kolorowa krecha z lewej zamiast jednolitej szarej ramki –
   przy pięćdziesięciu kartach oko potrzebuje rytmu */
body.wr-pi .card, body.wr-pi .par {
  border-left: 3px solid var(--wr-pi-akcent);
}
body.wr-pi .card:hover, body.wr-pi .par:hover { border-color: var(--wr-pi-akcent); }
body.wr-pi .card strong { color: var(--wr-graphite); }
body.wr-pi .card a { color: var(--wr-pi-akcent); border-bottom-color: color-mix(in srgb, var(--wr-pi-akcent) 40%, transparent); }
body.wr-pi .badge { background: var(--wr-pi-akcent); }

/* stany: limonka = czynne, szary z księgi = nieczynne, koral = pilne */
body.wr-pi .hrs b { color: #6E8C00; }
body.wr-pi .hrs .x { color: #9D9D9C; }
body.wr-pi .wr-pi-alarm, body.wr-pi [class*="alarm"] { --wr-pi-akcent: var(--wr-coral); }

/* co druga sekcja na delikatnym kremie – wizualne przerwy w ścianie treści */
body.wr-pi .grp:nth-of-type(even) {
  background: rgba(250,242,229,.55);
  border-radius: var(--wr-pi-radius);
  padding: .2rem 1rem 1rem;
  margin: 0 -1rem 1.4rem;
}

/* ── telefon: marginesy, których zabrakło po rozszerzeniu układu ── */
@media (max-width: 781px) {
  body.wr-pi main#wr-main .wp-block-post-content {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  body.wr-pi .wr-pi-pasek { padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }
  body.wr-pi .grp:nth-of-type(even) { margin-left: -8px; margin-right: -8px; padding-left: .8rem; padding-right: .8rem; }
  body.wr-pi .card, body.wr-pi .par { padding: .9rem 1rem; }
  body.wr-pi .box, body.wr-pi .chips, body.wr-pi .pick { padding: .8rem; }
  body.wr-pi main#wr-main .wp-block-post-content table { font-size: .84rem; }
}

/* ══════════════════════════════════════════════════════════════
   v1.12.1 – naprawa rozjeżdżającego się układu PI
   Trzy przyczyny, wszystkie z tej samej rodziny:
   1) treść w siatce miała `margin: auto` – automatyczne marginesy
      wyłączają rozciąganie elementu siatki, więc kolumna kurczyła się
      do szerokości najszerszego akapitu (na mszach 282 px zamiast 930);
   2) gdy spis sekcji był pusty, siatka i tak rezerwowała 232 px na bok;
   3) pasek filtrów z treści strony jest `sticky` i wchodził na nagłówki
      sekcji – przy własnej, przyklejonej nawigacji jest zbędny.
   ══════════════════════════════════════════════════════════════ */

.wr-pi-uklad > .wp-block-post-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: none !important;
  min-width: 0;
}
.wr-pi-uklad--solo { grid-template-columns: minmax(0, 1fr) !important; }

body.wr-pi .box, body.wr-pi .chips, body.wr-pi .pick, body.wr-pi .mode {
  position: static !important;
  backdrop-filter: none;
  box-sizing: border-box;
  width: 100%;
}

/* wiersz filtrów: etykieta + pole + pigułki w jednej linii, zawijane */
body.wr-pi .box { align-items: center; row-gap: .6rem; column-gap: .9rem; }
body.wr-pi .chips { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; box-shadow: none; padding: 0; background: none; }

/* ── v1.12.2 – menu mobilne: jedna kreska przed „Śledź nas", nie dwie ──
   Ostatni odnośnik listy „W ramach" ma własną kreskę u dołu, a blok
   społecznościowy dokładał swoją u góry. Zostawiamy tę pierwszą. */
.wr-mobilenav__panel > a:last-of-type { border-bottom: 1px solid rgba(43,66,73,.12); }
.wr-mobilenav__panel .wr-social--menu + *,
.wr-mobilenav__panel .wr-social--menu { border-top: 0 !important; }
.wr-mobilenav__panel .wr-social__label { margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════
   v1.12.3 – wyszukiwarka w nagłówku i wspólna oś treści w PI
   ══════════════════════════════════════════════════════════════ */

/* ── „Szukaj" w nagłówku: jedna pigułka, nie pigułka w pigułce ──
   Pole dostawało własne tło, obwódkę i zaokrąglenie (z rodzica i ze
   stylów przeglądarki), więc w koralowej ramce siedziała druga, szara.
   Ramkę rysuje formularz, pole jest przezroczyste, lupka w kółku. */
.wr-hsearch form {
  height: 40px;
  padding: 0 .25rem 0 .95rem;
  gap: .35rem;
  border: 1.5px solid var(--wr-coral);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}
.wr-hsearch input[type="search"] {
  height: 100%;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  -webkit-appearance: none;
          appearance: none;
}
.wr-hsearch input[type="search"]::-webkit-search-cancel-button { display: none; }
.wr-hsearch button {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wr-coral);
  color: #fff;
  display: grid; place-items: center;
  padding: 0;
  flex: 0 0 auto;
}
.wr-hsearch button:hover { background: var(--wr-graphite); color: #fff; }
[data-wr-theme="dark"] .wr-hsearch form { background: #0F1B20; border-color: var(--wr-coral); }

/* ── PI: wszystkie sekcje na jednej osi ──
   Bloki w treści siedzą w układzie „constrained" WordPressa, który
   przycina każde dziecko do 682 px – stąd akapit wstępu wąski, a panel
   filtrów i wyniki na pełną szerokość. Zamiast walczyć z każdą regułą
   z osobna, podnosimy rozmiar treści dla całego Punktu. */
body.wr-pi main#wr-main .is-layout-constrained,
body.wr-pi main#wr-main .wp-block-post-content {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
}
body.wr-pi main#wr-main .wp-block-post-content > *,
body.wr-pi main#wr-main .wp-block-post-content .is-layout-constrained > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* wstęp zostaje kolumną do czytania – reszta idzie pełną szerokością */
body.wr-pi main#wr-main .wp-block-post-content > p:first-of-type {
  max-width: 68ch !important;
}

/* równy rytm pionowy między sekcjami baz */
body.wr-pi .wr-apt > *, body.wr-pi .wr-msze > *, body.wr-pi .wr-szk > *,
body.wr-pi .wr-urz > *, body.wr-pi .wr-roz > *, body.wr-pi .wr-odp > * {
  margin-left: 0; margin-right: 0;
}
body.wr-pi .grp { margin-bottom: 1.6rem; }

/* ══════════════════════════════════════════════════════════════
   v1.12.4 – wspólny język elementów w bazach Punktu
   Każda baza ma w treści własny arkusz (wr-szk, wr-odp, wr-apt…),
   pisany zanim powstała marka: prostokątne ramki #C44C4A, kwadratowe
   plakietki, systemowe listy rozwijane. Te arkusze siedzą w <body>,
   więc przy równej mocy wygrywały z motywem. Dlatego cała ta warstwa
   ma w selektorze #wr-main – jeden identyfikator ustawia sprawę raz
   i na wszystkie bazy, bez !important i bez ruszania treści stron.

   Semantyka koloru zostaje ta sama, co w v1.12.0:
   koral = pilne/terminy, limonka = potwierdzenie, grafit = neutralne,
   kolor bazy = jej własny akcent.
   ══════════════════════════════════════════════════════════════ */

body.wr-pi main#wr-main {
  --wr-pi-limonka: var(--wp--preset--color--accent, #96BC00);
  --wr-pi-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.4 6 6.4 11 1.4' fill='none' stroke='%232B4249' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── ramki informacyjne: jedna konstrukcja, różne role ── */
body.wr-pi main#wr-main .cd,
body.wr-pi main#wr-main .gb,
body.wr-pi main#wr-main .nx,
body.wr-pi main#wr-main .rekr,
body.wr-pi main#wr-main .pay,
body.wr-pi main#wr-main .med,
body.wr-pi main#wr-main .spow {
  border: 1px solid var(--wr-pi-linia);
  border-left: 4px solid var(--wr-pi-rola, var(--wr-coral));
  border-radius: var(--wr-pi-radius);
  background: var(--wr-pi-rola-tlo, #fff);
  box-shadow: var(--wr-pi-cien);
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
}
body.wr-pi main#wr-main .cd,
body.wr-pi main#wr-main .nx,
body.wr-pi main#wr-main .med { --wr-pi-rola: var(--wr-coral); --wr-pi-rola-tlo: rgba(230,89,86,.05); }
body.wr-pi main#wr-main .gb   { --wr-pi-rola: var(--wr-pi-limonka); --wr-pi-rola-tlo: rgba(150,188,0,.07); }
body.wr-pi main#wr-main .rekr { --wr-pi-rola: var(--wr-pi-akcent); --wr-pi-rola-tlo: var(--wr-pi-akcent-tlo); }
body.wr-pi main#wr-main .pay,
body.wr-pi main#wr-main .spow { --wr-pi-rola: var(--wr-graphite); --wr-pi-rola-tlo: rgba(250,242,229,.6); }

body.wr-pi main#wr-main .cd small,
body.wr-pi main#wr-main .gb small,
body.wr-pi main#wr-main .nx,
body.wr-pi main#wr-main .pay { font-size: .9rem; line-height: 1.6; color: #4b616a; }
body.wr-pi main#wr-main .nx b,
body.wr-pi main#wr-main .cd strong { color: var(--wr-graphite); }

/* ── plakietki i znaczniki: zawsze pigułka ── */
body.wr-pi main#wr-main .cd .b,
body.wr-pi main#wr-main .gb .b,
body.wr-pi main#wr-main .med .b,
body.wr-pi main#wr-main .badge,
body.wr-pi main#wr-main .npub {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px;
  padding: .28rem .8rem;
  margin: 0 0 .5rem;
  border: 0;
}
body.wr-pi main#wr-main .cd .b,
body.wr-pi main#wr-main .med .b { background: var(--wr-coral); color: #fff; }
body.wr-pi main#wr-main .gb .b  { background: var(--wr-pi-limonka); color: #1f2d0a; }

/* „niepubliczna" to nie ostrzeżenie, tylko etykieta – obrys, nie plama */
body.wr-pi main#wr-main .npub {
  background: transparent;
  color: var(--wr-pi-akcent);
  border: 1px solid color-mix(in srgb, var(--wr-pi-akcent) 45%, transparent);
  margin: 0 0 0 .45rem;
  vertical-align: middle;
  padding: .16rem .6rem;
}

/* terminy rat – pigułki zamiast kratek */
body.wr-pi main#wr-main .cd .terms { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 .6rem; }
body.wr-pi main#wr-main .cd .terms span {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wr-coral) 50%, transparent);
  border-radius: 999px;
  color: var(--wr-graphite);
  font-family: 'Rubik', sans-serif;
  font-size: .88rem; font-weight: 500;
  padding: .38rem .9rem;
}

/* ── kafle ściągi segregacyjnej ── */
body.wr-pi main#wr-main .seg > div {
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  background: #fff;
  box-shadow: var(--wr-pi-cien);
  padding: .95rem 1.05rem;
  font-size: .88rem; line-height: 1.6;
}
body.wr-pi main#wr-main .seg .k { width: 1.1rem; height: 1.1rem; vertical-align: -.2em; }

/* ── odnośniki-przyciski: pigułki jak na górze strony ── */
body.wr-pi main#wr-main .go,
body.wr-pi main#wr-main .tv,
body.wr-pi main#wr-main .pick button {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: .84rem; font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  margin: 0 .4rem .4rem 0;
  background: var(--wr-graphite);
  color: var(--wr-cream);
  cursor: pointer;
}
body.wr-pi main#wr-main .go:hover,
body.wr-pi main#wr-main .tv:hover { background: var(--wr-coral); color: #fff; }
body.wr-pi main#wr-main .go.l {
  background: transparent; color: var(--wr-graphite);
  border-color: rgba(43,66,73,.28);
}
body.wr-pi main#wr-main .go.l:hover { background: var(--wr-graphite); color: var(--wr-cream); }

/* w rozkładach „Szukaj" jest akcją główną – koral, a wariant obok grafit */
body.wr-pi main#wr-main .pick button { background: var(--wr-coral); color: #fff; }
body.wr-pi main#wr-main .pick button:hover { background: var(--wr-graphite); color: var(--wr-cream); }
body.wr-pi main#wr-main .pick button.alt { background: var(--wr-graphite); color: var(--wr-cream); }
body.wr-pi main#wr-main .pick button.alt:hover { background: var(--wr-coral); color: #fff; }
body.wr-pi main#wr-main .pick .bt { border: 0; padding: 0; background: none; display: flex; gap: .45rem; }

/* przystanki i odnośniki „w drugą stronę" – też pigułki, tylko lżejsze */
body.wr-pi main#wr-main .st a,
body.wr-pi main#wr-main .rel a {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: .84rem; font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(43,66,73,.25);
  border-radius: 999px;
  padding: .35rem .85rem;
  color: var(--wr-graphite);
  background: #fff;
}
body.wr-pi main#wr-main .st a:hover,
body.wr-pi main#wr-main .rel a:hover { background: var(--wr-pi-akcent); border-color: var(--wr-pi-akcent); color: #fff; }

/* ── listy rozwijane: pigułka z własną strzałką, nie widżet systemowy ── */
body.wr-pi main#wr-main select,
body.wr-pi main#wr-main input[type="time"],
body.wr-pi main#wr-main input[type="text"],
body.wr-pi main#wr-main input[type="search"] {
  font-family: 'Rubik', sans-serif;
  font-size: .88rem;
  color: var(--wr-graphite);
  background: #fff;
  border: 1.5px solid rgba(43,66,73,.22);
  border-radius: 999px;
  height: 42px;
  padding: 0 1rem;
  max-width: 100%;
}
body.wr-pi main#wr-main select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 2.2rem;
  background-image: var(--wr-pi-strzalka);
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 11px 7px;
}
body.wr-pi main#wr-main select:focus,
body.wr-pi main#wr-main input:focus { outline: none; border-color: var(--wr-pi-akcent); }

/* ── karty: oddech po bokach (arkusze baz zerowały poziomy padding) ── */
body.wr-pi main#wr-main .card,
body.wr-pi main#wr-main .par,
body.wr-pi main#wr-main .med .poz { padding: 1.05rem 1.2rem; }
body.wr-pi main#wr-main .card:last-child,
body.wr-pi main#wr-main .par:last-child { border-bottom: 1px solid var(--wr-pi-linia); }
body.wr-pi main#wr-main .card .u,
body.wr-pi main#wr-main .card small { color: #5c6f76; }
body.wr-pi main#wr-main .card .u { font-size: .85rem; margin-top: .35rem; }

/* ── harmonogramy: tabela bez kratownicy, z rytmem wierszy ── */
body.wr-pi main#wr-main table.hm {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: .88rem;
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  overflow: hidden;
  margin: .6rem 0 .8rem;
}
body.wr-pi main#wr-main table.hm th,
body.wr-pi main#wr-main table.hm td {
  border: 0;
  border-bottom: 1px solid var(--wr-pi-linia);
  padding: .55rem .7rem;
  text-align: center;
}
body.wr-pi main#wr-main table.hm th {
  background: var(--wr-cream);
  font-family: 'Rubik', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wr-graphite);
}
body.wr-pi main#wr-main table.hm tr:last-child td { border-bottom: 0; }
body.wr-pi main#wr-main table.hm td:first-child { text-align: left; font-weight: 600; }
body.wr-pi main#wr-main table.hm tbody tr:nth-child(even) td { background: rgba(250,242,229,.45); }

/* szeroka tabela na telefonie przewija się w swoim oknie, a nie rozpycha
   strony – ramkę tego okna zakłada pi-nav.js */
.wr-pi-tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 .8rem; }
.wr-pi-tabela > table.hm { margin: 0; }

body.wr-pi main#wr-main .zimg {
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  padding: .5rem;
  background: #fff;
  overflow: hidden;
}
body.wr-pi main#wr-main .zimg img { border-radius: calc(var(--wr-pi-radius) - 6px); }

/* ── ciemny motyw dla nowej warstwy ── */
[data-wr-theme="dark"] body.wr-pi main#wr-main .cd,
[data-wr-theme="dark"] body.wr-pi main#wr-main .gb,
[data-wr-theme="dark"] body.wr-pi main#wr-main .nx,
[data-wr-theme="dark"] body.wr-pi main#wr-main .rekr,
[data-wr-theme="dark"] body.wr-pi main#wr-main .pay,
[data-wr-theme="dark"] body.wr-pi main#wr-main .med,
[data-wr-theme="dark"] body.wr-pi main#wr-main .seg > div,
[data-wr-theme="dark"] body.wr-pi main#wr-main .zimg,
[data-wr-theme="dark"] body.wr-pi main#wr-main select,
[data-wr-theme="dark"] body.wr-pi main#wr-main table.hm th {
  background: rgba(43,66,73,.55);
  border-color: rgba(231,224,210,.16);
  color: #E7E0D2;
}
[data-wr-theme="dark"] body.wr-pi main#wr-main .cd small,
[data-wr-theme="dark"] body.wr-pi main#wr-main .gb small,
[data-wr-theme="dark"] body.wr-pi main#wr-main .pay,
[data-wr-theme="dark"] body.wr-pi main#wr-main .nx { color: #C9D5D8; }
[data-wr-theme="dark"] body.wr-pi main#wr-main .cd .terms span { background: #15242B; color: #E7E0D2; }
[data-wr-theme="dark"] body.wr-pi main#wr-main table.hm tbody tr:nth-child(even) td { background: rgba(43,66,73,.35); }
[data-wr-theme="dark"] body.wr-pi main#wr-main select { background-image: none; }

/* adresy stron w kartach łamały się w środku słowa („Faceb ook") –
   dzielimy dopiero wtedy, gdy naprawdę nie ma gdzie */
body.wr-pi main#wr-main .card a,
body.wr-pi main#wr-main .par a { word-break: normal; overflow-wrap: anywhere; }

/* ── telefon: tabela najpierw próbuje się zmieścić ──
   Trzy kolumny harmonogramu Markowej mieszczą się na 390 px, gdy komórki
   są ciaśniejsze – przewijanie zostawiamy dla naprawdę szerokich (Żołynia,
   dwanaście miesięcy w wierszu). Cień przy krawędzi mówi, że jest dalszy
   ciąg: pojawia się sam, gdy tło „przykleja się" do brzegu. */
@media (max-width: 781px) {
  body.wr-pi main#wr-main table.hm { font-size: .8rem; }
  body.wr-pi main#wr-main table.hm th,
  body.wr-pi main#wr-main table.hm td { padding: .45rem .4rem; }
  body.wr-pi main#wr-main table.hm th { font-size: .64rem; letter-spacing: .06em; }
  .wr-pi-tabela {
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(43,66,73,.16), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(43,66,73,.16), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ── msze: wynik wyszukiwania jako wiersz-karta ──
   Godzina jest tu najważniejsza, więc dostaje własną kolumnę i kolor
   bazy; źródło danych schodzi do dyskretnej plakietki na prawej. */
body.wr-pi main#wr-main .hit {
  display: flex; gap: 1rem; align-items: baseline;
  background: #fff;
  border: 1px solid var(--wr-pi-linia);
  border-left: 3px solid var(--wr-pi-akcent);
  border-radius: var(--wr-pi-radius);
  box-shadow: var(--wr-pi-cien);
  padding: .85rem 1.1rem;
  margin: 0 0 .6rem;
  transition: border-color .15s, box-shadow .15s;
}
body.wr-pi main#wr-main .hit:hover { box-shadow: 0 6px 18px rgba(43,66,73,.09); }
body.wr-pi main#wr-main .hit b {
  font-family: 'Rubik', sans-serif;
  font-size: 1.2rem; font-weight: 600;
  color: var(--wr-pi-akcent);
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
}
body.wr-pi main#wr-main .hit .who small { color: #5c6f76; font-size: .87rem; line-height: 1.55; }
body.wr-pi main#wr-main .src-d {
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; letter-spacing: .06em;
  color: #7d8d93;
  border: 1px solid var(--wr-pi-linia);
  border-radius: 999px;
  padding: .2rem .7rem;
  white-space: nowrap;
}
body.wr-pi main#wr-main details {
  border: 1px solid var(--wr-pi-linia);
  border-radius: var(--wr-pi-radius);
  background: #fff;
  box-shadow: var(--wr-pi-cien);
  padding: .9rem 1.1rem;
  margin: 0 0 .7rem;
}
body.wr-pi main#wr-main summary { cursor: pointer; font-weight: 600; color: var(--wr-graphite); }
body.wr-pi main#wr-main .par .h { color: var(--wr-pi-akcent); }
body.wr-pi main#wr-main .spow {
  background: var(--wr-pi-akcent-tlo);
  border-radius: 12px;
  padding: .45rem .7rem;
  margin-top: .4rem;
  font-size: .86rem;
}
/* segment „Niedziela / Dni powszednie" – dwie pigułki, nie zlepek */
body.wr-pi main#wr-main .mode { gap: .4rem; }

/* ══════════════════════════════════════════════════════════════
   v1.13.0 – miejsca reklamowe
   Motyw rodzic rysuje w slotach szarą kratkę z napisem REKLAMA.
   Zastępujemy ją makietą w języku okładki z brandbooka; grafikę
   podstawia filtr w functions.php, tutaj zdejmujemy dekorację
   rodzica i pilnujemy proporcji.
   ══════════════════════════════════════════════════════════════ */
.wr-ad {
  background: none;
  border: 0;
  min-height: 0;
  padding: 0;
  display: block;
  text-align: center;
}
.wr-ad__link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  text-decoration: none;
  border: 0;
  transition: opacity .15s;
}
.wr-ad__link:hover { opacity: .88; }
.wr-ad img { display: block; width: 100%; height: auto; margin: 0 auto; }

.wr-ad--billboard { margin: var(--wp--preset--spacing--40) 0; }
/* Billboard na stronie głównej domyka szerokość kolumn treści (1200 px);
   w kolumnie artykułu obrazek i tak zatrzyma się na jej krawędzi. */
.wr-ad--billboard img { max-width: 1200px; }

/* Karty w kolumnie bocznej stoją równo przy jej lewej krawędzi – baner też,
   inaczej odjeżdżał o 27 px w prawo (automatyczne marginesy centrowały go
   w kolumnie szerszej niż same karty). */
.wr-ad--rect { width: auto; height: auto; margin: var(--wp--preset--spacing--40) 0 0; text-align: left; }
/* Kolumna boczna artykułu ma 340 px – kreacja 300 px zostawiała po bokach
   wcięcia, przez co baner odstawał od sąsiednich kart. */
.wr-ad--rect img { max-width: 340px; }

@media (max-width: 640px) {
  .wr-ad--billboard img { max-width: 360px; }
  .wr-ad--rect { width: auto; max-width: none; aspect-ratio: auto; }
  .wr-ad--rect img { max-width: 100%; }
}

[data-wr-theme="dark"] .wr-ad { background: none; border: 0; }

/* ══════════════════════════════════════════════════════════════
   v1.14.0 – newsletter w języku banerów
   Blok zapisu mówił dotąd innym głosem niż reszta: rama meandrowa,
   Cinzel w nagłówku, kanciaste pola. Ustawiamy go tak samo, jak
   makiety reklamowe – koralowy panel z fasadą zamku i monogramem,
   kremowe pole z treścią w Rubiku i pigułkowym formularzem.
   Grafika idzie tłem z CSS, bo szablon jest statyczny i nie zna
   adresu katalogu motywu.
   ══════════════════════════════════════════════════════════════ */

.wr-newsletter { margin-top: var(--wp--preset--spacing--50); }

.wr-newsletter__frame {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  /* motyw rodzic ustawia tu flex z align-items:center – w siatce zostawiłoby
     to pusty panel marki bez wysokości */
  align-items: stretch;
  min-height: 250px;
  background: var(--wr-cream);
  border: 1px solid rgba(230,89,86,.35);
  overflow: hidden;
  padding: 0;
}

/* koralowy panel: fasada w tym samym kadrze, co w banerach –
   widać wieżę z kopułą, a nie sam mur */
.wr-newsletter__brand { position: relative; background: var(--wr-coral); overflow: hidden; }
.wr-newsletter__brand::before {
  content: "";
  position: absolute;
  /* ułamki zdjęte z nagłówka wysyłanego newslettera: rysunek widoczny
     od 3,5 % do 69,6 % wysokości (iglica → podmurówka) i do 92,6 %
     szerokości, czyli wieża ucięta prawą krawędzią panelu. Panel ma tu
     300 px, więc ułamki przeliczone na jego szerokość. */
  top: -5.29%;
  left: -45.2%;
  width: 156.8%;
  aspect-ratio: 255 / 205;
  background: url('assets/wr-fasada.svg') no-repeat top left / 100% auto;
  opacity: .18;
}
.wr-newsletter__brand::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 112px; height: 112px;
  background: url('assets/wr-romb-cream.svg') no-repeat center / contain;
}

.wr-newsletter__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 2.6rem;
  font-family: 'Rubik', sans-serif;
}
.wr-newsletter__kicker {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--wr-coral);
}
.wr-newsletter__body h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 600; font-size: 1.85rem; line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--wr-graphite);
  margin: 0;
}
.wr-newsletter__body p {
  font-family: 'Rubik', sans-serif;
  font-weight: 400; font-size: 1rem; line-height: 1.5;
  color: #5c6f76;
  margin: 0;
}

/* rodzic daje formularzowi `flex: 1 1 320px`; w kolumnie treści rozpychało to
   blok na całą wysokość, więc wracamy do rozmiaru z zawartości */
.wr-newsletter__form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; flex: 0 0 auto; }
.wr-newsletter__form input {
  flex: 1 1 260px;
  height: 48px;
  padding: 0 1.15rem;
  font-family: 'Rubik', sans-serif; font-size: .95rem;
  color: var(--wr-graphite);
  background: #fff;
  border: 1.5px solid rgba(43,66,73,.22);
  border-radius: 999px;
}
.wr-newsletter__form input:focus { outline: none; border-color: var(--wr-coral); }
.wr-newsletter__form button {
  height: 48px;
  padding: 0 1.7rem;
  font-family: 'Rubik', sans-serif; font-size: .95rem; font-weight: 500;
  letter-spacing: 0;
  color: var(--wr-cream);
  background: var(--wr-coral);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.wr-newsletter__form button:hover { background: var(--wr-graphite); color: var(--wr-cream); }
.wr-newsletter .wr-komunikat { margin: .6rem 0 0; }

@media (max-width: 781px) {
  .wr-newsletter__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wr-newsletter__brand { height: 112px; }
  .wr-newsletter__brand::before { left: 0; width: 100%; top: -71%; }
  .wr-newsletter__brand::after { width: 64px; height: 64px; }
  .wr-newsletter__body { padding: 1.4rem 1.2rem 1.6rem; }
  .wr-newsletter__body h2 { font-size: 1.45rem; }
  .wr-newsletter__form input, .wr-newsletter__form button { flex: 1 1 100%; }
}

[data-wr-theme="dark"] .wr-newsletter__frame { background: #16262C; border-color: rgba(230,89,86,.45); }
[data-wr-theme="dark"] .wr-newsletter__body h2 { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-newsletter__body p { color: #9fb2ba; }
[data-wr-theme="dark"] .wr-newsletter__form input { background: #0F1B20; color: var(--wr-cream); border-color: rgba(250,242,229,.30); }

/* ══════════════════════════════════════════════════════════════
   v1.15.0 – warstwa źródłowa artykułu
   Box pod tytułem mówi wprost, skąd wzięliśmy materiał i kto go
   sprawdził. Ma być czytelny, ale nie ma konkurować z tytułem –
   stąd krem, cienka koralowa krecha i mały stopień pisma.
   ══════════════════════════════════════════════════════════════ */

.wr-trust {
  display: flex;
  /* bez border-box padding i krecha dokładałyby się do 680 px i box
     wystawał poza kolumnę tekstu (mierzone: 721 zamiast 680) */
  box-sizing: border-box;
  gap: .85rem;
  align-items: flex-start;
  /* box zamyka artykuł i idzie na pełną szerokość kolumny – tak samo jak
     kreska nad „Tematy" i rząd udostępniania pod spodem */
  width: 100%;
  max-width: none;
  margin: 2rem 0 .4rem;
  padding: .95rem 1.15rem;
  background: var(--wr-cream);
  border: 1px solid rgba(43,66,73,.12);
  border-left: 3px solid var(--wr-coral);
  border-radius: 14px;
  font-family: 'Rubik', sans-serif;
}
.wr-trust__ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: .1rem;
  background: var(--wr-coral);
  -webkit-mask: url('assets/wr-trust-ico.svg') no-repeat center / contain;
          mask: url('assets/wr-trust-ico.svg') no-repeat center / contain;
}
.wr-trust__tresc { min-width: 0; }
.wr-trust p { margin: 0; }
.wr-trust__linia {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--wr-graphite);
}
.wr-trust__linia strong { font-weight: 600; }
.wr-trust__linia a {
  color: var(--wr-graphite);
  text-decoration: none;
  border-bottom: 1px solid rgba(230,89,86,.5);
}
.wr-trust__linia a:hover { color: var(--wr-coral); border-bottom-color: var(--wr-coral); }
.wr-trust__sep { color: #9aa8ad; margin: 0 .15rem; }
.wr-trust__nota {
  margin-top: .3rem !important;
  font-size: .82rem;
  line-height: 1.5;
  color: #5c6f76;
}

@media (max-width: 781px) {
  .wr-trust { padding: .85rem .95rem; gap: .7rem; border-radius: 12px; }
  .wr-trust__linia { font-size: .88rem; }
  .wr-trust__nota { font-size: .79rem; }
}

[data-wr-theme="dark"] .wr-trust {
  background: rgba(43,66,73,.55);
  border-color: rgba(231,224,210,.16);
  border-left-color: var(--wr-coral);
}
[data-wr-theme="dark"] .wr-trust__linia,
[data-wr-theme="dark"] .wr-trust__linia a { color: #E7E0D2; }
[data-wr-theme="dark"] .wr-trust__nota { color: #9fb2ba; }

/* ══════════════════════════════════════════════════════════════
   v1.17.0 – filtr gminny na stronie głównej
   Pigułki w tym samym języku, co przyciski w nagłówku i w Punkcie
   Informacyjnym. Pojawiają się tylko przy sekcjach, w których dana
   gmina naprawdę coś ma – reszta byłaby ślepą uliczką.
   ══════════════════════════════════════════════════════════════ */

.wr-gfiltr {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: -.2rem 0 1.1rem;
}
.wr-gfiltr a {
  font-family: 'Rubik', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1;
  color: #5c6f76;
  background: #fff;
  border: 1px solid rgba(43,66,73,.18);
  border-radius: 999px;
  padding: .38rem .85rem;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
/* Zaznaczenie i najechanie w kolorze kategorii. Barwy kategorii są pastelowe,
   więc na tekst nie nadają się wprost – bierzemy je przygaszone grafitem
   (`--wr-kat-txt`), a czysty odcień zostaje na obwódkę i tło. Bez color-mix
   albo bez zmiennej kategorii pigułka wygląda jak dotąd: koral i grafit. */
.wr-gfiltr { --wr-kat-txt: var(--wr-graphite); --wr-kat-obw: var(--wr-coral); }

@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
  .wr-gfiltr {
    --wr-kat-txt: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 34%, var(--wr-graphite) );
    --wr-kat-obw: var(--wr-kat, var(--wr-coral));
    --wr-kat-tlo: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 14%, #fff );
  }
}

.wr-gfiltr a:hover,
.wr-gfiltr a:focus-visible {
  border-color: var(--wr-kat-obw);
  color: var(--wr-kat-txt);
  background: var(--wr-kat-tlo, #fff);
}
.wr-gfiltr a.is-tu {
  background: var(--wr-kat-txt);
  border-color: var(--wr-kat-txt);
  color: var(--wr-cream);
}
.wr-gfiltr a.is-tu:hover { color: var(--wr-cream); }

/* sekcja w trakcie dosyłki – przygaszona, ale trzyma wysokość, żeby
   strona nie skakała pod kursorem */
.wp-block-query.is-laduje {
  opacity: .4;
  transition: opacity .12s;
  pointer-events: none;
}

.wr-gpusto {
  font-family: 'Rubik', sans-serif;
  font-size: .95rem;
  color: #5c6f76;
  background: var(--wr-cream);
  border: 1px dashed rgba(43,66,73,.2);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin: 0;
}
.wr-gpusto strong { color: var(--wr-graphite); }
.wr-gpusto a { color: var(--wr-coral); }

/* wybrana gmina widoczna w nagłówku */
.wr-gminy > summary.is-tu { color: var(--wr-coral); font-weight: 600; }
.wr-gminy__menu a.is-tu { color: var(--wr-coral); font-weight: 600; }

[data-wr-theme="dark"] .wr-gfiltr a { background: #16262C; border-color: #2A3D45; color: #C9D5D8; }
[data-wr-theme="dark"] .wr-gfiltr a.is-tu { background: var(--wr-cream); border-color: var(--wr-cream); color: var(--wr-graphite); }
/* na ciemnym pastel kategorii jest już wystarczająco jasny na tekst i na
   wypełnienie – przygaszanie grafitem odpada */
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
  [data-wr-theme="dark"] .wr-gfiltr {
    --wr-kat-txt: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 78%, var(--wr-cream) );
    --wr-kat-tlo: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 16%, #16262C );
  }
  [data-wr-theme="dark"] .wr-gfiltr a.is-tu,
  [data-wr-theme="dark"] .wr-gfiltr a.is-tu:hover {
    background: var(--wr-kat-txt);
    border-color: var(--wr-kat-txt);
    color: var(--wr-graphite);
  }
}
[data-wr-theme="dark"] .wr-gpusto { background: #16262C; border-color: #2A3D45; color: #9fb2ba; }

/* ══════════════════════════════════════════════════════════════
   v1.21 – UKŁAD ARTYKUŁU I DZIAŁU (adaptacja rozwiązań serwisowych)
   Trzy zmiany, jedna myśl: mniej ramy, więcej treści.
   1. Artykuł otwiera tytuł i lead, potem zdjęcie, dopiero pod nim
      wiersz autora. Czytelnik dostaje sens tekstu zanim doleci foto.
   2. Dział zamiast afiszowego nagłówka dostaje pasek działów z
      ikonami i powrotem na stronę główną.
   3. Pierwszy materiał w dziale idzie jako hero z tytułem na zdjęciu.
   ══════════════════════════════════════════════════════════════ */

/* ── artykuł: tytuł, lead, zdjęcie, wiersz autora ─────────────── */
body.single main#wr-main h1.wp-block-post-title {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem);
  margin: 0 0 .9rem !important;
}

body.single main#wr-main .wr-lead {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem);
  line-height: 1.55;
  font-weight: 400;
  color: #46626b;
  max-width: 46em;
  margin: 0 !important;
}
body.single main#wr-main .wr-lead p { margin: 0; }
body.single main#wr-main .wr-lead .wp-block-post-excerpt__more-link { display: none; }
[data-wr-theme="dark"] body.single main#wr-main .wr-lead { color: #A9BEC5; }

/* wiersz autora zjechał pod zdjęcie – kreska oddziela go od treści */
body.single main#wr-main .wr-byline {
  margin: .85rem 0 0 !important;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(43,66,73,.12);
}
[data-wr-theme="dark"] body.single main#wr-main .wr-byline { border-bottom-color: #2A3D45; }
body.single main#wr-main .wp-block-post-content { margin-top: 1.6rem; }

/* Miara tekstu zostaje wąska (680 px), ale przykleja się do lewej krawędzi –
   inaczej treść stała wcięta o 40 px względem tytułu, zdjęcia i boksu źródła.
   `!important` nie z lenistwa: układ „constrained" WordPressa centruje dzieci
   regułą z `margin-left: auto !important`, więc bez tego nie da się jej zdjąć. */
body.single main#wr-main .wp-block-post-content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── pasek działów zamiast nagłówka archiwum ──────────────────── */
/* Afisz z nazwą działu znika – nazwę niesie pigułka w pasku. Selektor musi
   być mocniejszy niż `body.category main#wr-main .wp-block-query-title`
   z motywu rodzica, stąd dwie klasy naraz zamiast `!important`. */
body.archive main#wr-main .wr-archive-tytul.wp-block-query-title { display: none; }

.wr-katnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .45rem;
  font-family: 'Rubik', sans-serif;
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(43,66,73,.12);
}
.wr-katnav__dom {
  width: 17px; height: 17px; flex: 0 0 auto;
  background: #5c6f76;
  -webkit-mask: url('assets/wr-ico-dom.svg') no-repeat center / contain;
          mask: url('assets/wr-ico-dom.svg') no-repeat center / contain;
}
.wr-katnav__dom:hover { background: var(--wr-coral); }
.wr-katnav__kreska {
  width: 1px; height: 18px; margin: 0 .45rem 0 .25rem;
  background: rgba(43,66,73,.18);
}

/* pozycja działu: ikona kategorii + nazwa, wszystko jednym rozmiarem –
   bieżący dział to nagłówek H1, więc zerujemy mu typografię nagłówka */
.wr-katnav__poz {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Rubik', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  color: #5c6f76;
  text-decoration: none;
  padding: .4rem .7rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .15s, background .15s, border-color .15s;
}
.wr-katnav__poz::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 auto;
  background: var(--wr-ico-color, none) no-repeat center / contain;
}
.wr-katnav__poz:hover {
  color: var(--wr-kat-txt, var(--wr-coral));
  border-color: var(--wr-kat, var(--wr-coral));
}
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
  .wr-katnav__poz {
    --wr-kat-txt: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 34%, var(--wr-graphite) );
  }
  .wr-katnav__poz:hover { background: color-mix( in srgb, var(--wr-kat, var(--wr-coral)) 12%, #fff ); }
}
/* Zaznaczenie musi trafiać i w H1 (archiwum działu), i w zwykły odnośnik
   (artykuł) – inaczej przy tekście dział wyglądał na niezaznaczony. */
.wr-katnav__poz.is-tu {
  font-size: .82rem;
  color: var(--wr-cream);
  background: var(--wr-kat-txt, var(--wr-graphite));
  border-color: var(--wr-kat-txt, var(--wr-graphite));
}
.wr-katnav__poz.is-tu::before { filter: brightness(0) invert(1); }

[data-wr-theme="dark"] .wr-katnav { border-bottom-color: #2A3D45; }
[data-wr-theme="dark"] .wr-katnav__poz { color: #C9D5D8; }
[data-wr-theme="dark"] .wr-katnav__dom { background: #C9D5D8; }

@media (max-width: 781px) {
  /* na telefonie pasek jedzie w bok zamiast łamać się na cztery rzędy */
  .wr-katnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wr-katnav::-webkit-scrollbar { display: none; }
  .wr-katnav__poz { flex: 0 0 auto; }
}

/* ── hero działu: pierwszy materiał na całą szerokość ──────────── */
main#wr-main .wr-cardgrid > li:first-child { grid-column: 1 / -1; }

main#wr-main .wr-cardgrid > li:first-child .wr-card {
  display: grid;
  grid-template-areas: "hero";
  border: 0;
  background: none;
  border-radius: 18px;
  overflow: hidden;
}
main#wr-main .wr-cardgrid > li:first-child .wr-card > * { grid-area: hero; }

main#wr-main .wr-cardgrid > li:first-child .wp-block-post-featured-image {
  margin: 0;
  /* 16/9, nie panorama: hero siedzi teraz w węższej kolumnie obok listy
     „Najnowsze", a przy panoramie tytuł lądował pod krawędzią ekranu */
  aspect-ratio: 16/9;
}
main#wr-main .wr-cardgrid > li:first-child .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}

main#wr-main .wr-cardgrid > li:first-child .wr-card__body {
  align-self: end;
  position: relative;
  z-index: 2;
  padding: 3.5rem 1.6rem 1.4rem;
  /* gradient tylko pod tekstem – zdjęcie zostaje zdjęciem */
  background: linear-gradient(to top, rgba(16,28,33,.88) 0%, rgba(16,28,33,.62) 45%, rgba(16,28,33,0) 100%);
  pointer-events: none;
}
main#wr-main .wr-cardgrid > li:first-child .wr-card__body a { pointer-events: auto; }

main#wr-main .wr-cardgrid > li:first-child .wr-card__cat { margin: 0 0 .5rem; padding: 0; }
main#wr-main .wr-cardgrid > li:first-child .wr-card__cat a { color: #FFC9B8; }

main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title {
  margin: 0 !important;
  font-size: clamp(1.35rem, .9rem + 1.7vw, 2.05rem);
  line-height: 1.18;
  text-wrap: balance;
  max-width: 24ch;
}
main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title a { color: #fff; }
main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title a:hover { color: #FFD9CD; }

/* zajawka i data zabierały hero oddech – zostaje kategoria i tytuł */
main#wr-main .wr-cardgrid > li:first-child .wp-block-post-excerpt,
main#wr-main .wr-cardgrid > li:first-child .wp-block-post-date { display: none; }

/* Kafle pod hero na stronie głównej NIE są hero – muszą wypaść spod reguł
   pierwszego kafla, bo inaczej pierwszy z czterech rozlewa się na całą
   szerokość i dostaje tytuł na zdjęciu. Ta sama sytuacja co na kolejnych
   stronach listy, więc i to samo cofnięcie. */
main#wr-main .wr-podhero .wr-cardgrid > li:first-child { grid-column: auto; }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card {
  display: block;
  border-radius: 0;
}
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-featured-image { aspect-ratio: 16/9; }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card__body {
  align-self: auto; position: static; z-index: auto;
  padding: 0; background: none; pointer-events: auto;
}
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-title { max-width: none; }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-title a { color: inherit; }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card__cat a { color: var(--wr-coral); }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card__autor .wr-autor__nazwa { color: #5c6f76; }
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-excerpt,
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-date { display: block; }

/* Na kolejnych stronach listy hero nie ma sensu – tam nie ma „pierwszego”
   materiału, jest dalszy ciąg. Karta wraca do zwykłej postaci. */
body.paged main#wr-main .wr-cardgrid > li:first-child { grid-column: auto; }
body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card {
  display: block;
  border-radius: 0;
}
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-featured-image { aspect-ratio: 16/9; }
body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card__body {
  padding: 0; background: none; z-index: auto;
}
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title { max-width: none; }
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title a { color: inherit; }
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-excerpt,
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-date { display: block; }

@media (max-width: 600px) {
  main#wr-main .wr-cardgrid > li:first-child .wp-block-post-featured-image { aspect-ratio: 4/3; }
  main#wr-main .wr-cardgrid > li:first-child .wr-card__body { padding: 2.6rem 1rem 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   v1.22 – DZIAŁ W DWÓCH KOLUMNACH
   Hero na pełnej szerokości spychał tytuł pod krawędź ekranu:
   przy 1200 px panorama ma ponad 500 px wysokości, a nad nią stoi
   jeszcze nagłówek i pasek działów. Układ z kolumną boczną skraca
   hero o jedną trzecią i przy okazji daje to, co w takich serwisach
   robi najwięcej – listę „Najnowsze” pod ręką.
   ══════════════════════════════════════════════════════════════ */

main#wr-main .wr-archive-uklad { margin-top: 0; }

/* w węższej kolumnie hero nie potrzebuje aż tak dużego marginesu */
main#wr-main .wr-archive-q .wr-cardgrid > li:first-child .wr-card__body {
  padding: 3rem 1.3rem 1.2rem;
}
main#wr-main .wr-archive-q .wr-cardgrid > li:first-child .wp-block-post-title {
  font-size: clamp(1.25rem, .85rem + 1.2vw, 1.65rem);
  max-width: 20ch;
}

/* lista „Najnowsze” w kolumnie bocznej – data i tytuł w jednym wierszu,
   tak samo jak strumień na stronie głównej */
main#wr-main .wr-latest__item {
  display: flex;
  gap: .6rem;
  /* 1.85: wyrównanie do pierwszej linii tytułu, nie do linii bazowej.
     `baseline` brało dla tytułu ostatnią linię, więc przy dwuwierszowym
     tytule data siadała 22 px za nisko, a przy trzywierszowym 42 px –
     dokładnie o jedną i dwie interlinie. */
  align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(43,66,73,.1);
}
main#wr-main .wr-latest__item:last-child { border-bottom: 0; }
main#wr-main .wr-latest__time {
  flex: 0 0 auto;
  font-family: 'Rubik', sans-serif;
  font-size: .74rem;
  font-weight: 500;
  color: #92a5ab;
  min-width: 2.6em;
}
main#wr-main .wr-latest__item .wp-block-post-title {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 500;
}
[data-wr-theme="dark"] main#wr-main .wr-latest__item { border-bottom-color: #2A3D45; }

/* poniżej progu dwóch kolumn kolumna boczna schodzi pod listę materiałów */
@media (max-width: 781px) {
  main#wr-main .wr-archive-q .wr-cardgrid > li:first-child .wr-card__body {
    padding: 2.6rem 1rem 1.1rem;
  }
}

/* Reklama otwiera teraz kolumnę boczną (przed „Podobnymi artykułami"),
   więc jej górny margines musi zniknąć – inaczej start kolumny nie
   równałby się z tytułem artykułu obok. */
main#wr-main .wr-aside > .wr-ad--rect:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════
   v1.25 – PODPIS AUTORA ZE ZDJĘCIEM
   Zdjęcie w kółku i nazwisko przy tekście. Brak zdjęcia w profilu
   daje znak „w ramach” na kremie, nigdy szarą sylwetkę – pusty
   awatar wygląda jak usterka, a to jest element odpowiedzialności.
   ══════════════════════════════════════════════════════════════ */

.wr-autor {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Rubik', sans-serif;
  line-height: 1.2;
}
.wr-autor__foto {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wr-cream);
  box-shadow: 0 0 0 1px rgba(43,66,73,.1);
}
.wr-autor__nazwa { font-weight: 600; color: var(--wr-graphite); }
[data-wr-theme="dark"] .wr-autor__nazwa { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-autor__foto { box-shadow: 0 0 0 1px rgba(250,242,229,.18); }

/* wiersz pod zdjęciem w artykule – zdjęcie autora nadaje mu wysokość,
   więc data i czas czytania muszą zejść z linii bazowej na środek */
body.single main#wr-main .wr-byline { align-items: center; }
body.single main#wr-main .wr-byline .wr-autor { font-size: .86rem; }
body.single main#wr-main .wr-byline .wr-autor__foto { width: 40px; height: 40px; }

/* karty w listach: mniejsze kółko, nazwisko skrócone do inicjału */
main#wr-main .wr-card__autor {
  margin: 0 .9rem .35rem;
  font-size: .78rem;
}
main#wr-main .wr-card__autor .wr-autor__foto { width: 24px; height: 24px; }
main#wr-main .wr-card__autor .wr-autor__nazwa { font-weight: 500; color: #5c6f76; }

/* w hero działu podpis siedzi na zdjęciu – musi być jasny */
main#wr-main .wr-cardgrid > li:first-child .wr-card__autor .wr-autor__nazwa { color: #fff; }
main#wr-main .wr-cardgrid > li:first-child .wr-card__autor { margin-bottom: .5rem; }

@media (max-width: 600px) {
  main#wr-main .wr-card__autor { margin-left: .8rem; margin-right: .8rem; }
}

/* ══════════════════════════════════════════════════════════════
   v1.26 – NAGŁÓWEK PODĄŻAJĄCY I ODCHUDZONY (uwagi z audytu UX)
   Trzy decyzje:
   1. Nagłówek zostaje na ekranie, ale w trakcie czytania chudnie
      do jednego wąskiego paska. Chodzi o dostęp, nie o obecność.
   2. Działy wychodzą z nagłówka – ich miejscem jest pasek nad hero,
      ten sam na stronie głównej i w archiwum działu.
   3. Z baz Punktu zostają w pasku dwie najczęściej potrzebne –
      apteka dyżurna i msze. Reszta pod przyciskiem „Punkt Info”.
   ══════════════════════════════════════════════════════════════ */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--wr-cream);
  transition: box-shadow .18s ease;
}
[data-wr-theme="dark"] header.wp-block-template-part { background: #16262C; }

/* stan przewinięty: pasek chudnie, znika podpis pod logo i skróty do baz */
header.is-chudy { box-shadow: 0 6px 20px rgba(43,66,73,.1); }
[data-wr-theme="dark"] header.is-chudy { box-shadow: 0 6px 20px rgba(0,0,0,.45); }

header.wp-block-template-part .wr-topbar,
header.wp-block-template-part .wr-logo__mark,
header.wp-block-template-part .wr-logo__name {
  transition: padding .18s ease, width .18s ease, height .18s ease,
              opacity .14s ease, max-width .18s ease, margin .18s ease;
}
header.is-chudy .wr-topbar { padding-top: .45rem; padding-bottom: .45rem; }
header.is-chudy .wr-logo__mark { width: 30px; height: 30px; }
/* W pasku podążającym zostaje sam sygnet WR – tak samo jak na telefonie.
   Napis „W ramach" jest w tym momencie zbędny: czytelnik wie, gdzie jest,
   a każde 100 px szerokości wraca do wyszukiwarki i skrótu do baz. */
header.is-chudy .wr-logo__name {
  opacity: 0; max-width: 0; margin: 0; overflow: hidden; pointer-events: none;
}
/* W wąskim pasku zostaje sama pigułka „Punkt Info”. Msze i apteki to dwa
   kliknięcia dalej, ale wejście do baz musi być pod ręką przez cały czas –
   po apteki dyżurne sięga się nagle i pod presją, nie po namyśle. */
header.is-chudy .wr-utils > a:not(.is-pi) { display: none; }
header.is-chudy .wr-utils { gap: 0; }
header.is-chudy .wr-meanderbar { height: 0; margin-bottom: 0; }

/* „Twoja gmina” zeszła z rzędu kategorii do górnego paska */
.wr-topbar > .wr-gminy { margin-left: .2rem; }
@media (max-width: 900px) {
  .wr-topbar > .wr-gminy { display: none; }   /* na wąskim ekranie jest w menu */
}

/* Podwójny powrót do domu: motyw rodzica dokłada na archiwum własne
   okruszki z samym domem, a pasek działów ma swój. Zostaje ten w pasku. */
main#wr-main .wr-crumbs--archive { display: none; }

/* pasek działów nad hero na stronie głównej – bez domu i bez zaznaczenia */
main#wr-main .wr-katnav--glowna { margin-bottom: 1.6rem; }   /* 1.77: jeden rytm listwy */

@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part .wr-topbar,
  header.wp-block-template-part .wr-logo__mark,
  header.wp-block-template-part .wr-logo__name { transition: none; }
}

/* Kolumna boczna: zdejmujemy ograniczenie szerokości z motywu rodzica.
   Rodzic trzymał `.wr-aside > * { max-width: 340px }`, przez co lista
   „Najnowsze”, nagłówki i reklama kończyły się 54 px przed prawą krawędzią
   kolumny – rząd wyglądał jak niedociągnięty do końca. Teraz wszystko idzie
   na pełną szerokość boksu. */
@media (min-width: 782px) {
  main#wr-main .wr-aside > * { max-width: none; }
}
main#wr-main .wr-aside .wr-ad--rect img { max-width: 100%; }

/* Pasek administracyjny WordPressa jest przyklejony do góry okna, więc
   nagłówek musi zaczynać się pod nim – inaczej redakcja ogląda serwis
   z połową paska schowaną za belką, której czytelnik w ogóle nie widzi. */
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { top: 46px; }
}

/* Rząd gmin pod paskiem działów – ten sam język co pigułki przy sekcjach
   na stronie głównej, tylko bez dosyłki AJAX-em: w archiwum filtrujemy
   całą listę, więc przeładowanie strony jest tu uczciwsze niż podmiana
   fragmentu (zmienia się też paginacja). */
/* Kreska zostaje NAD gminami – oddziela wybór działu od wyboru okolicy,
   czyli dwie różne decyzje. Pigułki gmin idą środkiem: rząd jest krótszy
   od paska działów, a wyrównany do lewej wyglądał jak urwany. */
main#wr-main .wr-gfiltr--dzial {
  justify-content: center;
  margin: 1rem 0 1.6rem;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.30 – PASEK NAWIGACJI: SZUKAJKA W ŚRODKU, LEKKIE PRZYCISKI
   Wyszukiwarka przestaje być dodatkiem przy krawędzi i wchodzi na
   oś paska – po wyprowadzeniu kategorii z nagłówka to ona jest
   głównym wejściem w treść. Przyciski schodzą z pełnego koralu na
   koral na jasnym tle: mniej krzyku, ta sama hierarchia.
   ══════════════════════════════════════════════════════════════ */

.wr-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0 .95rem !important;
}
.wr-hact { display: flex; align-items: center; gap: .55rem; }

/* ── wyszukiwarka na osi paska ── */
.wr-topbar .wr-hsearch {
  margin: 0 !important;
  justify-content: center;
}
.wr-topbar .wr-hsearch form {
  width: min(440px, 100%);
  height: 44px;
  padding: 0 .3rem 0 1.1rem;
  background: #fff;
  border-color: rgba(43,66,73,.18);
  box-shadow: 0 1px 2px rgba(43,66,73,.04);
}
.wr-topbar .wr-hsearch form:focus-within {
  border-color: var(--wr-coral);
  box-shadow: 0 0 0 3px rgba(230,89,86,.14);
}
.wr-topbar .wr-hsearch input[type="search"],
.wr-topbar .wr-hsearch input[type="search"]:focus {
  width: 100%;
  flex: 1 1 auto;
  font-size: .92rem;
}
.wr-topbar .wr-hsearch button { width: 36px; height: 36px; background: var(--wr-coral); color: #fff; }
.wr-topbar .wr-hsearch button:hover { background: #d64c49; }
[data-wr-theme="dark"] .wr-topbar .wr-hsearch form { background: #0F1B20; border-color: #2A3D45; }

/* ── skróty do baz: lekkie pigułki zamiast plam koloru ── */
.wr-utils { gap: .35rem; align-items: center; }
.wr-utils a {
  height: 36px;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wr-utils a:hover { background: rgba(230,89,86,.09); color: var(--wr-coral); }

/* Punkt Info zostaje najmocniejszym elementem paska, ale w wersji jasnej:
   koral na swoim własnym, rozbielonym tle. Pełne wypełnienie wraca dopiero
   pod kursorem – wtedy jest sygnałem, nie tapetą. */
.wr-utils a.is-pi {
  background: rgba(230,89,86,.12);
  color: var(--wr-koral-text, #C44C4A) !important;
  border-color: rgba(230,89,86,.45);
  font-weight: 600;
  padding: 0 1rem;
}
.wr-utils a.is-pi:hover,
.wr-utils a.is-pi:focus-visible {
  background: var(--wr-coral);
  border-color: var(--wr-coral);
  color: #fff !important;
}
[data-wr-theme="dark"] .wr-utils a:hover { background: rgba(230,89,86,.18); }
[data-wr-theme="dark"] .wr-utils a.is-pi { background: rgba(230,89,86,.2); color: #F0918F !important; }

/* przełącznik dnia i nocy w tym samym języku co reszta paska */
.wr-mode {
  width: 36px; height: 36px;
  background: transparent;
  color: var(--wr-koral-text, #C44C4A);
  border: 1px solid rgba(43,66,73,.16);
}
.wr-mode:hover { background: var(--wr-coral); color: #fff; border-color: var(--wr-coral); }
[data-wr-theme="dark"] .wr-mode { background: transparent; color: #F0918F; border-color: #2A3D45; }

/* ── pasek podążający: sygnet naprawdę widoczny ── */
header.is-chudy .wr-topbar { padding: .6rem 0 !important; }
header.is-chudy .wr-logo__mark { width: 52px; height: 52px; }
header.is-chudy .wr-topbar .wr-hsearch form { height: 40px; }

@media (max-width: 900px) {
  .wr-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; }
  .wr-topbar .wr-hsearch form { height: 40px; padding-left: .8rem; }
  .wr-topbar .wr-hsearch button { width: 32px; height: 32px; }
  header.is-chudy .wr-logo__mark { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.31 – OTWARCIE STRONY GŁÓWNEJ W JĘZYKU PODSTRON
   Hero przestaje być osobnym bytem z kolorowym panelem i przyjmuje
   ten sam układ, co pierwszy materiał w dziale: zdjęcie na całą
   szerokość kolumny, tytuł na gradiencie, obok kolumna „Najnowsze”
   z miniaturami. Jeden wzorzec zamiast dwóch – czytelnik uczy się
   serwisu raz.
   ══════════════════════════════════════════════════════════════ */

/* mapa serwisu bliżej nagłówka – pasek ma domykać header, nie wisieć w powietrzu */
main#wr-main .wr-katnav { margin-top: -.4rem; padding-bottom: .8rem; }
main#wr-main .wr-gfiltr--dzial { margin: .85rem 0 1.4rem; }
body.archive main#wr-main,
body.home main#wr-main { padding-top: var(--wp--preset--spacing--30) !important; }

/* dom jako punkt „jesteś tutaj" */
.wr-katnav__dom.is-tu { background: var(--wr-coral); }
.wr-katnav__dom.is-tu:hover { background: var(--wr-coral); }

/* ── hero: dokładnie ten sam komponent co w dziale ── */
main#wr-main .wr-otwarcie { margin-top: 0; }
main#wr-main .wr-heroq .wr-cardgrid { margin: 0; padding: 0; list-style: none; }
main#wr-main .wr-heroq .wr-cardgrid > li { margin: 0; }
main#wr-main .wr-heroq .wr-card {
  display: grid;
  grid-template-areas: "hero";
  border: 0; background: none;
  border-radius: 18px; overflow: hidden;
}
main#wr-main .wr-heroq .wr-card > * { grid-area: hero; }
main#wr-main .wr-heroq .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; }
main#wr-main .wr-heroq .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
main#wr-main .wr-heroq .wr-card__body {
  align-self: end; position: relative; z-index: 2;
  padding: 3.4rem 1.6rem 1.5rem;
  background: linear-gradient(to top, rgba(16,28,33,.9) 0%, rgba(16,28,33,.62) 45%, rgba(16,28,33,0) 100%);
  pointer-events: none;
}
main#wr-main .wr-heroq .wr-card__body a { pointer-events: auto; }
main#wr-main .wr-heroq .wr-card__cat { margin: 0 0 .45rem; padding: 0; }
main#wr-main .wr-heroq .wr-card__cat a { color: #FFC9B8; }
main#wr-main .wr-heroq .wr-card__autor { margin: 0 0 .6rem; }
main#wr-main .wr-heroq .wr-card__autor .wr-autor__nazwa { color: #fff; }
main#wr-main .wr-heroq .wp-block-post-title {
  margin: 0 !important;
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.15rem);
  line-height: 1.16; text-wrap: balance; max-width: 22ch;
}
main#wr-main .wr-heroq .wp-block-post-title a { color: #fff; text-decoration: none; }
main#wr-main .wr-heroq .wp-block-post-title a:hover { color: #FFD9CD; }

/* ── kolumna „Najnowsze" z miniaturami ── */
main#wr-main .wr-latest--foto .wr-latest__item { gap: .75rem; padding: .7rem 0; }
main#wr-main .wr-latest__foto { flex: 0 0 62px; margin: 0 !important; }
main#wr-main .wr-latest__foto img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; display: block; }
main#wr-main .wr-latest__tresc { flex: 1 1 auto; min-width: 0; }
main#wr-main .wr-latest--foto .wp-block-post-title { margin: 0 0 .3rem; font-size: .93rem; line-height: 1.32; }
main#wr-main .wr-latest__autor { font-size: .74rem; }
main#wr-main .wr-latest__autor .wr-autor__foto { width: 18px; height: 18px; }
main#wr-main .wr-latest__autor .wr-autor__nazwa { font-weight: 500; color: #7d8f95; }
main#wr-main .wr-aside--glowna .wr-minipod__all { display: inline-block; margin-top: .7rem; }

/* podcasty schodzą pod otwarcie na pełną szerokość */
main#wr-main .wr-streams .wr-minipod { flex-basis: 100% !important; }
main#wr-main .wr-streams .wr-minipod__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem;
}

@media (max-width: 781px) {
  main#wr-main .wr-heroq .wr-card__body { padding: 2.6rem 1rem 1.1rem; }
  main#wr-main .wr-latest__foto,
  main#wr-main .wr-latest__foto img { flex-basis: 54px; width: 54px; height: 54px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.32 – STRONY STATYCZNE W LEKKIM UKŁADZIE
   Przenosimy tu styl, który druga sesja trzymała w scoped <style>
   w szablonach zapisanych w bazie. Jedna warstwa zamiast dwóch:
   szablony wracają do plików motywu, a wygląd siedzi w arkuszu.
   Zasada bez wyjątków: Cinzel do logo i nazw kategorii, reszta Rubik.
   ══════════════════════════════════════════════════════════════ */

/* tytuł strony: bez ramy z pasa, do lewej, Rubikiem */
body.page main#wr-main h1.wp-block-post-title {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  text-align: left;
  text-transform: none;
  padding: 0;
  margin: 0 0 1.1rem;
  background: none;
  border: 0;
}
/* pas i zawiasy z ramy były rysowane pseudoelementami z `!important`,
   więc tylko tak dają się zdjąć */
body.page main#wr-main h1.wp-block-post-title::before,
body.page main#wr-main h1.wp-block-post-title::after {
  content: none !important;
  background: none !important;
  border: 0 !important;
}

/* śródtytuły w treści stron też Rubikiem – brief drugiej sesji słusznie
   to zostawił do rozstrzygnięcia, a zasada mówi jasno */
body.page .wp-block-post-content h2,
body.page .wp-block-post-content h3,
body.page .wp-block-post-content h4,
body.wr-pi main#wr-main .wp-block-post-content h2,
body.wr-pi main#wr-main .wp-block-post-content h3 {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
body.page .wp-block-post-content h2 { font-size: 1.4rem; margin-top: 2.1rem; }
body.page .wp-block-post-content h3 { font-size: 1.12rem; margin-top: 1.6rem; }

/* treść stron trzyma tę samą miarę i to samo wyrównanie co artykuł */
body.page main#wr-main .wp-block-post-content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* tabele cennika i kalkulator: lekkie linie zamiast ramek */
body.page main#wr-main table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Rubik', sans-serif;
  font-size: .93rem;
}
body.page main#wr-main table th,
body.page main#wr-main table td {
  padding: .7rem .8rem;
  border: 0;
  border-bottom: 1px solid rgba(43,66,73,.12);
  text-align: left;
}
body.page main#wr-main table th {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5c6f76;
  background: none;
}
[data-wr-theme="dark"] body.page main#wr-main table th,
[data-wr-theme="dark"] body.page main#wr-main table td { border-bottom-color: #2A3D45; }

/* ══════════════════════════════════════════════════════════════
   v1.33 – JEDNA NAWIGACJA W CAŁYM SERWISIE + KOLUMNA DO SŁUCHANIA
   Pasek działów stoi teraz także nad artykułem, w tym samym miejscu
   i tej samej wysokości co na stronie głównej i w dziale. Czytelnik
   nie uczy się trzech nawigacji, tylko jednej – i przez cały czas
   widzi, w której części serwisu jest.
   ══════════════════════════════════════════════════════════════ */

body.single main#wr-main .wr-katnav { margin-top: -.4rem; margin-bottom: 1.5rem; padding-bottom: .8rem; }
body.single main#wr-main { padding-top: var(--wp--preset--spacing--30) !important; }

/* ── kolumna „Do słuchania": podcasty pod ręką ──────────────────
   Nie lista artykułów, tylko odcinki – żeby dało się włączyć coś
   w drodze bez szukania po serwisie. Odcinki i tak wchodzą do
   głównej siatki, gdy się ukazują; tu chodzi o szybki dostęp. */
main#wr-main .wr-podlista .wr-latest__foto img { border-radius: 10px; }
main#wr-main .wr-latest__data {
  font-family: 'Rubik', sans-serif;
  font-size: .74rem;
  color: #92a5ab;
  margin-top: .25rem;
}

.wr-sluch { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; }
.wr-sluch__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 34px; padding: 0 .95rem;
  border-radius: 999px;
  font-family: 'Rubik', sans-serif; font-size: .82rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wr-sluch__btn::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--wr-sluch-ico) no-repeat center / contain;
          mask: var(--wr-sluch-ico) no-repeat center / contain;
}
.wr-sluch__btn--sp {
  --wr-sluch-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.6 14.4a.8.8 0 0 1-1.1.3c-3-1.9-6.8-2.3-11.3-1.3a.8.8 0 1 1-.4-1.6c4.9-1.1 9.2-.6 12.5 1.5.4.2.5.7.3 1.1Zm1.2-3a1 1 0 0 1-1.3.3c-3.4-2.1-8.6-2.7-12.6-1.5a1 1 0 0 1-.6-1.9c4.6-1.4 10.3-.7 14.2 1.7.5.3.6.9.3 1.4Zm.1-3.1C14 8 7.9 7.7 4.3 8.8a1.2 1.2 0 0 1-.7-2.3C7.8 5.2 14.5 5.5 19 8.2a1.2 1.2 0 1 1-1.2 2.1Z' fill='%23000'/%3E%3C/svg%3E");
  background: rgba(30,215,96,.14); color: #1a7f45; border-color: rgba(30,215,96,.45);
}
.wr-sluch__btn--sp:hover { background: #1DB954; color: #fff; border-color: #1DB954; }
.wr-sluch__btn--yt {
  --wr-sluch-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.5a3 3 0 0 0-2.1-2.1C19 4.8 12 4.8 12 4.8s-7 0-8.9.6A3 3 0 0 0 1 7.5C.4 9.4.4 12 .4 12s0 2.6.6 4.5a3 3 0 0 0 2.1 2.1c1.9.6 8.9.6 8.9.6s7 0 8.9-.6a3 3 0 0 0 2.1-2.1c.6-1.9.6-4.5.6-4.5s0-2.6-.6-4.5ZM9.8 15.3V8.7l6 3.3-6 3.3Z' fill='%23000'/%3E%3C/svg%3E");
  background: rgba(230,89,86,.12); color: var(--wr-koral-text, #C44C4A); border-color: rgba(230,89,86,.45);
}
.wr-sluch__btn--yt:hover { background: var(--wr-coral); color: #fff; border-color: var(--wr-coral); }
.wr-sluch__all {
  margin-left: auto;
  font-family: 'Rubik', sans-serif; font-size: .8rem; font-weight: 500;
  color: #5c6f76; text-decoration: none;
}
.wr-sluch__all:hover { color: var(--wr-coral); }

/* ══════════════════════════════════════════════════════════════
   v1.34 – ŚCIEŻKA PRZY ARTYKULE W RYTMIE PASKA DZIAŁÓW
   Wygląd zostaje ten sam co dotąd (dom › dział › tytuł) – to inny
   rodzaj nawigacji niż pasek działów i ma taki zostać. Wspólne jest
   miejsce i wysokość wiersza: na każdej stronie serwisu nawigacja
   zaczyna się w tym samym punkcie i kończy tą samą kreską.
   ══════════════════════════════════════════════════════════════ */

body.single main#wr-main .wr-crumbs,
body.page   main#wr-main .wr-crumbs {
  /* 1.77: `min-height` liczone razem z dopełnieniem – inaczej ścieżka rosła
     do 59 px, czyli o 14 px więcej niż pasek działów, który ma naśladować.
     Domyślne `content-box` dokładało `padding-bottom` PONAD 45 px. */
  box-sizing: border-box;
  min-height: 45px;          /* tyle mierzy pasek działów na głównej i w dziale */
  align-content: center;
  margin: -.4rem 0 1.6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(43,66,73,.12);
  font-size: .82rem;
}
[data-wr-theme="dark"] body.single main#wr-main .wr-crumbs,
[data-wr-theme="dark"] body.page   main#wr-main .wr-crumbs { border-bottom-color: #2A3D45; }
body.single main#wr-main .wr-crumbs__dom,
body.page   main#wr-main .wr-crumbs__dom { width: 17px; height: 17px; }
body.single main#wr-main .wr-crumbs__kat::before,
body.page   main#wr-main .wr-crumbs__kat::before { width: 17px; height: 17px; }

/* ── kolumna boczna na głównej: najpierw teksty, pod nimi odcinki ── */
main#wr-main .wr-latest--czas .wr-latest__item { gap: .7rem; padding: .62rem 0; }
main#wr-main .wr-latest--czas .wp-block-post-title { font-size: .95rem; line-height: 1.34; }
.wr-sluch__all--blok { display: inline-block; margin-top: .7rem; }
main#wr-main .wr-podlista .wr-latest__item { padding: .6rem 0; }

/* ══════════════════════════════════════════════════════════════
   v1.35 – DOMKNIĘCIE STREFY OTWARCIA NA STRONIE GŁÓWNEJ
   Hero sam w kolumnie miał 431 px, a lista obok 1163 – po lewej
   zostawała pusta płachta na dwie trzecie ekranu. Pod hero wchodzą
   cztery kafle: kolumny się równoważą, a otwarcie strony przestaje
   być jednym zdjęciem i listą linków.
   ══════════════════════════════════════════════════════════════ */

main#wr-main .wr-podhero { margin-top: 1.4rem; }
main#wr-main .wr-podhero .wr-cardgrid { gap: 1.4rem 1.5rem; }

/* kafle pod hero są mniejsze od tych w działach – to drugi plan,
   nie powtórzenie sekcji */
main#wr-main .wr-podhero .wr-card .wp-block-post-title { font-size: 1.02rem; line-height: 1.3; }
main#wr-main .wr-podhero .wr-card .wp-block-post-excerpt {
  font-size: .86rem;
  line-height: 1.5;
  margin-top: .35rem;
}
main#wr-main .wr-podhero .wr-card__autor { font-size: .74rem; }
main#wr-main .wr-podhero .wr-card__autor .wr-autor__foto { width: 21px; height: 21px; }

@media (max-width: 781px) {
  main#wr-main .wr-podhero .wr-cardgrid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   v1.37 – NAGŁÓWEK NA TELEFONIE: SYGNET WRACA NA ŚRODEK
   Po przejściu paska na siatkę (logo | szukajka | akcje) na wąskim
   ekranie wypadła środkowa kolumna z ukrytą wyszukiwarką i układ się
   rozjechał: znak uciekł w prawo, a przyciski stanęły po lewej.
   Na telefonie wracamy do pierwotnego układu z sygnetem na osi.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  .wr-topbar {
    grid-template-columns: 1fr auto 1fr;
    gap: .4rem;
  }
  .wr-topbar .wr-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
  }
  .wr-topbar .wr-hact {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  /* wyszukiwarka na telefonie siedzi w menu pod hamburgerem – tu tylko
     pilnujemy, żeby nie zajmowała kolumny w siatce */
  .wr-topbar .wr-hsearch { display: none; }
  .wr-logo__mark { width: 76px; height: 76px; }
  header.is-chudy .wr-logo__mark { width: 46px; height: 46px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.38 – KAFLE Z ZAOKRĄGLENIEM, DASZKI ZAMIAST STRZAŁEK
   ══════════════════════════════════════════════════════════════ */

/* Jeden promień dla wszystkich kafli – dotąd zaokrąglone było tylko hero,
   przez co siatka wyglądała jak zlepek dwóch systemów. */
main#wr-main .wr-card {
  border-radius: 14px;
  overflow: hidden;
}
main#wr-main .wr-card .wp-block-post-featured-image,
main#wr-main .wr-card .wp-block-post-featured-image img { border-radius: 0; }
main#wr-main .wr-cardgrid > li:first-child .wr-card { border-radius: 18px; }

/* Kafel pierwszy pod hero brał jeszcze rozmiar tytułu z reguły hero –
   stąd jeden kafel z tytułem o klasę większym niż sąsiad. */
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-title {
  font-size: 1.02rem;
  line-height: 1.3;
}

/* ── daszek zamiast strzałki ──────────────────────────────────
   Połowa rombu z sygnetu: kwadrat obrócony o 45°, z którego zostają
   dwa boki. Kąty proste bez zaokrągleń – tak samo jak w znaku. */
.wr-daszek {
  display: inline-block;
  width: .4em; height: .4em;
  margin-left: .5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-.06em, .06em);
  transition: transform .15s ease;
}
a:hover > .wr-daszek { transform: rotate(45deg) translate(.02em, -.02em); }

/* reklama domykająca kolumnę boczną strony głównej */
main#wr-main .wr-aside--glowna .wr-ad--rect { margin-top: 1.6rem; }

/* Cofnięcia hero (kafle pod hero, kolejne strony listy) zerowały też promień –
   a zaokrąglenie ma być na każdym kaflu, niezależnie od jego roli. */
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card,
body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card { border-radius: 14px; }

/* ══════════════════════════════════════════════════════════════
   v1.39 – JEDEN PROMIEŃ W CAŁYM SERWISIE
   Zaokrąglenie przestaje być cechą kafla, a staje się cechą każdego
   bloku, który ma własne tło albo ramkę. Trzy wartości, nie więcej:
   18 px – bloki otwierające (hero działu, newsletter),
   14 px – kafle, boksy i reklamy,
    10 px – drobiazgi (miniatury w listach).
   ══════════════════════════════════════════════════════════════ */
:root { --wr-r-duzy: 18px; --wr-r: 14px; --wr-r-maly: 10px; }

/* newsletter – blok otwierający, więc większy promień; `overflow` żeby
   koralowy panel ze znakiem obciął się razem z ramką */
.wr-newsletter__frame {
  border-radius: var(--wr-r-duzy);
  overflow: hidden;
}

/* reklamy: makieta jest obrazkiem w linku, więc promień musi dostać
   i link, i sam obraz – inaczej róg obrazu wystaje poza zaokrąglenie */
.wr-ad__link { border-radius: var(--wr-r); overflow: hidden; display: inline-block; }
.wr-ad img { border-radius: var(--wr-r); }
main#wr-main .wr-aside .wr-ad--rect img,
main#wr-main .wr-aside--glowna .wr-ad--rect img { border-radius: var(--wr-r); }

/* boksy w kolumnach bocznych i w treści */
main#wr-main .wr-side-pi,
main#wr-main .wr-social--card,
main#wr-main .wr-empty,
main#wr-main .wr-comment,
main#wr-main .wr-alertbar { border-radius: var(--wr-r); }
main#wr-main .wr-alertbar { overflow: hidden; }

/* kafle w sekcjach na stronie głównej – te same rogi co karty w działach */
main#wr-main .wr-mix__item {
  border-radius: var(--wr-r);
  overflow: hidden;
}
/* Kafel przycina zawartość sam, więc zdjęcie główne nie potrzebuje własnych
   rogów. Reguła celuje wyłącznie w nie – wcześniej brała każdy obrazek
   w kaflu, także zdjęcie autora, i robiła z kółka kwadrat. */
main#wr-main .wr-mix__item .wp-block-post-featured-image img { border-radius: 0; }

/* miniatury w listach i kafle podcastów */
main#wr-main .wr-latest__foto img,
main#wr-main .wr-podlista .wr-latest__foto img { border-radius: var(--wr-r-maly); }

/* przyciski stronicowania w rytmie pigułek z filtrów */
main#wr-main .wr-pagination a,
main#wr-main .wr-pagination .page-numbers {
  border-radius: 999px;
  padding: .38rem .8rem;
}

/* pola formularzy: newsletter ma już pigułkę, komentarze były kanciaste */
main#wr-main .wr-comments input[type="text"],
main#wr-main .wr-comments input[type="email"],
main#wr-main .wr-comments input[type="url"],
main#wr-main .wr-comments textarea { border-radius: var(--wr-r); }
main#wr-main .wr-comments input[type="submit"],
main#wr-main .wr-comments .submit { border-radius: 999px; }

/* ══════════════════════════════════════════════════════════════
   v1.40 – RÓWNANIE STREFY OTWARCIA I MIEJSCOWOŚCI PRZY TREŚCI
   1. Blok „Do słuchania" ma kończyć się dokładnie tam, co hero obok
      – ściśnięty rytm listy odcinków, mniejsza miniatura, zwarte
      napisy. Zmierzone: 707 px wobec 706 px hero.
   2. „Najnowsze" skrócone do czterech pozycji, żeby reklama pod nimi
      domykała kolumnę równo z kaflami po lewej (1570 = 1570).
   3. Pigułki miejscowości wracają do lewej i siadają nad pierwszym
      materiałem – jak pasek działów w serwisach ogólnopolskich.
   ══════════════════════════════════════════════════════════════ */

main#wr-main .wr-podlista .wr-latest__item { padding: .3rem 0; gap: .55rem; }
main#wr-main .wr-podlista .wr-latest__foto { flex: 0 0 58px; width: 58px; }
main#wr-main .wr-podlista .wr-latest__tresc .wp-block-post-title {
  font-size: .84rem;
  line-height: 1.28;
  margin: 0;
}
main#wr-main .wr-podlista .wr-latest__data { font-size: .7rem; margin-top: .15rem; }
main#wr-main .wr-aside--glowna .wr-sluch { margin-top: .65rem; }

/* miejscowości do lewej – rząd zaczyna się tam, gdzie zdjęcie pod nim */
main#wr-main .wr-gfiltr--dzial {
  justify-content: flex-start;
  margin: 0 0 1rem;
}

/* Cofnięcie reguł hero dla kafli pod hero było niepełne: zdejmowałem układ
   i promień, ale nie wracałem z tłem ani ramką, które hero celowo gasi.
   Efekt: pierwszy kafel w rzędzie stał bez pudełka, a jego tekst zaczynał
   się przy krawędzi zdjęcia zamiast w środku karty. */
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card,
body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card {
  background: #fff;
  border: 1px solid #ECEBE7;
}
[data-wr-theme="dark"] main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card,
[data-wr-theme="dark"] body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card {
  background: #16262C;
  border-color: #2A3D45;
}

/* Punkt Informacyjny wszedł w środek kolumny artykułu (zamiana miejscami
   z listą „Najnowsze"), więc potrzebuje odstępu od bloku nad sobą – jako
   ostatni element kolumny brał go z marginesu poprzednika. */
body.single main#wr-main .wr-aside .wr-side-pi { margin-top: 1.8rem; }
body.single main#wr-main .wr-aside .wr-social--card { margin-top: 1.8rem; }

/* Ostatnie dwa echa reguł hero w kaflach pod hero: nadtytuł i tytuł miały
   wyzerowane marginesy boczne (w hero tekst leży na zdjęciu, więc wcięcie
   jest zbędne). W zwykłym kaflu to wcięcie JEST karty wnętrzem – bez niego
   pierwszy kafel w rzędzie zaczynał napisy przy samej krawędzi. */
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wr-card__cat,
body.paged main#wr-main .wr-cardgrid > li:first-child .wr-card__cat {
  margin: .8rem .9rem 0;
}
main#wr-main .wr-podhero .wr-cardgrid > li:first-child .wp-block-post-title,
body.paged main#wr-main .wr-cardgrid > li:first-child .wp-block-post-title {
  margin: .35rem .9rem !important;
}

/* ══════════════════════════════════════════════════════════════
   v1.42 – STRONY STAŁE W LEKKIM UKŁADZIE
   Szablon strony zszedł z kremowej ramy i wyśrodkowanego Cinzela na
   ten sam rytm co artykuł: ścieżka, tytuł Rubikiem do lewej, kolumna
   tekstu o czytelnej mierze. Ale samo zdjęcie ramy nie wystarczyło –
   tytuł i treść startowały w dwóch różnych miejscach, bo obie grupy
   są „constrained" i WordPress centruje je w kontenerze 1200 px.
   ══════════════════════════════════════════════════════════════ */
/* UWAGA: zerowanie marginesu na samej grupie nagłówka wyrzuciło tytuł na
   krawędź okna – grupa liczy margines względem <main>, które idzie przez
   całą szerokość. Kolumna 1200 px musi więc zostać wyśrodkowana, a do lewej
   równa się dopiero zawartość wewnątrz niej. */
/* Literalne 1200 px, NIE `--wp--style--global--content-size`: ta zmienna ma
   na stronach wartość 720 i grupa nagłówka zwężała się razem z tytułem,
   przez co tytuł stawał 240 px na prawo od ścieżki. */
body.page main#wr-main .wr-page-header {
  max-width: 1200px !important;
  margin-inline: auto !important;
}
body.page main#wr-main .wr-page-header > * {
  max-width: 820px;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.page main#wr-main .wp-block-post-content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.page main#wr-main h1.wp-block-post-title {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: left;
  margin: 0 0 1.4rem !important;
}
/* stare tło „ramy z pasa" nie ma już czego trzymać */
body.page main#wr-main h1.wp-block-post-title,
body.page main#wr-main h1.wp-block-post-title::before,
body.page main#wr-main h1.wp-block-post-title::after {
  background: none;
  border: 0;
  padding: 0;
  content: none;
}
body.page main#wr-main .wr-page-header { padding: 0; }

/* Śródtytuły w treści stron też Rubikiem – zasada „Cinzel tylko do nazw
   kategorii i logo" obowiązuje również wewnątrz stron stałych. */
body.page main#wr-main .wp-block-post-content h2,
body.page main#wr-main .wp-block-post-content h3,
body.page main#wr-main .wp-block-post-content h4 {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  letter-spacing: normal;
}

/* trzy piksele, o które reklama wystawała poniżej ostatnich kafli */
main#wr-main .wr-aside--glowna .wr-ad--rect { margin-top: 1.42rem; }

/* ══════════════════════════════════════════════════════════════
   v1.43 – REKLAMA PRZYKLEJONA DO DOŁU I FASOLKI W JEDNEJ LINII
   ══════════════════════════════════════════════════════════════ */

/* Dobieranie liczby pozycji w „Najnowszych" tak, żeby reklama kończyła się
   równo z kaflami, działa tylko przy jednej szerokości okna – wyżej lub niżej
   tytuły łamią się inaczej i dół się rozjeżdża. Zamiast liczyć piksele,
   przyklejamy reklamę do dna kolumny: kolumna i tak rozciąga się do wysokości
   sąsiada, więc `margin-top: auto` domyka sekcję na każdym ekranie. */
main#wr-main .wr-aside--glowna {
  display: flex;
  flex-direction: column;
}
main#wr-main .wr-aside--glowna .wr-ad--rect { margin-top: auto !important; }

/* Fasolki miejscowości jadą w jednej linii i przewijają się w bok – tak samo
   jak pasek działów. Zawijanie do drugiego rzędu przesuwało wszystko poniżej
   i sekcje traciły wspólną linię startu. */
main#wr-main .wr-gfiltr--dzial {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* miejsce na cień przewijania, żeby ostatnia pigułka nie kleiła się do brzegu */
  padding-right: .2rem;
}
main#wr-main .wr-gfiltr--dzial::-webkit-scrollbar { display: none; }
main#wr-main .wr-gfiltr--dzial > a { flex: 0 0 auto; }

/* Strony stałe idą na pełną szerokość kolumny (1200 px), nie na wąską miarę
   artykułu. Tam liczy się komfort czytania długiego tekstu, tutaj – cenniki,
   tabele i listy kontaktów, które przy 820 px łamały się bez potrzeby. */
body.page main#wr-main .wr-page-header > *,
body.page main#wr-main .wp-block-post-content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  max-width: 1200px !important;   /* motyw rodzica trzyma tu 680 px */
}
body.page main#wr-main .wp-block-post-content { max-width: 1200px !important; }

/* ══════════════════════════════════════════════════════════════
   v1.44 – STRONA REKLAMY: PAKIETY, TABELE, KALKULATOR
   Cennik pozycja po pozycji jest potrzebny, ale nikt nie zaczyna
   od tabeli – zaczyna od pytania „ile mnie to będzie kosztować".
   Stąd trzy pakiety na wejściu, cennik szczegółowy niżej jako
   materiał do sprawdzenia, a kalkulator wyróżniony tak, żeby było
   widać, że można policzyć samemu.
   ══════════════════════════════════════════════════════════════ */

.wr-pakiety {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0 2.6rem;
  align-items: start;
}
@media (max-width: 900px) { .wr-pakiety { grid-template-columns: 1fr; } }

.wr-pak {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECEBE7;
  border-radius: var(--wr-r, 14px);
  padding: 1.5rem 1.4rem 1.4rem;
  font-family: 'Rubik', sans-serif;
}
/* Wariant polecany wychodzi przed szereg – koralowa obwódka zamiast
   innego tła, żeby karta nie zaczęła krzyczeć kolorem. */
.wr-pak--polecany {
  border: 1.5px solid var(--wr-coral);
  box-shadow: 0 10px 30px rgba(230,89,86,.12);
}
.wr-pak__wstazka {
  position: absolute; top: -.75rem; left: 1.4rem;
  background: var(--wr-coral); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.wr-pak__nazwa {
  display: block;
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wr-koral-text, #C44C4A);
}
.wr-pak__dla { margin: .4rem 0 0; font-size: .88rem; line-height: 1.45; color: #5c6f76; }
.wr-pak__cena {
  margin: 1.1rem 0 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
}
.wr-pak__cena strong { font-size: 1.9rem; font-weight: 700; color: var(--wr-graphite); line-height: 1; }
.wr-pak__cena span { font-size: .82rem; color: #5c6f76; }
.wr-pak__lista { list-style: none; margin: 1.1rem 0 0; padding: 0; }
/* Siatka, nie flex: nazwa pozycji jest gołym tekstem między daszkiem
   a ceną, więc przy `space-between` rozjeżdżała się na środek wiersza.
   W gridzie tekst dostaje własną kolumnę i trzyma się lewej. */
.wr-pak__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .5rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(43,66,73,.08);
  font-size: .88rem; line-height: 1.4; text-align: left;
}
.wr-pak__lista li::before {
  content: "";
  width: .34em; height: .34em; margin-top: .38em;
  border-top: 1.5px solid var(--wr-coral); border-right: 1.5px solid var(--wr-coral);
  transform: rotate(45deg);
}
.wr-pak__lista li em { font-style: normal; color: #92a5ab; white-space: nowrap; }
.wr-pak__rabat {
  margin: .9rem 0 1.2rem; font-size: .82rem; color: #5c6f76;
}
.wr-pak__rabat strong { color: var(--wr-graphite); }
.wr-pak__rabat span { color: var(--wr-koral-text, #C44C4A); font-weight: 600; }
.wr-pak__cta {
  margin-top: auto; align-self: flex-start;
  background: rgba(230,89,86,.12);
  color: var(--wr-koral-text, #C44C4A);
  border: 1px solid rgba(230,89,86,.45);
  border-radius: 999px;
  padding: .6rem 1.2rem;
  font-size: .86rem; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.wr-pak--polecany .wr-pak__cta { background: var(--wr-coral); color: #fff; border-color: var(--wr-coral); }
.wr-pak__cta:hover { background: var(--wr-coral); border-color: var(--wr-coral); color: #fff; }

[data-wr-theme="dark"] .wr-pak { background: #16262C; border-color: #2A3D45; }
[data-wr-theme="dark"] .wr-pak__cena strong,
[data-wr-theme="dark"] .wr-pak__rabat strong { color: var(--wr-cream); }

/* ── tabele cennika ─────────────────────────────────────────── */
body.page main#wr-main .wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ECEBE7;
  border-radius: var(--wr-r, 14px);
  overflow: hidden;
  font-family: 'Rubik', sans-serif;
  font-size: .92rem;
}
body.page main#wr-main .wp-block-table thead th {
  background: var(--wr-cream);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #5c6f76; text-align: left; padding: .85rem 1rem; border: 0;
}
body.page main#wr-main .wp-block-table td {
  padding: .85rem 1rem; border: 0;
  border-top: 1px solid rgba(43,66,73,.08);
  vertical-align: top;
}
body.page main#wr-main .wp-block-table tbody tr:hover td { background: rgba(230,89,86,.04); }
/* kolumna z ceną – zawsze ostatnia, zawsze wyróżniona i nierozrywana */
body.page main#wr-main .wp-block-table td:last-child {
  font-weight: 600; color: var(--wr-graphite); white-space: nowrap;
}
[data-wr-theme="dark"] body.page main#wr-main .wp-block-table table { border-color: #2A3D45; }
[data-wr-theme="dark"] body.page main#wr-main .wp-block-table thead th { background: #16262C; }
[data-wr-theme="dark"] body.page main#wr-main .wp-block-table td { border-top-color: #2A3D45; color: var(--wr-cream); }

/* ── kalkulator: ma być widać, że to narzędzie, nie akapit ──────
   Selektor z `body.page` bije regułę z bloku `<style>` na stronie
   (tam jest `main#wr-main #wrkalk`), więc nie trzeba `!important`. */
body.page main#wr-main #wrkalk {
  /* Kalkulator idzie na pełną szerokość kolumny, tak jak tabele cennika –
     zwężony do 900 px wyglądał jak wstawka z innej strony.
     Górny margines robi miejsce na wstążkę, która wcześniej siadała
     na akapicie nad ramką. */
  max-width: 1200px !important;
  margin: 2.4rem auto 0 !important;
  padding: 2.2rem;
  border: 1.5px solid rgba(230,89,86,.35);
  border-radius: var(--wr-r-duzy, 18px);
  box-shadow: 0 16px 44px rgba(43,66,73,.1);
  position: relative;
}
body.page main#wr-main #wrkalk::before {
  content: "Zbuduj swoją kampanię";
  position: absolute; top: -.8rem; left: 2.2rem;
  background: var(--wr-coral); color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .34rem .8rem; border-radius: 999px;
}
body.page main#wr-main #wrkalk .q,
body.page main#wr-main #wrkalk .card h3 { font-family: 'Rubik', sans-serif; }

/* ═══════════════════════════════════════════════════════════════
 * v1.46 – konfigurator kampanii reklamowej na /reklama/
 * Markup siedzi w treści strony (blok core/html), logika w
 * assets/js/kalkulator.js. Tutaj tylko wygląd.
 * ═══════════════════════════════════════════════════════════════ */
/* Zbuduj swoją kampanię – konfigurator wyceny, wramach.com (2026-08) */
main#wr-main #wrkalk{--wrk-koral:#E65956;--wrk-grafit:#2B4249;--wrk-limonka:#96BC00;--wrk-krem:#FAF2E5;--wrk-popiel:#65757B;--wrk-linia:#e7ded1;font-family:"Rubik","Source Sans 3","Segoe UI",sans-serif;color:var(--wrk-grafit);background:#fff}
main#wr-main #wrkalk *{box-sizing:border-box}
main#wr-main #wrkalk .hid{display:none!important}
main#wr-main #wrkalk .wrk-uklad{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:30px;align-items:start}
@media (max-width:900px){main#wr-main #wrkalk .wrk-uklad{grid-template-columns:1fr;gap:24px}}

/* --- katalog --- */
main#wr-main #wrkalk .wrk-grupa{margin:0 0 26px}
main#wr-main #wrkalk .wrk-grupa>h3{font-family:"Rubik",sans-serif;font-size:1.0625rem;font-weight:700;margin:0 0 4px;letter-spacing:0}
main#wr-main #wrkalk .wrk-grupa>p.wrk-opis{font-size:.875rem;color:var(--wrk-popiel);margin:0 0 12px}
main#wr-main #wrkalk .wrk-poz{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 16px;margin:0 0 8px;border:1.5px solid var(--wrk-linia);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s}
main#wr-main #wrkalk .wrk-poz:hover{border-color:var(--wrk-koral);background:#fffaf9}
main#wr-main #wrkalk .wrk-poz.is-w{border-color:var(--wrk-koral);background:#fdf1f0}
main#wr-main #wrkalk .wrk-poz__tx{grid-column:1;min-width:0}
main#wr-main #wrkalk .wrk-poz__t{display:block;font-weight:600;font-size:.9375rem;line-height:1.35}
main#wr-main #wrkalk .wrk-poz__o{display:block;font-size:.8125rem;color:var(--wrk-popiel);margin-top:1px}
main#wr-main #wrkalk .wrk-poz__c{font-size:.8125rem;font-weight:700;color:var(--wrk-koral);white-space:nowrap}
main#wr-main #wrkalk .wrk-poz__d{width:28px;height:28px;flex:0 0 28px;border-radius:999px;background:var(--wrk-koral);color:#fff;display:grid;place-items:center;font-size:1.125rem;font-weight:700;line-height:1}
main#wr-main #wrkalk .wrk-poz.is-w .wrk-poz__d{background:var(--wrk-limonka)}

/* --- pakiety w konfiguratorze --- */
main#wr-main #wrkalk .wrk-pak3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 10px}
@media (max-width:760px){main#wr-main #wrkalk .wrk-pak3{grid-template-columns:1fr}}
main#wr-main #wrkalk .wrk-pk{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:16px;border:1.5px solid var(--wrk-linia);border-radius:14px;background:var(--wrk-krem);cursor:pointer;font:inherit;color:inherit;transition:border-color .15s}
main#wr-main #wrkalk .wrk-pk:hover{border-color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-pk.is-w{border-color:var(--wrk-limonka);background:#f4f8e6}
main#wr-main #wrkalk .wrk-pk__n{font-weight:700;font-size:1rem}
main#wr-main #wrkalk .wrk-pk__c{font-weight:800;font-size:1.25rem;color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-pk__o{font-size:.8125rem;color:var(--wrk-popiel)}
main#wr-main #wrkalk .wrk-pk__d{margin-top:8px;font-size:.8125rem;font-weight:700;color:var(--wrk-grafit);border-bottom:2px solid var(--wrk-koral)}

/* --- panel --- */
main#wr-main #wrkalk .wrk-panel{position:sticky;top:96px}
@media (max-width:900px){main#wr-main #wrkalk .wrk-panel{position:static}}
main#wr-main #wrkalk .wrk-panel__in{border:1.5px solid var(--wrk-linia);border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(43,66,73,.08);overflow:hidden}
main#wr-main #wrkalk .wrk-panel__h{background:var(--wrk-grafit);color:#fff;padding:14px 18px;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:10px}
main#wr-main #wrkalk .wrk-panel__h b{background:rgba(255,255,255,.16);border-radius:999px;padding:2px 10px;font-size:.8125rem}
main#wr-main #wrkalk .wrk-panel__b{padding:16px 18px}
main#wr-main #wrkalk .wrk-pusto{font-size:.875rem;color:var(--wrk-popiel);margin:6px 0 4px;line-height:1.5}
main#wr-main #wrkalk .wrk-lista{list-style:none;margin:0 0 4px;padding:0}
main#wr-main #wrkalk .wrk-lin{padding:10px 0;border-bottom:1px solid #f0e9de}
main#wr-main #wrkalk .wrk-lin__g{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
main#wr-main #wrkalk .wrk-lin__n{font-size:.875rem;font-weight:600;line-height:1.35}
main#wr-main #wrkalk .wrk-lin__n em{display:block;font-style:normal;font-weight:400;font-size:.75rem;color:var(--wrk-limonka)}
main#wr-main #wrkalk .wrk-lin__x{flex:0 0 auto;border:none;background:none;cursor:pointer;color:var(--wrk-popiel);font-size:1.125rem;line-height:1;padding:0 2px}
main#wr-main #wrkalk .wrk-lin__x:hover{color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-lin__d{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
main#wr-main #wrkalk .wrk-lin__c{font-size:.875rem;font-weight:700;white-space:nowrap}
main#wr-main #wrkalk .wrk-lin select{border:1.5px solid var(--wrk-linia);border-radius:8px;padding:4px 6px;font:inherit;font-size:.75rem;color:var(--wrk-grafit);background:#fff;max-width:170px}
main#wr-main #wrkalk .wrk-ile{display:flex;align-items:center;gap:6px}
main#wr-main #wrkalk .wrk-ile button{width:24px;height:24px;border:1.5px solid var(--wrk-linia);border-radius:7px;background:#fff;cursor:pointer;font:inherit;font-size:.875rem;line-height:1;color:var(--wrk-grafit)}
main#wr-main #wrkalk .wrk-ile button:hover{border-color:var(--wrk-koral);color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-ile b{font-size:.8125rem;min-width:44px;text-align:center}

/* --- rabat --- */
main#wr-main #wrkalk .wrk-rab{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:var(--wrk-krem);border:1.5px solid transparent}
main#wr-main #wrkalk .wrk-rab__pas{height:7px;border-radius:999px;background:#e7ded1;overflow:hidden;margin-bottom:8px}
main#wr-main #wrkalk .wrk-rab__pas i{display:block;height:100%;background:var(--wrk-koral);border-radius:999px;transition:width .25s ease}
main#wr-main #wrkalk .wrk-rab__t{font-size:.8125rem;line-height:1.4;margin:0;color:var(--wrk-grafit)}
main#wr-main #wrkalk .wrk-rab__t b{color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-rab.is-on{background:#f4f8e6;border-color:var(--wrk-limonka)}
main#wr-main #wrkalk .wrk-rab.is-on .wrk-rab__pas i{background:var(--wrk-limonka)}
main#wr-main #wrkalk .wrk-rab__z{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9375rem;color:#4e6600;margin:0 0 4px}
main#wr-main #wrkalk .wrk-rab__z span{background:var(--wrk-limonka);color:#fff;border-radius:999px;padding:2px 10px;font-size:.8125rem}

/* --- umowa --- */
main#wr-main #wrkalk .wrk-umowa{margin:16px 0 4px}
main#wr-main #wrkalk .wrk-umowa>p{font-size:.8125rem;font-weight:600;margin:0 0 6px}
main#wr-main #wrkalk .wrk-umowa__r{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
main#wr-main #wrkalk .wrk-umowa__r button{padding:8px 4px;border:1.5px solid var(--wrk-linia);border-radius:10px;background:#fff;cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;color:var(--wrk-grafit);line-height:1.25}
main#wr-main #wrkalk .wrk-umowa__r button small{display:block;font-weight:700;font-size:.6875rem;color:var(--wrk-limonka)}
main#wr-main #wrkalk .wrk-umowa__r button:hover{border-color:var(--wrk-koral)}
main#wr-main #wrkalk .wrk-umowa__r button.is-w{border-color:var(--wrk-koral);background:#fdf1f0}

/* --- sumy --- */
main#wr-main #wrkalk .wrk-sumy{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid #f0e9de}
main#wr-main #wrkalk .wrk-sumy li{display:flex;justify-content:space-between;gap:10px;font-size:.8125rem;padding:3px 0;color:var(--wrk-popiel)}
main#wr-main #wrkalk .wrk-sumy li b{color:var(--wrk-grafit);font-weight:600}
main#wr-main #wrkalk .wrk-sumy li.wrk-minus,main#wr-main #wrkalk .wrk-sumy li.wrk-minus b{color:#4e6600;font-weight:700}
main#wr-main #wrkalk .wrk-razem{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--wrk-linia)}
main#wr-main #wrkalk .wrk-razem__l{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--wrk-popiel)}
main#wr-main #wrkalk .wrk-razem__k{font-size:1.5rem;font-weight:800;color:var(--wrk-koral);line-height:1.2;margin:2px 0}
main#wr-main #wrkalk .wrk-razem__k small{font-size:.875rem;font-weight:600;color:var(--wrk-grafit)}
main#wr-main #wrkalk .wrk-razem__b{font-size:.8125rem;color:var(--wrk-popiel)}
main#wr-main #wrkalk .wrk-cta{display:block;width:100%;margin-top:14px;border:none;border-radius:999px;padding:13px 18px;font:inherit;font-weight:700;font-size:.9375rem;background:var(--wrk-koral);color:#fff;cursor:pointer}
main#wr-main #wrkalk .wrk-cta:hover{background:#d24845}
main#wr-main #wrkalk .wrk-cta:disabled{opacity:.45;cursor:default}
main#wr-main #wrkalk .wrk-czysc{display:block;width:100%;margin-top:8px;border:none;background:none;font:inherit;font-size:.8125rem;color:var(--wrk-popiel);cursor:pointer;text-decoration:underline}

/* --- belka mobilna --- */
main#wr-main #wrkalk .wrk-belka{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--wrk-grafit);color:#fff;box-shadow:0 -6px 24px rgba(43,66,73,.24)}
main#wr-main #wrkalk .wrk-belka span{font-size:.8125rem;line-height:1.3}
main#wr-main #wrkalk .wrk-belka b{display:block;font-size:1rem;font-weight:800}
main#wr-main #wrkalk .wrk-belka button{border:none;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;font-size:.875rem;background:var(--wrk-koral);color:#fff;cursor:pointer;white-space:nowrap}
@media (max-width:900px){main#wr-main #wrkalk .wrk-belka.is-on{display:flex}main#wr-main #wrkalk .wrk-form{padding-bottom:84px}}

/* --- formularz --- */
main#wr-main #wrkalk .wrk-form{margin-top:34px;border-top:1.5px solid var(--wrk-linia);padding-top:28px}
main#wr-main #wrkalk .wrk-form>h3{font-size:1.25rem;margin:0 0 4px}
main#wr-main #wrkalk .hint{color:var(--wrk-popiel);font-size:.875rem;margin:0 0 18px}
main#wr-main #wrkalk .field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
main#wr-main #wrkalk .field label{font-size:.8125rem;font-weight:600}
main#wr-main #wrkalk .field input,main#wr-main #wrkalk .field textarea{border:1.5px solid var(--wrk-linia);border-radius:10px;padding:10px 12px;font:inherit;color:var(--wrk-grafit);background:#fff}
main#wr-main #wrkalk .field input:focus,main#wr-main #wrkalk .field textarea:focus{outline:none;border-color:var(--wrk-koral);box-shadow:0 0 0 3px rgba(230,89,86,.18)}
main#wr-main #wrkalk .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){main#wr-main #wrkalk .row2{grid-template-columns:1fr}}
main#wr-main #wrkalk .nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
main#wr-main #wrkalk .btn{border:none;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;font-size:.9375rem;cursor:pointer;background:var(--wrk-koral);color:#fff}
main#wr-main #wrkalk .btn:hover{background:#d24845}
main#wr-main #wrkalk .btn:disabled{opacity:.6;cursor:default}
main#wr-main #wrkalk .btn.ghost{background:#fff;color:var(--wrk-grafit);border:1.5px solid var(--wrk-linia)}
main#wr-main #wrkalk .btn.ghost:hover{border-color:var(--wrk-koral);color:var(--wrk-koral)}
main#wr-main #wrkalk .zgoda{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;color:var(--wrk-popiel);padding:12px;border-radius:10px;margin:14px 0}
main#wr-main #wrkalk .zgoda.brak{background:#fdf1f0;outline:1.5px solid #f2b9b7}
main#wr-main #wrkalk .zgoda input{margin-top:2px}
main#wr-main #wrkalk details.rodo{font-size:.8125rem;color:var(--wrk-popiel);margin:0 0 14px}
main#wr-main #wrkalk details.rodo summary{cursor:pointer;font-weight:600;color:var(--wrk-grafit)}
main#wr-main #wrkalk details.rodo p{margin:8px 0 0}
main#wr-main #wrkalk pre.sum{white-space:pre-wrap;font:.8125rem/1.5 ui-monospace,monospace;background:var(--wrk-krem);border-radius:10px;padding:14px;margin:0}
main#wr-main #wrkalk #wrk-info{border:1.5px solid;border-radius:10px;padding:12px 14px;margin-top:14px;font-size:.875rem}
main#wr-main #wrkalk .note{font-size:.8125rem;color:var(--wrk-popiel);margin:18px 0 0}

/* ══════════════════════════════════════════════════════════════
   v1.47 – NAGŁÓWEK NA TELEFONIE: TRYB PO LEWEJ, HAMBURGER PO PRAWEJ
   Dotąd oba przyciski stały w jednej kolumnie po prawej, więc sygnet
   był wprawdzie na osi siatki, ale optycznie ciążył w lewo. Rozdzielamy
   je na skrajne kolumny: `display: contents` na wrapperze sprawia, że
   przycisk trybu i hamburger stają się bezpośrednimi elementami siatki
   i można je posadzić w kolumnie 1 i 3.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  .wr-topbar .wr-hact { display: contents; }
  .wr-topbar .wr-hact > .wr-utils { display: none; }   /* bazy są w menu pod hamburgerem */
  .wr-topbar .wr-hact > .wr-mode {
    grid-column: 1; grid-row: 1;
    justify-self: start;
  }
  .wr-topbar .wr-hact > .wr-mobilenav {
    grid-column: 3; grid-row: 1;
    justify-self: end;
  }
  /* v1.53: panel jest już pełnoekranowy (`position: fixed; inset: 0`),
     więc kotwiczenie go pod hamburgerem nie ma sensu – a zostawione tu
     `left: auto` biło specyficznością późniejszą regułę i spychało menu
     o 28 px w prawo. Zdjęte świadomie, nie przez przeoczenie. */
}

/* ── Meander bliżej konceptu z brand booka: wyraźniejszy i większy ──
   Kafel ma proporcje 72×26, więc skalujemy oba wymiary w tej samej
   proporcji, żeby ornament się nie rozjechał. */
.wr-meanderbar { height: 38px; margin-bottom: -13px; }
.wr-meanderbar::before { background-size: 105px 38px; opacity: .78; }
@media (max-width: 781px) {
  .wr-meanderbar { height: 26px; margin-bottom: -9px; }
  .wr-meanderbar::before { background-size: 72px 26px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.48 – STREFA OTWARCIA SEKCJI AKTUALNOŚCI
   Proporcje wzorem serwisów, które otwierają dział jednym dużym
   materiałem: lead na trzech czwartych szerokości, slot reklamowy
   obok, a pod spodem rząd czterech równych kafli. Reklamę dokłada
   filtr PHP jako ostatni element listy, więc sadzamy ją na siatce
   jawnie – kolejność w DOM nie ma tu znaczenia.
   ══════════════════════════════════════════════════════════════ */
main#wr-main .wr-mixzone--otwarcie {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 1.4rem;
  row-gap: 1.8rem;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
main#wr-main .wr-mixzone--otwarcie > li.wr-mix__reklama { grid-column: 4; grid-row: 1; }
main#wr-main .wr-mixzone--otwarcie > li:nth-child(n+2):not(.wr-mix__reklama) { grid-row: 2; }

/* ── lead: zdjęcie na całą kartę, tytuł na gradiencie ── */
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__item {
  position: relative;
  height: 100%;
  border-radius: var(--wr-r, 14px);
  overflow: hidden;
  background: var(--wr-graphite, #2B4249);
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-featured-image a,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-featured-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.2rem 1.9rem 1.5rem;
  /* gradient sięga wysoko, żeby tytuł był czytelny także na jasnym zdjęciu */
  background: linear-gradient(to top, rgba(18,30,35,.94) 0%, rgba(18,30,35,.78) 42%, rgba(18,30,35,0) 100%);
  color: #fff;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-title {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.18;
  margin: 0 0 .55rem;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-title a {
  color: #fff;
  -webkit-line-clamp: 3;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-title a:hover { color: #FFD9D8; }
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor a,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-date {
  color: rgba(255,255,255,.86);
  margin-top: 0;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-autor__foto {
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}

/* ── autor w mniejszych kaflach sekcji ── */
main#wr-main .wr-mix__autor {
  font-size: .78rem;
  margin: .35rem 0 0;
}
main#wr-main .wr-mix__item .wp-block-post-date { margin-top: .3rem; }

/* ── slot reklamowy obok leadu ── */
main#wr-main .wr-mix__reklama { display: flex; }
main#wr-main .wr-ad--sekcja {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid rgba(43,66,73,.14);
  border-radius: var(--wr-r, 14px);
  background: var(--wr-cream, #FAF2E5);
}
main#wr-main .wr-ad--sekcja .wr-ad__link { display: block; width: 100%; }
main#wr-main .wr-ad--sekcja img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--wr-r-maly, 10px);
}
[data-wr-theme="dark"] main#wr-main .wr-ad--sekcja {
  background: #16262C;
  border-color: #2A3D45;
}

/* ── telefon: jedna kolumna, lead zostaje pierwszy, reklama pod nim ── */
@media (max-width: 781px) {
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(1),
  main#wr-main .wr-mixzone--otwarcie > li.wr-mix__reklama,
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(n+2):not(.wr-mix__reklama) {
    grid-column: auto;
    grid-row: auto;
  }
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__body {
    padding: 2.4rem 1.2rem 1.1rem;
  }
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-title {
    font-size: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   v1.49 – MEANDER, PASEK PODĄŻAJĄCY, DROBIAZGI STREFY OTWARCIA
   ══════════════════════════════════════════════════════════════ */

/* Meander na desktopie o 30% niższy: 38 → 27 px. Kafel skalujemy w tej
   samej proporcji (105 × 38 → 74 × 27), żeby ornament się nie rozjechał. */
.wr-meanderbar { height: 27px; margin-bottom: -9px; }
.wr-meanderbar::before { background-size: 74px 27px; }

/* Pasek podążający: sygnet o 30% większy (52 → 68 px), a pasek nieco wyższy,
   żeby znak nie dotykał krawędzi i marginesy zostały te same co wcześniej. */
header.is-chudy .wr-topbar { padding: .85rem 0 !important; }
header.is-chudy .wr-logo__mark { width: 68px; height: 68px; }
@media (max-width: 900px) {
  header.is-chudy .wr-logo__mark { width: 52px; height: 52px; }
}
@media (max-width: 781px) {
  header.is-chudy .wr-logo__mark { width: 60px; height: 60px; }
}

/* Autor i data na dużym kaflu leadu: białe na gradiencie. Reguły kolorów
   dla nazwiska i daty siedzą wyżej w pliku i są równie mocne, więc tutaj
   trzeba `!important` – inaczej koralowy tekst ginie na ciemnym zdjęciu. */
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor a,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor span,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-date,
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-readtime {
  color: rgba(255,255,255,.9) !important;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__autor { order: -1; margin: 0 0 .45rem; }
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wr-mix__body {
  display: flex;
  flex-direction: column;
}
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-title { order: 0; }
main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) .wp-block-post-date { order: 1; margin-top: .1rem; }

/* Slot obok leadu dostaje kreację half page 300 × 600 – proporcja 1:2
   wypełnia kolumnę niemal co do piksela, więc nie zostaje pusty krem. */
main#wr-main .wr-ad--sekcja { padding: 0; border: 0; background: transparent; }
main#wr-main .wr-ad--sekcja .wr-ad__link { height: 100%; }
main#wr-main .wr-ad--sekcja img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--wr-r, 14px);
}
[data-wr-theme="dark"] main#wr-main .wr-ad--sekcja { background: transparent; border: 0; }

/* ══════════════════════════════════════════════════════════════
   v1.50 – FASOLKI GMINNE: JEDEN WYGLĄD I JEDNO ZACHOWANIE
   Rzędy przy sekcjach nie miały klasy `--dzial`, więc jako jedyne
   zawijały się do drugiej linii i przesuwały wszystko pod spodem.
   Teraz wszystkie trzy miejsca (nad hero, przy sekcji, na archiwum
   działu) generuje ta sama funkcja PHP, a wymianę treści robi jedna
   ścieżka w JS. Zostaje tylko dopięcie stanu ładowania dla wszystkich
   podmienianych fragmentów, nie samych bloków zapytań.
   ══════════════════════════════════════════════════════════════ */
main#wr-main .is-laduje {
  opacity: .45;
  transition: opacity .12s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   v1.52 – NAPRAWA STREFY OTWARCIA NA TELEFONIE
   Siatkę czterokolumnową ustawiałem selektorem `main#wr-main .wr-mixzone--otwarcie`,
   czyli mocniejszym niż `.wr-mixzone` z motywu rodzica, który na wąskim
   ekranie przełącza się na jedną kolumnę. Efekt: telefon dostawał cztery
   kolumny po ~80 px. Zerowanie `grid-column`/`grid-row` tego nie ratowało,
   bo problemem był sam `grid-template-columns`.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  main#wr-main .wr-mixzone--otwarcie {
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
  }
  /* Reklama wskakuje zaraz za lead, tak jak na desktopie stoi obok niego –
     na końcu listy trafiałaby poniżej progu przewijania. */
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(1) { order: 1; }
  main#wr-main .wr-mixzone--otwarcie > li.wr-mix__reklama { order: 2; }
  main#wr-main .wr-mixzone--otwarcie > li:nth-child(n+2):not(.wr-mix__reklama) { order: 3; }

  main#wr-main .wr-ad--sekcja img { height: auto; }
}

/* Czas czytania na kaflach ma już separator w treści (motyw rodzica wstawia
   „ · 3 min czytania”), więc kropka z pseudoelementu dublowała się – na wąskiej
   karcie zostawały dwie kropki bez tekstu. */
main#wr-main .wr-mix__item .wr-readtime::before { content: none; }

/* ══════════════════════════════════════════════════════════════
   v1.53 – MENU MOBILNE NA PEŁNYM EKRANIE, W JĘZYKU „LIGHT”
   Panel był zwykłą szufladą: `position: absolute` liczoną względem
   kontenera nagłówka, więc zaczynał się 32 px od lewej krawędzi
   (padding kontenera) i kończył na 82% wysokości ekranu. Efekt: pasek
   strony widoczny z boku i pod spodem, treść przebijająca spod menu.
   Zamiast łatać przesunięcie – panel wychodzi z układu nagłówka na
   `position: fixed` i zajmuje cały ekran, z własnym paskiem górnym
   (sygnet + zamknięcie), bo hamburger znika pod panelem.
   ══════════════════════════════════════════════════════════════ */

/* Blokada przewijania strony pod otwartym menu. Klasę zdejmuje skrypt
   nagłówka; bez JavaScriptu menu nadal działa, tylko tło się przewija. */
html.wr-menu-otwarte,
html.wr-menu-otwarte body { overflow: hidden; }

@media (max-width: 781px) {

  .wr-mobilenav__panel {
    position: fixed;
    /* Sam `inset: 0` daje dokładnie wysokość okna – bez podawania `height`,
       bo przy jednoczesnym `top`/`bottom` przeglądarka bierze wysokość i
       panel wystawał poniżej ekranu o kilkadziesiąt pikseli. */
    inset: 0;
    max-height: none;
    width: auto;
    padding: 0 1rem 2.4rem;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 200;
  }

  /* Pasek górny panelu zostaje na ekranie przy przewijaniu listy – inaczej
     przy dłuższym menu nie ma jak wrócić, bo hamburger jest pod spodem. */
  .wr-mobilenav__gora {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -1rem;
    padding: .6rem 1rem;
    background: var(--wr-cream);
    border-bottom: 1px solid rgba(43,66,73,.10);
  }
  .wr-mobilenav__znak { display: flex; }
  .wr-mobilenav__zamknij {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid rgba(43,66,73,.16);
    border-radius: 999px;
    background: transparent;
    color: var(--wr-koral-text, #C44C4A);
    cursor: pointer;
    padding: 0;
  }
  .wr-mobilenav__zamknij:hover,
  .wr-mobilenav__zamknij:focus-visible {
    background: var(--wr-coral);
    border-color: var(--wr-coral);
    color: #fff;
  }

  /* Wyszukiwarka nie klei się już do krawędzi paska górnego. */
  .wr-mobilenav__search { padding: 1rem 0 .3rem; }

  /* Kafle i karty w tym samym promieniu co reszta portalu po przejściu
     na „light” – dotąd menu zostało z własnymi 10 px. */
  .wr-mobilenav__pi,
  .wr-mobilenav__bazy a { border-radius: var(--wr-r, 14px) !important; }

  /* Etykiety grup czytają się jak nagłówki sekcji na stronie, nie jak
     drobny druk: ta sama wielkość, ten sam odstęp literowy. */
  .wr-mobilenav__label {
    font-size: .68rem;
    letter-spacing: .18em;
    padding: 1.2rem 0 .45rem;
    border-bottom: 1px solid rgba(43,66,73,.12);
    margin-bottom: .2rem;
  }

  /* Większe pola dotyku na liście działów i w stopce menu. */
  .wr-mobilenav__cats a,
  .wr-mobilenav__panel > a { padding: .72rem .2rem; }

  .wr-mobilenav .wr-social--menu { margin-top: 1.4rem; }
}

/* Sygnet w pasku panelu nie może dziedziczyć powiększenia z paska
   podążającego – tam romb ma 68 px, tutaj ma być drobny. */
@media (max-width: 781px) {
  header.is-chudy .wr-mobilenav__znak svg { width: 34px; height: 34px; }
}

/* v1.54 – kolejność bloków w menu: najpierw działy, potem Punkt Informacyjny.
   Menu portalu informacyjnego ma zaczynać się od tego, po co ludzie tu
   przychodzą – od materiałów. Bazy zostają wysoko, ale jako druga warstwa,
   z własną etykietą, żeby nie wyglądały na doklejone do listy działów. */

/* ── v1.55 – „Śledź nas" wyśrodkowane na dole menu mobilnego ──
   Blok zamyka panel, więc lewe wyrównanie zostawiało sześć kółek
   przyklejonych do krawędzi i pustkę po prawej. Etykieta idzie na środek
   razem z ikonami – inaczej wyglądałaby jak zapomniana.
   Stopka i kolumna boczna artykułu zostają do lewej: tam blok stoi
   w rytmie sąsiednich kolumn, a nie samotnie na końcu ekranu. */
@media (max-width: 781px) {
  .wr-mobilenav__panel .wr-social--menu { text-align: center; }
  .wr-mobilenav__panel .wr-social--menu .wr-social__row { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   v1.56 – W STOPCE PEŁNY ZNAK Z PACZKI ANTOINE'A
   Dotąd stopka składała znak z dwóch części: romb z sygnetu plus napis
   „W ramach" złożony Cinzelem. To był zamiennik, nie logo – proporcje
   i światło między rombem a tekstem były nasze, nie z brandbooka.
   Teraz idzie oryginalny lockup (logo-clean-wr-cream.svg, 400 × 173),
   wpisany wprost w szablon, żeby dziedziczył kolor i nie wymagał
   dodatkowego zapytania do serwera.
   ══════════════════════════════════════════════════════════════ */
.wr-footcol--brand .wr-foot-logo {
  display: block;
  width: 100%;
  max-width: 232px;      /* znak nie może przerosnąć kolumny ani opisu pod nim */
  margin: 0 0 1rem;
  color: var(--wr-cream);
  letter-spacing: 0;     /* zeruje odstęp po dawnym napisie Cinzelem */
}
.wr-foot-logo__svg {
  display: block;
  width: 100%;
  height: auto;
}
.wr-footcol--brand .wr-foot-logo:hover { color: #fff; }

@media (max-width: 781px) {
  /* Kolumna marki jest na telefonie wyśrodkowana – znak idzie za nią. */
  .wr-footcol--brand .wr-foot-logo { margin: 0 auto 1rem; max-width: 200px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.57 – ZDJĘCIA W TREŚCI ARTYKUŁU
   Dziś żaden wpis nie ma fotografii w tekście (notki z automatu są
   czysto tekstowe), więc tego nie widać nigdzie na żywo. Ale pierwsze
   wstawione zdjęcie ma od razu wyglądać jak reszta portalu, a nie jak
   surowy blok WordPressa – dlatego warstwa idzie przed materiałem,
   nie po nim.

   Trzy szerokości: miara tekstu (domyślna), szerokość kolumny („szeroki")
   i pełna szerokość kolumny z wyjściem poza margines na telefonie
   („pełna szerokość"). Poza kolumnę na desktopie nie wychodzimy nigdy –
   po prawej stoi kolumna boczna z reklamą i Punktem Informacyjnym.
   ══════════════════════════════════════════════════════════════ */

/* ── fotografia w rytmie kafli: ten sam promień co karty ── */
body.single main#wr-main .wp-block-post-content .wp-block-image img,
body.single main#wr-main .wp-block-post-content .wp-block-gallery img {
  border-radius: var(--wr-r, 14px);
  display: block;
  width: 100%;
  height: auto;
}
body.single main#wr-main .wp-block-post-content .wp-block-image {
  margin: 2.1rem 0;
}

/* ── „szeroki" i „pełna szerokość": do krawędzi kolumny tekstu ──
   Miara czytania to 680 px, kolumna ma ok. 750 px. Zdjęcie oznaczone
   jako szerokie wypełnia kolumnę – to jedyne sensowne wyjście poza
   miarę, bo dalej zaczyna się kolumna boczna. */
body.single main#wr-main .wp-block-post-content > .alignwide,
body.single main#wr-main .wp-block-post-content > .alignfull {
  max-width: 100% !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── podpis i kredyt ──
   Podpis niesie treść („co widać"), kredyt – autorstwo. To dwie różne
   informacje, więc mają różną wagę: podpis czytelny, kredyt dyskretny. */
body.single main#wr-main .wp-block-post-content figcaption {
  font-family: 'Rubik', sans-serif;
  text-align: left;
}
body.single main#wr-main .wp-block-post-content .wp-block-image figcaption {
  margin-top: .6rem;
  padding-top: .5rem;
}

/* ── galeria: siatka w rytmie kart, bez ciasnych szczelin ── */
body.single main#wr-main .wp-block-post-content .wp-block-gallery {
  gap: .8rem;
  margin: 2.1rem 0;
}
body.single main#wr-main .wp-block-post-content .wp-block-gallery figcaption {
  border-top: 0;
  padding-top: .35rem;
  font-size: .78rem;
}
/* Podpis całej galerii stoi pod siatką i dotyczy zestawu, nie kadru. */
body.single main#wr-main .wp-block-post-content .wp-block-gallery > figcaption {
  border-top: 1px solid rgba(43,66,73,.16);
  padding-top: .5rem;
  font-size: .84rem;
}

/* ── zdjęcie opływane tekstem: tylko na szerokim ekranie ──
   Na telefonie tekst wokół 300-pikselowego zdjęcia łamie się na dwa
   słowa w wierszu, więc oblewanie wyłączamy i wracamy do bloku. */
@media (min-width: 782px) {
  body.single main#wr-main .wp-block-post-content .alignleft { margin: .4rem 1.6rem 1.2rem 0; max-width: 46%; }
  body.single main#wr-main .wp-block-post-content .alignright { margin: .4rem 0 1.2rem 1.6rem; max-width: 46%; }
}
@media (max-width: 781px) {
  body.single main#wr-main .wp-block-post-content .alignleft,
  body.single main#wr-main .wp-block-post-content .alignright {
    float: none;
    max-width: 100%;
    margin: 1.8rem 0;
  }

  /* Zdjęcie oznaczone jako „pełna szerokość" wychodzi na krawędzie
     ekranu – na telefonie to jedyny sposób, żeby fotografia oddychała. */
  body.single main#wr-main .wp-block-post-content > .alignfull {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  body.single main#wr-main .wp-block-post-content > .alignfull img { border-radius: 0; }
  body.single main#wr-main .wp-block-post-content > .alignfull figcaption {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ── powiększanie kliknięciem (lightbox z rdzenia WordPressa) ── */
body.single main#wr-main .wp-block-post-content .wp-lightbox-container button {
  border-radius: 999px;
}

/* ── tryb ciemny ── */
[data-wr-theme="dark"] body.single main#wr-main .wp-block-post-content .wp-block-gallery > figcaption {
  border-top-color: rgba(250,242,229,.16);
}

/* ── kredyt zdjęcia a podpis: dwie informacje, nie jedna ──
   Kredyt jest nakładką w rogu fotografii. Gdy figura ma podpis, ten róg
   przestaje być rogiem zdjęcia – nakładka lądowała na tekście podpisu
   i go zasłaniała. Przy podpisie kredyt schodzi więc pod niego jako
   osobna, dyskretna linia; bez podpisu zostaje nakładką jak dotąd. */
main#wr-main figure.wr-has-credit:has(figcaption) .wr-photo-credit {
  position: static;
  display: block;
  max-width: none;
  margin-top: .3rem;
  padding: 0;
  background: none;
  color: #7d8d93;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .03em;
  white-space: normal;
  text-align: right;
}
[data-wr-theme="dark"] main#wr-main figure.wr-has-credit:has(figcaption) .wr-photo-credit {
  background: none;
  color: #9DB0B5;
}
/* Nakładka na samym zdjęciu w rytmie zaokrągleń portalu. */
main#wr-main figure.wr-has-credit:not(:has(figcaption)) .wr-photo-credit {
  border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   v1.58 – ZDJĘCIA AUTORÓW: KÓŁKO WSZĘDZIE, PODPIS PRZY KAŻDYM KAFLU

   Podpis autora jest częścią warstwy zaufania: czytelnik ma widzieć,
   kto to napisał, w tym samym kształcie w każdym miejscu portalu.
   Kółko było regułą bazową (.wr-autor__foto), ale każda reguła kafla
   typu „.wr-cos img { border-radius: 0 }" (0,2,2) wygrywała z nią
   (0,1,0) i robiła z twarzy kwadrat. Zamiast łatać kolejne miejsca,
   podnosimy kółko na poziom, którego kafle nie przebiją.
   ═══════════════════════════════════════════════════════════════ */

main#wr-main .wr-autor .wr-autor__foto,
body.single main#wr-main .wr-autor .wr-autor__foto,
footer .wr-autor .wr-autor__foto {
  border-radius: 50%;
  object-fit: cover;
  background: var(--wr-cream);
}

/* Zastępczy znak WR jest rysowany w kole na całym polu obrazka – ma się
   w nie wpisać bez przycięcia, ale nie może rozpychać wiersza, więc żadnego
   wewnętrznego marginesu: obok twarzy redaktorów stoi dokładnie ten sam
   kwadrat pola. */
main#wr-main .wr-autor__foto[src$=".svg"],
body.single main#wr-main .wr-autor__foto[src$=".svg"] {
  object-fit: contain;
  padding: 0;
}

/* Podpis w kaflach sekcji – ten sam rytm co data pod nim. */
main#wr-main .wr-mixzone .wr-mix__autor { margin: .35rem 0 0; }

/* ═══════════════════════════════════════════════════════════════
   v1.59 – ARCHIWA DZIAŁÓW BEZ OPISU KATEGORII

   Opis kategorii zniknął z podstron działów (blok term-description
   wyjęty z archive.html i index.html). Sam opis zostaje w bazie –
   nadal pracuje w SEO i w opisach kanałów – tylko przestaje zabierać
   pierwszy ekran nad listą artykułów.

   Zdjęte razem z nim martwe reguły `.wr-archive-intro` (trzy sztuki).
   Odstęp pod tytułem działu niesie sam nagłówek: `margin-bottom: 1.6rem`
   na `.wp-block-query-title`, więc siatka nie podjeżdża pod pas.

   Opisy gmin (taxonomy-gmina) zostają bez zmian – tam opis niesie
   konkret („Twoja gmina"), a nie zdanie ogólne o dziale.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.60 – PAS „REKLAMA” NAD KAŻDYM BANEREM

   Reklama musi być odróżnialna od treści redakcyjnej i ma to być
   widać przed spojrzeniem na kreację, a nie po. Zamiast ramki wokół
   banera – cienka linia z podpisem pośrodku, tak jak robią to duże
   portale: napis niesie informację, linia oddziela go od artykułu
   nad nim, a kreacja zaczyna się dopiero pod spodem.

   Pas trzyma szerokość KREACJI, nie kolumny – inaczej przy wąskim
   banerze linia wystawałaby poza niego i wyglądałaby na separator
   sekcji, a nie na podpis reklamy.
   ═══════════════════════════════════════════════════════════════ */

.wr-ad__etykieta {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 auto .55rem;
  font-family: 'Rubik', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a979c;
  line-height: 1;
  user-select: none;
}
.wr-ad__etykieta::before,
.wr-ad__etykieta::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(43,66,73,.16);
}
[data-wr-theme="dark"] .wr-ad__etykieta { color: #93a4ab; }
[data-wr-theme="dark"] .wr-ad__etykieta::before,
[data-wr-theme="dark"] .wr-ad__etykieta::after { background: rgba(250,242,229,.16); }

/* Billboard: pas równy kreacji, wyśrodkowany razem z nią. */
.wr-ad--billboard .wr-ad__etykieta { max-width: 1200px; }

/* Kolumna boczna: kreacja stoi przy lewej krawędzi, pas razem z nią.
   W kolumnie bocznej obrazek dostaje `max-width: 100%` (reguła z 4325),
   więc pas też nie może być przycięty do 340 px – inaczej linia kończy
   się 54 px przed krawędzią banera. */
.wr-ad--rect .wr-ad__etykieta { max-width: 340px; margin-left: 0; }
main#wr-main .wr-aside .wr-ad--rect .wr-ad__etykieta,
main#wr-main .wr-aside--glowna .wr-ad--rect .wr-ad__etykieta { max-width: none; }

@media (max-width: 640px) {
  .wr-ad--billboard .wr-ad__etykieta { max-width: 360px; }
  .wr-ad--rect .wr-ad__etykieta { max-width: none; }
}

/* Slot obok leadu w Aktualnościach jest flexem w poziomie – z podpisem
   nad kreacją musi stać się kolumną, inaczej napis usiadłby obok
   obrazka. Link zjada resztę wysokości, żeby half page nadal kończył
   się równo z dolną krawędzią leadu. */
main#wr-main .wr-ad--sekcja {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
main#wr-main .wr-ad--sekcja .wr-ad__etykieta { max-width: none; margin-left: 0; margin-right: 0; }
main#wr-main .wr-ad--sekcja .wr-ad__link {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   v1.61 – „DO SŁUCHANIA”: TYTUŁ RÓWNO Z GÓRĄ MINIATURY

   Wiersz listy bocznej ma `align-items: baseline` i dla listy
   „Najnowsze” to jest właściwe: data i tytuł to dwa teksty, więc
   mają siedzieć na jednej linii pisma.

   W liście z miniaturami pierwszym elementem jest jednak obrazek,
   a linia bazowa bloku z obrazkiem to jego DOLNA krawędź. Skutek:
   pierwszy wiersz tytułu lądował równo z dołem miniatury – 32 px
   pod jej górą na desktopie, a na telefonie od 7 do 24 px, zależnie
   od tego, ile wierszy miał tytuł. Stąd wrażenie rozjazdu: każdy
   wiersz przesunięty inaczej.

   Miniatura i tekst mają startować z tej samej wysokości, więc
   w wariancie ze zdjęciem przechodzimy na wyrównanie do góry.
   ═══════════════════════════════════════════════════════════════ */

main#wr-main .wr-latest--foto .wr-latest__item,
main#wr-main .wr-podlista .wr-latest__item {
  align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   v1.62 – REKLAMA DOMKNIĘTA Z DWÓCH STRON + RYTM SEKCJI NA TELEFONIE

   1. Pas zamykający pod kreacją. Podpis nad banerem mówi, gdzie
      reklama się zaczyna; bez drugiego czytelnik nie wie, gdzie się
      kończy – a przy kreacji utrzymanej w kolorach zbliżonych do
      naszych to realne ryzyko pomyłki. Ten sam krój, ta sama linia,
      tylko marginesy odbite.

   2. Odstępy. Baner miał 24 px nad sobą i 40 px pod sobą – z jednym
      podpisem różnica była do zniesienia, z dwoma robi się z tego
      blok wciśnięty w tekst nad nim. Reklama dostaje ten sam rytm co
      sekcje, więc czyta się jak osobny moduł, a nie jak doklejka do
      poprzedniego działu.

   3. Na telefonie sekcje zajmują całą szerokość ekranu i ciągną się
      przez kilka przewinięć – 40 px między nimi ginie. Rytm rośnie
      do 3 rem. Szablon wstawia margines inline'em (`style="margin-top:
      var(--wp--preset--spacing--50)"`), więc jedyne wyjście to
      `!important`; podmiana samego tokenu spacing-50 ruszyłaby też
      padding `main` i moduł newslettera.
   ═══════════════════════════════════════════════════════════════ */

.wr-ad__etykieta--dol { margin-top: .55rem; margin-bottom: 0; }

/* Reklama w rytmie sekcji – równo z góry i z dołu (dolny margines
   zlewa się z marginesem następnej sekcji, więc wychodzi tyle samo). */
.wr-ad--billboard { margin: var(--wp--preset--spacing--50) 0; }

@media (max-width: 781px) {
  main#wr-main > [class*="wr-sec-"],
  main#wr-main > .wr-newsletter { margin-top: 3rem !important; }
  .wr-ad--billboard { margin: 3rem 0; }
}

/* Baner to `inline-block`, więc siedzi na linii pisma i zostawia pod sobą
   miejsce na wydłużenia dolne – stąd 17 px pod kreacją zamiast 9 px nad.
   Zerujemy interlinię na kontenerze (podpisy mają własną, więc ich to nie
   dotyczy) i sadzamy link równo z górą wiersza. */
.wr-ad { line-height: 0; }
.wr-ad__link { vertical-align: top; }

/* ═══════════════════════════════════════════════════════════════
   v1.63 – DOLNY PAS MÓWI „KONIEC REKLAMY”

   Dwa identyczne napisy „REKLAMA” czytały się jak dwie reklamy jedna
   pod drugą. Para „początek – koniec” od razu pokazuje, że to klamra
   wokół jednego bloku; tak samo rozwiązuje to Wirtualna Polska.
   Dłuższe słowo zjada więcej pasa, więc kreski po bokach dostają
   minimalną długość – inaczej przy wąskim banerze na telefonie
   zostałyby z nich dwa kikuty przy samym tekście.
   ═══════════════════════════════════════════════════════════════ */

.wr-ad__etykieta--dol::before,
.wr-ad__etykieta--dol::after { min-width: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════
   v1.64 – PRZYCISK „KOMENTARZE” I KOLEJNOŚĆ OTWARCIA NA TELEFONIE

   1. Pasek akcji siada po prawej stronie wiersza z podpisem, tak jak
      w Wirtualnej Polsce: po lewej kto i kiedy, po prawej co można
      z tekstem zrobić. Przycisk jest jedyną plamą korala w tej
      okolicy, więc widać go bez szukania.

   2. Na telefonie kolejność otwarcia idzie: tytuł → zajawka →
      podpis z przyciskiem → zdjęcie. Zdjęcie w pionie zjada prawie
      cały ekran, więc postawione przed podpisem spycha autora poniżej
      pierwszego przewinięcia – a to on odpowiada za wiarygodność
      tekstu. Na desktopie zostaje układ dotychczasowy (podpis pod
      zdjęciem), bo tam zdjęcie mieści się w kadrze razem z resztą.

      Kolumnę przełączamy w flex tylko poniżej 782 px i przenumerowujemy
      trzy pierwsze elementy; cała reszta dostaje wspólny `order`, więc
      zachowuje kolejność z szablonu.
   ═══════════════════════════════════════════════════════════════ */

body.single main#wr-main .wr-byline { flex-wrap: nowrap; }
body.single main#wr-main .wr-akcje {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.wr-btn-kom {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .46rem .95rem;
  border-radius: 999px;
  background: var(--wr-coral);
  color: #fff !important;
  font-family: 'Rubik', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  border: 0;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.wr-btn-kom:hover { background: #cf4a47; }
.wr-btn-kom:active { transform: translateY(1px); }
.wr-btn-kom:focus-visible { outline: 2px solid var(--wr-graphite); outline-offset: 2px; }
.wr-btn-kom__ikona { flex: 0 0 auto; }

/* Sekcja komentarzy jest celem kotwicy – pasek podążający nie może
   zasłonić jej nagłówka po skoku. */
body.single main#wr-main #wr-komentarze { scroll-margin-top: 84px; }

@media (max-width: 781px) {
  body.single main#wr-main .wr-artcol { display: flex; flex-direction: column; }
  body.single main#wr-main .wr-artcol > * { order: 4; }
  body.single main#wr-main .wr-artcol > .wr-article-header { order: 1; }
  body.single main#wr-main .wr-artcol > .wr-byline { order: 2; }
  body.single main#wr-main .wr-artcol > .wp-block-post-featured-image { order: 3; }

  /* Po zamianie miejscami marginesy pionowe niosą inne sąsiedztwo:
     podpis przykleja się do zajawki, a zdjęcie musi odsunąć się od
     kreski pod podpisem. We flexie marginesy się nie zlewają, więc
     obie wartości ustawiamy wprost. */
  body.single main#wr-main .wr-artcol > .wr-byline {
    margin: 1rem 0 0 !important;
    padding-bottom: .9rem;
  }
  body.single main#wr-main .wr-artcol > .wp-block-post-featured-image {
    margin-top: 1.1rem !important;
    margin-bottom: 0;
  }

  /* Wiersz podpisu na wąskim ekranie łamie się na dwa poziomy:
     autor z datą u góry, przycisk pod spodem przy lewej krawędzi. */
  body.single main#wr-main .wr-byline { flex-wrap: wrap; }
  body.single main#wr-main .wr-akcje { margin-left: 0; width: 100%; margin-top: .55rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.65 – OTWARCIE ARTYKUŁU NA TELEFONIE W UKŁADZIE WP

   Referencja: mobilne wiadomości.wp.pl. Kolejność jest tam taka:
   tytuł → podpis autora → przycisk komentarzy → zdjęcie → zajawka.
   Sens tej kolejności: zanim czytelnik zobaczy zdjęcie na pół ekranu,
   wie, kto to napisał i kiedy. Zajawka schodzi pod zdjęcie, bo i tak
   powtarza to, co niesie pierwszy akapit – nie musi konkurować
   z podpisem o miejsce nad zgięciem.

   Technicznie: tytuł i zajawka siedzą w jednej grupie `wr-article-header`,
   a rozdzielić je trzeba tylko na telefonie. `display: contents` wypisuje
   grupę z układu i wpuszcza oba bloki wprost do kolumny, gdzie każdy
   dostaje własny `order`. Grupa nie ma na telefonie żadnego tła ani
   ramki (kremowa rama zniknęła dawno temu), więc nie ma czego stracić –
   poza marginesami, które ustawiamy wprost niżej.

   Data i czas czytania wędrują do wspólnego wiersza `wr-byline__meta`,
   dzięki czemu na wąskim ekranie stają pod nazwiskiem, a nie pod
   zdjęciem autora – dokładnie jak w referencji.
   ═══════════════════════════════════════════════════════════════ */

body.single main#wr-main .wr-byline__meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 !important;
  flex: 0 0 auto;
}

@media (max-width: 781px) {
  /* Grupa nagłówka przestaje być pudełkiem – tytuł i zajawka wchodzą
     do kolumny jako osobne elementy siatki kolejności. */
  body.single main#wr-main .wr-artcol > .wr-article-header {
    display: contents;
  }
  body.single main#wr-main .wr-artcol > .wr-article-header > h1.wp-block-post-title { order: 1; }
  body.single main#wr-main .wr-artcol > .wr-byline { order: 2; }
  body.single main#wr-main .wr-artcol > .wp-block-post-featured-image { order: 3; }
  body.single main#wr-main .wr-artcol > .wr-article-header > .wr-lead { order: 4; }

  /* Marginesy po wypisaniu grupy z układu – wcześniej niosło je pudełko. */
  body.single main#wr-main h1.wp-block-post-title { margin-bottom: 1rem !important; }
  body.single main#wr-main .wr-artcol > .wr-lead { margin-top: 1.2rem !important; }

  /* Podpis: zdjęcie i nazwisko w pierwszym wierszu, data z czasem
     czytania pod nazwiskiem, przycisk w osobnym wierszu niżej. */
  body.single main#wr-main .wr-byline {
    display: block;
    margin: 0 !important;
    padding-bottom: 1rem;
  }
  body.single main#wr-main .wr-byline .wr-autor { display: inline-flex; }
  body.single main#wr-main .wr-byline__meta {
    margin-left: calc(40px + .5rem) !important;   /* pod nazwiskiem, nie pod kółkiem */
    margin-top: .1rem !important;
  }
  body.single main#wr-main .wr-akcje { margin: .85rem 0 0; width: auto; }
}

/* Kropka przed datą oddziela ją od nazwiska – ma sens, dopóki data stoi
   w tym samym wierszu. Na telefonie meta schodzi pod nazwisko i kropka
   zostaje wisieć na początku pustego wiersza, więc ją zdejmujemy. */
@media (max-width: 781px) {
  body.single main#wr-main .wr-byline__meta > .wp-block-post-date::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.66 – PASEK AKCJI: LICZNIK, KOPERTA, UDOSTĘPNIANIE

   Trzy poprawki z porównania z referencją WP:

   1. Wiersz podpisu równał się do linii pisma, przez co zdjęcie autora,
      nazwisko i data siadały na trzech różnych wysokościach. Zdjęcie
      jest wyższe niż tekst obok, więc jedyne wyrównanie, które trzyma
      się kupy, to góra bloku – nazwisko i data zaczynają się teraz
      dokładnie na tej samej pionowej linii.

   2. Zdjęcie główne stało za blisko zajawki. Wcześniejsza reguła
      celowała w `.wr-artcol > .wr-lead`, a zajawka jest w DOM-ie
      dzieckiem grupy nagłówka – `display: contents` zmienia układ,
      ale nie zmienia drzewa dokumentu, więc selektor nie łapał.
      Odstęp niesie teraz sam dół zdjęcia.

   3. Przycisk komentarzy ma liczbę w nawiasie, przy nazwisku stoi
      koperta, obok przycisku – udostępnianie z listą kanałów.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. równanie wiersza podpisu ── */
body.single main#wr-main .wr-byline { align-items: center; }
body.single main#wr-main .wr-byline .wr-autor { align-items: center; }

/* ── koperta przy nazwisku ── */
.wr-autor__mail {
  display: inline-flex;
  align-items: center;
  margin-left: .45rem;
  color: #8a979c;
  text-decoration: none !important;
  border: 0;
  transition: color .15s ease;
}
.wr-autor__mail:hover { color: var(--wr-coral); }
.wr-autor__mail:focus-visible { outline: 2px solid var(--wr-graphite); outline-offset: 2px; border-radius: 4px; }
[data-wr-theme="dark"] .wr-autor__mail { color: #8fa3aa; }

/* ── przycisk komentarzy: zapis zdaniowy (decyzja z 24.08) ──
   Wersaliki krzyczały mocniej niż tytuł artykułu tuż nad nimi. */

/* ── udostępnianie ── */
.wr-udost { position: relative; }
.wr-btn-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid rgba(43,66,73,.16);
  border-radius: 999px;
  background: transparent;
  color: #5c6f76;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wr-btn-ikona:hover { color: var(--wr-coral); border-color: rgba(230,89,86,.5); }
.wr-btn-ikona:focus-visible { outline: 2px solid var(--wr-graphite); outline-offset: 2px; }
[data-wr-theme="dark"] .wr-btn-ikona { border-color: #2A3D45; color: #A9BEC5; }

.wr-udost__menu {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 30;
  min-width: 168px;
  padding: .35rem;
  border: 1px solid rgba(43,66,73,.12);
  border-radius: var(--wr-r, 14px);
  background: #fff;
  box-shadow: 0 10px 30px rgba(43,66,73,.14);
  display: flex;
  flex-direction: column;
}
.wr-udost__menu.is-lewo { left: auto; right: 0; }
[data-wr-theme="dark"] .wr-udost__menu { background: #16262C; border-color: #2A3D45; }

.wr-udost__poz {
  display: block;
  width: 100%;
  padding: .5rem .7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: 'Rubik', sans-serif;
  font-size: .84rem;
  color: var(--wr-graphite);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .12s ease;
}
.wr-udost__poz:hover { background: rgba(230,89,86,.10); color: var(--wr-graphite); }
.wr-udost__poz.is-ok { color: var(--wr-coral); font-weight: 600; }
[data-wr-theme="dark"] .wr-udost__poz { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-udost__poz:hover { background: rgba(230,89,86,.22); }

@media (max-width: 781px) {
  /* ── 2. oddech pod zdjęciem ── */
  body.single main#wr-main .wr-artcol > .wp-block-post-featured-image {
    margin-bottom: 1.7rem !important;
  }
  body.single main#wr-main .wr-article-header > .wr-lead { margin-top: 0 !important; }

  /* Pasek akcji: przycisk po lewej, udostępnianie przy prawej krawędzi
     – ten sam podział co w referencji. */
  body.single main#wr-main .wr-akcje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.67 – MENU UDOSTĘPNIANIA DOMYŚLNIE ZAMKNIĘTE

   Menu miało atrybut `hidden`, a mimo to stało otwarte na każdym
   artykule. Powód: atrybut `hidden` to w istocie reguła
   `display: none` z arkusza przeglądarki, a KAŻDA deklaracja
   `display` z arkusza autora ma nad nią pierwszeństwo – nasze
   `.wr-udost__menu { display: flex }` po prostu ją kasowało.
   Klasyczna pułapka: HTML mówił „schowaj", CSS mówił „pokaż",
   wygrywał CSS.

   Lek: reguła celująca w sam atrybut. `.wr-udost__menu[hidden]`
   to (0,2,0) i bije `.wr-udost__menu` (0,1,0), więc wystarczy bez
   `!important`. JavaScript nadal steruje wyłącznie atrybutem –
   nie dokładamy drugiego mechanizmu obok istniejącego.
   ═══════════════════════════════════════════════════════════════ */

.wr-udost__menu[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   v1.68 – ZDJĘTA SEKCJA UDOSTĘPNIANIA SPOD ARTYKUŁU

   Od 1.66 udostępnianie stoi przy podpisie pod tytułem – tam, gdzie
   czytelnik podejmuje decyzję o tekście, a nie na jego końcu. Rząd
   kółek pod artykułem robił dokładnie to samo drugi raz, więc znika
   razem ze swoim rendererem w PHP i całym stylowaniem (blok v1.7.6).

   `.wr-postfoot` zostaje z samymi tagami – kreska nad nim i odstęp
   nadal działają, bo należą do grupy, nie do usuniętego elementu.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.69 – AUDYT MOBILNY: TREŚĆ, KRESKA, DASZKI PRZEWIJANIA

   Zgłoszenie Maćka z Androida. Pomiar potwierdził trzy rzeczy naraz
   i żadna nie była specyficzna dla Androida – po prostu nikt nie
   patrzył na te ekrany na tyle uważnie.

   1. KAFLE NA ARCHIWUM DZIAŁU BYŁY UCIĘTE. Siatka wpisów dostawała
      na telefonie `grid-template-columns: 1fr`, a `1fr` to skrót od
      `minmax(auto, 1fr)`: ścieżka nie może być węższa niż najszersza
      zawartość elementu. Zdjęcie wyróżniające ma własną szerokość
      552 px, więc ścieżka rosła do 552 px w kolumnie mającej 332 px
      i połowa każdego kafla wychodziła poza ekran. Dokument się nie
      przewijał w poziomie, bo nadrzędny blok to przycinał – czytelnik
      po prostu nie widział prawej połowy tytułów.
      `minmax(0, 1fr)` zdejmuje dolne ograniczenie, `min-width: 0`
      na elementach listy zabezpiecza to samo od drugiej strony.

   2. KRESKA PRZY IKONIE DOMU MIAŁA 0 PX. Na telefonie pasek działów
      przechodzi w `flex-wrap: nowrap` i przewija się w bok. Pigułki
      dostały wtedy `flex: 0 0 auto`, ale kreska nie – została
      z domyślnym `flex-shrink: 1` i przy zawartości szerszej niż
      ekran skurczyła się do zera. Desktop: 1 px, telefon: 0 px.

   3. IKONA DOMU MIAŁA 17 × 17 PX POLA DOTYKU – poniżej minimum
      24 × 24 px z WCAG 2.5.8. Pole powiększamy niewidoczną nakładką,
      żeby nie ruszać rysunku ikony.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 781px) {
  /* 1. treść kafli mieści się w kolumnie */
  main#wr-main .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  main#wr-main .wp-block-post-template.is-layout-grid > li { min-width: 0; }
  main#wr-main .wr-card .wp-block-post-featured-image img,
  main#wr-main .wr-card img { max-width: 100%; }

  /* 2. kreska nie może się kurczyć razem z paskiem */
  .wr-katnav__kreska { flex: 0 0 auto; }

  /* 3. pole dotyku ikony domu do 24 × 24 px, rysunek bez zmian */
  .wr-katnav__dom { position: relative; }
  .wr-katnav__dom::after {
    content: "";
    position: absolute;
    inset: -4px -5px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DASZEK: „jest jeszcze coś dalej"

   Pasek działów chowa na telefonie od 698 do 731 px treści – czyli
   dwie trzecie kategorii – a fasolki gminne od 160 do 350 px. Nic
   tego nie sygnalizowało. Daszek stoi przyklejony do krawędzi paska
   (`position: sticky` wewnątrz przewijanego kontenera), więc nie
   ucieka razem z treścią i nie zabiera jej miejsca (ujemny margines).
   Gradient pod nim przycina ostatnią pigułkę miękko, zamiast urywać
   ją w pół litery – to samo, co robią paski kategorii w dużych
   serwisach.

   Klasy `ma-dalej` i `ma-wstecz` nadaje suwaki.js. Bez JavaScriptu
   daszek się nie pokaże, ale pasek nadal działa.
   ═══════════════════════════════════════════════════════════════ */

:root { --wr-tlo-suwak: #FDFDFB; }
[data-wr-theme="dark"] { --wr-tlo-suwak: #111D21; }

@media (max-width: 781px) {
  .wr-katnav,
  .wr-gfiltr { scroll-behavior: smooth; }

  .wr-katnav::after,
  .wr-gfiltr::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: stretch;
    width: 28px;
    margin-left: -28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f76' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")
        no-repeat right 2px center / 13px 13px,
      linear-gradient( to right, rgba(253,253,251,0) 0%, var(--wr-tlo-suwak) 16% );
  }
  .wr-katnav.ma-dalej::after,
  .wr-gfiltr.ma-dalej::after { opacity: 1; }

  [data-wr-theme="dark"] .wr-katnav::after,
  [data-wr-theme="dark"] .wr-gfiltr::after {
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D5D8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")
        no-repeat right 2px center / 13px 13px,
      linear-gradient( to right, rgba(17,29,33,0) 0%, var(--wr-tlo-suwak) 16% );
  }

  /* Menu udostępniania otwiera się przy prawej krawędzi ekranu.
     Dotąd wychodziło 133 px poza widok i wracało dopiero po korekcie
     w JavaScripcie – czyli po mignięciu. Na telefonie ustawiamy je
     od razu tam, gdzie ma stać. */
  .wr-udost__menu { left: auto; right: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.70 – PASEK DZIAŁÓW POKAZUJE DZIAŁY Z TREŚCIĄ

   Zmiana jest w PHP (`wr_katnav_html`, próg `wr_katnav_prog`), tu
   zostaje sam ślad w historii: przy dziesięciu kategoriach pasek
   chował na telefonie 740 px – dwie trzecie zawartości. Biznes,
   Technologia i Turystyka mają razem cztery wpisy, więc czytelnik,
   który przewinął pasek do końca, trafiał w puste archiwa.

   Próg to pięć wpisów. Bieżący dział jest w pasku zawsze, także
   poniżej progu, bo to jego nazwa jest nagłówkiem H1 archiwum.
   Działy spod progu zostają w menu – nie znikają z serwisu, tylko
   przestają zajmować pierwszy ekran.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.71 – NAGŁÓWEK H1 NA STRONIE GŁÓWNEJ

   Strona główna nie miała żadnego H1. Archiwa mają nazwę działu,
   artykuły tytuł – główna nie miała nic, co dla wyszukiwarki i dla
   czytnika ekranu znaczy stronę bez tematu.

   Nagłówek jest ukryty wzrokowo, ale obecny w drzewie dokumentu:
   układ otwarcia jest już zbudowany z paska działów i strefy
   materiałów, a widoczny tytuł nad nimi tylko zabierałby pierwszy
   ekran, nie wnosząc nic czytelnikowi, który i tak wie, gdzie jest.

   Klasa `wr-tylko-czytnik` chowa przez `clip-path`, nie przez
   `display: none` ani `visibility: hidden` – tamte dwa usuwają
   element także z odczytu, czyli robiłyby dokładnie odwrotność tego,
   o co nam chodzi.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.72 – PASEK DZIAŁÓW NA CAŁĄ SZEROKOŚĆ OKNA

   Dwie zmiany, które trzeba czytać razem.

   1. Wracają wszystkie działy (zmiana w PHP – próg `wr_katnav_prog`
      zszedł z pięciu na zero). Biznes, Technologia i Turystyka znów
      stoją w pasku; redakcja je zapełnia, a pasek ma być mapą
      serwisu, nie licznikiem dzisiejszych wpisów.

   2. Pasek przestaje być kolumną 1200 px, a staje się wstęgą przez
      całe okno – jak meander nad nim. Kreska pod działami dochodzi
      do krawędzi ekranu i domyka nagłówek, zamiast urywać się w
      środku bieli. Same pozycje zostają na siatce: dopełnienie
      wyrównuje je do kolumny treści, więc dom nadal stoi dokładnie
      nad pierwszym kaflem.

   Fasolki gminne zostają na szerokości siatki – celowo. Wstęgą jest
   nawigacja po serwisie, filtr okolicy należy do listy materiałów,
   która pod nim stoi, i ma się z nią wyrównywać.

   `max-width` bez `!important` wystarcza: reguła układu WordPressa
   (`.wp-container-…-is-layout-… > :where(…)`) ma moc jednej klasy,
   a `main#wr-main > .wr-katnav` – identyfikatora. Marginesy `auto`
   z tamtej reguły przy `max-width: none` i tak wychodzą zerowe.

   Dopełnienie liczymy z `100%`, nie z `100vw`: `main` idzie przez
   całą szerokość okna, więc wynik jest ten sam, a `vw` liczy się
   razem z paskiem przewijania i dokładałoby poziomy suwak.

   Poniżej 1200 px reguła nie działa – tam kolumna treści i tak
   zajmuje całe okno, więc nie ma czego rozciągać.
   ═══════════════════════════════════════════════════════════════ */
/* Reguła w wersji z 1.72 stała tu sama; od 1.73 wchodzi w blok marginesów
   bocznych niżej, bo dopełnienie paska musi liczyć się razem z nimi. */


/* ═══════════════════════════════════════════════════════════════
   v1.73 – MARGINESY BOCZNE NA DESKTOPIE

   Poniżej 1200 px szerokości okna serwis nie miał żadnego odstępu od
   krawędzi: zdjęcia, tytuły i stopka dotykały ramy przeglądarki.
   Na telefonie to naturalne – kafel na całą szerokość ekranu jest tam
   wzorcem. Na laptopie z oknem 1000–1150 px wyglądało to na uciętą
   stronę, bo oko widzi ramę okna i brak marginesu czyta jako błąd.

   Przy okazji wychodzi druga rzecz: nagłówek miał własne 14 px, a
   treść zero, więc logo stało 14 px na prawo od pierwszego kafla.
   Teraz wszystkie trzy warstwy – nagłówek, treść, stopka – biorą tę
   samą wartość ze zmiennej `--wr-gutter` i startują w jednej linii.

   Marginesy działają od 782 px w górę. Niżej zostaje układ mobilny
   sprawdzony w audycie (14 px) – nie ruszamy go, bo został zmierzony
   i zatwierdzony na sprzęcie.

   Pasek działów zostaje wstęgą przez całe okno, więc musi wyjść z tych
   marginesów ujemnymi (stąd `!important`: reguła układu WordPressa
   wymusza `margin-left: auto !important`) i odtworzyć je dopełnieniem.
   Powyżej 1248 px, czyli tam, gdzie kolumna 1200 px przestaje rosnąć,
   dopełnienie liczy się już od środka okna – wtedy o wyrównaniu pozycji
   decyduje centrowanie kolumny, a nie margines.
   ═══════════════════════════════════════════════════════════════ */
:root { --wr-gutter: 24px; }

@media (min-width: 782px) {
  main#wr-main,
  footer .wr-sitefooter {
    padding-left:  var(--wr-gutter);
    padding-right: var(--wr-gutter);
  }
  header .wr-siteheader .wr-hinner {
    padding-left:  var(--wr-gutter);
    padding-right: var(--wr-gutter);
  }
  main#wr-main > .wr-katnav {
    max-width: none;
    margin-left:  calc( -1 * var(--wr-gutter) ) !important;
    margin-right: calc( -1 * var(--wr-gutter) ) !important;
    padding-left:  var(--wr-gutter);
    padding-right: var(--wr-gutter);
  }
}
@media (min-width: 1249px) {
  main#wr-main > .wr-katnav {
    padding-left:  calc( (100% - 1200px) / 2 + var(--wr-gutter) );
    padding-right: calc( (100% - 1200px) / 2 + var(--wr-gutter) );
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.74 – POLA DOTYKU (WCAG 2.5.8, próg 24 × 24 px)

   Przegląd wszystkich elementów klikalnych na 390 px: strona główna,
   archiwum działu, artykuł, Punkt Informacyjny i cztery bazy PI.
   Poniżej progu wypadło jedenaście rodzajów odnośników.

   Zasada poprawki: NIE ruszamy układu. Tam, gdzie brakowało kilku
   pikseli wysokości, pole dotyku powiększa przezroczysta warstwa
   `::after` wyciągnięta poza obrys ujemnym `inset`. Element zostaje
   dokładnie tam, gdzie stał, a palec dostaje wymagane 24 px. Wyjątkiem
   są odnośniki w stopce – tam wiersze mają skok 28 px, więc 3 px
   dopełnienia z góry i z dołu mieści się w istniejącym luzie i nie
   trzeba sztuczek.

   Nadtytuł na kaflu (13 px) rośnie wyłącznie w dół, w pustkę między
   nim a rzędem autora. W górę nie może, bo tam leży zdjęcie, które
   samo jest odnośnikiem – warstwa przykryłaby cudzy cel.

   CZEGO ŚWIADOMIE NIE RUSZAMY. Odnośniki wplecione w zdanie – telefon
   i adres w bazach PI (93 pozycje w mszach, 173 w szkołach), źródło
   kursywą, link w akapicie artykułu – są objęte wyjątkiem „inline"
   z 2.5.8: ich rozmiar wyznacza interlinia otaczającego tekstu.
   Rozepchnięcie ich rozbiłoby rytm zdania, a nie poprawiło celowania.

   FAŁSZYWY TROP. Pomiar pokazywał najpierw przycisk zamknięcia menu
   jako 22 × 42 px i cztery odnośniki panelu jako 10 × 70 px. To
   artefakt: `details` był zamknięty, panel miał 42 px szerokości i
   ściskał zawartość. Po otwarciu przycisk ma 42 × 42, a odnośniki
   358 × 70. Nic tam nie było do naprawy.
   ═══════════════════════════════════════════════════════════════ */
.wr-footcol > a { padding-top: 3px; padding-bottom: 3px; }

.wr-footlegal a,
.wr-section-head a,
.wr-sluch__all,
.wr-crumbs__dom,
.wr-crumbs__kat,
.wr-autor__mail,
.wr-card__cat a,
.taxonomy-post_tag a,
.wp-block-post-navigation-link a,
.wp-block-post-title a,
.wr-trust__linia a,
.wr-pi-lead a,
.wr-pi-foot a { position: relative; }

.wr-footlegal a::after,
.wr-section-head a::after,
.wr-sluch__all::after,
.wr-crumbs__dom::after,
.wr-crumbs__kat::after,
.wr-autor__mail::after,
.wr-card__cat a::after,
.taxonomy-post_tag a::after,
.wp-block-post-navigation-link a::after,
.wp-block-post-title a::after,
.wr-trust__linia a::after,
.wr-pi-lead a::after,
.wr-pi-foot a::after { content: ""; position: absolute; z-index: 1; }

.wr-footlegal a::after            { inset: -5px 0; }   /* 15 → 25 */
.wr-crumbs__dom::after            { inset: -5px;   }   /* 15 → 25 */
.wr-autor__mail::after            { inset: -5px;   }   /* 15 → 25 */
.wr-card__cat a::after            { inset: 0 0 -12px; } /* 13 → 25, tylko w dół */
.wr-section-head a::after,
.wr-sluch__all::after,
.wr-crumbs__kat::after,
.taxonomy-post_tag a::after,
.wp-block-post-navigation-link a::after,
.wp-block-post-title a::after,
.wr-trust__linia a::after,
.wr-pi-lead a::after,
.wr-pi-foot a::after              { inset: -4px 0; }   /* 17–21 → 25–29 */

/* ═══════════════════════════════════════════════════════════════
   v1.74.1 – IKONA DOMU W PASKU DZIAŁÓW TAKŻE NA DESKTOPIE

   Pole dotyku ikony domu powiększyłem w 1.69, ale wewnątrz zapytania
   `max-width: 781px` – bo audyt był mobilny. Na desktopie ikona dalej
   miała 17 × 17 px. Próg 24 × 24 nie jest przepisem o telefonach:
   dotyczy każdego wskaźnika, także myszy w drżącej ręce.
   ═══════════════════════════════════════════════════════════════ */
.wr-katnav__dom { position: relative; }
.wr-katnav__dom::after { content: ""; position: absolute; inset: -4px -5px; }

/* ═══════════════════════════════════════════════════════════════
   v1.75 – DASZEK POWROTNY, KRESKA NA SZEROKOŚĆ TREŚCI,
           ŚCIEŻKA W JEDNEJ LINII

   1. DASZEK W LEWO. Daszek w prawo mówił „jest coś dalej", ale gdy
      czytelnik już przewinął pasek, nic nie mówiło „i jest coś za
      tobą". Lustrzane odbicie tamtej reguły na `::before`, zapalane
      klasą `ma-wstecz` (tę i `ma-dalej` nadaje suwaki.js, więc nowy
      daszek nie wymaga zmian w skrypcie).

      Jedna różnica wobec prawego: `z-index`. Elementy `sticky` bez
      warstwy malują się w kolejności drzewa, a `::before` jest
      pierwszym dzieckiem – bez podniesienia pigułki przejeżdżałyby
      PO WIERZCHU gradientu i cała sztuczka byłaby niewidoczna.

   2. KRESKA POD DZIAŁAMI DO SZEROKOŚCI TREŚCI. Pasek zostaje wstęgą
      przez całe okno (v1.72), ale szara linia pod nim schodzi do
      kolumny 1200 px, żeby domykała treść, a nie okno przeglądarki.
      Obramowanie zostaje przezroczyste – trzyma ten sam 1 px wysokości,
      więc nic się nie przesuwa – a widoczną kreskę rysuje warstwa.

      UWAGA na arytmetykę: warstwa liczy `100%` względem paska, który
      ma szerokość okna, a dopełnienie paska liczy `100%` względem
      <main>, czyli okna BEZ marginesów. Dlatego tutaj jest
      `(100% - 1200px)/2` bez dodawania marginesu – te dwa zapisy dają
      tę samą krawędź, mimo że wyglądają inaczej.

   3. ŚCIEŻKA NA TELEFONIE W JEDNEJ LINII. Tytuł schodził do drugiego
      wiersza i ścieżka zajmowała dwa razy więcej miejsca niż pasek
      działów, który zastępuje. Teraz wiersz się nie łamie, a tytuł
      kurczy się z wielokropkiem – dom i dział zostają w całości, bo
      to one są nawigacją; tytuł mówi tylko „jesteś tutaj".
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. daszek powrotny ── */
@media (max-width: 781px) {
  .wr-katnav::before,
  .wr-gfiltr::before {
    content: "";
    position: sticky;
    left: 0;
    z-index: 1;
    flex: 0 0 auto;
    align-self: stretch;
    width: 28px;
    margin-right: -28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f76' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E")
        no-repeat left 2px center / 13px 13px,
      linear-gradient( to left, rgba(253,253,251,0) 0%, var(--wr-tlo-suwak) 16% );
  }
  .wr-katnav.ma-wstecz::before,
  .wr-gfiltr.ma-wstecz::before { opacity: 1; }

  [data-wr-theme="dark"] .wr-katnav::before,
  [data-wr-theme="dark"] .wr-gfiltr::before {
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D5D8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E")
        no-repeat left 2px center / 13px 13px,
      linear-gradient( to left, rgba(17,29,33,0) 0%, var(--wr-tlo-suwak) 16% );
  }
}

/* ── 2. kreska pod działami tylko na szerokość kolumny treści ── */
@media (min-width: 782px) {
  main#wr-main > .wr-katnav {
    position: relative;
    border-bottom-color: transparent;
  }
  main#wr-main > .wr-katnav::after {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 1px;
    left:  var(--wr-gutter);
    right: var(--wr-gutter);
    background: rgba(43,66,73,.12);
  }
  [data-wr-theme="dark"] main#wr-main > .wr-katnav::after { background: #2A3D45; }
}
@media (min-width: 1249px) {
  main#wr-main > .wr-katnav::after {
    left:  calc( (100% - 1200px) / 2 );
    right: calc( (100% - 1200px) / 2 );
  }
}

/* ── 3. ścieżka na telefonie w jednej linii ── */
@media (max-width: 781px) {
  body.single main#wr-main .wr-crumbs,
  body.page   main#wr-main .wr-crumbs { flex-wrap: nowrap; }
  body.single main#wr-main .wr-crumbs__dom,
  body.single main#wr-main .wr-crumbs__kat,
  body.single main#wr-main .wr-crumbs > span[aria-hidden],
  body.page   main#wr-main .wr-crumbs__dom,
  body.page   main#wr-main .wr-crumbs__kat,
  body.page   main#wr-main .wr-crumbs > span[aria-hidden] { flex: 0 0 auto; }
  body.single main#wr-main .wr-crumbs__here,
  body.page   main#wr-main .wr-crumbs__here {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.76 – WYNIKI WYSZUKIWANIA W RYTMIE RESZTY SERWISU

   Podstrona wyszukiwania była ostatnią, która nosiła afisz w
   meandrowej ramie – ten sam, który zszedł z archiwów przy 1.34.
   Ramy używamy dziś punktowo (moduł newslettera), nie jako nagłówka
   strony. Do tego jako jedyna nie miała żadnej nawigacji: czytelnik,
   który nic nie znalazł, nie miał dokąd kliknąć.

   Zmiana idzie w trzech krokach: blok `query-title` znika z szablonu
   (więc reguły ramy nie mają czego złapać – żadnych `!important`
   przeciw sobie samemu), PHP wstawia pasek działów i własny H1,
   a tu ustawiamy jego typografię: Rubik, do lewej, jak w artykule.
   Sama fraza zostaje w cudzysłowie i w kolorze grafitu, żeby było
   widać, czego szukaliśmy, gdy wyników nie ma wcale.
   ═══════════════════════════════════════════════════════════════ */
body.search main#wr-main .wr-szukaj-tytul {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #5c6f76;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.4rem;
}
body.search main#wr-main .wr-szukaj-tytul__fraza { color: var(--wr-graphite); }
[data-wr-theme="dark"] body.search main#wr-main .wr-szukaj-tytul { color: #9DB0B5; }
[data-wr-theme="dark"] body.search main#wr-main .wr-szukaj-tytul__fraza { color: var(--wr-cream); }

/* pasek działów na wyszukiwaniu trzyma ten sam rytm co w archiwum */
body.search main#wr-main { padding-top: var(--wp--preset--spacing--30) !important; }
body.search main#wr-main .wr-katnav { margin-top: -.4rem; padding-bottom: .8rem; }

/* ── zastępnik kafla bez zdjęcia (1.76.1) ── */
main#wr-main .wr-brak-foto {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    url('assets/wr-band-v1-coral.svg') repeat-x left top    / auto 13px,
    url('assets/wr-band-v1-coral.svg') repeat-x left bottom / auto 13px,
    var(--wr-cream);
}
main#wr-main .wr-brak-foto__romb {
  width: 54px; height: 54px;
  background: url('assets/wr-favicon.svg') no-repeat center / contain;
  opacity: .5;
}
[data-wr-theme="dark"] main#wr-main .wr-brak-foto { background:
  url('assets/wr-band-v1-coral.svg') repeat-x left top    / auto 13px,
  url('assets/wr-band-v1-coral.svg') repeat-x left bottom / auto 13px,
  #16262C; }

/* ═══════════════════════════════════════════════════════════════
   v1.77 – JEDEN RYTM LISTWY NAWIGACJI NA KAŻDEJ PODSTRONIE

   Listwa pod meandrem – pasek działów na głównej, w dziale i na
   wyszukiwaniu, ścieżka w artykule – ma prowadzić czytelnika za rękę,
   więc musi stać wszędzie w tym samym miejscu i mieć tę samą wysokość.
   Nie miała: przy 390 px pasek mierzył 45 px, a ścieżka 59, bo
   `min-height: 45px` liczyło się bez dopełnienia (`content-box`),
   które dokładało jeszcze 12,8 px. Kreska pod ścieżką siadała więc
   14 px niżej niż na głównej i oko to wyłapywało.

   Do tego trzy różne odstępy pod kreską: 1,3 rem na głównej,
   1,5 rem w artykule, 1,6 rem w dziale i na wyszukiwaniu.

   Po zmianie wszędzie: start 205 px (mobile) / 195 px (desktop),
   wysokość 45 px, odstęp 1,6 rem. Zmiana siedzi w dwóch istniejących
   regułach wyżej, nie w nowych – dopisanie nadpisania przegrałoby
   ze specyficznością `body.single main#wr-main .wr-crumbs`.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.78 – PODPOWIEDZI WYSZUKIWARKI (etap W1: dane lokalne)

   Lista podpowiedzi pod polem wyszukiwania: cztery grupy w stałej
   kolejności (Punkt Informacyjny → Działy → Gminy → Ludzie) plus
   stopka „Pokaż wszystkie wyniki". Markup buduje assets/js/podpowiedzi.js,
   dane przywozi functions.php (wr_podpowiedzi_dane); bez JavaScriptu
   lista w ogóle nie powstaje i pole działa jak dotąd.

   Dwie lekcje z tego projektu wprost w regułach:
   – `hidden` przegrywa z każdą autorską deklaracją `display`, więc
     chowanie listy trzyma jawna reguła `[hidden] { display: none }`;
   – żadnego `100vw/100vh` – szerokość i wysokość twardym pikselem
     (dymek istnieje tylko od 782 px wzwyż, tam 23 rem zawsze się mieści).
   ═══════════════════════════════════════════════════════════════ */

.wr-hsearch { position: relative; }

.wr-podpow {
  margin: 0; padding: .4rem; list-style: none;
  background: #fff;
  border: 1px solid rgba(43,66,73,.18);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(43,66,73,.16);
  overflow-y: auto;
}
.wr-podpow[hidden] { display: none; }

/* Desktop: dymek zakotwiczony do prawej krawędzi pigułki wyszukiwania.
   Nagłówek jest sticky (z-index 80), więc wewnątrz niego wystarczy
   lokalne 90, żeby lista malowała się nad treścią strony. */
.wr-hsearch .wr-podpow {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 23rem;
  max-height: 420px;
  z-index: 90;
}

/* Telefon: lista w nurcie panelu menu, na całą jego szerokość –
   pełnoekranowa nakładka przyjdzie w etapie W3. */
.wr-mobilenav__search { position: relative; }
.wr-mobilenav__search .wr-podpow {
  position: static; width: auto; max-height: none;
  margin-top: .55rem; box-shadow: 0 6px 18px rgba(43,66,73,.10);
}

.wr-podpow__naglowek {
  padding: .55rem .6rem .25rem;
  font-family: 'Rubik', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #7d8f95;
}
.wr-podpow__naglowek:first-child { padding-top: .35rem; }

/* Pozycja listy: całe pole jest odnośnikiem, minimum 40 px wysokości –
   z zapasem ponad próg 24 × 24 px, który przeszedł cały serwis (1.74). */
.wr-podpow__poz {
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: .4rem .6rem;
  border-radius: 10px;
  font-family: 'Rubik', sans-serif; font-size: .92rem;
  color: var(--wr-graphite); text-decoration: none;
}
.wr-podpow__poz:hover,
.wr-podpow__poz[aria-selected="true"] { background: rgba(230,89,86,.10); }

/* Romb w kolorze działu – ten sam język co pigułki kategorii. */
.wr-podpow__znak {
  flex: 0 0 auto; width: 9px; height: 9px;
  border-radius: 2px; transform: rotate(45deg);
}

.wr-podpow__tresc { display: flex; flex-direction: column; min-width: 0; }
.wr-podpow__nazwa {
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wr-podpow__meta { font-size: .76rem; color: #7d8f95; }

.wr-podpow__wszystkie {
  margin-top: .35rem;
  border-top: 1px solid rgba(43,66,73,.12);
  border-radius: 0 0 10px 10px;
  color: var(--wr-coral); font-weight: 600; font-size: .86rem;
}

/* tryb ciemny */
[data-wr-theme="dark"] .wr-podpow {
  background: #0F1B20; border-color: #2F444C;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
[data-wr-theme="dark"] .wr-podpow__poz { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-podpow__poz:hover,
[data-wr-theme="dark"] .wr-podpow__poz[aria-selected="true"] { background: rgba(230,89,86,.18); }
[data-wr-theme="dark"] .wr-podpow__wszystkie { border-top-color: #2F444C; color: #f0837f; }

/* ═══════════════════════════════════════════════════════════════
   v1.79 – PASEK DZIAŁÓW NA ARCHIWUM GMINY

   /gmina/<slug>/ było ostatnią listą bez paska działów (wyszukiwanie
   dostało go w 1.76). Pasek wchodzi filtrem w functions.php przez
   placeholder `data-wr-katnav-gmina` w templates/taxonomy-gmina.html –
   bez zaznaczenia, bo gmina nie jest działem. Style paska są wspólne
   (wr-katnav, rytm listwy z 1.77); tu tylko oddech między paskiem
   a afiszem gminy, żeby rama nie siedziała pigułkom na głowie.
   ═══════════════════════════════════════════════════════════════ */

body.tax-gmina main#wr-main .wr-katnav { margin-bottom: 1.6rem; }

/* ═══════════════════════════════════════════════════════════════
   v1.80 – PODPOWIEDZI: GRUPA „ARTYKUŁY" (etap W2)

   Piąta, OSTATNIA grupa listy podpowiedzi – wyniki z bazy wpisów
   przez punkt REST /wramach/v1/podpowiedzi (functions.php). Stylów
   nie dokłada: pozycje artykułów używają tych samych klas co stan
   pusty (romb w kolorze działu + meta „data – dział" pod tytułem).
   Blok istnieje, żeby historia wersji w tym pliku była kompletna.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.81 – WYSZUKIWANIE NA PEŁNYM EKRANIE TELEFONU (etap W3)

   Pole w menu mobilnym jest wąskie i siedzi w przewijanym panelu –
   po dotknięciu wyszukiwanie rozwija się na cały ekran: pole u góry,
   lista podpowiedzi pod spodem. Markup buduje podpowiedzi.js
   (dialog `.wr-szuknak` doklejany do <body>); zamykanie: krzyżyk,
   gest wstecz, Esc.

   Zero `100vh` – nakładka to `position: fixed; inset: 0`, więc pasek
   adresu Androida niczego nie rozjeżdża. `[hidden] { display: none }`
   jawnie, bo nakładka ma własny `display: flex`.
   ═══════════════════════════════════════════════════════════════ */

.wr-szuknak {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  padding: .8rem 1rem;
  background: var(--wr-cream);
}
.wr-szuknak[hidden] { display: none; }

/* blokada przewijania strony pod nakładką – na korzeniu, jak przy menu */
html.wr-szukanie-otwarte { overflow: hidden; }

.wr-szuknak form {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .45rem;
  border: 1px solid rgba(43,66,73,.25); border-radius: 999px;
  background: #fff;
  padding: .18rem .25rem .18rem .95rem;
}
.wr-szuknak input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: 'Rubik', sans-serif; font-size: 1rem;
  padding: .55rem 0;
}
.wr-szuknak input[type="search"]::-webkit-search-cancel-button { display: none; }
.wr-szuknak form:focus-within { border-color: var(--wr-coral); }

.wr-szuknak__szukaj {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--wr-coral); color: #fff; cursor: pointer;
}
.wr-szuknak__zamknij {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--wr-graphite); cursor: pointer;
}

/* lista podpowiedzi = przewijana reszta ekranu, bez dymkowego kostiumu */
.wr-szuknak .wr-podpow {
  position: static;
  flex: 1 1 auto; overflow-y: auto;
  margin-top: .7rem;
  max-height: none;
  border: 0; box-shadow: none; background: transparent;
  padding: 0 .1rem;
}
.wr-szuknak .wr-podpow[hidden] { display: none; }

/* tryb ciemny */
[data-wr-theme="dark"] .wr-szuknak { background: #16262D; }
[data-wr-theme="dark"] .wr-szuknak form { background: #0F1B20; border-color: #2F444C; }
[data-wr-theme="dark"] .wr-szuknak input[type="search"] { color: var(--wr-cream); }
[data-wr-theme="dark"] .wr-szuknak__zamknij { color: var(--wr-cream); }

/* ═══════════════════════════════════════════════════════════════
   v1.82 – DZIENNIK PUSTYCH ZAPYTAŃ (etap W4)

   Zapis fraz, na które portal nie miał żadnej odpowiedzi – tylko
   fraza, licznik i data, bez IP i identyfikatorów (decyzja z 27.08:
   logujemy wyłącznie zapytania bez wyników). Dwa źródła: stan pusty
   podpowiedzi (sendBeacon po 1,6 s ciszy) i podstrona /?s= z zerem
   trafień. Raport: wp-admin → Narzędzia → Puste zapytania.
   Całość w functions.php + podpowiedzi.js – ten blok tylko domyka
   historię wersji, stylów nie dokłada.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v1.83 – BAZY PUNKTU INFORMACYJNEGO NA REKORDACH

   Źródłem prawdy baz PI przestają być paczki JSON w treści stron,
   a stają się rekordy typu `info` (wtyczka w-ramach-core od 1.2.0:
   taksonomia „Baza", pola, formularz edycji w wp-adminie). Motyw
   podmienia w locie JSON w treści na zbudowany z rekordów – stare
   skrypty filtrów dostają dane w identycznym kształcie, wygląd 1:1
   – i dodatkowo wypełnia kontenery wynikowe gotowym HTML-em po
   stronie serwera: Google i czytelnik bez JavaScriptu widzą pełne
   listy. Stary JSON w treści stron zostaje jako uśpiony zapas
   (rollback do rodzica = bazy działają po staremu).
   Całość w functions.php – stylów nie dokłada.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   v1.84 – NAWIGACJA NA STRONACH STAŁYCH I W PUNKCIE INFO
           ORAZ POPRAWKI DASZKÓW

   ODTWORZENIE. Ten sam zestaw wszedł już raz jako 1.80 (przez edytor
   motywu) i został nadpisany paczką 1.80–1.83.1 z drugiego czatu,
   zbudowaną z drzewa sprzed tamtej zmiany. Wraca bez zmian
   merytorycznych, plus dwie poprawki zgłoszone z telefonu.

   1. ODSTĘP GÓRNY na stronach stałych schodzi z 40 px na 16 px, żeby
      ścieżka startowała w tym samym punkcie co na głównej i w artykule
      (205 px na telefonie).
   2. REGUŁY ŚCIEŻKI z 1.77 – wysokość 45 px liczona razem
      z dopełnieniem, kreska, odstęp 1,6 rem, jedna linia
      z wielokropkiem – obejmują też `body.page`.
   3. PASEK SEKCJI PUNKTU INFORMACYJNEGO dostaje daszki przewijania.
      Przy 390 px chował 816 px z 1178 – dwie trzecie sekcji poza
      ekranem, bez żadnego sygnału.
   4. WYRÓWNANIE DASZKÓW. Daszek paska działów stał 3,2 px na prawo od
      daszka fasolek: fasolki mają `padding-right: .2rem`, pasek działów
      nie miał żadnego, a przyklejony daszek liczy `right: 0` od
      krawędzi POLA DOPEŁNIENIA, nie od obrysu. Teraz oba mają to samo.
   5. KONIEC PÓŁWIDOCZNYCH LITER. Gradient dochodził do pełnego krycia
      dopiero na 58 % szerokości, czyli miękkie przejście zajmowało
      23 z 40 px. Na fasolkach to nie przeszkadzało (pod spodem białe
      pigułki), ale w pasku działów tekst leży wprost na tle strony
      i zostawała wyraźna, na wpół przezroczysta litera. Warstwa rośnie
      do 46 px, pełne krycie zaczyna się na 32 %: 15 px przejścia,
      mniej niż szerokość litery, i 31 px pełnego tła.

   UWAGA na tło gradientu w PI: pasek ma własne, kremowe tło, więc
   zmienną `--wr-tlo-suwak` ustawiamy lokalnie na nim – inaczej
   gradient kończyłby się kolorem, którego w tym miejscu nie ma.
   Douzupełnienie 1.84.1: pełne krycie już na 10 % zamiast 32 %. Nawet 15 px
   miękkiego przejścia zostawiało literę w połowie widoczności, a to właśnie
   ta półprzezroczystość czyta się jak błąd. Teraz przejście ma niecałe 5 px –
   mniej niż grubość kreski – więc litera po prostu kończy się na krawędzi
   wstęgi, tak jak kończy się na krawędzi ekranu w każdym pasku przewijanym
   w bok. Wstęga ma kolor tła strony, więc nie widać jej samej, tylko efekt.
   ═══════════════════════════════════════════════════════════════ */
body.page main#wr-main { padding-top: var(--wp--preset--spacing--30) !important; }

@media (max-width: 781px) {
  /* to samo dopełnienie z prawej co w fasolkach – patrz punkt 4 wyżej */
  .wr-katnav { padding-right: .2rem; }
}

@media (max-width: 999px) {
  .wr-pi-pasek {
    --wr-tlo-suwak: var(--wr-cream);
    scroll-behavior: smooth;
  }
  .wr-pi-pasek::before,
  .wr-pi-pasek::after {
    content: "";
    position: sticky;
    flex: 0 0 auto;
    align-self: stretch;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }
  .wr-pi-pasek::before {
    left: 0;
    z-index: 1;
    margin-right: -28px;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f76' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E")
        no-repeat left 2px center / 13px 13px,
      linear-gradient( to left, rgba(250,242,229,0) 0%, var(--wr-tlo-suwak) 16% );
  }
  .wr-pi-pasek::after {
    right: 0;
    margin-left: -28px;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f76' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")
        no-repeat right 2px center / 13px 13px,
      linear-gradient( to right, rgba(250,242,229,0) 0%, var(--wr-tlo-suwak) 16% );
  }
  .wr-pi-pasek.ma-wstecz::before,
  .wr-pi-pasek.ma-dalej::after { opacity: 1; }

  [data-wr-theme="dark"] .wr-pi-pasek { --wr-tlo-suwak: #111D21; }
  [data-wr-theme="dark"] .wr-pi-pasek::before {
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D5D8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E")
        no-repeat left 2px center / 13px 13px,
      linear-gradient( to left, rgba(17,29,33,0) 0%, var(--wr-tlo-suwak) 16% );
  }
  [data-wr-theme="dark"] .wr-pi-pasek::after {
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D5D8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")
        no-repeat right 2px center / 13px 13px,
      linear-gradient( to right, rgba(17,29,33,0) 0%, var(--wr-tlo-suwak) 16% );
  }
}


/* ══════════════════════════════════════════════════════════════
   v1.85 – DATA PRZY PIERWSZEJ LINII TYTUŁU W LISTACH

   W „Najnowszych” data stała obok OSTATNIEJ linii tytułu: przy dwóch
   wierszach 22 px za nisko, przy trzech 42 px. To nie był przypadek,
   tylko `align-items: baseline` – tytuł jest osobnym blokiem, a jego
   linia bazowa w tym układzie wypada w ostatnim wierszu.

   `flex-start` ustawia datę przy górnej krawędzi, a że interlinia daty
   (18,9 px) jest niemal równa interlinii tytułu (20,4 px), oba teksty
   wychodzą na tę samą wysokość – zmierzone odchylenie to 0,7 px,
   niezależnie od liczby wierszy i od szerokości ekranu.

   Reguła z 1.61 dla list ze zdjęciami i podcastów robiła to samo
   punktowo; zostaje, bo nie przeszkadza, ale przestała być potrzebna.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   v1.85.1 – ODSTĘP NAD REKLAMĄ I DASZKI DO SAMEJ KRAWĘDZI

   1. REKLAMA W KOLUMNIE BOCZNEJ NA TELEFONIE przyklejała się wprost
      do listy „Najnowsze" – zmierzone zero pikseli – podczas gdy
      wszystkie sekcje trzymają 48 px. Po reklamie odstęp wracał do 48,
      więc blok wyglądał na wciśnięty w listę i odklejony od dołu.

      Przyczyną jest reguła z 1.43: `margin-top: auto` przykleja reklamę
      do dna kolumny, żeby kończyła się równo z kaflami obok. Na
      desktopie robi dokładnie to, co ma – zmierzone 460 px przy 1280 px.
      Na telefonie kolumna nie ma sąsiada, który by ją rozciągał, więc
      `auto` wychodzi zerem. Poprawka tylko w zapytaniu mobilnym.

      Odstęp 35 px między blokami WEWNĄTRZ kolumny (podcasty →
      najnowsze) zostaje mniejszy świadomie: większa przerwa dzieli
      sekcje strony, mniejsza bloki w jednej kolumnie.

   2. LITERY PO PRAWEJ STRONIE DASZKA. Element przyklejony (`sticky`)
      nie może wyjść poza pole treści swojego kontenera, a oba paski
      miały `padding-right: .2rem`. Warstwa z daszkiem kończyła się
      więc 3,2 px przed krawędzią, na której przewijanie jest ucinane,
      a sam daszek ma jeszcze 2 px własnego luzu – razem około pięciu
      pikseli, przez które przeciskała się kolejna litera. Wyglądało to
      tak, jakby daszek czegoś nie zakrywał.

      Zerujemy dopełnienie z prawej w obu paskach: warstwa dochodzi
      dokładnie do krawędzi cięcia, więc za daszkiem nie ma już czego
      pokazać. Przy okazji znika powód, dla którego w 1.84 dokładałem
      pasku działów te 3,2 px – oba paski i tak są teraz wyrównane,
      bo oba kończą się w tym samym miejscu.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  main#wr-main .wr-aside--glowna .wr-ad--rect { margin-top: 3rem !important; }

  main#wr-main .wr-katnav,
  main#wr-main .wr-gfiltr,
  main#wr-main .wr-gfiltr--dzial { padding-right: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   v1.85.2 – WĄSKA WSTĘGA POD DASZKIEM

   Wstęga miała 46 px, z czego daszek zajmuje 15. Reszta, ponad 30 px,
   to było pełne tło zasłaniające tekst na długo przed strzałką – przy
   390 px oznaczało to, że ostatnia widoczna kategoria urywała się
   w połowie, choć miejsca na ekranie jeszcze było.

   28 px: 4,5 px miękkiego przejścia, potem pełne tło, a daszek siedzi
   w ostatnich 15. Zasłona jest o 18 px krótsza, więc przed strzałką
   mieści się więcej treści, a między ostatnią literą a daszkiem
   zostaje jeszcze około 13 px oddechu – tekst go nie dotyka.

   Próg krycia z 10 na 16 %, żeby miękkie przejście zachowało tę samą
   szerokość w pikselach co przy szerszej wstędze (około 4,5 px –
   mniej niż grubość litery, więc bez półprzezroczystych liter).
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   v1.86.0 – cele dotykowe w Punkcie Informacyjnym (WCAG 2.5.8)
   Linki akcji w kartach PI ("mapa", "ogloszenia", "strona parafii",
   telefony) mialy 14,5–19 px wysokosci. Nie da sie ich powiekszyc
   nakladka ::after, bo sasiaduja w jednym wierszu i nakladki
   zachodzilyby na siebie. Dlatego inline-block + padding pionowy:
   kazdy wiersz metadanych rosnie o 10 px, linki nie zachodza na
   siebie w poziomie. overflow-wrap trzyma dlugie adresy w kolumnie.
   Tylko mobile – na desktopie kursor nie ma tego problemu.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 781px) {
  main#wr-main .wr-apt a[href],
  main#wr-main .wr-urz a[href],
  main#wr-main .wr-msze a[href],
  main#wr-main .wr-roz a[href],
  main#wr-main .wr-szk a[href],
  main#wr-main .wr-odp a[href],
  main#wr-main .wr-pi-cols a[href] {
    display: inline-block;
    padding-block: 5px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}


/* ─────────────────────────────────────────────────────────────
   v1.87.0 – powrót do Punktu Informacyjnego

   Sciezka dostala ogniwo "Punkt Informacyjny" (functions.php).
   Nadtytul .wr-pi-nad mowil dokladnie to samo 65 px nizej, wiec znika
   z podstron: jego jedyna funkcja - powiedziec, do jakiego dzialu
   nalezy strona - jest juz obsluzona przez ogniwo, i to klikalnie.
   Na hubie nadtytulu i tak nie ma.

   Pod ostatnim rekordem laduje powrot do wszystkich baz. Bazy PI
   maja przy 390 px od 4 do 9 tysiecy pikseli wysokosci; bez tego
   po przeczytaniu listy najblizsze wyjscie bylo w stopce.
   ───────────────────────────────────────────────────────────── */
body.wr-pi:not(.wr-pi--hub) main#wr-main .wr-pi-nad { display: none; }

main#wr-main .wr-pi-powrot {
  margin: 2.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(43, 66, 73, .14);
}
main#wr-main .wr-pi-powrot a {
  display: inline-block;
  padding: .5rem .1rem;
  font-family: 'Rubik', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: var(--wr-coral);
  text-decoration: none;
}
main#wr-main .wr-pi-powrot a > span { margin-right: .35rem; }
main#wr-main .wr-pi-powrot a:hover,
main#wr-main .wr-pi-powrot a:focus-visible { text-decoration: underline; }


/* ─────────────────────────────────────────────────────────────
   v1.89.0 – data weryfikacji na bazach Punktu Informacyjnego

   Sześć baz nie mowilo, kiedy bylo sprawdzane. Przy danych, na
   podstawie ktorych ktos decyduje „jade tam teraz", pierwsze
   trafienie na nieaktualna godzine podwaza cala baze, a nie jeden
   rekord. Linia stoi zaraz pod leadem, przed danymi, i bierze kolor
   swojej bazy z --wr-pi-akcent.

   Marginesu dolnego pilnuje 2rem, zeby nie skleic sie z paskiem
   sekcji. Link ma na mobile wlasne dopelnienie, bo lezy poza
   kontenerami objetymi regula v1.86.
   ───────────────────────────────────────────────────────────── */
main#wr-main .wr-pi-sprawdzone {
  max-width: 62ch;
  margin: 1.3rem 0 2rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--wr-pi-akcent, var(--wr-coral));
  border-radius: 0 6px 6px 0;
  background: var(--wr-pi-akcent-tlo, rgba(230, 89, 86, .08));
  font-size: .92rem;
  line-height: 1.55;
}
main#wr-main .wr-pi-sprawdzone a {
  color: var(--wr-pi-akcent, var(--wr-coral));
  font-weight: 600;
}
@media (max-width: 781px) {
  main#wr-main .wr-pi-sprawdzone { max-width: none; }
  main#wr-main .wr-pi-sprawdzone a { display: inline-block; padding-block: 5px; }
}

/* ─────────────────────────────────────────────────────────────
   v1.90.0 – "otwarte teraz" w Aptekach

   Filtr liczy dzien tygodnia, swieta (stale plus ruchome liczone
   z daty Wielkanocy) i biezaca godzine, a potem czyta wlasciwa
   kolumne godzin. Obsluguje wyjatki w nawiasach ("8:00-16:00
   (sr 10:00-18:00)") i przerwy ("8:00-13:00 i 15:30-18:00").

   Nota nad wynikami mowi, na ktora godzine i ktora kolumne
   patrzymy - bo filtr, ktory po cichu decyduje za czytelnika przy
   danych ratunkowych, jest gorszy niz brak filtra.

   UWAGA dla nastepnego: w tresci strony nie wolno uzywac dwoch
   znakow ampersand jako operatora logicznego. WordPress zamienia
   je przy renderowaniu na encje i cały skrypt bazy przestaje sie
   wykonywac - strona wyglada normalnie, bo karty renderuje PHP,
   ale filtry sa martwe. Zamiast tego zagniezdzamy dwa ify.
   ───────────────────────────────────────────────────────────── */
main#wr-main .wra-teraz {
  margin: 0 0 1.1rem;
  padding: .7rem .95rem;
  border-radius: 8px;
  background: var(--wr-pi-akcent-tlo, rgba(230, 89, 86, .10));
  font-size: .92rem;
  line-height: 1.5;
}
main#wr-main .wra-teraz b { color: var(--wr-pi-akcent, var(--wr-coral)); }

/* v1.91.0 – uzupelnienie bloku v1.86.
   Regula celow dotykowych pomijala .wr-szk i .wr-odp, bo weryfikacja
   po v1.86 objela tylko piec podstron z listy, a Szkoly i Odpady sie
   w niej nie znalazly. Na /szkoly/ zostawalo 178 linkow ponizej 24 px.
   Selektory dopisane wyzej, w oryginalnej regule. */