/* Ziemia na rozdrożu – poprawki i uzupełnienia motywu WordPress (ładowane po podstawa.css).
   Edytowany ręcznie. Klasy zr-* pochodzą z design systemu; tu tylko to, czego bundle.css nie ma
   albo co zależy od WordPressa. Kolory i odstępy wyłącznie z tokenów (--color-*, --space-*). */

/* ---------- Podstawa ---------- */
main:focus { outline: none; }
html { scroll-padding-top: var(--header-height-compact); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pasek administratora WordPressa nad przyklejonym nagłówkiem (tylko dla zalogowanych). */
.admin-bar .zr-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .zr-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .zr-header { top: 0; } }

/* Kafel z fokusem klawiatury zachowuje się jak przy najechaniu (jak w makietach). */
.zr-tile:focus-within .zr-photo__img { transform: scale(var(--hover-scale)); }
.zr-tile:focus-within .zr-tile__link { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: var(--hover-underline); text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .zr-tile:focus-within .zr-photo__img { transform: none; } }

/* Obraz w kontenerze zdjęcia (wp_get_attachment_image dodaje width/height – kontener ustala proporcję). */
.zr-photo img.zr-photo__img { height: 100%; }

/* ---------- Nagłówek ---------- */
/* Dział bez podmenu: pozycja jako link w wyglądzie przycisku działu. */
a.zr-nav__btn { text-decoration: none; }
.zr-nav__group[hidden] { display: none; }

/* Wyszukiwanie w nagłówku: panel pod nagłówkiem (wzorzec disclosure). */
.zr-header__search { padding-block: var(--space-16); border-top: var(--stroke-hairline) solid var(--color-line); background: var(--color-bg); }
.zr-header__search[hidden] { display: none; }
.zr-header__search-btn[aria-expanded="true"] { background: var(--color-band-light); }

/* Formularz wyszukiwania (pole 56 px z ikoną i przycisk „Szukaj”) – nagłówek, 404, wyniki. */
.zr-search-form { display: flex; flex-direction: column; gap: var(--space-8); max-width: 760px; }
.zr-search-form__row { display: flex; gap: var(--space-8); align-items: center; }
.zr-search-form__row .zr-search { flex: 1 1 auto; min-width: 0; }
.zr-search-form__row .zr-input { width: 100%; }
.zr-search-form__row .zr-btn { flex: none; height: var(--control-height-lg); padding-inline: var(--space-24); }
.zr-search-form__note { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); overflow-wrap: anywhere; }
.zr-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 479px) {
  .zr-search-form__row .zr-btn { padding-inline: var(--space-16); }
}

/* ---------- Treść z edytora WordPressa ---------- */
.zr-prose img, .zr-prose video, .zr-prose iframe { max-width: 100%; height: auto; }
.zr-prose > h2, .zr-prose > h3 { scroll-margin-top: 96px; }
/* Strona kalkulatora: sekcje poradnika to H2 (styl .zr-prose > h2), H3 tylko w seriach podnagłówków – wygląd zwykłego
   podtytułu zamiast stylu H2 z kalkulatory.css (zasady nagłówków kalkulatorów, pkt 11; plik generowany – nadpisanie tutaj) */
.zr-calc-article .zr-prose--nested > h3 { font-family: inherit; font-size: 18px; line-height: 24px; font-weight: 600; margin-top: var(--space-32); }
.zr-prose figure { margin-inline: 0; }
.zr-prose figcaption, .zr-prose .wp-element-caption, .zr-prose .wp-caption-text { margin-top: var(--space-8); font-size: 13px; line-height: 18px; color: var(--color-ink-muted); text-align: left; }

