/* --------------------------------------------------------------------------
   Paleta systemowa BONA ARTIS

   Zasada projektu: czerń, biel, czerwień oraz neutralne albo lekko chłodne
   szarości. Bez beżów, brązów, piaskowych i ciepłych szarości jako systemu UI.

   Poprzednie tokeny łamały tę zasadę: #171111 (ciepła czerń), #6b5e5b (ciepła
   szarość), #f8f6f4 (krem), #e3ddd8 (beżowa linia). Zostały zastąpione
   neutralnymi i lekko chłodnymi odpowiednikami.

   Kontrast sprawdzony wobec bieli (WCAG AA wymaga 4.5:1 dla zwykłego tekstu):
     --ba-ink     #1c2027  15.9:1
     --ba-muted   #5a616b   6.3:1
     --ba-red     #a5131a   7.8:1
     --ba-red-dark #a5131a  7.8:1
     --ba-red-bright #ee292f 4.2:1  <- tylko duże plamy i tła, nie tekst
   -------------------------------------------------------------------------- */
:root {
  --ba-black: #101217;
  --ba-topbar: #1b1f27;
  --ba-ink: #1c2027;
  --ba-muted: #5a616b;
  /* Jedna czerwień w całym serwisie.
   *
   * Wcześniej działały dwie: #c8102e w nagłówkach, linkach i przyciskach
   * oraz #a5131a na numerze telefonu w blokach kontaktowych. Różnica była
   * na tyle mała, że nie wyglądała na decyzję, tylko na niedopatrzenie.
   *
   * Zostaje ciemniejsza. Przy okazji rośnie kontrast: 7,75:1 na bieli
   * zamiast 5,88:1, więc czerwień jest bezpieczna także dla drobnego tekstu.
   */
  --ba-red: #a5131a;
  --ba-red-dark: #7f0f14;
  /* Czerwień z treści klienta. Za słaby kontrast na tekst, więc tylko akcenty. */
  --ba-red-bright: #ee292f;
  --ba-surface: #f5f6f8;
  --ba-surface-strong: #e9ecf1;
  --ba-soft: #f2f4f7;
  --ba-header: #f5f6f8;
  --ba-white: #ffffff;
  --ba-border: #d9dde3;
  --ba-width: 1180px;
  --ba-radius: 4px;

  /* Zgodność wstecz ze starymi nazwami tokenów. */
  --ba-cream: var(--ba-surface);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ba-ink);
  background: var(--ba-white);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

a {
  color: var(--ba-red);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-wrap,
.site-header__inner,
.site-footer__inner,
.content-wrap,
.page-hero__inner {
  width: min(100% - 36px, var(--ba-width));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ba-black);
  color: var(--ba-white);
}

.skip-link:focus {
  left: 12px;
}

.site-header {
  background: var(--ba-header);
  border-bottom: 1px solid var(--ba-border);
}

.site-topbar {
  background: var(--ba-topbar);
  color: var(--ba-white);
  font-size: 13px;
}

.site-topbar__inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.site-topbar__contact,
.site-topbar__actions,
.site-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-topbar__contact {
  gap: 18px 28px;
}

.site-topbar a,
.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-topbar__actions {
  justify-content: flex-end;
  gap: 10px;
}

.site-topbar__actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: var(--ba-red);
  color: var(--ba-white);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.site-header__main {
  background: var(--ba-header);
}

.site-header__inner {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-brand {
  display: inline-block;
  color: var(--ba-black);
  text-decoration: none;
}

.site-brand img {
  width: 245px;
}

.site-nav__menu,
.site-footer__menu {
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--ba-black);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.ba-hero {
  background: var(--ba-black);
}

.ba-hero-slider {
  min-height: 690px;
  position: relative;
  overflow: hidden;
}

.ba-hero__slide {
  position: absolute;
  inset: 0;
  min-height: 690px;
  display: grid;
  align-items: center;
  background-position: center top;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms ease;
}

.ba-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Zaslona pod napisem hero.
 *
 * Zdjecie jest jasne (sciana sadu ma srednio rgb(154,151,162)), wiec bialy
 * tytul potrzebuje przyciemnienia po lewej. Gradient gasnie w prawo, zeby
 * nie zaciemniac postaci.
 *
 * Zmierzone 31.08 na `hero-slide-b-01.jpg`, biale 64 px na najjasniejszym
 * fragmencie sciany pod napisem:
 *
 *     72% -> 11,4:1     60% -> 8,8:1     48% -> 6,7:1     40% -> 5,6:1
 *
 * Norma dla tekstu to 4,5:1, wiec zapas byl duzy i zejscie do 60% niczego
 * nie kosztuje; zeszlismy do 48%, zeby roznica byla widoczna.
 * Czerwona nadlinia jest bez zwiazku: siedzi na wlasnej bialej
 * plakietce (`.ba-hero .ba-eyebrow`), a nie na zaslonie.
 *
 * PRZY ZMIANIE ZDJECIA PRZELICZYC PONOWNIE - ciemniejsze zdjecie zniesie
 * mniej zaslony, jasniejsze wiecej.
 */
.ba-hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 18, 23, .48), rgba(16, 18, 23, .18), rgba(16, 18, 23, .02));
}

.ba-hero__content {
  position: relative;
  z-index: 2;
  color: var(--ba-white);
  padding: 80px 0 120px;
}

.ba-eyebrow {
  margin: 0 0 12px;
  color: var(--ba-red);
  font-weight: 800;
  text-transform: uppercase;
}

.ba-hero .ba-eyebrow {
  display: inline-block;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .88);
  color: var(--ba-red) !important;
  box-shadow: 0 8px 24px rgba(16, 18, 23, .16);
}

.ba-hero__title {
  max-width: 720px;
  margin: 8px 0 28px;
  color: var(--ba-white);
  font-size: 64px;
  font-weight: 800;
  line-height: 1.06;
}

.ba-hero-slider__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.ba-hero-slider__dots button {
  width: 11px;
  height: 11px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.88);
  background: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.ba-hero-slider__dots button.is-active,
.ba-hero-slider__dots button:hover,
.ba-hero-slider__dots button:focus {
  background: var(--ba-white);
  border-color: var(--ba-white);
  transform: scale(1.12);
}

.ba-button,
.ba-link-more,
.wp-block-button__link,
button,
input[type="submit"] {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid var(--ba-red);
  border-radius: 0;
  background: var(--ba-red);
  color: var(--ba-white);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ba-button:hover,
.ba-button:focus,
.ba-link-more:hover,
.ba-link-more:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: var(--ba-red-dark);
  border-color: var(--ba-red-dark);
  color: var(--ba-white);
}

/* `.ba-button--dark` usuniety.
 *
 * Byl uzyty w jednym miejscu - pod sekcja „Zadbamy o Twoje bezpieczenstwo
 * prawne" - i malowal przycisk na kolor gornego paska. Czarny placek obok
 * czerwonych przyciskow w reszcie serwisu sugerowal, ze to inny rodzaj
 * dzialania, choc prowadzil po prostu do kontaktu. Przycisk jest teraz taki
 * sam jak kazdy inny wezwanie do kontaktu.
 */

.ba-font-normal {
  font-style: normal !important;
  font-weight: 400 !important;
}

.ba-font-bold {
  font-style: normal !important;
  font-weight: 800 !important;
}

.ba-font-italic {
  font-style: italic !important;
  font-weight: 400 !important;
}

.ba-font-bold-italic {
  font-style: italic !important;
  font-weight: 800 !important;
}

.ba-page-title {
  padding: 56px 0 20px;
}

/* Hierarchia naglowkow.
 *
 * Wczesniej `h1` strony i `h2` sekcji mialy identyczne 42 px, wiec tytul strony
 * wazyl dokladnie tyle samo co tytul sekcji - strona czytala sie jak ciag
 * rownorzednych krzykow, bez informacji, co jest nadrzedne.
 *
 * Teraz `h1` zostaje na 42 px, a `h2` schodzi na `--ba-h2` (do 38 px) - ten sam
 * token, ktorego uzywa `ba-section__title` i ktory obowiazuje na podstronach.
 * Jeden stopien roznicy wystarczy, zeby oko zlapalo porzadek.
 */
