/* ============================================================
   Skoczylas Rodzinne — Main Stylesheet
   ------------------------------------------------------------
   Design tokens (CSS custom properties, fonts) live in
   colors_and_type.css and are loaded BEFORE this file. This
   stylesheet only references those variables — it never
   redefines tokens or re-declares @font-face.

   Section index:
     1.  Base layout (.container / .section)
     2.  Header (verbatim from components/header.html) + WP nav adapters
     3.  Footer (verbatim from components/footer.html) + WP list adapters
     4.  Buttons — global base (.btn). NOTE: the homepage hero is NOT
         here — it lives only in front-page.css (page-specific).
     5.  Service page (.usluga) + standalone buttons
     6.  Page chrome (.page-head / .prose)
     7.  Blog grid (.post-grid / .post-card)
     8.  Single post
     9.  Pagination
     10. Search form
     11. Responsive (@media max-width: 860px)
   ============================================================ */


/* ============================================================
   1. BASE LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-block: var(--s-9);
}

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

/* Zapobiega poziomemu przewijaniu na całej witrynie (skonsolidowane z CSS stron).
   `clip` zamiast `hidden` — nie tworzy kontenera przewijania, więc nie psuje
   position: sticky w nagłówku. */
body { overflow-x: clip; }


/* ============================================================
   2. HEADER  (verbatim from components/header.html, lines 3–155)
   ============================================================ */
/* ============ HEADER ============ */
/* Top bar */
.hdr-top {
  background: var(--ink); color: rgba(252,252,253,0.85);
  font-family: var(--font-body); font-size: 13px;
  height: 40px; display: flex; align-items: center;
}
.hdr-top__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.hdr-top__links {
  display: flex; gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
.hdr-top__links li { display: flex; align-items: center; }
.hdr-top__link,
.hdr-top__links a {
  color: rgba(252,252,253,0.7); cursor: pointer;
  transition: color var(--t-base) var(--ease);
  font-size: 12px; font-weight: 500; text-decoration: none;
}
.hdr-top__link:hover,
.hdr-top__links a:hover { color: #fff; }
.hdr-top__link::before,
.hdr-top__links a::before { content: '#'; color: var(--brand-400); margin-right: 3px; }
.hdr-top__contact {
  display: flex; gap: 20px; align-items: center;
}
.hdr-top__contact-item {
  display: flex; align-items: center; gap: 6px;
  color: rgba(252,252,253,0.7); font-size: 12px;
  cursor: pointer; transition: color var(--t-base) var(--ease);
}
.hdr-top__contact-item:hover { color: #fff; }
.hdr-top__contact-item svg { width: 13px; height: 13px; color: var(--brand-300); }

/* Mid + Down bar wrapper */
.hdr-main {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hdr-main__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0;
}

/* Logo — spans both rows, left side */
.hdr-logo {
  grid-row: 1 / 3; grid-column: 1;
  display: flex; align-items: center; gap: 10px;
  padding-right: 32px; border-right: 1px solid var(--rule);
  cursor: pointer;
}
/* Tylko wymiary — widocznością wariantu (jasny/ciemny) steruje wyłącznie
   .theme-light-only / .theme-dark-only. NIE ustawiaj tu `display`, bo
   `.hdr-logo img` (0,1,1) nadpisałoby utility (0,1,0) i pokazywałoby OBA loga. */
.hdr-logo img { height: 34px; width: auto; }
.hdr-logo .sub {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 17px; letter-spacing: 0.01em;
  padding-left: 12px; margin-left: 4px;
  border-left: 1px solid var(--rule); opacity: 0.85;
  line-height: 1; padding-top: 2px;
}

/* Mid bar — collapsible on scroll */
.hdr-mid {
  grid-row: 1; grid-column: 2;
  display: flex; align-items: center; gap: 16px;
  height: 48px;
  border-bottom: 1px solid var(--rule);
  padding-left: 32px;
  overflow: hidden;
  transition: height var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease), border-bottom-width var(--t-slow) var(--ease);
}
.hdr-main.scrolled .hdr-mid {
  height: 0; opacity: 0; border-bottom-width: 0;
}
.hdr-search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 14px; color: var(--muted);
  cursor: text; position: relative; overflow: hidden; height: 100%;
}
.hdr-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.hdr-search__hints {
  position: absolute; left: 26px; right: 8px; top: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
}
.hdr-search__input:focus ~ .hdr-search__hints,
.hdr-search__input:not(:placeholder-shown) ~ .hdr-search__hints {
  opacity: 0;
}
.hdr-search__hint {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-family: var(--font-body); font-size: 13.5px; color: var(--muted);
  opacity: 0; transform: translateY(8px);
  animation: hint-cycle 12s var(--ease) infinite;
  white-space: nowrap;
}
.hdr-search__hint:nth-child(1) { animation-delay: 0s; }
.hdr-search__hint:nth-child(2) { animation-delay: 3s; }
.hdr-search__hint:nth-child(3) { animation-delay: 6s; }
.hdr-search__hint:nth-child(4) { animation-delay: 9s; }
@keyframes hint-cycle {
  0%    { opacity: 0; transform: translateY(8px); }
  4%    { opacity: 1; transform: translateY(0); }
  22%   { opacity: 1; transform: translateY(0); }
  26%   { opacity: 0; transform: translateY(-8px); }
  100%  { opacity: 0; transform: translateY(-8px); }
}
.hdr-mid__actions {
  display: flex; align-items: center; gap: 16px;
}
.hdr-mid__icon {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  border-radius: var(--r-2);
  transition: background var(--t-base) var(--ease);
}
.hdr-mid__icon:hover { background: var(--paper-2); }
.hdr-mid__icon svg { width: 18px; height: 18px; }

/* ============================================================
   Theme switch — segmentowy przełącznik motywu (słońce ↔ księżyc).
   Jeden komponent używany w nagłówku (desktop) i w szufladzie (mobile).
   Stan trzyma atrybut aria-checked: "false" = jasny, "true" = ciemny.
   Logika w assets/js/theme.js synchronizuje go z data-theme na <html>.
   ============================================================ */
.theme-switch {
  appearance: none; -webkit-appearance: none;
  padding: 0; margin: 0; border: 0; background: transparent;
  border-radius: 999px; cursor: pointer; line-height: 0;
  flex-shrink: 0;
}
.theme-switch__track {
  position: relative; display: inline-flex; align-items: center;
  width: 58px; height: 30px; border-radius: 999px;
  background: var(--paper-3); border: 1px solid var(--rule);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.theme-switch:hover .theme-switch__track { border-color: var(--rule-strong); }
.theme-switch__ico {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); opacity: 0.55; z-index: 2; pointer-events: none;
  transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.theme-switch__ico svg { width: 15px; height: 15px; }
.theme-switch__ico--sun  { left: 7px; }
.theme-switch__ico--moon { right: 7px; }
.theme-switch__knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-card); z-index: 1;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
/* Stan WIZUALNY przełącznika wynika z data-theme na <html> (ustawiany przez
   skrypt anti-FOUC PRZED pierwszym malowaniem) — nie z aria-checked — aby gałka
   nie „mignęła" w złej pozycji zanim wykona się JS. aria-checked służy wyłącznie
   czytnikom ekranu (ustawia je theme.js). Domyślnie (jasny): gałka po lewej,
   słońce aktywne. Wariant ciemny (gałka w prawo, księżyc aktywny) jest w dark.css. */
.theme-switch__ico--sun { color: var(--accent); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .theme-switch__knob, .theme-switch__track, .theme-switch__ico { transition: none; }
}

/* Wariant w szufladzie mobilnej — etykieta + przełącznik w jednym wierszu.
   Drawer jest display:none na desktopie, więc reguły są tam bezczynne. */
.hdr-mobile-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-2);
}
.hdr-mobile-theme__label {
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink);
}

