/* JarS — wspólna warstwa obu wariantów (mechanika, dostępność, ruch).
   Kolory, kroje, skalę i układ sekcji definiują wariant-2.css i wariant-3.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

[id] { scroll-margin-top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--page-bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Nagłówek i menu mobilne ---------- */

.menu-toggle {
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  justify-self: end;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 32px; height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease;
}
.menu-toggle__bars { position: relative; margin-inline: auto; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -9px; }
.menu-toggle__bars::after { top: 9px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-9px) rotate(-45deg); }

.site-nav__phone { display: none; }

@media (max-width: 899.98px) {
  .js .menu-toggle { display: block; }
  .site-nav { grid-column: 1 / -1; min-width: 0; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav__phone { display: block; }
  .site-header .header-phone { display: none; }
}

/* ---------- Akordeon (objawy, FAQ) ---------- */

.akordeon__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.akordeon__btn:focus-visible { outline-offset: -3px; }
[data-akordeon-panel][hidden] { display: none; }
[data-akordeon-wiersz] { display: grid; align-items: center; }
.akordeon__znak { display: none; }
.akordeon--js .akordeon__znak { display: block; }
.akordeon__znak svg { transition: transform .2s ease; }
.akordeon__btn[aria-expanded="true"] .akordeon__znak svg { transform: rotate(45deg); }

/* ---------- Mapa ---------- */

.mapa {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Pasek „Zadzwoń” (telefon) ---------- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}

@media (max-width: 899.98px) {
  /* miejsce pod stałym paskiem telefonu na końcu strony */
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .callbar { display: none; }
}

/* ---------- Przejazd robota przed wyborem objawów ---------- */
/* --p (0…1) ustawia ruch.js; bez JS i przy reduced-motion --p = 1: robot stoi zaparkowany. */

.przejazd__tor {
  position: relative;
  container-type: inline-size;
  height: var(--robot);
}
.przejazd__slad {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--p, 1) * (100% - var(--robot) / 2));
  transform: translateY(-50%);
}
.przejazd__robot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--robot);
  height: var(--robot);
  transform: translateX(calc(var(--p, 1) * (100cqw - var(--robot)))) rotate(calc((1 - var(--p, 1)) * -80deg));
  will-change: transform;
}

.ruch .przejazd [data-krok] {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ruch .przejazd [data-krok]:not(.is-on) {
  opacity: 0;
  transform: translateY(14px);
}

@media (max-width: 899.98px) {
  /* fokus i kotwice nie chowają się pod paskiem telefonu */
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Ruch (klasa .ruch dodawana przez ruch.js, tylko bez reduced-motion) ---------- */

.ruch [data-pojaw] {
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.ruch [data-pojaw]:not(.is-widoczne) {
  opacity: 0;
  transform: translateY(20px);
}

.ruch [data-maska] {
  clip-path: inset(0 round var(--maska-r, 0px));
  transition: clip-path 1s cubic-bezier(.2, .7, .2, 1);
}
.ruch [data-maska]:not(.is-widoczne) {
  clip-path: inset(10% 8% 10% 8% round var(--maska-r, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle__bars,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after,
  .akordeon__znak svg { transition: none; }
}

@media print {
  .callbar { display: none; }
  .ruch [data-pojaw], .ruch [data-maska], .ruch .przejazd [data-krok] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}