.ba-page-title h1,
.page-hero h1 {
  margin: 0;
  color: var(--ba-black);
  font-size: var(--ba-h1);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.ba-section h2,
.ba-promo h2,
.ba-offer-cta h2 {
  margin: 0;
  color: var(--ba-black);
  font-size: var(--ba-h2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.ba-page-title h1 {
  max-width: 970px;
}

.ba-section {
  padding: 84px 0;
}

.ba-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 64px;
  align-items: center;
}

.ba-split--media {
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
}

.ba-copy h2 {
  margin: 0 0 22px;
}

.ba-copy p,
.content-wrap p {
  font-size: 18px;
}

.ba-lead {
  color: var(--ba-black);
  font-size: 22px;
}

.ba-facts {
  background: var(--ba-red);
  color: var(--ba-white);
  padding: 42px 36px;
}

.ba-facts strong {
  display: block;
  color: var(--ba-white);
  font-size: 92px;
  line-height: .9;
}

.ba-facts span {
  display: block;
  margin: 12px 0 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.ba-facts p {
  color: var(--ba-white);
}

.ba-facts a {
  color: var(--ba-white);
  font-weight: 800;
  text-transform: uppercase;
}

.ba-image-panel {
  min-height: 430px;
  background: linear-gradient(rgba(16, 18, 23, .30), rgba(16, 18, 23, .30)), url("../images/safety-architektura.jpg") center/cover;
}

.ba-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 28px 0;
}

.ba-mini-grid div,
.ba-service-card,
.ba-post-card,
.post-card {
  border: 1px solid var(--ba-border);
  background: var(--ba-white);
}

.ba-mini-grid div {
  padding: 26px;
}

.ba-mini-grid strong {
  display: block;
  color: var(--ba-red);
  font-size: 28px;
  line-height: 1.2;
}

.ba-mini-grid span {
  font-size: 13px;
  text-transform: uppercase;
}

/* `.ba-offer-cta` swiadomie wypisana z tej reguly - ma wlasne, lekkie
 * traktowanie nizej. `.ba-promo` (wylaczona w panelu) zostaje na czarnym. */
.ba-promo {
  background: var(--ba-black);
  color: var(--ba-white);
  padding: 74px 0;
}

.ba-promo p {
  margin-top: 0;
}

.ba-promo h2 {
  max-width: 760px;
  margin-bottom: 28px;
  color: var(--ba-white);
}

.ba-landing-referral {
  background: var(--ba-surface);
}

.ba-landing-referral__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.ba-landing-referral h2 {
  margin-bottom: 12px;
}

.ba-landing-referral p:last-child {
  margin-bottom: 0;
}

.ba-services {
  background: var(--ba-soft);
}

.ba-services h2 {
  max-width: 760px;
}

.ba-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.ba-service-card {
  min-height: 210px;
  padding: 26px;
  color: inherit;
  text-decoration: none;
}

/* Tytul kafla na kolorze tekstu, nie na czerwieni.
 *
 * Czerwone tytuly w siatce daja cztery mocne akcenty obok siebie i walcza
 * o uwage z czerwona belka naglowka oraz z przyciskiem. Kafle wpisow maja
 * tytuly w kolorze tekstu - teraz uslugi tez. Czerwien zostaje na belke,
 * przyciski i stan po najechaniu, czyli tam, gdzie cos znaczy.
 */
.ba-service-card h3 {
  margin: 0 0 12px;
  color: var(--ba-ink);
  font-size: 24px;
  line-height: 1.2;
}

/* ==========================================================================
   Zaproszenie do pelnej oferty

   Bylo: czarny pas przez cala szerokosc, tytul przy lewej krawedzi, przycisk
   odrzucony do prawej. Blok opadal w prawo, a miedzy tytulem a przyciskiem
   ziala pusta polowa ekranu.

   Jest: wezszy panel wysrodkowany na stronie, biale wnetrze, czerwona ramka
   wloskowa. Tytul i przycisk stoja w jednej osi, jeden pod drugim, wiec nic
   nie ciagnie ukladu na bok. Sekcja siedzi miedzy jasnoszarymi uslugami
   a bialym blogiem - biale tlo z czerwonym konturem oddziela ja od obu,
   nie dokladajac masy.
   ========================================================================== */

.ba-offer-cta {
  background: var(--ba-white);
  padding: 74px 0;
}

.ba-offer-cta__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 40px;
  border: 1px solid var(--ba-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ba-space-l);
  text-align: center;
}

.ba-offer-cta h2 {
  max-width: 620px;
  margin: 0;
  color: var(--ba-black);
}

.ba-latest {
  background: var(--ba-white);
}

.ba-post-grid,
.post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ba-post-card {
  padding: 26px;
}

.ba-post-card__author,
.entry-meta {
  margin: 0 0 8px;
  color: var(--ba-muted);
  font-size: 14px;
}

.ba-post-card h3,
.post-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.ba-post-card a,
.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.content-wrap {
  padding: 56px 0;
}

.content-wrap--narrow {
  width: min(100% - 32px, 860px);
}

.page-hero {
  background: var(--ba-black);
  color: var(--ba-white);
  padding: 72px 0;
}

.page-hero h1 {
  color: var(--ba-white);
}

.post-card {
  border-radius: var(--ba-radius);
  overflow: hidden;
}

.post-card__body {
  padding: 24px;
}

.site-footer {
  background: var(--ba-black);
  color: var(--ba-white);
  padding: 70px 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 44px;
}

.site-footer h2,
.site-footer h3 {
  margin: 0 0 18px;
  color: var(--ba-white);
  line-height: 1.16;
}

.site-footer h2 {
  font-size: 38px;
}

.site-footer h3 {
  font-size: 24px;
}

.site-footer__menu {
  display: grid;
  gap: 8px;
}

@media (max-width: 900px) {
  /* `.ba-offer-cta__inner` celowo poza ta regula: jest juz kolumna
   * i ma byc wysrodkowany, a `align-items: flex-start` zbilby to na waskich
   * ekranach. */
  .site-topbar__inner,
  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header__inner {
    min-height: 150px;
    justify-content: center;
  }

  .site-brand img {
    width: 190px;
  }

  .site-nav__menu {
    gap: 12px;
  }

  .ba-hero-slider,
  .ba-hero__slide {
    min-height: 560px;
  }

  .ba-hero__title {
    font-size: 48px;
  }

  /* Naglowki `h2` celowo poza ta regula: maja `--ba-h2` z `clamp()`, wiec
   * skaluja sie same i sztywne 34 px robilo je na waskich ekranach
   * *wieksze*, niz przewiduje skala. */
  .ba-page-title h1,
  .page-hero h1 {
    font-size: 34px;
  }

  .ba-split,
  .ba-split--media,
  .ba-landing-referral__inner,
  .ba-card-grid,
  .ba-post-grid,
  .post-list,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .ba-section {
    padding: 62px 0;
  }
}

@media (max-width: 560px) {
  .site-wrap,
  .site-header__inner,
  .site-footer__inner,
  .content-wrap,
  .page-hero__inner {
    width: min(100% - 30px, var(--ba-width));
  }

  .site-topbar__inner {
    min-height: 0;
    padding: 18px 0;
  }

  .site-topbar__actions {
    justify-content: flex-start;
  }

  .ba-hero-slider,
  .ba-hero__slide {
    min-height: 520px;
  }

  .ba-hero__content {
    padding: 74px 0;
  }

  .ba-hero__title {
    font-size: 42px;
  }

  .ba-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ba-facts strong {
    font-size: 76px;
  }

  .site-footer h2 {
    font-size: 32px;
  }
}

/* ==========================================================================
   Etap G - szablony treści migrowanej

   Klasy `ba-cta`, `ba-accent` i `ba-center` powstają w normalizacji starej
   treści (00-tools/normalize-content.php). Zastępują style inline, które stara
   strona trzymała bezpośrednio w HTML.
   ========================================================================== */

/* --- Okruszki --- */

.ba-crumbs {
  font-size: 13px;
  color: var(--ba-muted);
  margin-bottom: 14px;
}

.ba-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ba-crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--ba-border);
}

.ba-crumbs a {
  color: var(--ba-muted);
  text-decoration: none;
}

.ba-crumbs a:hover,
.ba-crumbs a:focus-visible {
  color: var(--ba-red);
  text-decoration: underline;
}

/* --- Typografia treści migrowanej --- */

.ba-entry {
  font-size: 17px;
  line-height: 1.75;
}

.ba-entry > *:first-child {
  margin-top: 0;
}

.ba-entry p {
  margin: 0 0 1.15em;
}

.ba-entry h2 {
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.25;
  margin: 2em 0 .6em;
  color: var(--ba-black);
}

.ba-entry h3 {
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.3;
  margin: 1.6em 0 .5em;
  color: var(--ba-black);
}

.ba-entry h4,
.ba-entry h5 {
  font-size: 18px;
  margin: 1.4em 0 .4em;
  color: var(--ba-black);
}

.ba-entry h2 + h3 {
  margin-top: .8em;
}

.ba-entry ul,
.ba-entry ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}

.ba-entry li {
  margin-bottom: .4em;
}

/* Odnośniki w treści są czerwone — ale przycisk nie jest odnośnikiem w treści.
 *
 * `.ba-entry a` ma specyficzność (0,1,1), a `.ba-button` tylko (0,1,0), więc
 * reguła treści wygrywała i malowała tekst przycisku na kolor jego własnego
 * tła: czerwone litery na czerwonym prostokącie. Na `/uslugi/` dawało to
 * jedenaście nieczytelnych placków.
 *
 * `:not(.ba-button)` mówi wprost, o co chodzi: czerwień należy do odnośników
 * w tekście, a przyciski mają własne barwy. Zapis podnosi też specyficzność,
 * więc reguła dalej wygrywa tam, gdzie ma wygrywać.
 */
.ba-entry a:not(.ba-button) {
  color: var(--ba-red);
  text-underline-offset: 2px;
}

.ba-entry a:not(.ba-button):hover,
.ba-entry a:not(.ba-button):focus-visible {
  color: var(--ba-red-dark);
}

.ba-entry img {
  height: auto;
  border-radius: var(--ba-radius);
}

.ba-entry .alignleft {
  float: left;
  margin: .3em 1.6em 1em 0;
  max-width: 45%;
}

.ba-entry .alignright {
  float: right;
  margin: .3em 0 1em 1.6em;
  max-width: 45%;
}

.ba-entry .aligncenter {
  margin-inline: auto;
}

.ba-entry blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ba-red);
  color: var(--ba-muted);
  font-size: 18px;
}

.ba-entry table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4em;
}

.ba-entry th,
.ba-entry td {
  border: 1px solid var(--ba-border);
  padding: 10px 12px;
  text-align: left;
}

.ba-entry::after {
  content: "";
  display: block;
  clear: both;
}

/* Akcent kolorem marki - dawne color:#ff0000 ze starej treści. */
.ba-entry .ba-accent,
.ba-entry a.ba-accent {
  color: var(--ba-red);
}

.ba-center {
  text-align: center;
}

/* --- Boks kontaktowy w treści (dawny div ze stylem inline) --- */

.ba-cta {
  margin: 1.8em 0;
  padding: 20px 22px;
  background: var(--ba-surface);
  border-left: 3px solid var(--ba-red);
  border-radius: 0 var(--ba-radius) var(--ba-radius) 0;
}

.ba-cta > *:first-child {
  margin-top: 0;
}

.ba-cta > *:last-child {
  margin-bottom: 0;
}

.ba-cta h2,
.ba-cta h3,
.ba-cta__text {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 .4em;
  color: var(--ba-black);
  font-weight: 600;
}

.ba-cta a {
  color: var(--ba-red);
  font-weight: 700;
  white-space: nowrap;
}

/* --- Nagłówek podstrony --- */

.page-hero--service .ba-lead,
.page-hero--post .entry-meta {
  max-width: 62ch;
}

.entry-meta__sep {
  margin: 0 8px;
  color: var(--ba-border);
}

/* --- Układ pojedynczej specjalizacji --- */

.ba-service__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  padding-block: 48px;
}

.ba-aside {
  position: sticky;
  top: 24px;
}

.ba-aside__card {
  background: var(--ba-black);
  color: var(--ba-white);
  padding: 26px 24px;
  border-radius: var(--ba-radius);
}

.ba-aside__card h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--ba-white);
}

.ba-aside__card p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  margin: 0 0 14px;
}

.ba-aside__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 19px;
  font-weight: 700;
}

.ba-aside__contact a {
  color: var(--ba-white);
  text-decoration: none;
}

.ba-aside__contact a:hover,
.ba-aside__contact a:focus-visible {
  text-decoration: underline;
}

.ba-aside .ba-button {
  width: 100%;
  text-align: center;
}

/* --- Sekcje i siatki --- */

.ba-section {
  padding-block: 56px;
}

.ba-section--muted {
  background: var(--ba-surface);
}

.ba-section__title {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 26px;
  color: var(--ba-black);
}

/* Siatka kafli - liczba kolumn skokowa, nie plynna.
 *
 * `auto-fill` dawal dowolna liczbe kolumn zalezna od szerokosci, wiec przy
 * 12 kaflach na strone reszta z dzielenia zawsze gdzies wyskakiwala - np. 3+3+3+1.
 *
 * Progi daja wylacznie 1, 2, 3 albo 4 kolumny. 12 dzieli sie przez kazda z tych
 * liczb bez reszty, wiec kazdy rzad jest pelny niezaleznie od szerokosci ekranu.
 * Niepelny bywa tylko ostatni rzad ostatniej strony archiwum, co jest naturalne.
 */
.ba-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