/* Element widoczny tylko w trybie ciemnym (np. białe logo). Domyślnie ukryty;
   włączany w dark.css. Wariant jasny (.theme-light-only) jest domyślnie widoczny. */
.theme-light-only { display: block; }
.theme-dark-only { display: none; }

/* Down bar */
.hdr-nav {
  grid-row: 2; grid-column: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 48px;
  padding-left: 32px;
}
.hdr-nav__group {
  display: flex; gap: 28px;
}
.hdr-nav__link {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--ink); cursor: pointer;
  position: relative; padding: 6px 0;
  transition: color var(--t-base) var(--ease);
}
.hdr-nav__link:hover { color: var(--accent); }
.hdr-nav__link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}
.hdr-nav__cta {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  padding: 8px 16px; border-radius: var(--r-2); cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--t-base) var(--ease);
}
.hdr-nav__cta:hover { background: #000; }

/* ---- WordPress nav adapters ----
   Original used <span class="hdr-nav__link">. WP outputs either
   the fallback markup <ul class="hdr-nav__group"><li class="hdr-nav__link menu-item"><a>…</a></li></ul>
   or standard wp_nav_menu markup <ul class="hdr-nav__group"><li class="menu-item"><a>…</a></li></ul>.
   These rules make both render like the original nav links. */
ul.hdr-nav__group {
  list-style: none; margin: 0; padding: 0;
  /* keep the original flex + gap layout */
}
.hdr-nav__group li {
  margin: 0; padding: 0; list-style: none;
}
/* Link styling inherits the .hdr-nav__link look for both markups */
.hdr-nav__link a,
.hdr-nav__group li a {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--ink); cursor: pointer;
  position: relative; display: inline-block; padding: 6px 0;
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.hdr-nav__link a:hover,
.hdr-nav__group li a:hover { color: var(--accent); }
/* Active / current state underline (matches original .active) */
.hdr-nav__link.active a::after,
.hdr-nav__group li.current-menu-item > a::after,
.hdr-nav__group li.current_page_item > a::after,
.hdr-nav__group li.current-menu-parent > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}
.hdr-nav__group li.current-menu-item > a,
.hdr-nav__group li.current_page_item > a { color: var(--ink); }

/* ---- Search adapter ----
   Original .hdr-search was a div; WP uses a <form> with an <input>. */
form.hdr-search { width: 100%; }
.hdr-search__input {
  flex: 1; width: 100%; height: 100%;
  border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  padding: 0;
}
.hdr-search__input::placeholder { color: var(--muted); }

/* ============================================================
   2b. MOBILE HEADER + OFF-CANVAS DRAWER  (≤860px, dodatek mobilny)
   Cała sekcja jest scopowana do max-width:860px lub bezczynna na
   desktopie. Desktopowy nagłówek (grid, sticky, mid, nav, logo)
   pozostaje nietknięty. Zablokowanie na desktopie na końcu sekcji.
   ============================================================ */