/* ---------- Tabele w treści (wariant „Spokojna”; znaczniki – filtr ziemia_tabele_w_tresci) ----------
   Komputer: tylko linie poziome, liczby do prawej. Telefon: przewijanie w poziomie, przypięta pierwsza kolumna.
   Zakres .zr-prose – tabele modułów kalkulatorów (zr-kalk-tabela) bez zmian. Wyłącza style bloku tabeli rdzenia
   (także word-break: break-word z has-fixed-layout – przy table-layout: auto ściskał kolumnę do jednego znaku). */
.zr-prose .zr-table-wrap { margin: var(--space-32) 0 var(--space-8); overflow: visible; }
.zr-prose .zr-table-wrap > .zr-table-scroll > .zr-table, .zr-prose .zr-table-wrap > .zr-table { margin: 0; }
.zr-prose table.zr-table { width: 100%; table-layout: auto; border: 0; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.zr-prose .zr-table thead, .zr-prose .zr-table tfoot { border: 0; }
.zr-prose .zr-table th, .zr-prose .zr-table td { padding: 12px; text-align: left; vertical-align: top; border: 0; border-bottom: var(--stroke-hairline) solid var(--color-line); background: none; word-break: normal; }
.zr-prose .zr-table tr > :first-child { padding-left: 0; font-weight: 600; color: var(--color-ink); }
.zr-prose .zr-table tr > :last-child { padding-right: 0; }
.zr-prose .zr-table thead th, .zr-prose .zr-table thead td { padding-top: 0; vertical-align: bottom; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); border-bottom-color: var(--color-line-strong); }
.zr-prose .zr-table .zr-table__num { text-align: right; white-space: nowrap; }
.zr-prose .zr-table caption { caption-side: top; padding: 0 0 var(--space-8); text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); }
.zr-prose .zr-table-wrap > figcaption { margin-top: var(--space-8); }
.zr-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.zr-table-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-8); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-ink-muted); }
.zr-table-hint[hidden] { display: none; }
.zr-table-hint svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 767px) {
  .zr-prose .zr-table-scroll > table.zr-table { width: auto; min-width: 100%; }
  .zr-prose .zr-table-scroll .zr-table th, .zr-prose .zr-table-scroll .zr-table td { white-space: nowrap; }
  .zr-prose .zr-table-scroll .zr-table .zr-table__long { white-space: normal; min-width: 220px; }
  .zr-prose .zr-table-scroll .zr-table tr > .zr-table__long:first-child { min-width: 150px; }
  .zr-prose .zr-table-scroll .zr-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--color-bg); }
  /* Linia po prawej przypiętej kolumny (box-shadow komórek nie jest rysowany przy border-collapse: collapse) */
  .zr-prose .zr-table-scroll.is-scrollable .zr-table tr > :first-child { background: linear-gradient(to left, var(--color-line-strong) 1px, var(--color-bg) 1px); }
  /* Tryb „wiersz jako blok” (zr-table--stack) – pierwsza kolumna jak nagłówek wiersza, bez odstępów poziomych */
  .zr-prose .zr-table--stack th, .zr-prose .zr-table--stack td { padding: 2px 0; border: 0; }
}
@media print {
  .zr-table-hint { display: none !important; }
  .zr-table-scroll { overflow: visible; }
  .zr-prose .zr-table-scroll > table.zr-table { width: 100%; min-width: 0; }
  .zr-prose .zr-table th, .zr-prose .zr-table td { position: static !important; white-space: normal !important; background: none !important; min-width: 0 !important; }
}

.zr-prose blockquote:not([class]) { padding-left: var(--space-24); border-left: 3px solid var(--color-primary); font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 30px; }
.zr-prose .alignleft { float: left; margin: 0 var(--space-24) var(--space-16) 0; }
.zr-prose .alignright { float: right; margin: 0 0 var(--space-16) var(--space-24); }
.zr-prose .aligncenter { margin-inline: auto; }
.zr-prose hr { border: 0; border-top: var(--stroke-hairline) solid var(--color-line); }

/* Zabezpieczenie przed przewijaniem w poziomie przy dłuższej nazwie serwisu (np. tymczasowej na stagingu). */
.zr-header__inner > .zr-logo, .zr-mobile-menu__top > .zr-logo { min-width: 0; }