@media (min-width: 560px) {
  .ba-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ba-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Czterech kolumn celowo nie ma: tytuly kafli lamia sie wtedy brzydko,
 * a miniatury robia sie za male. Trzy to gorna granica.
 * 12 kafli na strone dzieli sie bez reszty przez 1, 2 i 3.
 */

/* ==========================================================================
   Siatka z wysrodkowanym ostatnim rzedem

   W archiwach liczba kafli jest stala (12) i dzieli sie przez liczbe kolumn
   bez reszty, wiec siatka wystarcza. Na stronie glownej liczba uslug zalezy
   od tego, co kancelaria wlaczy w panelu - dzis cztery, jutro trzy albo piec.
   Cztery kafle w trzech kolumnach zostawialy czwarty samotnie przy lewej
   krawedzi, jak niedokonczony rzad.

   Flexbox zamiast grida: rzedy pelne wygladaja identycznie (kafle maja te sama
   szerokosc co kolumny grida), a rzad niepelny jest wysrodkowany, wiec czyta
   sie jako zamkniety uklad, a nie jako brakujaca karta.
   ========================================================================== */

.ba-card-grid--balanced {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.ba-card-grid--balanced > * {
  flex: 0 1 100%;
  min-width: 0;
}

@media (min-width: 560px) {
  .ba-card-grid--balanced > * {
    flex-basis: calc((100% - var(--ba-space-m)) / 2);
  }
}

@media (min-width: 900px) {
  .ba-card-grid--balanced > * {
    flex-basis: calc((100% - 2 * var(--ba-space-m)) / 3);
  }
}

/* --- Kafle --- */

.ba-service-card,
.ba-post-card {
  display: flex;
  flex-direction: column;
  background: var(--ba-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  overflow: hidden;
}

.ba-service-card__media img,
.ba-post-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ba-service-card__body,
.ba-post-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ba-service-card__title,
.ba-post-card__title {
  font-size: 19px;
  line-height: 1.35;
  margin: 0;
}

.ba-service-card__title a,
.ba-post-card__title a {
  color: var(--ba-black);
  text-decoration: none;
}

.ba-service-card__title a:hover,
.ba-service-card__title a:focus-visible,
.ba-post-card__title a:hover,
.ba-post-card__title a:focus-visible {
  color: var(--ba-red);
}

.ba-service-card__excerpt,
.ba-post-card__excerpt {
  color: var(--ba-muted);
  font-size: 15px;
  margin: 0;
  flex: 1;
}

/* --- Zespół --- */

/* Siatka zespołu — trzy kolumny, ostatni rząd wyśrodkowany.
 *
 * Było `auto-fill` z minimum 230 px, czyli na szerokim ekranie nawet pięć
 * kolumn. Przy siedmiu osobach rzędy układały się inaczej na każdej
 * rozdzielczości, a portrety robiły się małe — a to są zdjęcia ludzi,
 * najważniejsza treść tej strony.
 *
 * Trzy kolumny to ta sama miara co w pozostałych siatkach serwisu.
 * Siedem osób daje 3 + 3 + 1, więc ostatni rząd jest wyśrodkowany
 * (flexbox), żeby siódma osoba nie stała samotnie przy lewej krawędzi.
 */
.ba-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.ba-team-grid > * {
  flex: 0 1 100%;
  min-width: 0;
}

@media (min-width: 560px) {
  .ba-team-grid > * {
    flex-basis: calc((100% - 28px) / 2);
  }
}

@media (min-width: 900px) {
  .ba-team-grid > * {
    flex-basis: calc((100% - 2 * 28px) / 3);
  }
}

.ba-team-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--ba-radius);
  background: var(--ba-surface-strong);
}

/* Kadrowanie portretow od gory, nie od srodka.
 *
 * Zestaw zdjec zespolu nie jest jednolity: dwa portrety maja proporcje 0.59
 * (495 x 840), pozostale doklanie 3/4 (720 x 960). Ramka kafla to 3/4, wiec
 * te wyzsze zdjecia mialy 100 px nadmiaru, a kadrowanie od srodka scinalo
 * po 50 px z gory i z dolu - czyli czubki glow.
 *
 * `center top` obcina wylacznie od dolu. Na zdjeciach o proporcji 3/4 nie
 * zmienia nic, bo tam nadmiaru nie ma. Reguła jest wiec bezpieczna takze dla
 * portretow, ktore kancelaria dosle pozniej - byle nie byly szersze niz 3/4.
 */
.ba-team-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.ba-team-card__placeholder {
  display: block;
  aspect-ratio: 3 / 4;
}

.ba-team-card__body {
  padding-top: 14px;
}

.ba-team-card__title {
  font-size: 18px;
  margin: 2px 0 0;
}

.ba-team-card__title a {
  color: var(--ba-black);
  text-decoration: none;
}

.ba-team-card__title a:hover,
.ba-team-card__title a:focus-visible {
  color: var(--ba-red);
}

.ba-profile__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-block: 48px;
}

.ba-profile__photo {
  margin: 0 0 22px;
  border-radius: var(--ba-radius);
  overflow: hidden;
  background: var(--ba-surface-strong);
}

/* Ta sama zasada co przy kaflach zespolu - patrz `.ba-team-card__media img`.
 * Portret kadrujemy od gory, bo czubek glowy jest wazniejszy niz nogi. */
.ba-profile__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.ba-profile__contact h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ba-muted);
  margin: 0 0 10px;
}

.ba-profile__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ba-profile__main h1 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--ba-black);
}

.ba-profile__back {
  margin-top: 28px;
}

.ba-featured {
  margin: 0 auto 32px;
}

.ba-featured img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--ba-radius);
}

/* --- Paginacja --- */

.pagination {
  margin-top: 40px;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  color: var(--ba-ink);
  text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
  border-color: var(--ba-red);
  color: var(--ba-red);
}

.pagination .page-numbers.current {
  background: var(--ba-black);
  border-color: var(--ba-black);
  color: var(--ba-white);
}

/* --- Widoczny fokus w całym serwisie --- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ba-red);
  outline-offset: 2px;
}

/* --- Węższe ekrany --- */

@media (max-width: 900px) {
  .ba-service__layout,
  .ba-profile__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ba-aside {
    position: static;
  }

  .ba-profile__aside {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .ba-entry {
    font-size: 16px;
  }

  .ba-entry .alignleft,
  .ba-entry .alignright {
    float: none;
    margin: 0 0 1em;
    max-width: 100%;
  }

  .ba-section {
    padding-block: 40px;
  }
}

/* --- Wydruk --- */

@media print {
  .site-topbar,
  .site-nav,
  .ba-aside,
  .ba-crumbs,
  .ba-section--muted {
    display: none;
  }
}

/* ==========================================================================
   Etap E - komponenty po konwersji z Elementora

   Te klasy powstają w 00-tools/convert-elementor.php. Zastępują widgety
   page buildera zwykłym HTML-em, który utrzymuje motyw.
   ========================================================================== */

/* Kafel z ikoną - dawny gva-icon-box-styles */

.ba-entry .ba-feature {
  padding: 22px 24px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  background: var(--ba-white);
  margin: 0 0 18px;
}

.ba-entry .ba-feature h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.35;
}

.ba-entry .ba-feature h3 a {
  color: var(--ba-black);
  text-decoration: none;
}

.ba-entry .ba-feature h3 a:hover,
.ba-entry .ba-feature h3 a:focus-visible {
  color: var(--ba-red);
}

.ba-entry .ba-feature p {
  margin: 0 0 8px;
  color: var(--ba-muted);
  font-size: 15px;
}

.ba-entry .ba-feature > *:last-child {
  margin-bottom: 0;
}

/* Liczba z podpisem - dawny gva-counter */

.ba-entry .ba-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 1em;
  padding: 18px 22px;
  background: var(--ba-black);
  color: var(--ba-white);
  border-radius: var(--ba-radius);
}

.ba-stat__number {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  font-weight: 700;
  color: var(--ba-white);
}

.ba-stat__label {
  font-size: 15px;
  color: rgba(255, 255, 255, .82);
}

/* Logotypy podmiotów współpracujących - dawny gva-brand */

.ba-entry .ba-logos {
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.ba-entry .ba-logos li {
  margin: 0;
}

.ba-entry .ba-logos img {
  max-height: 56px;
  width: auto;
  border-radius: 0;
}

/* Lista pozycji - dawny icon-list */

.ba-entry .ba-list {
  list-style: none;
  padding-left: 0;
}

.ba-entry .ba-list li {
  position: relative;
  padding-left: 22px;
}

.ba-entry .ba-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ba-red);
}

/* Obraz i blok obraz + tytuł */

.ba-entry .ba-figure {
  margin: 1.6em 0;
}

.ba-entry .ba-media-block {
  margin: 1.6em 0;
}

.ba-entry .ba-media-block h3 {
  margin-top: .6em;
}

/* Przyciski w treści */

.ba-entry .ba-actions {
  margin: 1.4em 0;
}

/* ==========================================================================
   Menu główne z podmenu

   Struktura odtworzona 1:1 ze strony produkcyjnej: 33 pozycje, trzy poziomy.
   „Oferta" ma rozbudowane podmenu z grupami „Nieruchomości i budownictwo",
   „Spadki" i „Spółki i kontrakty".

   Otwieranie działa na `:hover` i na `:focus-within`, więc podmenu jest
   dostępne także z klawiatury bez żadnego JavaScriptu.
   ========================================================================== */

.site-nav__menu {
  position: relative;
}

.site-nav__menu li {
  position: relative;
}

.site-nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 268px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--ba-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  box-shadow: 0 14px 34px rgba(16, 18, 23, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

/* Trzeci poziom wysuwa się w bok. */
.site-nav__menu .sub-menu .sub-menu {
  top: -9px;
  left: 100%;
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__menu .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ba-ink);
  white-space: normal;
}

.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu a:focus-visible {
  color: var(--ba-red);
  background: var(--ba-surface);
}

/* Pozycja rozwijająca dostaje strzałkę. */
.site-nav__menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.site-nav__menu .sub-menu .menu-item-has-children > a::after {
  transform: rotate(-45deg);
  float: right;
  margin-top: 5px;
}

/* Nagłówek grupy w podmenu prowadzi donikąd - nie udajemy linku. */
.site-nav__menu .sub-menu a[href$="#"] {
  color: var(--ba-muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: default;
}

.site-nav__menu .sub-menu a[href$="#"]:hover {
  color: var(--ba-muted);
  background: transparent;
}

.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a {
  color: var(--ba-red);
}

/* Na wąskich ekranach menu rozwija się w pionie, bez wysuwania w bok. */
@media (max-width: 900px) {
  .site-nav__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
  }

  .site-nav__menu .sub-menu,
  .site-nav__menu .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px;
    background: transparent;
  }

  .site-nav__menu .menu-item-has-children > a::after {
    float: right;
    margin-top: 6px;
  }
}

/* ==========================================================================
   Hierarchia wezwań do działania

   Audyt UX: „Przycisk główny musi od razu rzucać się w oczy".

   Problem: `.ba-link-more` („Czytaj dalej") dziedziczył styl pełnego,
   czerwonego przycisku. Na `/uslugi/` dawało to 28 identycznych czerwonych
   plam na jednym ekranie. Jeżeli wszystko jest przyciskiem głównym, to nic
   nim nie jest.

   Trzy poziomy:
     .ba-button           pełny czerwony  - kontakt, telefon, formularz
     .ba-button--ghost    obrys           - działanie drugorzędne
     .ba-link-more        link ze strzałką - „Czytaj dalej" w kafelkach
   ========================================================================== */

.ba-link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ba-red);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  text-decoration: none;
  align-self: flex-start;
}