@media (max-width: 860px) {
  /* --- Pasek górny: tylko telefon (klik-aby-zadzwonić), wyśrodkowany --- */
  .hdr-top__links { display: none; }
  .hdr-top__inner { justify-content: center; }
  .hdr-top__contact { gap: 0; }
  .hdr-top__contact-item:nth-child(2) { display: none; } /* e-mail → do szuflady */
  .hdr-top__contact-item { font-size: 13px; }

  /* --- Pasek główny: logo + hamburger, jeden wiersz --- */
  .hdr-main__inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px;
    grid-template-columns: none; grid-template-rows: none;
  }
  .hdr-mid { display: none; }
  .hdr-nav { display: none; } /* zastąpione szufladą */
  .hdr-logo { padding: 0; border-right: none; }
  .hdr-logo img { height: 32px; }

  /* --- Hamburger --- */
  .hdr-mobile-toggle {
    display: flex !important;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .hdr-mobile-toggle__line {
    display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  }
  .hdr-mobile-toggle.open .hdr-mobile-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-mobile-toggle.open .hdr-mobile-toggle__line:nth-child(2) { opacity: 0; }
  .hdr-mobile-toggle.open .hdr-mobile-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- Szuflada (off-canvas, z prawej) --- */
  .hdr-mobile-drawer {
    display: flex !important;            /* nadpisuje inline display:none; niewidoczna do otwarcia */
    position: fixed; inset: 0; z-index: 60;
    overflow: hidden;                    /* przytnij panel zsunięty translateX(100%) — nie poszerza strony */
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  }
  .hdr-mobile-drawer[aria-hidden="false"] {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  .hdr-mobile-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45); cursor: pointer;
  }
  .hdr-mobile-panel {
    position: relative; margin-left: auto;
    width: min(360px, 90vw); height: 100%;
    background: var(--paper); color: var(--ink);
    display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease);
    padding-bottom: 24px;
  }
  .hdr-mobile-drawer[aria-hidden="false"] .hdr-mobile-panel { transform: translateX(0); }

  /* Nagłówek panelu */
  .hdr-mobile-panel__head {
    position: sticky; top: 0; z-index: 1; background: var(--paper);
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--rule);
  }
  .hdr-mobile-panel__logo img { height: 30px; width: auto; } /* display: patrz .theme-*-only */
  .hdr-mobile-close {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: var(--ink); border-radius: var(--r-2);
    transition: background var(--t-base) var(--ease);
  }
  .hdr-mobile-close:hover { background: var(--paper-2); }
  .hdr-mobile-close svg { width: 22px; height: 22px; }

  /* Wyszukiwarka */
  .hdr-mobile-search { padding: 16px; border-bottom: 1px solid var(--rule); }
  .hdr-mobile-search__wrap {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--rule); border-radius: var(--r-2);
    padding: 0 12px; height: 46px; background: var(--paper-2);
  }
  .hdr-mobile-search__wrap svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
  .hdr-mobile-search__input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
    /* Bez tego input miał 22 px wysokości wewnątrz ramki 46 px — kliknięcie
       w górną albo dolną część pola nie ustawiało kursora. */
    align-self: stretch;
  }
  .hdr-mobile-search__input::placeholder { color: var(--muted); }

  /* Sekcje */
  .hdr-mobile-section { padding: 16px; border-bottom: 1px solid var(--rule); }
  .hdr-mobile-section__title {
    margin: 0 0 10px; font-family: var(--font-body);
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
  }

  /* Listy menu (WP) */
  .hdr-mobile-menu { list-style: none; margin: 0; padding: 0; }
  .hdr-mobile-menu li { margin: 0; padding: 0; list-style: none; }
  .hdr-mobile-menu a {
    display: block; padding: 12px 0; min-height: 44px; box-sizing: border-box;
    font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--rule);
    transition: color var(--t-base) var(--ease);
  }
  .hdr-mobile-menu li:last-child a { border-bottom: 0; }
  .hdr-mobile-menu a:hover { color: var(--accent); }
  .hdr-mobile-menu li.current-menu-item > a,
  .hdr-mobile-menu li.current_page_item > a { color: var(--accent); }

  /* Kontakt */
  .hdr-mobile-contact { display: flex; flex-direction: column; gap: 8px; }
  .hdr-mobile-contact__item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; box-sizing: border-box;
    border: 1px solid var(--rule); border-radius: var(--r-2);
    font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
    transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  .hdr-mobile-contact__item:hover { background: var(--paper-2); border-color: var(--ink); }
  .hdr-mobile-contact__item svg { width: 18px; height: 18px; color: var(--brand-400); flex-shrink: 0; }
  .hdr-mobile-contact__item span { word-break: break-word; }

  /* Akcje (koszyk + motyw) */
  .hdr-mobile-section--actions { display: flex; gap: 10px; border-bottom: 0; }
  .hdr-mobile-action {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper-2);
    font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink);
    transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  .hdr-mobile-action:hover { background: var(--paper); border-color: var(--ink); }
  .hdr-mobile-action svg { width: 18px; height: 18px; }

  /* Focus widoczny dla całej szuflady */
  .hdr-mobile-toggle:focus-visible,
  .hdr-mobile-panel a:focus-visible,
  .hdr-mobile-panel button:focus-visible,
  .hdr-mobile-panel input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
}

/* Desktop (>860px): hamburger i szuflada zawsze ukryte i bezczynne */
@media (min-width: 861px) {
  .hdr-mobile-toggle,
  .hdr-mobile-drawer { display: none !important; }
}

/* Szanuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hdr-mobile-panel,
  .hdr-mobile-drawer,
  .hdr-mobile-toggle__line { transition: none !important; }
}


/* ============================================================
   3. FOOTER  (verbatim from components/footer.html, lines 3–122)
   ============================================================ */
/* ============ FOOTER ============
   Stopka jest ZAWSZE ciemna (białe logo + kotwica strony). Lokalne tokeny
   `--f-*` trzymają kontrast na obu tłach (light: --ink #101828, dark: #090C12 —
   patrz dark.css). Komponenty używają tokenów, nie literałów rgba. */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--f-text);
  padding: 0;
  --f-text:        #FCFCFD;
  --f-muted:       rgba(252,252,253,0.62);
  --f-dim:         rgba(252,252,253,0.46);
  --f-faint:       rgba(252,252,253,0.34);
  --f-line:        rgba(252,252,253,0.09);
  --f-line-strong: rgba(252,252,253,0.18);
  --f-surface:     rgba(252,252,253,0.035);
  --f-surface-2:   rgba(252,252,253,0.08);
  --f-accent:      var(--brand-300);
}
/* Atmosfera: subtelny chłodny rozbłysk u góry + włos akcentu na krawędzi. */
.footer::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 64%);
}
.footer__hairline {
  position: absolute; inset: 0 0 auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--f-accent), transparent);
  opacity: 0.4;
}

/* ---- Masthead: marka + nawigacja ---- */
.footer__top {
  display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.25fr);
  gap: 56px 64px;
  padding: 76px 0 52px;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.footer__logo { width: 230px; height: auto; }
