/* ============================================================
   JURLEJ — STRONA CENNIKA
   Niższe hero (ta sama karta co na stronie głównej), przyklejony spis
   kategorii, karty cen z wycięciem i przyciskiem ZAPYTAJ.
   Komponenty: .hero (hero.css + hero.js), .usl (uslugi.css + uslugi.js),
   .usl__notatka (tuning.css), pas „MASZ PYTANIE?" i stopka.
   ============================================================ */

/* ---------------- niższe hero ---------------- */
.hero--mini {
  height: 64vh;
  height: 64svh;
  min-height: calc(660 * var(--u));
}
.hero--mini .karta__auto { object-position: 72% 58%; }
/* jasna mgła z lewej — ciemne litery czytelne jak na stronie głównej,
   zdjęcie silnika widać po prawej */
.karta__mgla {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(248, 248, 248, .97) 0%, rgba(248, 248, 248, .93) 40%,
    rgba(248, 248, 248, .6) 56%, rgba(248, 248, 248, 0) 74%);
  pointer-events: none;
}
.hero__opis {
  position: absolute;
  z-index: 2;
  left: calc(82 * var(--u));
  top: calc(360 * var(--u));
  max-width: calc(640 * var(--u));
  margin: 0;
  font-size: calc(17 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #3b3939;
}
.js .hero__opis {
  opacity: 0;
  translate: 0 calc(18 * var(--u));
  filter: blur(6px);
  transition: opacity .45s var(--ease), translate .55s var(--ease), filter .45s var(--ease);
}
.js .hero.jest-w-kadrze .hero__opis {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 2s, 1.5s;
  transition-delay: 2s;
}

/* ---------------- sekcja cen ---------------- */
.cennik {
  position: relative;
  padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(100 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
  isolation: isolate;
}
.cennik__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(38, 37, 37, .06) 1px, transparent 1px) 50% 0 / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .06) 1px, transparent 1px) 50% 0 / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(rgba(38, 37, 37, .035) 1px, transparent 1px) 50% 0 / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .035) 1px, transparent 1px) 50% 0 / calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  pointer-events: none;
}
.cennik__uklad {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr);
  gap: calc(40 * var(--u));
  align-items: start;
}