.ba-link-more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.ba-link-more:hover,
.ba-link-more:focus-visible {
  background: transparent;
  border: 0;
  color: var(--ba-red-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ba-link-more:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* Wariant drugorzędny: obrys zamiast wypełnienia. */
.ba-button--ghost {
  background: transparent;
  color: var(--ba-red);
}

.ba-button--ghost:hover,
.ba-button--ghost:focus-visible {
  background: var(--ba-red);
  color: var(--ba-white);
}

/* Główne wezwanie na ciemnym panelu zostaje pełne i kontrastowe. */
.ba-aside__card .ba-button {
  border-color: var(--ba-white);
  background: var(--ba-white);
  color: var(--ba-black);
}

.ba-aside__card .ba-button:hover,
.ba-aside__card .ba-button:focus-visible {
  background: var(--ba-red);
  border-color: var(--ba-red);
  color: var(--ba-white);
}

/* ==========================================================================
   REDESIGN 2026-08 - unowocześnienie, nie nowy projekt

   Założenie: charakter marki zostaje. Mocna czerwień, ciężkie bezszeryfowe
   nagłówki, pełnowymiarowe plamy koloru, dużo powietrza. Zmienia się to,
   co realnie psuło odbiór:

   1. kontrast - w audycie widać czerwony tekst na czerwonym przycisku,
   2. hierarchia - wszystko krzyczało jednakowo,
   3. rytm - przypadkowe odstępy zamiast skali,
   4. neutralne - ciepłe beże zastąpione chłodnymi szarościami,
   5. detal - stany najechania, cienie, zaokrąglenia, przejścia.

   Ta warstwa jest dopisana na końcu arkusza, więc nadpisuje wcześniejsze
   reguły bez ich usuwania. Cofnięcie redesignu = usunięcie tej sekcji.
   ========================================================================== */

:root {
  /* Skala odstępów - jeden rytm dla całej strony. */
  --ba-space-xs: 8px;
  --ba-space-s: 16px;
  --ba-space-m: 24px;
  --ba-space-l: 40px;
  --ba-space-xl: 64px;
  --ba-space-2xl: 96px;

  /* Skala typograficzna - stosunek ok. 1.25, płynna względem szerokości. */
  --ba-text-xs: 12px;
  --ba-text-s: 14px;
  --ba-text-m: 17px;
  --ba-text-l: clamp(19px, 1.4vw, 21px);
  --ba-h3: clamp(20px, 1.9vw, 25px);
  --ba-h2: clamp(26px, 3vw, 38px);
  --ba-h1: clamp(34px, 5vw, 58px);
  --ba-display: clamp(40px, 6.4vw, 76px);

  --ba-radius: 6px;
  --ba-radius-l: 12px;

  --ba-shadow-s: 0 1px 2px rgba(16, 18, 23, .05), 0 2px 8px rgba(16, 18, 23, .05);
  --ba-shadow-m: 0 4px 12px rgba(16, 18, 23, .07), 0 12px 32px rgba(16, 18, 23, .09);

  --ba-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Typografia bazowa --- */

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter",
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ba-text-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ba-black);
}

p {
  text-wrap: pretty;
}

/* Długość wiersza. Powyżej ok. 75 znaków czytanie wyraźnie zwalnia. */
.ba-entry p,
.ba-entry li,
.ba-lead {
  max-width: 72ch;
}

.ba-eyebrow {
  font-size: var(--ba-text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ba-red);
  margin: 0 0 var(--ba-space-xs);
}

.ba-lead {
  font-size: var(--ba-text-l);
  line-height: 1.55;
  color: var(--ba-muted);
}

/* --- Nagłówek strony: mniej ozdób, więcej powietrza --- */

.page-hero {
  background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-white) 100%);
  border-bottom: 1px solid var(--ba-border);
  padding-block: var(--ba-space-xl) var(--ba-space-l);
  position: relative;
}

/* Cienka czerwona kreska jako sygnatura marki, zamiast dużej plamy. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ba-red);
}

.page-hero h1 {
  font-size: var(--ba-h1);
  margin: 0;
}

.page-hero__inner > * + * {
  margin-top: var(--ba-space-s);
}

/* --- Nagłówek serwisu --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--ba-border);
}

.site-header__main {
  background: transparent;
}

.site-topbar {
  font-size: var(--ba-text-xs);
  letter-spacing: .02em;
}

.site-topbar__inner {
  min-height: 44px;
}

.site-nav a {
  font-size: var(--ba-text-s);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding-block: var(--ba-space-xs);
  position: relative;
}

/* Podkreślenie wjeżdża od lewej - drobny detal, dużo charakteru. */
.site-nav__menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--ba-red);
  transition: right .22s var(--ba-ease);
}

.site-nav__menu > li:hover > a::before,
.site-nav__menu > li:focus-within > a::before,
.site-nav__menu > li.current-menu-item > a::before,
.site-nav__menu > li.current-menu-ancestor > a::before {
  right: 0;
}

/* --- Przyciski --- */

.ba-button,
.wp-block-button__link,
button,
input[type="submit"] {
  border-radius: var(--ba-radius);
  text-transform: none;
  letter-spacing: .01em;
  font-size: var(--ba-text-s);
  font-weight: 700;
  box-shadow: var(--ba-shadow-s);
  transition: transform .18s var(--ba-ease), background-color .18s var(--ba-ease),
    box-shadow .18s var(--ba-ease), border-color .18s var(--ba-ease);
}

.ba-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--ba-shadow-m);
}

.ba-button:active {
  transform: translateY(0);
}

/* --- Sekcje --- */

.ba-section {
  padding-block: var(--ba-space-2xl);
}

.ba-section--muted {
  background: var(--ba-surface);
  border-block: 1px solid var(--ba-border);
}

/* Selektor z dwiema klasami celowo.
 *
 * Wczesniejsza regula `.ba-section h2 { margin: 0 }` ma specyficznosc (0,1,1)
 * i wygrywala z `.ba-section__title` (0,1,0) niezaleznie od kolejnosci w pliku.
 * Efekt: tytul sekcji siedzial na kafelkach z zerowym odstepem.
 */
.ba-section .ba-section__title {
  font-size: var(--ba-h2);
  margin: 0 0 var(--ba-space-l);
  position: relative;
  padding-left: var(--ba-space-s);
}

.ba-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .14em;
  bottom: .14em;
  width: 4px;
  border-radius: 2px;
  background: var(--ba-red);
}

/* Dopisek nad tytulem sekcji.
 *
 * Tytul z belka ma 16 px wciecia z lewej. Dopisek bez tego wciecia stalby
 * o te 16 px dalej na lewo niz tytul, czyli krawedz bloku bylaby zebata.
 */
.ba-section__kicker {
  padding-left: var(--ba-space-s);
}

/* --- Kafle --- */

.ba-card-grid {
  gap: var(--ba-space-m);
}

.ba-service-card,
.ba-post-card {
  border-radius: var(--ba-radius-l);
  box-shadow: var(--ba-shadow-s);
  transition: transform .22s var(--ba-ease), box-shadow .22s var(--ba-ease),
    border-color .22s var(--ba-ease);
}

.ba-service-card:hover,
.ba-post-card:hover,
.ba-service-card:focus-within,
.ba-post-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--ba-shadow-m);
  border-color: var(--ba-red);
}

.ba-service-card__media img,
.ba-post-card__media img {
  transition: transform .5s var(--ba-ease);
}

.ba-service-card:hover .ba-service-card__media img,
.ba-post-card:hover .ba-post-card__media img {
  transform: scale(1.035);
}

.ba-service-card__title,
.ba-post-card__title {
  font-size: var(--ba-h3);
  letter-spacing: -.012em;
}

.ba-service-card__body,
.ba-post-card__body {
  padding: var(--ba-space-m);
  gap: var(--ba-space-xs);
}

.entry-meta {
  font-size: var(--ba-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ba-muted);
  margin: 0;
}

/* --- Zespół --- */

.ba-team-card__media {
  border-radius: var(--ba-radius-l);
  box-shadow: var(--ba-shadow-s);
  transition: box-shadow .22s var(--ba-ease), transform .22s var(--ba-ease);
}

.ba-team-card:hover .ba-team-card__media {
  transform: translateY(-3px);
  box-shadow: var(--ba-shadow-m);
}

/* Portrety zespołu - przygaszenie, nie odbarwienie.
 *
 * Pełna skala szarości (`grayscale(1)`) na zdjęciach ludzi czyta się we
 * współczesnych mediach cyfrowych jednoznacznie: tak oznacza się informację
 * o czyjejś śmierci. Efekt uboczny był silniejszy niż korzyść.
 *
 * Cel był inny: ujednolicić zestaw zdjęć z lat 2018-2026, robionych w różnych
 * sesjach, o różnej temperaturze barwowej i różnym tle. Do tego wystarczy
 * częściowe odbarwienie - skóra zostaje żywa, a zdjęcia przestają się gryźć.
 */
.ba-team-card__media img {
  filter: saturate(.62) contrast(1.04);
  transition: filter .35s var(--ba-ease);
}

.ba-team-card:hover .ba-team-card__media img,
.ba-team-card:focus-within .ba-team-card__media img {
  filter: saturate(1) contrast(1);
}

/* Zdjęcie na profilu osoby zostaje w pełnym kolorze - tam nie ma zestawu
   do ujednolicania, jest jeden portret. */
.ba-profile__photo img {
  filter: none;
}

.ba-team-card__title {
  font-size: var(--ba-text-l);
}

/* --- Treść --- */

.ba-entry h2 {
  font-size: var(--ba-h2);
  margin-top: var(--ba-space-xl);
  margin-bottom: var(--ba-space-s);
}

.ba-entry h3 {
  font-size: var(--ba-h3);
  margin-top: var(--ba-space-l);
  margin-bottom: var(--ba-space-xs);
}

.ba-entry > h2:first-child,
.ba-entry > h3:first-child {
  margin-top: 0;
}

.ba-entry ul li::marker {
  color: var(--ba-red);
}

.ba-entry img,
.ba-featured img {
  border-radius: var(--ba-radius-l);
}

/* Boks kontaktowy w treści - wyraźniejszy, ale nadal spokojny. */
.ba-cta {
  border-left-width: 4px;
  border-radius: var(--ba-radius);
  padding: var(--ba-space-m);
  background: var(--ba-surface);
}

.ba-entry .ba-feature {
  border-radius: var(--ba-radius-l);
  padding: var(--ba-space-m);
  transition: border-color .2s var(--ba-ease), box-shadow .2s var(--ba-ease);
}

.ba-entry .ba-feature:hover {
  border-color: var(--ba-red);
  box-shadow: var(--ba-shadow-s);
}

.ba-entry .ba-stat {
  border-radius: var(--ba-radius-l);
  padding: var(--ba-space-m) var(--ba-space-l);
}

/* --- Panel kontaktowy przy usłudze --- */

.ba-aside__card {
  border-radius: var(--ba-radius-l);
  padding: var(--ba-space-l) var(--ba-space-m);
  box-shadow: var(--ba-shadow-m);
  background:
    var(--ba-black);
}

.ba-aside__card h2 {
  font-size: var(--ba-h3);
}

.ba-aside__contact {
  margin-block: var(--ba-space-s);
}

/* --- Okruszki --- */

.ba-crumbs {
  font-size: var(--ba-text-xs);
  letter-spacing: .04em;
}

/* --- Stopka --- */

.site-footer {
  padding-block: var(--ba-space-xl);
}

.site-footer__inner {
  gap: var(--ba-space-l);
}

.site-footer h2 {
  font-size: var(--ba-h3);
  color: inherit;
}

.site-footer h3 {
  font-size: var(--ba-text-s);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  color: inherit;
}

/* --- Paginacja --- */

.pagination .page-numbers {
  border-radius: var(--ba-radius);
  font-weight: 700;
  transition: all .18s var(--ba-ease);
}

/* --- Szacunek dla ustawień systemowych --- */

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

@media (max-width: 900px) {
  .site-header {
    position: static;
  }

  .ba-section {
    padding-block: var(--ba-space-xl);
  }

  .page-hero {
    padding-block: var(--ba-space-l) var(--ba-space-m);
  }
}

/* Hasło hero - największy stopień w całym serwisie, jeden na stronę. */
.ba-hero__title {
  font-size: var(--ba-display);
  line-height: 1.04;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.ba-hero__content > * + * {
  margin-top: var(--ba-space-m);
}

/* ==========================================================================
   Opinie klientów

   Audyt UX: krótkie, skanowalne karty zamiast ściany tekstu. Kluczowe zdanie
   jako nagłówek, widoczna kategoria sprawy, ocena gwiazdkowa.

   Gwiazdki renderują się wyłącznie przy wypełnionej ocenie - patrz
   bona_artis_opinion_rating(). Domyślnie ich nie ma, bo klienci nigdy
   nie wystawiali ocen liczbowych.
   ========================================================================== */

.ba-opinions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ba-space-m);
  align-items: start;
}

.ba-opinion {
  display: flex;
  flex-direction: column;
  gap: var(--ba-space-xs);
  padding: var(--ba-space-m);
  background: var(--ba-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-l);
  box-shadow: var(--ba-shadow-s);
  transition: transform .22s var(--ba-ease), box-shadow .22s var(--ba-ease),
    border-color .22s var(--ba-ease);
}

.ba-opinion:hover {
  transform: translateY(-3px);
  box-shadow: var(--ba-shadow-m);
  border-color: var(--ba-red);
}