.footer__tagline {
  margin: 0; max-width: 30ch; text-wrap: balance;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.24;
  color: var(--f-text);
}
.footer__addr {
  margin: 0; font-style: normal;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.7;
  color: var(--f-muted);
}
.footer__social { display: flex; gap: 10px; margin-top: 2px; }
.footer__social-link {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--f-line-strong); border-radius: var(--r-2);
  color: var(--f-muted); transition: color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.footer__social-link:hover {
  color: var(--ink); background: var(--f-text); border-color: var(--f-text);
}
.footer__social-link svg { width: 18px; height: 18px; }

.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__col h2 {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--f-dim); margin: 0 0 18px;
}
.footer__col-list,
.footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.footer__col-list li,
.footer__col li { font-family: var(--font-body); }
.footer__col-list a,
.footer__col li a {
  position: relative; display: inline-flex; align-items: center;
  font-size: 14px; line-height: 1.45; color: var(--f-muted);
  text-decoration: none; padding: 5px 0 5px 0;
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}
.footer__col-list a::before,
.footer__col li a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--f-accent);
  transform: translateY(-50%); opacity: 0;
  transition: width var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.footer__col-list a:hover,
.footer__col li a:hover { color: var(--f-text); padding-left: 18px; }
.footer__col-list a:hover::before,
.footer__col li a:hover::before { width: 11px; opacity: 1; }

/* ---- Rachunki bankowe ---- */
.footer__accounts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 28px 0;
  border-top: 1px solid var(--f-line);
}
.footer__accounts-label {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--f-dim);
}
.footer__accounts-list { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__account {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--f-line); border-radius: var(--r-2);
  background: var(--f-surface);
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.footer__account:hover { border-color: var(--f-line-strong); background: var(--f-surface-2); }
.footer__account-cur {
  font-family: var(--font-body); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--f-dim);
}
.footer__account-num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px; letter-spacing: 0.02em; color: var(--f-muted);
}
/* Kwadrat 28×28 to widoczna ikona; pole dotyku powiększamy pseudoelementem
   do 44×44 (WCAG 2.5.5 / iOS HIG), bez ruszania układu wiersza z numerem. */
.footer__account-copy {
  position: relative;
  display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--f-faint); cursor: pointer;
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.footer__account-copy::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.footer__account-copy:hover { color: var(--f-text); background: var(--f-surface-2); }
.footer__account-copy svg { width: 14px; height: 14px; }
.footer__account-icon-done { display: none; color: var(--success-200); }
.footer__account-copy.is-copied .footer__account-icon-copy { display: none; }
.footer__account-copy.is-copied .footer__account-icon-done { display: block; }

/* ---- Dół: dane prawne + powrót na górę ---- */
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 24px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--f-line);
  font-family: var(--font-body); font-size: 12.5px; color: var(--f-faint);
}
.footer__legal .par {
  color: var(--f-accent); font-family: var(--font-display); margin: 0 5px;
}
.footer__totop {
  display: inline-flex; align-items: center; gap: 8px;
  /* Pole dotyku ≥44 px w pionie (WCAG 2.5.5); ujemny margines w poziomie
     zachowuje wyrównanie do prawej krawędzi stopki. */
  min-height: 44px; padding: 0 8px; margin-right: -8px;
  color: var(--f-dim); text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.footer__totop svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease); }
.footer__totop:hover { color: var(--f-text); }
.footer__totop:hover svg { transform: translateY(-3px); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 44px; }
}