/* ---------- Artykuł ---------- */
/* „W tym temacie” na końcu przewodnika – bez wątków (USTALENIA pkt 4): jedna lista kafli B kompaktowych w 3 kolumnach. */
.zr-topic__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--grid-gutter); }
.zr-topic__grid > li { min-width: 0; }
.zr-topic__grid .zr-tile-b { height: 100%; }
@media (max-width: 1023px) { .zr-topic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .zr-topic__grid { grid-template-columns: minmax(0, 1fr); } }
/* „Inne artykuły w tym temacie” bez wątków: jedna lista w kolumnach; linia przy każdej pozycji zamiast przy liście. */
.zr-topic-list--kolumny { columns: 3 260px; column-gap: var(--grid-gutter); border-left: 0; }
.zr-topic-list--kolumny > li { break-inside: avoid; border-left: var(--stroke-hairline) solid var(--color-line); }
.zr-topic-list--kolumny a, .zr-topic-list--kolumny .zr-topic-list__current { margin-left: -1px; }

/* ---------- Dział i podkategoria ---------- */
/* Siatka powiązanych kalkulatorów (zr-calc-related jest w kalkulatory.css – tu kopia dla stron działu i podkategorii). */
@media (min-width: 1024px) {
  .zr-calc-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); }
  .zr-calc-related--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.zr-calc-slot .zr-section-head { margin-bottom: var(--space-24); }
/* Odstępy między częściami strony podkategorii (makieta: gap 64 px między przewodnikiem, listą i slotem). */
.zr-lista-tematu { display: flex; flex-direction: column; gap: var(--space-64); }
.zr-lista-tematu > .zr-calc-slot { margin-block: 0; }
@media (max-width: 767px) { .zr-lista-tematu { gap: var(--space-48); } }
.zr-lista-tematu__slot { margin-block: var(--space-64); }
@media (max-width: 767px) { .zr-lista-tematu__slot { margin-block: var(--space-48); } }

/* ---------- Hub kalkulatorów (style z makiety Kalkulatory: hub-body, hub-pop) ---------- */
.zr-hub-head { padding: var(--space-32) 0 var(--space-40); }
.zr-hub-head__h1 { margin-top: var(--space-24); }
.zr-hub-head__lead { margin-top: 12px; max-width: 720px; color: var(--color-ink-muted); }
.zr-hub-head__search { position: relative; max-width: 760px; margin-top: var(--space-32); }
.zr-hub-head__search .zr-field__label { display: block; margin-bottom: var(--space-8); }
.zr-hub-head__search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.zr-hub-head__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-32); }
.zr-hub-body { padding-top: var(--space-64); padding-bottom: var(--section-space); display: flex; flex-direction: column; gap: 72px; }
.zr-hub-pop { padding: var(--space-32); gap: 12px; }
.zr-hub-pop .zr-card-g__icon { width: 56px; height: 56px; }
.zr-hub-pop .zr-badge { top: var(--space-32); right: var(--space-32); }
.zr-hub-pop h3 { font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.zr-hub-brak { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--space-48); background: var(--color-card); }
.zr-hub-brak[hidden] { display: none; }
.zr-hub-brak__akcje { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.zr-calc-group[hidden], .zr-card-g[hidden], [data-zr-hub-popularne][hidden] { display: none; }
@media (max-width: 767px) {
  .zr-hub-head { padding: var(--space-24) 0 var(--space-32); }
  .zr-hub-body { padding-top: var(--space-40); padding-bottom: var(--section-space-mobile); gap: var(--space-48); }
  .zr-hub-pop { padding: var(--space-24); }
  .zr-hub-brak { padding: var(--space-24); }
}
.zr-mod-calcs__grid > .zr-card-g[hidden], [data-zr-filtry][hidden] { display: none; }