.ba-opinion__category {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ba-surface-strong);
  color: var(--ba-muted);
  font-size: var(--ba-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ba-opinion__result {
  margin: 0;
  font-size: var(--ba-text-l);
  line-height: 1.3;
  color: var(--ba-black);
}

.ba-opinion__quote {
  position: relative;
  margin: 0;
  padding-left: var(--ba-space-s);
  border-left: 3px solid var(--ba-red);
  flex: 1;
}

.ba-opinion__quote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ba-ink);
}

.ba-opinion__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ba-space-xs);
  margin-top: var(--ba-space-xs);
  padding-top: var(--ba-space-xs);
  border-top: 1px solid var(--ba-border);
  font-size: var(--ba-text-xs);
  color: var(--ba-muted);
}

.ba-opinion__author {
  font-weight: 700;
  color: var(--ba-ink);
}

.ba-opinion__meta time::before {
  content: "·";
  margin-right: var(--ba-space-xs);
  color: var(--ba-border);
}

/* --- Gwiazdki --- */

.ba-stars {
  display: flex;
  gap: 2px;
  margin: 0;
  font-size: 15px;
  line-height: 1;
}

.ba-stars__star {
  color: var(--ba-border);
}

.ba-stars__star.is-on {
  color: var(--ba-red);
}

/* Tekst tylko dla czytników ekranu - kolor nigdy nie jest jedynym nośnikiem. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .ba-opinions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Pływający przycisk telefonu

   Zastępuje wtyczkę Call Now Button. Tylko wąskie ekrany - na desktopie numer
   jest w pasku górnym i w panelu przy usłudze.
   ========================================================================== */

.ba-call {
  display: none;
}

@media (max-width: 900px) {
  .ba-call {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--ba-red);
    color: var(--ba-white);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(16, 18, 23, .28);
    transition: transform .18s var(--ba-ease), background-color .18s var(--ba-ease);
  }

  .ba-call:hover,
  .ba-call:focus-visible {
    background: var(--ba-red-dark);
    color: var(--ba-white);
    transform: translateY(-1px);
  }

  .ba-call:active {
    transform: translateY(0);
  }

  .ba-call__icon {
    flex: 0 0 auto;
  }

  /* Warstwa zgody na cookies siada nisko - przycisk ustępuje jej miejsca. */
  body.ba-privacy-open .ba-call {
    bottom: 96px;
  }
}

/* Bardzo wąskie ekrany: sam znak telefonu, żeby nie zasłaniać treści. */
@media (max-width: 380px) {
  .ba-call {
    padding: 0;
    width: 52px;
    justify-content: center;
  }

  .ba-call__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media print {
  .ba-call {
    display: none !important;
  }
}

/* ==========================================================================
   Wezwania do kontaktu - wersja lekka

   Poprzednia próba dała dwa czarne prostokąty w jednym polu widzenia:
   panel przy usłudze i blok w treści wyglądały niemal identycznie.
   Do tego napis „Telefon:" dziedziczył ciemny kolor tekstu i na czarnym tle
   był praktycznie niewidoczny.

   Teraz jeden język dla obu: chłodna jasna szarość w środku, delikatna
   czerwona ramka, mocny kolor **wyłącznie** na przycisku. Siła przekazu
   siedzi w wielkości numeru, nie w wielkości czarnej plamy.

   Selektory dwuklasowe, bo wcześniejsze reguły `.ba-cta a` i `.ba-aside__card`
   mają wyższą specyficzność niż pojedyncza klasa.
   ========================================================================== */

.ba-entry .ba-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ba-space-s) var(--ba-space-m);
  margin: var(--ba-space-l) 0;
  padding: var(--ba-space-m) var(--ba-space-l);
  border: 1px solid color-mix(in srgb, var(--ba-red) 34%, transparent);
  border-left: 4px solid var(--ba-red);
  border-radius: 0 var(--ba-radius-l) var(--ba-radius-l) 0;
  background: var(--ba-surface);
  box-shadow: none;
  color: var(--ba-ink);
}

.ba-entry .ba-cta h2,
.ba-entry .ba-cta h3,
.ba-entry .ba-cta .ba-cta__text {
  flex: 1 1 240px;
  margin: 0;
  font-size: var(--ba-text-m);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ba-ink);
}

/* Numer telefonu - największy element w bloku. */
/* Numer w jednym stopniu z resztą zdania.
 *
 * Wcześniej miał 29 px przy tekście 17 px i rozrywał wiersz - cyfry stały
 * jak wtręt z innego składu. Blok jest zdaniem, więc ma się czytać jak zdanie.
 * Numer wyróżnia grubość i kolor, nie stopień pisma.
 */
.ba-entry .ba-cta a[href^="tel:"] {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ba-red);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ba-ease);
}

.ba-entry .ba-cta a[href^="tel:"]:hover,
.ba-entry .ba-cta a[href^="tel:"]:focus-visible {
  color: var(--ba-red-dark);
  border-bottom-color: var(--ba-red);
}

/* Formularz - jedyna pełna plama koloru. */
.ba-entry .ba-cta a:not([href^="tel:"]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--ba-red);
  border-radius: var(--ba-radius);
  background: var(--ba-red);
  color: var(--ba-white);
  font-size: var(--ba-text-s);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ba-ease), border-color .18s var(--ba-ease);
}

.ba-entry .ba-cta a:not([href^="tel:"]):hover,
.ba-entry .ba-cta a:not([href^="tel:"]):focus-visible {
  background: var(--ba-red-dark);
  border-color: var(--ba-red-dark);
  color: var(--ba-white);
}

/* Etykiety typu „Telefon:" ze starej treści - przygaszone, nie krzyczą. */
.ba-entry .ba-cta strong,
.ba-entry .ba-cta .ba-accent {
  color: var(--ba-muted);
  font-weight: 600;
}

/* USUNIĘTE ŚWIADOMIE.
 *
 * Reguła `.ba-entry .ba-cta .ba-accent a` miała specyficzność (0,4,1), czyli
 * wyższą niż reguły przycisku i numeru telefonu (0,3,1). Stara treść owija
 * odnośniki w `<span class="ba-accent">`, więc selektor łapał także przycisk
 * „formularz kontaktowy" i malował jego tekst na czerwono - na czerwonym tle.
 * Przycisk wyglądał jak pusty czerwony prostokąt.
 *
 * Kolory odnośników w bloku ustalają teraz wyłącznie dwie reguły funkcjonalne:
 * numer telefonu i przycisk. Klasa `.ba-accent` ze starej treści nie ma tu
 * nic do powiedzenia.
 */

/* --- Panel kontaktowy przy usłudze - ten sam język --- */

/* Zasada: czerwona ramka -> wnętrze bardzo jasne. Czarna ramka -> wnętrze
 * może być ciemniejsze. Dzięki temu oba wezwania są lekkie, ale wyraźnie
 * różne, zamiast dublować się jako dwa identyczne prostokąty.
 *
 * Blok w treści  = czerwona ramka + #f5f6f8
 * Panel przy usłudze = ciemna ramka + #e9ecf1
 */
.ba-aside .ba-aside__card {
  background: var(--ba-surface-strong);
  border: 1px solid var(--ba-black);
  border-radius: var(--ba-radius-l);
  box-shadow: none;
  color: var(--ba-ink);
}

.ba-aside .ba-aside__card h2 {
  color: var(--ba-black);
}

.ba-aside .ba-aside__card p {
  color: var(--ba-muted);
}

.ba-aside .ba-aside__contact a {
  color: var(--ba-red);
  font-size: 23px;
}

.ba-aside .ba-aside__card .ba-button {
  background: var(--ba-red);
  border-color: var(--ba-red);
  color: var(--ba-white);
}

.ba-aside .ba-aside__card .ba-button:hover,
.ba-aside .ba-aside__card .ba-button:focus-visible {
  background: var(--ba-red-dark);
  border-color: var(--ba-red-dark);
  color: var(--ba-white);
}