/* Stopka na telefonach: pełny stack + komfortowe tap-targety */
@media (max-width: 600px) {
  .footer__top { gap: 36px; padding: 44px 0 36px; }
  .footer__nav { grid-template-columns: 1fr; gap: 0; }
  .footer__col { padding: 6px 0; border-bottom: 1px solid var(--f-line); }
  .footer__col:last-child { border-bottom: 0; }
  .footer__col h2 { margin-bottom: 6px; }
  .footer__col-list, .footer__col ul { gap: 0; }
  .footer__col-list a, .footer__col li a { display: flex; min-height: 44px; padding: 11px 0; }
  /* na dotyku nie chowamy/odsuwamy linków — bez efektu hover-slide */
  .footer__col-list a:hover, .footer__col li a:hover { padding-left: 0; }
  .footer__col-list a::before, .footer__col li a::before { display: none; }
  .footer__accounts { gap: 12px; padding: 24px 0; }
  .footer__account { min-height: 44px; box-sizing: border-box; }
  .footer__account-num { font-size: 12px; word-break: break-all; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   GLOBALNE PRYMITYWY MOBILNE  (dodatek; wyłącznie max-width)
   Desktop nietknięty — działa tylko na telefonach.
   ============================================================ */
@media (max-width: 600px) {
  /* Mniejsze pionowe paddingi sekcji bazowych (96px → 32px) */
  .section { padding-block: var(--s-6); }
  /* Obrazy nigdy nie wyciekają poza viewport */
  img { max-width: 100%; height: auto; }
  /* CTA w hero — pełna szerokość, łatwy tap */
  .hero-ctas .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   4. BUTTONS — global base
   ------------------------------------------------------------
   .btn is the shared button base used site-wide (header, footer,
   every page). Keep ONLY the global base here.

   The homepage hero (.hero, .hero-media, .hero-veil, .hero-grid,
   .hero-mark, .hero-content, .hero-eyebrow, .hero-lede, .hero-ctas,
   .hero-values …) lives ONLY in front-page.css — it is page-specific.
   single-post.css defines its own .hero too.
   Do NOT add a global bare `.hero` rule here: the class name is reused
   with different meanings per page, so a global rule leaks across pages.

   EXCEPTION — the shared two-column SERVICE hero (rozwody, alimenty,
   podział majątku, przemoc, kontakty) IS centralized here, but under
   the scoped modifier `.hero--service` (markup: class="hero hero--service"),
   never bare `.hero`. See the "SERWISOWY HERO" section at the end of
   this file. See assets/css/README.md.
   ============================================================ */
/* ------------------------------------------------------------
   UNIFIED BUTTON SYSTEM — single source of truth
   ------------------------------------------------------------
   Base .btn + variant + size modifiers. Rendered via skr_button()
   (functions.php). One canonical look per intent, reused on every
   page. Page-specific layout (e.g. .hero-ctas, .svc-*__ctas) only
   positions the buttons; it must NOT restyle them.

   Variants
     .btn-primary       ink fill (default CTA on light)
     .btn-accent        brand violet fill (emphasis CTA)
     .btn-ghost         outlined, ink (secondary on light)
     .btn-light         white fill, ink text (primary on DARK)
     .btn-ghost-light   white outline (secondary on DARK)
     .btn-amber         amber fill (warning / interim)
     .btn-danger        red fill (emergency)
   Sizes / mods
     .btn-sm  .btn-lg   smaller / larger
     .btn-block         full-width, centered
   ------------------------------------------------------------ */
.btn {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  padding: 13px 24px; border-radius: var(--r-2); cursor: pointer; letter-spacing: 0.01em;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.btn:active { opacity: 0.85; }
.btn svg, .btn i { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--t-base) var(--ease); }
.btn:hover svg, .btn:hover i { transform: translateX(3px); }

/* ---- Sizes / modifiers ---- */
.btn-sm { font-size: 13px; padding: 9px 16px; }
.btn-lg { font-size: 15px; padding: 15px 28px; }
.btn-block { width: 100%; box-sizing: border-box; justify-content: center; }

/* Telefon: długie etykiety przycisków zawijają się zamiast rozpychać layout.
   (Baza .btn ma white-space:nowrap — ten override MUSI być PO niej w źródle.) */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}


/* ============================================================
   5. SERVICE PAGE (.usluga) + STANDALONE BUTTONS
   ------------------------------------------------------------
   .btn-primary / .btn-ghost defaults. Bazują na tokenach ink/paper, które
   przełączają się globalnie wraz z motywem (dark.css), więc te same warianty
   działają na jasnym i ciemnym tle — także w hero (front-page.css).
   ============================================================ */
/* Ink fill — default CTA on light backgrounds */
.btn-primary, .btn-ink {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn-primary:hover, .btn-ink:hover { background: #000; border-color: #000; }

/* Brand violet fill — emphasis CTA */
.btn-accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Outlined ink — secondary on light backgrounds */
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { background: var(--paper-2); }

/* White fill — primary CTA on DARK backgrounds */
.btn-light {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.btn-light:hover { background: #fff; border-color: #fff; }

/* White outline — secondary CTA on DARK backgrounds */
.btn-ghost-light {
  background: transparent; color: #fff; border-color: rgba(252,252,253,0.5);
}
.btn-ghost-light:hover { background: rgba(252,252,253,0.12); border-color: #fff; }

/* Amber fill — warning / interim action */
.btn-amber {
  background: #c8881a; color: #fff; border-color: #c8881a;
}
.btn-amber:hover { background: #b07414; border-color: #b07414; }

/* Red fill — emergency action */
.btn-danger {
  /* --danger (#F04438) pod białym tekstem daje 3,76:1 — poniżej AA.
     --error-700 podnosi to do 6,6:1 bez zmiany charakteru przycisku. */
  background: var(--error-700); color: #fff; border-color: var(--error-700);
}
.btn-danger:hover { background: var(--error-900); border-color: var(--error-900); }

/* ============================================================
   GLOBALNY FOKUS KLAWIATURY — widoczny pierścień (WCAG 2.4.7).
   :focus-visible → tylko klawiatura; mysz/dotyk bez obwódki.
   :where() trzyma specyficzność na 0, więc nie walczy ze stylami komponentów.
   ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-2);
}
/* Na ciemnych panelach (.svc-dv__accent, stopka) — jaśniejszy odcień marki
   dla kontrastu obwódki. Tryb ciemny całej strony obsługuje dark.css. */
.svc-dv__accent :focus-visible,
.footer :focus-visible {
  outline-color: var(--brand-300);
}

/* Service hero — clears the sticky header */
.usluga-hero {
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.usluga-hero__eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.usluga-hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0;
}
.usluga-hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.018em; margin: 0 0 20px; color: var(--ink);
  text-wrap: balance;
}
.usluga-hero__title em { font-style: italic; font-weight: 400; color: var(--accent); }
.usluga-hero__lede {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45;
  color: var(--ink-2); margin: 0 0 32px; max-width: 60ch;
  text-wrap: balance;
}
.usluga-hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}

/* Service body + widget */
.usluga-body {
  padding-block: var(--s-8);
}
.usluga-widget {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--s-6);
  margin-block: var(--s-6);
}


/* ============================================================
   6. PAGE CHROME (.page-head / .prose)
   ============================================================ */
.page-head {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.page-head__eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.page-head__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0;
}
.page-head__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.06;
  letter-spacing: -0.018em; margin: 0; color: var(--ink);
  text-wrap: balance;
}
.page-head__title em { font-style: italic; font-weight: 400; color: var(--accent); }

/* Prose — readable long-form content */
.prose {
  max-width: var(--content-measure);
  font-family: var(--font-body); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--ink-2);
}
.prose > * + * { margin-top: var(--s-5); }
.prose p { margin: 0 0 var(--s-5); }
.prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink);
  margin: var(--s-8) 0 var(--s-4);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.18;
  color: var(--ink); margin: var(--s-7) 0 var(--s-3);
}
.prose h4 {
  font-family: var(--font-body); font-weight: 600;
  font-size: 18px; line-height: 1.3; color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
.prose a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color var(--t-base) var(--ease);
}
.prose a:hover { color: var(--accent-hover); }
.prose ul, .prose ol {
  margin: 0 0 var(--s-5); padding-left: 1.4em;
}
.prose li { margin-bottom: var(--s-2); }
.prose ul li::marker { color: var(--accent); }
.prose blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4;
  color: var(--ink); margin: var(--s-7) 0;
  padding-left: var(--s-5); border-left: 2px solid var(--accent);
}
.prose img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--r-3); margin: var(--s-6) 0;
}
.prose figure { margin: var(--s-6) 0; }
.prose figcaption {
  font-size: var(--fs-meta); color: var(--muted);
  margin-top: var(--s-2); text-align: center;
}
.prose hr {
  border: 0; border-top: 1px solid var(--rule); margin: var(--s-8) 0;
}
.prose code {
  font-family: ui-monospace, monospace; font-size: 0.9em;
  background: var(--paper-2); padding: 2px 6px; border-radius: var(--r-1);
}