/* ---------------- przyklejony spis ---------------- */
.cennik__bok {
  position: sticky;
  top: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.cennik__spis {
  padding: calc(26 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74));
  box-shadow: inset 0 0 0 1.2px rgba(90, 86, 86, .2), 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(30, 30, 30, .05);
}
.cennik__spis-tytul {
  margin: 0 calc(10 * var(--u)) calc(14 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.cennik__spis ol { margin: 0; padding: 0; list-style: none; counter-reset: kat; display: grid; gap: calc(4 * var(--u)); }
.cennik__spis li { counter-increment: kat; }
.cennik__spis a {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  color: var(--grafit);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.cennik__spis a::before {
  content: counter(kat, decimal-leading-zero);
  font: 400 calc(14 * var(--u))/1 'Draco', sans-serif;
  color: var(--czerwien);
  transition: color .35s var(--ease);
}
.cennik__spis span { flex: 1; font-size: calc(15 * var(--u)); font-weight: 700; }
.cennik__spis b {
  min-width: calc(26 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  text-align: center;
  color: #7b7574;
  background: rgba(38, 37, 37, .06);
}
.cennik__spis a:hover { background: rgba(143, 29, 20, .06); }
/* aktywna kategoria — bordowa jak przyciski strony */
.cennik__spis a.jest-aktywna {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .5) 0%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(110, 0, 0, .22);
}
.cennik__spis a.jest-aktywna::before { color: #fff; }
.cennik__spis a.jest-aktywna b { color: #fff; background: rgba(255, 255, 255, .18); }

/* karta z Hondą i telefonem w wycięciu */
.usl.usl--honda { height: calc(290 * var(--u)); }
.usl--honda .usl__karta::after { display: none; }
.usl--honda .usl__zdj { filter: none; object-position: 60% 50%; }
.usl--honda .usl__notatka { width: calc(250 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); }
.usl--honda .usl__notatka-tytul { font-size: calc(15 * var(--u)); }
.honda__tel {
  display: flex !important;
  align-items: center;
  gap: calc(8 * var(--u));
  font-weight: 700 !important;
  color: #fff !important;
}
.honda__tel svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- treść ---------------- */
.cennik__notka {
  max-width: calc(960 * var(--u));
  margin: 0 0 calc(40 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  border-radius: 0 calc(16 * var(--u)) calc(16 * var(--u)) 0;
  border-left: calc(3 * var(--u)) solid var(--czerwien);
  background: rgba(255, 255, 255, .7);
  font-size: calc(15 * var(--u));
  line-height: 1.6;
  color: #5a5656;
}
.cennik__notka b { color: var(--grafit); }
.cennik__grupa {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--u));
  margin: 0 0 calc(24 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grafit);
}
.cennik__grupa span { font: 400 calc(30 * var(--u))/1 'Draco', sans-serif; color: var(--czerwien); }
.cennik__rzad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(18 * var(--u));
  align-items: start;
}
.cennik__kol { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }

/* rozebrany V8 pod kartą skrzyń — wypełnia pustą przestrzeń kolumny;
   białe tło znika dzięki multiply */
.cennik__akcent { margin: calc(10 * var(--u)) 0 0; }
.cennik__akcent img {
  display: block;
  width: 100%;
  max-height: calc(470 * var(--u));
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(.25) contrast(1.05);
}
/* rysunek zębatek pod kartą łańcucha — ta sama kreska co tła sekcji */
.cennik__rysunek { margin: calc(10 * var(--u)) 0 0; }
.cennik__rysunek img { display: block; width: 100%; max-height: calc(540 * var(--u)); object-fit: contain; }
/* odstęp przed drugą grupą (wcześniej robił go V8) */
.cennik__rzad + .cennik__grupa { margin-top: calc(70 * var(--u)); }
/* akcenty wchodzą razem z sąsiednią kartą */
.js .cennik__akcent img, .js .cennik__rysunek img { opacity: 0; translate: 0 calc(30 * var(--u)); transition: opacity 1.4s var(--ease), translate 1.8s var(--ease); }
.js .cennik__akcent.jest-w-kadrze img, .js .cennik__rysunek.jest-w-kadrze img { opacity: 1; translate: 0 0; }

/* ---------------- karta cen ---------------- */
.usl.usl--cena { position: relative; }
.usl--cena .usl__karta {
  position: relative;
  border-radius: calc(26 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .88) 100%);
}
.usl--cena .usl__karta::after { display: none; }
.usl--cena .usl__obrys path { stroke: rgba(90, 86, 86, .3); stroke-width: 1.2; }
.cena__foto {
  position: relative;
  height: calc(210 * var(--u));
  overflow: hidden;
}
/* zdjęcie przechodzi w białą kartę */
.cena__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .92) 100%);
  pointer-events: none;
}
.cena__tresc { padding: calc(18 * var(--u)) calc(30 * var(--u)) calc(96 * var(--u)); }
.cena__tresc > p { margin: 0; }
.cena__grupa {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.cena__tytul {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(26 * var(--u));
  line-height: 1.2;
  font-weight: 800;
  color: var(--grafit);
}
.cena__opis { margin-top: calc(8 * var(--u)) !important; font-size: calc(14.5 * var(--u)); line-height: 1.55; color: #6a6464; }
.cena__lista { margin: calc(18 * var(--u)) 0 0; padding: 0; list-style: none; }

.cena-wiersz {
  display: flex;
  align-items: flex-end;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(8 * var(--u));
  margin: 0 calc(-8 * var(--u));
  border-radius: calc(10 * var(--u));
  border-bottom: 1px solid rgba(38, 37, 37, .07);
  transition: background .3s var(--ease);
}
.cena-wiersz:hover { background: rgba(143, 29, 20, .04); }
.cena-wiersz__nazwa {
  flex: 0 1 auto;
  font-size: calc(15.5 * var(--u));
  line-height: 1.35;
  font-weight: 600;
  color: var(--grafit);
}
.cena-wiersz__nazwa small {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
  color: #8a8483;
}
.cena-wiersz__kropki {
  flex: 1 1 calc(16 * var(--u));
  min-width: calc(16 * var(--u));
  margin-bottom: calc(10 * var(--u));
  border-bottom: 2px dotted rgba(38, 37, 37, .22);
}
.cena-pig {
  flex: none;
  min-width: calc(104 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  font-size: calc(14.5 * var(--u));
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  color: var(--czerwien);
  background: rgba(143, 29, 20, .05);
  box-shadow: inset 0 0 0 1.5px rgba(143, 29, 20, .5);
}
.cena__pref { font-size: .82em; font-weight: 600; opacity: .8; }
/* pozycja wyróżniona i druga kolumna (z częściami) — pełne bordo */
.cena-wiersz--wyroz .cena-wiersz__nazwa { font-weight: 800; }
.cena-wiersz--wyroz .cena-pig,
.cena-pig--pelna {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .5) 0%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow: none;
}
.cena-wiersz--dwie .cena-pig { min-width: calc(112 * var(--u)); }
.cena-wiersz--glowa { padding-top: 0; padding-bottom: calc(6 * var(--u)); border-bottom: 0; }
.cena-wiersz--glowa:hover { background: none; }
.cena-wiersz--glowa span:nth-child(1) { flex: 1; }
.cena-wiersz--glowa span:nth-child(3),
.cena-wiersz--glowa span:nth-child(4) {
  min-width: calc(112 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  color: #9a9493;
}

/* wiersze wjeżdżają po kolei, gdy karta wejdzie w kadr */
.js .usl--cena .cena-wiersz {
  opacity: 0;
  translate: 0 calc(12 * var(--u));
  transition: opacity .3s var(--ease), translate .4s var(--ease), background .3s var(--ease);
}
.js .usl--cena.jest-w-kadrze .cena-wiersz {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 1s var(--ease) calc(var(--opoz, 0s) + .5s + var(--r, 0) * .07s),
    translate 1.3s var(--ease) calc(var(--opoz, 0s) + .5s + var(--r, 0) * .07s),
    background .3s var(--ease);
}
/* karty cen nie znikają przy przewijaniu w dół — to tabela, nie pokaz */
.js .usl--cena.jest-poza,
.js .usl--honda.jest-poza { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.js .usl--cena.jest-poza .cena-wiersz,
.js .usl--cena.jest-poza .usl__przycisk,
.js .usl--honda.jest-poza .usl__notatka { opacity: 1; translate: 0 0; scale: 1; }

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .hero--mini { height: auto; min-height: calc(560 * var(--u)); }
  .karta__mgla {
    background: linear-gradient(180deg,
      rgba(248, 248, 248, .97) 0%, rgba(248, 248, 248, .9) 38%,
      rgba(248, 248, 248, .2) 62%, rgba(248, 248, 248, 0) 75%);
  }
  .hero--mini .karta__auto { height: 62%; object-position: 70% 60%; }
  .hero__opis {
    left: calc(24 * var(--u));
    right: calc(24 * var(--u));
    top: calc(136 * var(--u));
    max-width: none;
    font-size: calc(12 * var(--u));
  }

  .cennik { padding: calc(40 * var(--u)) calc(10 * var(--u)) calc(60 * var(--u)); }
  .cennik__uklad { grid-template-columns: minmax(0, 1fr); gap: calc(20 * var(--u)); }
  .cennik__bok { position: static; }
  .cennik__spis { padding: calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
  .cennik__spis ol { grid-template-columns: 1fr 1fr; }
  .cennik__spis a { gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); }
  .cennik__spis a::before { font-size: calc(11 * var(--u)); }
  .cennik__spis span { font-size: calc(11.5 * var(--u)); }
  .cennik__spis b { display: none; }
  .usl--honda { display: none; }
  .cennik__rysunek { display: none; }

  .cennik__notka { font-size: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(28 * var(--u)); }
  .cennik__grupa { font-size: calc(20 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .cennik__grupa span { font-size: calc(20 * var(--u)); }
  .cennik__rzad { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--u)); }
  .cennik__kol { gap: calc(12 * var(--u)); }
  .cennik__akcent { margin: calc(30 * var(--u)) 0 calc(20 * var(--u)); }

  .usl--cena .usl__karta { border-radius: calc(20 * var(--u)); }
  .cena__foto { height: calc(150 * var(--u)); }
  .cena__tresc { padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(74 * var(--u)); }
  .cena__tytul { font-size: calc(19 * var(--u)); }
  .cena__opis { font-size: calc(12 * var(--u)); }
  .cena-wiersz { flex-wrap: wrap; gap: calc(6 * var(--u)) calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(6 * var(--u)); margin: 0 calc(-6 * var(--u)); }
  .cena-wiersz__nazwa { flex: 1 1 100%; font-size: calc(13 * var(--u)); }
  .cena-wiersz__nazwa small { font-size: calc(10.5 * var(--u)); }
  .cena-wiersz__kropki { margin-bottom: calc(8 * var(--u)); }
  .cena-pig, .cena-wiersz--dwie .cena-pig, .cena-wiersz--glowa span:nth-child(3), .cena-wiersz--glowa span:nth-child(4) {
    min-width: calc(92 * var(--u));
    font-size: calc(12 * var(--u));
    padding: calc(6 * var(--u)) calc(10 * var(--u));
  }
  .cena-wiersz--glowa span:nth-child(3), .cena-wiersz--glowa span:nth-child(4) { font-size: calc(8.5 * var(--u)); padding: 0; }
  .cena-wiersz--glowa span:nth-child(1) { display: none; }
  .usl--cena .usl__przycisk { width: auto; padding: 0 calc(18 * var(--u)); }
  .usl--cena .usl__przycisk-napis { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cennik__akcent img, .js .cennik__rysunek img,
  .js .hero__opis, .js .usl--cena .cena-wiersz { opacity: 1 !important; rotate: none !important; scale: none !important; translate: none !important; filter: none !important; transition: none !important; }
}