@media (max-width: 600px) {
  .ba-entry .ba-cta {
    padding: var(--ba-space-m);
    gap: var(--ba-space-s);
  }

  .ba-entry .ba-cta a:not([href^="tel:"]) {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Jedno wezwanie do kontaktu na widok - przełącznik, nie mnożenie

   Problem: na stronie usługi telefon pojawiał się dwa razy naraz - w panelu
   bocznym i w bloku w treści. To samo, dwa razy, w jednym polu widzenia.

   Zasada: **albo panel boczny, albo blok w treści.** Nigdy oba.

     >= 900 px   jest miejsce na kolumnę boczną  -> panel, blok w treści ukryty
     <  900 px   kolumny bocznej nie ma          -> blok w treści, panel ukryty

   Podstrony bez panelu bocznego (wpisy, strony) mają blok w treści zawsze -
   tam nie ma czego dublować.
   ========================================================================== */

:root {
  /* Wysokość przyklejonego nagłówka. Panel boczny musi się o nią odsunąć,
     inaczej przy przewijaniu chowa się pod nim i widać tylko jego dół.
     Po obniżeniu nagłówka: 179 px, zaokrąglone w górę. */
  --ba-header-h: 184px;
}

@media (min-width: 900px) {
  /* Jest panel boczny - blok w treści byłby powtórzeniem. */
  .ba-service .ba-entry .ba-cta {
    display: none;
  }

  .ba-aside {
    top: calc(var(--ba-header-h) + var(--ba-space-m));
  }
}

@media (max-width: 899px) {
  /* Nie ma kolumny bocznej - panel zjechałby na sam dół artykułu,
     czyli dokładnie tam, gdzie już nikt nie patrzy. Zostaje blok w treści. */
  .ba-service .ba-aside {
    display: none;
  }
}

/* ==========================================================================
   Kafle - obraz do krawędzi karty

   Wcześniejsze reguły `.ba-service-card` i `.ba-post-card` mają `padding: 26px`
   z czasów, gdy kafel był samym tekstem. Po dodaniu miniatury ten padding
   wciskał obraz do środka: karta 377 px, obraz 324 px, czyli 26 px szarej
   ramki dookoła zdjęcia. Miniatury wyglądały przez to na mniejsze niż są.

   Odstęp wewnętrzny należy do treści kafla (`__body`), nie do samej karty.
   ========================================================================== */

.ba-card-grid .ba-service-card,
.ba-card-grid .ba-post-card {
  padding: 0;
  min-height: 0;
}

.ba-card-grid .ba-service-card__media,
.ba-card-grid .ba-post-card__media {
  display: block;
  margin: 0;
}

.ba-card-grid .ba-service-card__media img,
.ba-card-grid .ba-post-card__media img {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Kafel bez zdjęcia nie może stracić odstępu u góry. */
.ba-card-grid .ba-service-card > .ba-service-card__body:first-child,
.ba-card-grid .ba-post-card > .ba-post-card__body:first-child {
  padding-top: var(--ba-space-m);
}

/* ==========================================================================
   Nagłówek podstrony i nagłówek serwisu - kolor i wysokość

   Dwa błędy naraz, oba moje:

   1. Redesign zmienił tło `.page-hero` z czarnego na jasny gradient, ale
      nie ruszył koloru tekstu. Wcześniejsza reguła nadal ustawiała
      `color: white`, więc tytuł podstrony był biały na jasnym tle -
      praktycznie niewidoczny.

   2. Nagłówek serwisu miał 255 px wysokości, a nagłówek podstrony kolejne
      104 px. Razem prawie 360 px zanim zaczęła się treść. Na laptopie
      to ponad jedna trzecia ekranu na sam tytuł.
   ========================================================================== */

.page-hero {
  color: var(--ba-ink);
  padding-block: var(--ba-space-l) var(--ba-space-m);
}

.page-hero h1,
.page-hero .ba-eyebrow {
  color: var(--ba-black);
}

.page-hero .ba-eyebrow {
  color: var(--ba-red);
}

.page-hero .ba-lead {
  color: var(--ba-muted);
}

/* --- Nagłówek serwisu, niższy --- */

.site-header__inner {
  min-height: 0;
  padding-block: var(--ba-space-s);
  gap: var(--ba-space-m);
}

.site-brand img {
  width: 196px;
}

.site-topbar__inner {
  min-height: 40px;
}

.site-topbar__actions a {
  min-height: 30px;
  padding: 6px 12px;
}

@media (max-width: 900px) {
  .site-brand img {
    width: 168px;
  }

  .page-hero {
    padding-block: var(--ba-space-m) var(--ba-space-s);
  }
}

/* ==========================================================================
   Nagłówek podstrony w jednym rzędzie

   Okruszki po lewej, tytuł po prawej, na wspólnej linii bazowej. Prawa
   połowa nagłówka stała wcześniej pusta, a treść była przez to spychana
   w dół o wysokość całego wiersza z okruszkami.

   Tytuł dostaje lżejszy krój - 800 przy tym stopniu pisma robiło się ciężkie.
   ========================================================================== */

.page-hero h1 {
  font-weight: 600;
  letter-spacing: -.022em;
}

@media (min-width: 900px) {
  .page-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ba-space-s) var(--ba-space-l);
  }

  /* Odstępy pionowe z układu kolumnowego nie mają tu zastosowania. */
  .page-hero__inner > * + * {
    margin-top: 0;
  }

  .page-hero__inner .ba-crumbs {
    order: 1;
    margin: 0;
  }

  .page-hero__inner .ba-eyebrow {
    order: 2;
    margin: 0;
    text-align: right;
  }

  .page-hero__inner h1 {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
  }

  .page-hero__inner .ba-lead {
    order: 4;
    flex: 1 1 100%;
    margin-top: var(--ba-space-xs);
  }

  /* USUNIĘTE. Ta reguła łapała tylko podstrony bez dopiska i leada, więc
   * tytuł raz stał z lewej, raz z prawej - zależnie od tego, co akurat było
   * w nagłówku. To był główny powód niespójności między podstronami.
   * Tytuł stoi teraz zawsze z lewej, na całą szerokość. */
}

/* ==========================================================================
   Skala grubości - odchudzenie

   W arkuszu było 12 deklaracji `800` i 12 `700`. W Segoe UI 800 i 700 mapują
   się na ten sam krój Bold, więc nadmiar grubości nie dawał hierarchii,
   tylko ciężar. Najmocniej było to widać na stronie zespołu, gdzie obok
   siebie stały nagłówek sekcji, stanowisko i nazwisko - wszystkie ciężkie.

   Nowa skala:
     600  nagłówki, tytuły kart, nazwiska, przyciski, nawigacja
     700  wyróżnienia w treści (`strong`, `b`) - tam grubość niesie znaczenie
     400  tekst zwykły

   Wyjątek: numer telefonu w blokach kontaktowych zostaje przy 700, bo jest
   pojedynczym elementem, który ma się wybijać.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.ba-page-title h1,
.ba-section h2,
.ba-promo h2,
.ba-offer-cta h2,
.page-hero h1,
.ba-hero__title,
.ba-section .ba-section__title,
.ba-service-card__title,
.ba-post-card__title,
.ba-team-card__title,
.ba-opinion__result,
.ba-service-card h3,
.ba-post-card h3,
.post-card__title,
.site-footer h2 {
  font-weight: 600;
}

.ba-eyebrow,
.ba-opinion__category,
.site-footer h3 {
  font-weight: 600;
}

.site-nav a,
.site-topbar__actions a {
  font-weight: 600;
}

.ba-button,
.wp-block-button__link,
button,
input[type="submit"],
.ba-link-more,
.ba-entry .ba-cta a:not([href^="tel:"]),
.ba-opinion__author {
  font-weight: 600;
}

/* Wyróżnienia w treści zostają mocne - tam grubość coś znaczy. */
.ba-entry strong,
.ba-entry b {
  font-weight: 700;
}

/* Numer telefonu - jedyny element, który ma prawo krzyczeć. */
.ba-entry .ba-cta a[href^="tel:"],
.ba-aside .ba-aside__contact a,
.ba-stat__number {
  font-weight: 700;
}

/* ==========================================================================
   Typografia komponentów kontra hurtowa reguła na akapity

   `.ba-copy p, .content-wrap p { font-size: 18px }` ma specyficzność (0,1,1)
   i wygrywa z każdą regułą komponentu opartą na pojedynczej klasie. Efekt:
   dopiski, opisy kafli i metadane dostawały 18 px zamiast swoich rozmiarów.
   Najbardziej rzucało się to w oczy na stronie zespołu, gdzie stanowisko
   („RADCA PRAWNY") było niemal tak duże jak nazwisko.

   Poniżej te same rozmiary, ale z prefiksem `.content-wrap`, żeby wygrać
   specyficznością. Reguła hurtowa zostaje dla zwykłych akapitów treści.
   ========================================================================== */

.content-wrap p.ba-eyebrow,
.ba-copy p.ba-eyebrow {
  font-size: var(--ba-text-xs);
}

.content-wrap p.entry-meta,
.content-wrap p.ba-post-card__author {
  font-size: var(--ba-text-xs);
}

.content-wrap p.ba-service-card__excerpt,
.content-wrap p.ba-post-card__excerpt {
  font-size: 15px;
}

.content-wrap p.ba-opinion__category {
  font-size: var(--ba-text-xs);
}

.content-wrap .ba-opinion__quote p {
  font-size: 15px;
}

.content-wrap p.ba-cta__text {
  font-size: var(--ba-text-m);
}

.content-wrap .ba-aside__card p {
  font-size: 15px;
}

/* ==========================================================================
   Jeden wzorzec kontaktu w całym serwisie

   Do tej pory panel boczny miała tylko strona usługi, a wpisy i strony
   zostawały z blokiem w treści. Dwa różne wzorce na jednej witrynie.

   Teraz wszędzie tak samo:
     >= 900 px   panel przyklejony do okna, blok w treści ukryty
     <  900 px   blok w treści, panel ukryty
   ========================================================================== */

.ba-with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ba-space-l);
  padding-block: var(--ba-space-l);
}

@media (min-width: 900px) {
  .ba-with-aside {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--ba-space-xl);
    align-items: start;
  }

  /* Wszędzie, nie tylko na usłudze. */
  .ba-entry .ba-cta {
    display: none;
  }
}

@media (max-width: 899px) {
  .ba-with-aside .ba-aside,
  .ba-service .ba-aside {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Blok w treści - układ zdaniowy, nie siatka

   Stara treść to zdanie z odnośnikami w środku: „Potrzebujesz pomocy?
   Zadzwoń [numer] lub napisz [formularz]". Ustawienie tego na `flex`
   rozbijało zdanie na osobne elementy siatki i rozrzucało je po bloku.

   Blok wraca do zwykłego przepływu tekstu. Numer jest większy, przycisk
   siada w linii jak każdy element wewnątrzwierszowy.
   -------------------------------------------------------------------------- */

.ba-entry .ba-cta {
  display: block;
  line-height: 1.9;
}

.ba-entry .ba-cta a:not([href^="tel:"]) {
  vertical-align: middle;
  margin: 4px 2px;
}

.ba-entry .ba-cta a[href^="tel:"] {
  vertical-align: baseline;
}

/* ==========================================================================
   Nagłówek podstrony - jedna konwencja

   Układ, ten sam na każdej podstronie:

     [okruszki .......................... DOPISEK]
     [Tytuł podstrony]
     [zajawka, jeżeli jest]

   Okruszki zawsze z lewej, dopisek zawsze z prawej i zawsze obecny,
   tytuł zawsze z lewej na całą szerokość. Renderuje to jeden komponent
   `template-parts/page-header.php`, więc układ nie może się rozjechać
   między szablonami.
   ========================================================================== */

.page-hero__inner h1 {
  text-align: left;
  max-width: 22ch;
}

@media (min-width: 900px) {
  .page-hero__inner h1 {
    flex: 1 1 100%;
    max-width: 28ch;
  }

  .page-hero__inner .ba-eyebrow {
    flex: 0 0 auto;
    align-self: baseline;
  }

  .page-hero__inner .ba-crumbs {
    flex: 1 1 auto;
  }
}

/* Data wpisu w roli zajawki - mniejsza i przygaszona. */
.single-content .page-hero .ba-lead {
  font-size: var(--ba-text-s);
  letter-spacing: .02em;
}

/* Blok kontaktowy: jeden stopień pisma dla całego zdania. */
.ba-entry .ba-cta,
.content-wrap .ba-entry .ba-cta p.ba-cta__text,
.ba-entry .ba-cta a[href^="tel:"],
.ba-entry .ba-cta strong,
.ba-entry .ba-cta .ba-accent {
  font-size: var(--ba-text-m);
}

.ba-entry .ba-cta a[href^="tel:"] {
  font-variant-numeric: normal;
  letter-spacing: 0;
}

/* Przycisk stoi w środku zdania, więc też trzyma ten sam stopień pisma.
   Wyróżnia go tło, nie wielkość liter. */
.ba-entry .ba-cta a:not([href^="tel:"]) {
  font-size: var(--ba-text-m);
  min-height: 0;
  padding: 6px 16px;
  border-width: 1px;
}

/* ==========================================================================
   Blok kontaktowy - równowaga

   Dwa powody, dla których blok „opadał w prawo":

   1. Akapity mają miarę 72 znaków, a blok jej nie miał - wychodził poza
      prawą krawędź kolumny tekstu i łamał pion strony.
   2. Przycisk stał na końcu zdania, czyli przy prawej krawędzi. Największa
      plama koloru w bloku ciągnęła wzrok w róg.

   Układ docelowy - dwa wiersze, oba dosunięte do lewej:

     Potrzebujesz pomocy? Zadzwoń 12 307 14 04 lub napisz
     [ formularz kontaktowy ]

   Prawa krawędź ramki równa się prawej krawędzi akapitów, a przycisk stoi
   w osi tekstu, nie w rogu.
   ========================================================================== */

/* Miara ustawiona raz, na kontenerze treści.
 *
 * Wcześniej każdy element miał własne `max-width: 72ch`, a jednostka `ch`
 * liczy się od stopnia pisma **tego** elementu. Akapit ma 18 px, blok
 * kontaktowy 17 px, więc te same „72ch" dawały inną szerokość i krawędzie
 * się nie schodziły. Teraz miarę trzyma `.ba-entry`, a dzieci ją wypełniają.
 */
.ba-entry {
  max-width: 74ch;
}

.ba-entry p,
.ba-entry li,
.ba-entry .ba-lead,
.ba-entry .ba-cta {
  max-width: none;
}

.ba-entry .ba-cta a:not([href^="tel:"]) {
  display: block;
  width: fit-content;
  margin: var(--ba-space-xs) 0 0;
  padding: 8px 18px;
}

/* ==========================================================================
   Para „Porady on-line / Spotkania w biurze"

   Wcześniej: dwa obramowane pudełka z 28-punktowym czerwonym słowem i drobnym
   wersalikiem pod spodem. Pudełka niosły ciężar, którego treść nie miała -
   to są dwa fakty, nie dwie karty.

   Teraz: prosta para z kreskową ikoną. Ikona rysowana jedną grubością,
   dziedziczy kolor tekstu, ma 26 px. Minimum, które jeszcze coś znaczy.
   ========================================================================== */

.ba-copy .ba-mini-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ba-space-m) var(--ba-space-xl);
  margin: var(--ba-space-m) 0;
  padding: 0;
}