/* ============================================================
   7. BLOG GRID
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-6);
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.post-card__media {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--paper-2);
}
.post-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-3) var(--r-3) 0 0;
  transition: transform var(--t-slow) var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--s-5);
  flex: 1;
}
.post-card__cat {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
}
.post-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.post-card__title a {
  color: inherit; text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
}
.post-card__date {
  font-family: var(--font-body); font-size: var(--fs-meta);
  color: var(--muted); margin-top: auto; padding-top: var(--s-3);
}


/* ============================================================
   TAGS — shared pill component (.svc-tags / .svc-tag)
   ------------------------------------------------------------
   The single tag component used site-wide: service sections on the
   home page, specialization lists (o nas), blog topic chips (single),
   and WordPress-native post tags (.post-tags a). Background-agnostic —
   outline + brand dot reads cleanly on both --paper and --paper-2.
   ============================================================ */
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.svc-tags--flush { margin-bottom: 0; margin-top: 4px; } /* when tags end a block */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.svc-tag, .post-tags a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.svc-tag::before, .post-tags a::before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .6;
  transition: opacity .25s ease;
}
.svc-tag:hover, .post-tags a:hover { border-color: var(--ink); color: var(--ink); }
.svc-tag:hover::before, .post-tags a:hover::before { opacity: 1; }


/* ============================================================
   9. PAGINATION
   ============================================================ */
.pagination {
  margin-top: var(--s-8);
  display: flex; justify-content: center;
}
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pagination .nav-links a,
.pagination .nav-links span {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--r-2);
  color: var(--ink); text-decoration: none; background: var(--paper);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pagination .nav-links a:hover {
  border-color: var(--ink); background: var(--paper-2);
}
.pagination .nav-links .current {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.pagination .nav-links .dots {
  border-color: transparent; background: transparent; color: var(--muted);
}


/* ============================================================
   10. SEARCH FORM
   ============================================================ */
.search-form {
  display: flex; gap: 8px; align-items: stretch;
  max-width: 480px;
}
.search-form__input {
  flex: 1;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  padding: 12px 16px; background: var(--paper);
  outline: none;
  transition: border-color var(--t-base) var(--ease);
}
.search-form__input:focus { border-color: var(--accent); }
.search-form__input::placeholder { color: var(--muted); }
.search-form__submit {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  padding: 12px 22px; border-radius: var(--r-2); cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: background var(--t-base) var(--ease);
}
.search-form__submit:hover { background: #000; }


/* ============================================================
   11. RESPONSIVE  (≤ 860px)
   ============================================================ */
@media (max-width: 860px) {
  /* Service hero (homepage hero responsive lives in front-page.css) */
  .usluga-hero { padding-top: var(--s-8); }
  .usluga-hero__ctas { gap: 10px; }

  /* Blog grid collapses to single column on narrow phones */
  .post-grid { grid-template-columns: 1fr; }

  /* Search form stacks */
  .search-form { flex-direction: column; }
}

/* ============================================================
   SR-REVEAL-SAFETY — uniwersalny kontrakt odsłaniania
   ------------------------------------------------------------
   Wszystkie rodziny klas „wejściowych” (entrance/reveal) z podstron.
   Po dodaniu klasy .visible przez assets/js/theme.js element staje się
   widoczny — niezależnie od tego, czy dana podstrona ma własną regułę
   .visible (część rodzin jej nie ma — była animowana inline-skryptem,
   którego już nie używamy). Dzięki temu żadna sekcja ani hero nie
   zostaje na opacity:0.

   UWAGA: celowo NIE obejmujemy elementów ukrywanych funkcjonalnie
   (.modal-overlay, .accordion-body, .field__err, .booking-success,
   ::after dekoracje) — te mają zostać ukryte do czasu interakcji.
   ============================================================ */
.scroll-reveal.visible,
.reveal.visible,
.reveal-up.visible,
.reveal-card.visible,
.fade-in.visible,
.svc-reveal.visible,
.hero-badge.visible,
.cost-card.visible,
.stat-card.visible,
.section-header.visible,
.step-card.visible,
.route-card.visible,
.timeline-item.visible,
.card.visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Fallback bez JavaScriptu: jeśli JS się nie wykona, pokaż treść
   zamiast zostawiać ją niewidoczną. */
.no-js .scroll-reveal,
.no-js .reveal,
.no-js .reveal-up,
.no-js .reveal-card,
.no-js .fade-in,
.no-js .svc-reveal,
.no-js .hero-badge,
.no-js .cost-card,
.no-js .stat-card,
.no-js .section-header,
.no-js .step-card,
.no-js .route-card,
.no-js .timeline-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Ostateczna siatka bezpieczeństwa: przy prefers-reduced-motion
   nie chowamy treści animacjami wejścia. */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .reveal,
  .reveal-up,
  .reveal-card,
  .fade-in,
  .svc-reveal,
  .hero-badge,
  .cost-card,
  .stat-card,
  .section-header,
  .step-card,
  .route-card,
  .timeline-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   E-E-A-T / zaufanie — byline autora, noty (świeżość, uczciwość, formularz, zgoda)
   Komponenty wprowadzone w rebuildzie SEO/GEO. Globalne, niezależne od strony.
   ========================================================================== */
.sr-eeat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  background: var(--paper-2);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.sr-eeat__author a { color: var(--accent); text-decoration: none; font-weight: 600; }
.sr-eeat__author a:hover { text-decoration: underline; }
.sr-eeat__date { color: var(--muted); margin-left: auto; }

.sr-note {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: var(--r-3);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.sr-note--fresh   { border-left: 3px solid var(--accent); }
.sr-note--honesty { background: var(--accent-soft); border-color: var(--accent-chip); }
.sr-note--form    { font-size: 0.8rem; color: var(--muted); background: transparent; border: 0; padding: 8px 0; }
.sr-note--consent { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 600px) {
  .sr-eeat__date { margin-left: 0; }
}

/* ============================================================
   SERWISOWY HERO  —  .hero--service  (JEDNO ŹRÓDŁO PRAWDY)
   ------------------------------------------------------------
   Dwukolumnowy hero (tekst + portret) używany na podstronach
   usługowych: rozwody, alimenty, podział majątku, przemoc,
   kontakty. Wcześniej każdy plik strony miał własną kopię tych
   reguł — tu jest jedna, współdzielona definicja.

   SCOPING: celowo zawężone do modyfikatora `.hero--service`, NIE
   do gołego `.hero`. Klasa `.hero` ma różne znaczenia na różnych
   stronach (front-page.css, single-post.css mają własne hero i
   współdzielą selektory .hero-grid / .hero-eyebrow / .hero-lede /
   .hero-ctas). Globalna reguła na `.hero` wyciekłaby na te strony —
   modyfikator `.hero--service` izoluje komponent.
   Markup: <header class="hero hero--service"> … </header>

   ABOVE THE FOLD niezależnie od WYSOKOŚCI ekranu:
   - min-height: 100dvh − realna wysokość nagłówka (--header-h
     ustawiane przez theme.js) → header + hero = dokładnie 1 ekran;
   - portret jest CAPOWANY do dostępnej wysokości (max-height),
     więc nie rozpycha hero w pionie na niskich ekranach;
   - --hero-pad kurczy paddingi pionowe, a breakpointy WYSOKOŚCIOWE
     (max-height) dodatkowo zagęszczają układ na niskich laptopach;
   - poniżej ~680px wysokości / 600px szerokości hero przylega do
     treści (min-height:auto) — uczciwa degradacja zamiast pustki.
   ============================================================ */
  .hero--service {
    --hero-pad: var(--s-9);
    background: var(--paper-2);
    padding: var(--hero-pad) 0;
    min-height: calc(100dvh - var(--header-h, 112px));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .hero--service .container { width: 100%; }

  /* Główny grid: tekst + portret */
  .hero--service .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-8);
    align-items: center;
  }

  /* ---------- Lewa kolumna ---------- */
  .hero--service .hero-text { display: flex; flex-direction: column; }

  /* Nadtytuł — kropka + tekst */
  .hero--service .hero-eyebrow {
    display: flex; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-6);
  }
  .hero--service .hero-eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .hero--service .hero-eyebrow span:last-child {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--muted);
  }

  /* Tytuł hero — TEKST stylowany na nagłówek (Cormorant 300, skala
     dwukolumnowa). Rolę H1 pełni .hero-eyebrow — patrz „zasada nagłówków". */
  .hero--service .display-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(36px, 3.4vw, 52px);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-snug);
    margin: 0 0 var(--s-5);
    color: var(--ink);
    text-wrap: pretty;
  }
  .hero--service .display-title em {
    font-weight: 400;
    font-style: italic;
    color: var(--accent);
  }

  /* Lede */
  .hero--service .hero-lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: var(--content-measure);
    margin: 0 0 var(--s-6);
  }

  /* CTAs (układ; same przyciski stylowane globalnie przez .btn) */
  .hero--service .hero-ctas {
    display: flex; gap: var(--s-3); align-items: center;
    flex-wrap: wrap;
  }

  /* ---------- Prawa kolumna: portret ---------- */
  .hero--service .hero-photo { position: relative; width: 100%; }
  .hero--service .hero-photo__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    /* CAP: portret nigdy nie przekracza dostępnej wysokości ekranu,
       więc nie rozpycha hero poniżej folda na niskich monitorach. */
    max-height: calc(100dvh - var(--header-h, 112px) - 2 * var(--hero-pad));
    background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
    border: var(--border-w) solid var(--rule);
    overflow: hidden;
    filter: sepia(0.15) saturate(0.9);
  }
  /* Kadr zdjęcia w ramce. `object-position` jest ustawione INLINE w
     template-parts/sections/hero-service.php jako var(--hero-photo-pos, 50% 50%),
     więc tu wystarczy podać samą zmienną — inline zawsze wygrywa z CSS strony
     ({slug}.css), a wartość i tak bierze się stąd. Pole ACF „Kadr zdjęcia"
     nadpisuje zmienną inline'owo (najwyższy priorytet). */
  .hero--service .hero-photo__img { --hero-photo-pos: 50% 50%; }
  /* <picture> (wariant ze zdjęciem mobilnym) jest inline i nie ma własnej
     wysokości — bez tego `height:100%` na <img> nie miałoby do czego się
     odnieść i ramka by się zapadła. */
  .hero--service .hero-photo__frame picture { position: absolute; inset: 0; display: block; }
  .hero--service .hero-photo__placeholder {
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(0,0,0,0.02) 20px,
        rgba(0,0,0,0.02) 21px
      );
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--s-7);
  }
  .hero--service .hero-photo__placeholder .ph-label {
    font-family: 'Courier New', monospace;
    font-size: 11px; color: var(--muted);
    text-align: center; line-height: var(--lh-body);
    max-width: 26ch;
  }
  .hero--service .hero-photo__caption {
    display: flex; align-items: baseline;
    justify-content: space-between;
    padding-top: var(--s-3);
    gap: var(--s-4);
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    color: var(--gray-400);
  }
  .hero--service .hero-photo__role {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--gray-600);
  }

  /* Pasek zaufania pod CTA */
  .hero--service .hero-trust-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
  }
  .hero--service .trust-inline-item {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-meta);
    color: var(--muted);
    line-height: var(--lh-tight);
  }
  .hero--service .trust-inline-sep {
    color: var(--gray-400);
    font-size: var(--fs-meta);
    user-select: none;
  }

  /* ---------- Responsywność: SZEROKOŚĆ ---------- */
  @media (max-width: 960px) {
    .hero--service { --hero-pad: var(--s-8); }
    .hero--service .hero-grid {
      grid-template-columns: 1fr;
      gap: var(--s-7);
      margin-bottom: var(--s-7);
    }
    .hero--service .display-title { font-size: clamp(32px, 7vw, 48px); }
    .hero--service .hero-photo__frame { aspect-ratio: 16 / 10; max-height: none; }
    .hero--service .hero-trust-inline { margin-top: var(--s-4); }
    .hero--service .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero--service .hero-ctas .btn { justify-content: center; }
    .hero--service .hero-ctas .btn-ghost { order: -1; }
  }
  @media (max-width: 600px) {
    /* Telefon: hero przylega do treści (koniec pustki). */
    .hero--service { --hero-pad: var(--s-7); min-height: auto; }
    /* Kadr: sama wysokość, BEZ aspect-ratio. Proporcja + max-height przenosi
       limit wysokości na max-WIDTH (wysokość × 16/10), więc kadr zwężał się
       zamiast wypełnić kolumnę hero. */
    .hero--service .hero-photo__frame { aspect-ratio: auto; height: 190px; max-height: none; min-height: 0; }
    /* Z prawdziwym zdjęciem pasek jest wyższy — portret ma wtedy szansę pokazać
       osobę, a nie sam fragment tła. Placeholder (strony bez zdjęcia) zostaje
       niski, żeby pusta ramka z opisem nie zabierała ekranu. */
    .hero--service .hero-photo__frame--photo { height: 260px; }
    /* Kadr na telefonie trzyma DÓŁ zdjęcia. Zdjęcia hero są portretami (np. 2:3),
       a pasek jest niski — kadr środkowy pokazywał samo tło (pusta ściana), a osoba
       wypadała pod dolną krawędź. Obcinamy pustą górę, nie osobę. */
    .hero--service .hero-photo__img { --hero-photo-pos: 50% 75%; }
    /* Osobne zdjęcie mobilne jest już wykadrowane pod pasek — nie przesuwaj go. */
    .hero--service .hero-photo__img--art { --hero-photo-pos: 50% 50%; }
  }
  @media (max-width: 400px) {
    .hero--service { --hero-pad: var(--s-7); }
  }

  /* ---------- Responsywność: WYSOKOŚĆ (tylko desktop ≥961px,
       gdzie układ 2-kolumnowy z wysokim portretem rozpycha hero) ---------- */
  @media (min-width: 961px) and (max-height: 860px) {
    /* Niskie laptopy (np. 1366×768, 1440×810): odzyskaj pion. */
    .hero--service { --hero-pad: var(--s-7); }
    .hero--service .display-title { font-size: clamp(32px, 3vw, 46px); }
    .hero--service .hero-eyebrow { margin-bottom: var(--s-4); }
    .hero--service .hero-lede { margin-bottom: var(--s-5); }
  }
  @media (min-width: 961px) and (max-height: 680px) {
    /* Bardzo niskie okno: przestań wymuszać pełny ekran — przylegaj
       do treści (uczciwa degradacja zamiast cięcia treści). */
    .hero--service { --hero-pad: var(--s-6); min-height: auto; }
  }