.ba-copy .ba-mini-grid li {
  display: flex;
  align-items: center;
  gap: var(--ba-space-s);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ba-red);
}

.ba-copy .ba-mini-grid svg {
  flex: 0 0 auto;
}

.ba-copy .ba-mini-grid span {
  font-size: var(--ba-text-s);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ba-ink);
  line-height: 1.3;
}

.ba-copy .ba-mini-grid strong {
  display: block;
  font-size: var(--ba-text-m);
  font-weight: 600;
  color: var(--ba-black);
  line-height: 1.25;
}

/* Miasto doklejone do tytułu dla SEO - obecne, ale nie w roli tytułu. */
.page-hero__city {
  display: block;
  margin-top: 2px;
  font-size: var(--ba-text-s);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ba-muted);
}

/* ==========================================================================
   Konkrety pod czerwonym panelem

   Panel podaje jedną liczbę. Ta lista mówi, co za nią stoi - lata, sprawy,
   strony pism. Dane pochodzą z oryginalnej strony i są edytowalne w panelu.

   Panel i lista to **jedna kolumna, dwa bloki jeden pod drugim**, bez przerwy
   między nimi: czerwony u góry, jasna chłodna szarość pod spodem. Lista ma to
   samo wcięcie poziome co panel (36 px), więc tekst i haczyki stoją w jednej
   osi z treścią panelu - dzięki temu czyta się jako doklejona, a nie jako
   osobny, przypadkowy element.
   ========================================================================== */

.ba-facts-col {
  display: flex;
  flex-direction: column;
}

.ba-facts-list {
  list-style: none;
  margin: var(--ba-space-l) 0 0;
  padding: var(--ba-space-m) 0 0;
  border-top: 1px solid var(--ba-border);
  display: grid;
  gap: var(--ba-space-s) var(--ba-space-l);
}

/* Dwie kolumny, bo w kolumnie tekstu jest na to miejsce.
 * Cztery w rzędzie łamałyby „+250 000 stron sporządzonych pism". */
@media (min-width: 700px) {
  .ba-facts-list {
    grid-template-columns: 1fr 1fr;
  }
}

.ba-facts-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ba-space-s);
  margin: 0;
  font-size: var(--ba-text-s);
  line-height: 1.45;
  color: var(--ba-ink);
}

.ba-facts-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ba-red);
}

/* ==========================================================================
   Formularz kontaktowy

   Stoi pod treścią strony „Kontakt". Prowadzi do niego 150 przycisków
   rozsianych po całym serwisie, więc musi być czytelny od pierwszego spojrzenia
   i działać bez JavaScriptu.

   Etykiety są nad polami, nie w środku jako podpowiedzi. Podpowiedź znika
   w chwili, gdy użytkownik zaczyna pisać - a wtedy nie ma już jak sprawdzić,
   co miało być w polu. Przy formularzu do kancelarii to zbyt duża cena
   za odrobinę elegancji.
   ========================================================================== */

.ba-form-section {
  background: var(--ba-surface);
  padding: var(--ba-space-xl, 64px) 0;
  margin-top: var(--ba-space-l);
}

.ba-form {
  max-width: 760px;
}

.ba-form__row {
  display: grid;
  gap: var(--ba-space-m);
}

@media (min-width: 700px) {
  .ba-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.ba-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--ba-space-m);
}

.ba-form__row .ba-form__field {
  margin-bottom: 0;
}

.ba-form__row + .ba-form__row,
.ba-form__row + .ba-form__field {
  margin-top: var(--ba-space-m);
}

.ba-form__field label {
  font-size: var(--ba-text-s);
  font-weight: 600;
  color: var(--ba-ink);
}

.ba-form__req {
  color: var(--ba-red);
}

.ba-form input[type="text"],
.ba-form input[type="email"],
.ba-form input[type="tel"],
.ba-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  background: var(--ba-white);
  color: var(--ba-ink);
  font: inherit;
  font-size: 16px; /* poniżej 16 px telefony przybliżają widok przy kliknięciu w pole */
}

.ba-form textarea {
  resize: vertical;
  min-height: 150px;
}

.ba-form__field--error input,
.ba-form__field--error textarea {
  border-color: var(--ba-red);
}

.ba-form__error {
  font-size: var(--ba-text-s);
  color: var(--ba-red-dark);
}

/* Zgoda: pole wyboru trzyma się pierwszego wiersza tekstu, nie środka akapitu. */
.ba-form__field--consent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-weight: 400;
  line-height: 1.5;
}

.ba-form__field--consent input {
  margin-top: .2em;
  width: 18px;
  height: 18px;
}

.ba-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ba-space-m);
  margin: var(--ba-space-l) 0 0;
}

.ba-form__hint {
  font-size: var(--ba-text-s);
  color: var(--ba-muted);
}

.ba-form__notice {
  margin: 0 0 var(--ba-space-m);
  padding: 16px 18px;
  border-left: 4px solid var(--ba-red);
  background: var(--ba-white);
  font-size: var(--ba-text-l);
}

.ba-form__notice--ok {
  border-left-color: #1f7a4d;
}

/* Pułapka na roboty - niewidoczna, ale nie `display: none`,
   bo część botów pomija pola całkowicie ukryte. */
.ba-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Znak przy kaflu usługi.
 *
 * Ten sam język co ikony „Porady on-line" i „Spotkania w biurze": jedna
 * grubość kreski, bez wypełnień, czerwień na znaku i atrament na tekście.
 * Znak stoi nad tytułem, nie obok — kafel jest wąski, a ikona obok tytułu
 * zabierałaby mu miejsce i wymuszała brzydkie łamanie.
 */
.ba-service-card__icon {
  display: block;
  margin-bottom: var(--ba-space-s);
  color: var(--ba-red);
}

/* Odstęp wewnętrzny kafli usług na stronie głównej.
 *
 * Reguła `.ba-card-grid .ba-service-card { padding: 0 }` powstała dla kafli
 * z miniaturą: obraz ma sięgać krawędzi, więc odstęp przeniesiono do
 * `__body`. Kafle na stronie głównej nie mają `__body` — to sam znak, tytuł
 * i opis — więc zostały z tekstem na krawędzi.
 *
 * Zakres zawężony do sekcji usług, żeby nie ruszyć kafli z miniaturami
 * w archiwum, gdzie tamta reguła jest potrzebna.
 */
.ba-services .ba-service-card {
  padding: 26px;
}

.ba-services .ba-service-card p {
  margin: 0;
}

/* ==========================================================================
   Światło między sekcjami

   Było `--ba-space-2xl`, czyli 96 px u góry i 96 px u dołu — a że sekcje
   stykają się bez marginesów, między treścią sąsiadujących powstawało
   192 px pustki. Na stronie głównej, gdzie sekcji jest sześć, oznaczało to
   ponad tysiąc pikseli przewijania samego powietrza.

   68 px daje 136 px między sekcjami. Nadal wyraźny oddech, ale bez wrażenia,
   że treść ucieka od siebie. Wartość w osobnym tokenie, żeby dało się ją
   dostroić w jednym miejscu, a nie w sześciu regułach.
   ========================================================================== */

:root {
  --ba-section-y: 68px;
}

.ba-section {
  padding-block: var(--ba-section-y);
}

.ba-offer-cta {
  padding: var(--ba-section-y) 0;
}

.ba-form-section {
  padding: var(--ba-section-y) 0;
}

@media (max-width: 900px) {
  :root {
    --ba-section-y: 48px;
  }
}

/* Liczba w liście konkretów pod czerwonym panelem.
 *
 * To liczba jest argumentem — „1800 Klientów", „4000 spraw" — a nie zdanie
 * wokół niej. Dostaje więc własny stopień, wagę i czerwień panelu, który stoi
 * nad nią. Opis schodzi do roli podpisu.
 *
 * `tabular-nums` wyrównuje cyfry w kolumnie, więc liczby stoją w jednej osi
 * mimo różnej długości.
 */
.ba-facts-list__number {
  font-size: var(--ba-text-l);
  font-weight: 700;
  color: var(--ba-red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Sama spacja to za mało: renderuje się w stopniu opisu (14 px), a stoi obok
   * liczby o stopniu 19 px i wadze 700. Cięższy element potrzebuje więcej
   * powietrza, inaczej opis wygląda, jakby się do niego przyklejał.
   * Odstęp liczony w `em`, czyli od stopnia samej liczby - skaluje się razem
   * z nią, gdyby kiedyś urosła. */
  margin-right: .25em;
}

.ba-facts-list li {
  align-items: baseline;
}

.ba-facts-list svg {
  margin-top: 0;
  align-self: center;
}

/* Wyrównanie kolumn w układzie dwudzielnym — do góry albo do dołu.
 *
 * Domyślne centrowanie sprawdza się tylko wtedy, gdy obie kolumny są podobnej
 * wysokości. Gdy jedna jest wyraźnie wyższa, po drugiej stronie powstaje
 * pustka u góry i u dołu naraz, a treść wygląda, jakby się obsunęła.
 * Wtedy trzeba wybrać krawędź, wzdłuż której układ ma się trzymać.
 */
.ba-split--bottom {
  align-items: end;
}

/* Kolumny wyrównane górą, nie środkiem.
 *
 * `.ba-split` domyślnie centruje w pionie. Gdy prawa kolumna jest wyraźnie
 * wyższa od lewej — a czerwony panel taki jest — nad nagłówkiem po lewej
 * powstaje pustka, a tekst wygląda, jakby się obsunął. Górna krawędź tekstu
 * ma stać równo z górną krawędzią panelu.
 */
.ba-split--top {
  align-items: start;
}

/* ==========================================================================
   Kadrowanie pojedynczego slajdu banera

   Zdjęcia mają 2500 × 1730 (proporcja 1,45), a ramka banera 1385 × 690
   (proporcja 2,01). Przy `cover` obraz skaluje się **do szerokości**, więc
   w poziomie wypełnia ramkę dokładnie i nie zostaje ani piksel zapasu.
   Samo `background-position` w poziomie nie zrobi wtedy nic.

   Żeby przesunąć osobę na zdjęciu, trzeba najpierw powiększyć obraz ponad
   szerokość ramki — dopiero to daje luz, którym można przesuwać okno widoku.
   Rozdzielczości jest na to z zapasem: 2500 px źródła na 1385 px wyświetlania.

   `background-position: 0%` pokazuje lewą część zdjęcia, więc osoba stojąca
   pośrodku kadru przesuwa się w prawo — z dala od tekstu.
   ========================================================================== */

/* Slajdy ze zdjęciami osób trzymają się prawej krawędzi.
 *
 * Pliki mają proporcję 2,012, ramka 2,007 — na szerokim ekranie nie ucina się
 * praktycznie nic. Ale przy węższym oknie ramka robi się wyższa w proporcji
 * i kadr zaczyna ucinać po bokach: przy 1025 px to 378 px, po 189 px z każdej
 * strony. Postać przesuwa się wtedy w stronę tekstu, a nagłówek — dłuższy przy
 * wąskim oknie — sięga wtedy 73% szerokości. Dokładnie ten zbieg powodował,
 * że Gabriela „zerkała zza litery".
 *
 * `100%` przykleja obraz do prawej krawędzi, więc przycięcie zabiera wyłącznie
 * z lewej — czyli stamtąd, gdzie i tak leży ciemny gradient i biały tekst.
 * Postać zostaje na swoim miejscu przy każdej szerokości okna.
 *
 * Slajd z działkami celowo pominięty: to grafika bez postaci, kadrowana środkiem.
 */
.ba-hero__slide--1,
.ba-hero__slide--2 {
  background-position: 100% 0%;
}

/* Powiększenie wyłączone na czas poprawki pliku w programie graficznym —
 * inaczej poprawione zdjęcie byłoby dodatkowo przybliżone i przycięte.
 * Mechanizm zostaje: każdy slajd ma własną klasę, więc gdyby kiedyś trzeba
 * było przesunąć kadr bez ruszania pliku, wystarczy tu dopisać dwie linie.
 *
 * .ba-hero__slide--2 { background-size: 124% auto; background-position: 0% 0%; }
 */

/* Trzeci slajd: tytuł w dwóch wierszach, nie w trzech.
 *
 * Tytuły banera mają ograniczenie szerokości 720 px. „Przekształcanie działek"
 * potrzebuje 726 px — przez sześć pikseli łamało się na dwa wiersze, a wraz
 * z drugą linią dawało trzy. Zapas 60 px zamyka sprawę i nie zbliża tekstu
 * do żadnej postaci, bo na tym slajdzie jej nie ma.
 *
 * Zawężone do tego slajdu celowo: pozostałe dwa mają zdjęcia osób i tam szerszy
 * nagłówek podchodziłby pod twarz.
 */
.ba-hero__slide--3 .ba-hero__title {
  max-width: 780px;
}

/* ==========================================================================
   Przycisk banera zawsze w tym samym miejscu

   Treść slajdu była wyśrodkowana w pionie, więc każda różnica wysokości bloku
   przesuwała wszystko naraz. Przy tytułach o różnej długości przycisk skakał
   między slajdami o kilkanaście pikseli — zmierzone: 419 px na slajdach 1 i 3,
   398 px na slajdzie 2. Oko tego nie nazwie, ale odbiera jako niepokój.

   Blok jest teraz przypięty do dolnej krawędzi. Przycisk stoi w stałej
   odległości od dołu, a tytuł rośnie do góry — więc dowolna liczba wierszy,
   także wpisana kiedyś w panelu, nie ruszy przycisku z miejsca.
   ========================================================================== */

.ba-hero__slide {
  align-items: end;
}

/* ==========================================================================
   Strona „nie znaleziono"

   Dwie kolumny: wyszukiwarka i drogi wyjścia. Na wąskim ekranie jedna pod drugą.
   Świadomie bez ozdób — człowiek, który tu trafił, czegoś szukał i chce to
   znaleźć, a nie oglądać ładny komunikat o błędzie.
   ========================================================================== */

.ba-404 {
  display: grid;
  gap: var(--ba-space-l);
}

@media (min-width: 800px) {
  .ba-404 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--ba-space-2xl, 64px);
  }
}

.ba-404 .ba-section__title {
  font-size: var(--ba-text-l);
  margin-bottom: var(--ba-space-m);
}

.ba-404 .search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ba-space-s);
}

.ba-404 .search-form label {
  flex: 1 1 200px;
}

.ba-404 .search-form .search-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  font: inherit;
  font-size: 16px;
}

.ba-404__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ba-space-s);
}

.ba-404__list li {
  margin: 0;
  padding: 0 0 var(--ba-space-s);
  border-bottom: 1px solid var(--ba-border);
}

.ba-404__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ba-404__list a {
  display: block;
  font-size: var(--ba-text-l);
  font-weight: 600;
  color: var(--ba-red);
  text-decoration: none;
}

.ba-404__list a:hover,
.ba-404__list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ba-404__list span {
  display: block;
  margin-top: 2px;
  font-size: var(--ba-text-s);
  color: var(--ba-muted);
}

/* ==========================================================================
   Publikacje — rozdroże działów i etykieta działu na kaflu

   Blog ma 611 wpisów. Płaska lista ze stronicowaniem była nie do przejścia,
   więc strona dzieli się na sześć działów, a każdy kafel mówi, z którego
   działu pochodzi.

   Etykieta stoi PRZED datą. 85% wpisów jest starszych niż trzy lata, więc
   data prowadząca wzrok mówiłaby głównie „to stare". Zostaje, ale w drugim
   planie: mniejsza, szara, po etykiecie.
   ========================================================================== */

/* --- Spis treści działów, pod wprowadzeniem ---

   To NIE jest druga nawigacja, tylko spis treści: odnośniki są kotwicami
   w obrębie strony. Wcześniej prowadziły do podstron działów, czyli dokładnie
   tam, gdzie prowadzą już nagłówki sekcji i odnośniki „Wszystkie wpisy" —
   na jednej stronie stało 36 odnośników do sześciu adresów.

   Siatka, nie strumień. Przy sześciu elementach o różnej szerokości zawijanie
   zostawiało sierotę w drugim rzędzie (pięć plus jeden). Trzy równe kolumny
   dają 3 × 2 i problem znika z definicji, a nie przez dobieranie szerokości. */

.ba-dzialy-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: var(--ba-space-l) 0 var(--ba-space-xl);
}

.ba-dzialy-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius);
  background: var(--ba-white);
  color: var(--ba-ink);
  font-size: var(--ba-text-s, 15px);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.ba-dzialy-nav__item:hover,
.ba-dzialy-nav__item:focus-visible {
  border-color: var(--ba-red);
  background: var(--ba-surface);
  color: var(--ba-ink);
}

/* Licznik to informacja poboczna. Wcześniej siedział w wypełnionej pigułce
   i „388" przy upadłości ważyło więcej niż nazwa działu — czyli odwrotnie
   niż zakłada kolejność, w której obszary promowane idą pierwsze. */
.ba-dzialy-nav__licznik {
  flex: none;
  color: var(--ba-muted);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .ba-dzialy-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .ba-dzialy-nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Sekcja jednego działu na rozdrożu --- */

.ba-dzial {
  margin-bottom: var(--ba-space-2xl);
}

.ba-dzial__naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ba-space-s);
  padding-bottom: var(--ba-space-s);
  border-bottom: 2px solid var(--ba-black);
}

.ba-dzial__tytul {
  margin: 0;
  font-size: var(--ba-h3, 26px);
  line-height: 1.2;
}

.ba-dzial__tytul a {
  color: var(--ba-black);
  text-decoration: none;
}

.ba-dzial__tytul a:hover,
.ba-dzial__tytul a:focus-visible {
  color: var(--ba-red);
}

.ba-dzial__opis {
  margin: 6px 0 0;
  max-width: 62ch;
  color: var(--ba-muted);
  font-size: var(--ba-text-s, 15px);
}

.ba-dzial__wszystkie {
  flex: none;
  color: var(--ba-red);
  font-size: var(--ba-text-s, 15px);
  font-weight: 700;
  white-space: nowrap;
}

.ba-dzial__powrot {
  margin-top: var(--ba-space-l);
  font-weight: 600;
}

/* --- Metryczka kafla: etykieta działu + data --- */

.ba-post-card .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ba-znacznik-dzialu {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ba-surface-strong);
  color: var(--ba-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
  text-decoration: none;
}

.ba-znacznik-dzialu:hover,
.ba-znacznik-dzialu:focus-visible {
  background: var(--ba-red);
  color: var(--ba-white);
}

.ba-post-card .entry-meta__data {
  color: var(--ba-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .ba-dzial__naglowek {
    align-items: flex-start;
  }

  .ba-dzial__wszystkie {
    white-space: normal;
  }
}

/* ==========================================================================
   Obrazek wyróżniający we wpisie — koniec z ucinaniem głów

   Było: szerokość 1180 px i `max-height: 460px` z `object-fit: cover`.
   Przy proporcji 16:10 pełna wysokość wynosi 737 px, więc kadr zabierał
   278 px, czyli 38% obrazu — po połowie z góry i z dołu, bo `object-position`
   domyślnie celuje w środek. Na portrecie ofiarą padała głowa, a na dole
   dłonie.

   Jest: obrazek zwężony do szerokości zbliżonej do kolumny tekstu (678 px).
   Przy 720 px pełna wysokość to 450 px — czyli **mniej niż dotychczasowe
   przycięte 460 px**. Widać cały kadr, a strona jest krótsza niż była.

   To nie jest poprawka tego jednego zdjęcia, tylko usunięcie przyczyny:
   przy zachowanej proporcji nic już nie ma czego uciąć.

   `max-height` i `object-position` zostają jako zabezpieczenie na wypadek
   zdjęcia pionowego — wtedy przycięcie idzie od dołu, nigdy od góry.
   ========================================================================== */

/*
 * Zwężamy SAM OBRAZEK, nie ramkę.
 *
 * Pierwsze podejście ustawiało `max-width` i `margin-inline: 0` na ramce.
 * Ramka nosi klasę `content-wrap`, która trzyma szerokość strony i boczny
 * margines przez `margin: auto` - skasowanie marginesów zabrało razem
 * z wyśrodkowaniem także lewy margines strony i obrazek wylądował na
 * krawędzi okna (0 px zamiast 43 px).
 *
 * Ramka zostaje więc nietknięta, a ograniczenie idzie na `img`. Obraz jest
 * elementem liniowym, więc sam staje do lewej krawędzi ramki - czyli
 * dokładnie tam, gdzie zaczyna się nagłówek i tekst.
 */
.ba-featured img {
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   Autor wpisu — blok pod tekstem

   Ten sam portret, który wcześniej wisiał nad artykułem na 450 px bez
   podpisu, tutaj mówi kto napisał tekst i z jakimi kwalifikacjami.
   Na kaflu zostaje jako obrazek wpisu — tam odróżnia teksty od siebie.
   ========================================================================== */

.ba-autor {
  display: flex;
  align-items: center;
  gap: var(--ba-space-m);
  margin-top: var(--ba-space-xl);
  padding-top: var(--ba-space-m);
  border-top: 1px solid var(--ba-border);
}

.ba-autor__zdjecie {
  flex: none;
  display: block;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 50%;
}

.ba-autor__zdjecie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zdjęcia zespołu są pionowe (ok. 3:4), więc kadr kwadratowy bierze
     twarz z góry, a nie środek klatki piersiowej. */
  object-position: center 18%;
  display: block;
}

.ba-autor__tresc {
  min-width: 0;
}

.ba-autor__etykieta {
  margin: 0 0 2px;
  color: var(--ba-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ba-autor__nazwa {
  margin: 0;
  font-size: var(--ba-h4, 19px);
  font-weight: 700;
  line-height: 1.25;
}

.ba-autor__nazwa a {
  color: var(--ba-black);
  text-decoration: none;
}

.ba-autor__nazwa a:hover,
.ba-autor__nazwa a:focus-visible {
  color: var(--ba-red);
}

.ba-autor__rola {
  margin: 2px 0 0;
  color: var(--ba-muted);
  font-size: var(--ba-text-s, 15px);
}

/* Pierwszy element kolumny nie ma się odsuwać od góry.
   Figura ze zdjęciem stała 27 px niżej niż sąsiednia ramka kontaktowa,
   bo niosła margines górny mimo tego, że jest pierwsza w kolumnie. */
.ba-entry > *:first-child {
  margin-top: 0;
}

/* Zdjęcie w kolumnie tekstu równa się dołem z ramką kontaktową obok.

   Wyrównanie góry załatwia zdjęty margines pierwszego elementu (wyżej).
   Dół wymaga zrównania wysokości, a te dwa elementy leżą w osobnych
   kolumnach siatki, więc CSS nie ma jak odczytać wysokości sąsiada —
   stąd wartość wpisana wprost.

   391 px to wysokość ramki „Porozmawiajmy o Państwa sprawie" przy jej
   obecnej treści. UWAGA: jeśli kancelaria dopisze tam zdanie albo trzeci
   numer telefonu, ramka urośnie i wyrównanie się rozjedzie. Wtedy poprawić
   tę jedną liczbę.

   Przycięcie idzie od dołu (`object-position: center top`), więc zabiera
   blat biurka, nigdy twarz. */
@media (min-width: 900px) {
  .ba-with-aside .ba-entry > .ba-figure:first-child img {
    height: 391px;
    object-fit: cover;
    object-position: center top;
  }
}