/* ============================================================
   10. KARTY W CAŁOŚCI KLIKALNE (stretched link)
   ------------------------------------------------------------
   Problem: karty „Twoja sytuacja" (.routing-card / .route-card)
   oraz „Powiązane usługi" (.related-card) podnoszą się i zmieniają
   obramowanie na hover, więc czytelnik traktuje CAŁĄ kafelkę jako
   link — a klikalny był tylko mały odnośnik na dole. Kursor nie
   zmieniał się nad nagłówkiem, opisem ani ikoną, co myliło.

   Rozwiązanie: pole klikalne jedynego odnośnika karty rozciągamy
   pseudo-elementem na całą kartę (::after, inset:0), a karcie
   nadajemy cursor:pointer. Afordancja (hover + kursor) zgadza się
   wtedy z realną akcją. Karty BEZ odnośnika (:has) zostają bez
   pointera — nie obiecujemy kliknięcia, którego nie ma.

   Wszystkie te karty mają już position:relative w swoich plikach
   (rozwody/alimenty/podzial-majatku/kontakty/przemoc/section-related),
   a odnośniki są ich bezpośrednimi dziećmi bez własnego position —
   dlatego ::after kotwiczy się do karty, nie do linku.
   ============================================================ */
.routing-card:has(.routing-card__link, .btn),
.route-card:has(.route-card__link),
.related-card:has(.related-card__link) {
  cursor: pointer;
}
.routing-card > .routing-card__link::after,
.routing-card > .btn::after,
.route-card > .route-card__link::after,
.related-card > .related-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Klawiatura: focus na rozciągniętym odnośniku ma podświetlić całą kartę,
   bo to ona jest teraz obszarem klikalnym. */
.routing-card:has(> .routing-card__link:focus-visible),
.routing-card:has(> .btn:focus-visible),
.route-card:has(> .route-card__link:focus-visible),
.related-card:has(> .related-card__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.related-card--emergency:has(> .related-card__link:focus-visible),
.routing-card--emergency:has(> .btn:focus-visible) {
  outline-color: var(--danger);
}
/* Tytuł .related-card jest osobnym <a> pod nakładką; ten sam adres, więc klik
   działa tak samo — ale trzymamy go nad nakładką, żeby zachował własny hover. */
.related-card h3 a {
  position: relative;
  z-index: 2;
}

/* ============================================================
   PUSTY KAFELEK NA ZDJĘCIE (.img-ph) — stan globalny.
   Do 26.08.2026 reguła żyła wyłącznie w o-nas.css, a brief dla
   grafika („zdjęcie — kamienica we Wrocławiu") szedł na produkcję
   jako widoczny tekst. Teraz podpis widzi tylko redaktor
   (.img-ph--brief), a gość dostaje spokojną, wypełnioną ramkę
   bez przerywanej obwódki, żeby sekcja nie wyglądała na zepsutą.
   ============================================================ */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--paper, #f4f1ec);
  filter: none;
}
.img-ph--brief {
  padding: var(--s-5, 1.5rem);
  border: 1px dashed var(--rule, #d8d2c8);
}
.img-ph--brief .img-ph__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  max-width: 32ch;
}