/* ============================================================
   JURLEJ — STRONA KONTAKT
   Hero z cennika (cennik.css), tło siatki z O NAS (onas.css),
   dojazd ze strony głównej (dojazd.css). Tu: kanały kontaktu,
   godziny ze stanem „otwarte" (js/kontakt.js) i kroki.
   ============================================================ */

/* ---------------- hero ---------------- */
.strona-kontakt .hero--mini .karta__auto {
  left: auto;
  right: 0;
  width: 66%;
  object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}

/* ============================================================
   KANAŁY
   ============================================================ */
.kanaly {
  position: relative;
  padding: calc(80 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
  isolation: isolate;
}
.kanaly__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(16 * var(--u));
}
.kanaly .usl { display: flex; flex-direction: column; min-height: calc(470 * var(--u)); }
.kanaly .usl__karta {
  position: relative;
  flex: 1;
  border-radius: calc(26 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .82) 50%, rgba(255, 255, 255, .9) 100%);
}
.kanaly .usl__karta::after { display: none; }
.kanaly .usl__obrys path { stroke: rgba(90, 86, 86, .3); stroke-width: 1.2; }
.kanal__tresc {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(96 * var(--u));
}
.kanal__nad {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.kanal__tytul {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(28 * var(--u));
  line-height: 1.2;
  font-weight: 800;
  color: var(--grafit);
}
.kanal__opis {
  margin: calc(12 * var(--u)) 0 0;
  max-width: calc(520 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.6;
  color: #6a6464;
  text-wrap: pretty;
}

/* telefon — grafit jak stopka, duży numer */
.usl--tel .usl__karta {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(143, 29, 20, .32), rgba(143, 29, 20, 0) 50%),
    linear-gradient(160deg, #262525 0%, #1c1b1b 60%, #161515 100%);
}
.usl--tel .kanal__tresc { justify-content: center; }
.usl--tel .kanal__nad { color: #e3392c; }
.kanal__numer {
  display: block;
  width: fit-content;
  margin-top: calc(18 * var(--u));
  font-size: calc(66 * var(--u));
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #fff;
  transition: color .3s var(--ease);
}
.kanal__numer:hover { color: #ff6a5c; }
.usl--tel .kanal__opis { color: #a8a2a1; }
.kanal__tlo-ik {
  position: absolute;
  right: calc(-40 * var(--u));
  top: calc(-30 * var(--u));
  width: calc(340 * var(--u));
  height: calc(340 * var(--u));
  fill: none;
  stroke: rgba(255, 255, 255, .06);
  stroke-width: .5;
  rotate: -12deg;
  pointer-events: none;
}

/* wiadomość — dwa linki jak pigułki */
.kanal__linki { display: grid; gap: calc(10 * var(--u)); margin-top: auto; padding-top: calc(24 * var(--u)); }
.kanal__link {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  color: var(--grafit);
  background: rgba(143, 29, 20, .035);
  box-shadow: inset 0 0 0 1.2px rgba(143, 29, 20, .25);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.kanal__link:hover { background: rgba(143, 29, 20, .08); box-shadow: inset 0 0 0 1.2px rgba(143, 29, 20, .55); }
.kanal__link svg {
  flex: none;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: 50%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .5) 0%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
}
.kanal__link svg.kanal__fb { fill: #fff; stroke: none; }
.kanal__link span { min-width: 0; font-size: calc(15 * var(--u)); font-weight: 700; overflow-wrap: anywhere; }
.kanal__link small {
  display: block;
  margin-bottom: calc(3 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9a9493;
}

/* godziny — dzisiejszy dzień bordowy, stan na żywo */
.godziny__stan {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: fit-content;
  margin: calc(16 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--grafit);
  background: rgba(38, 37, 37, .05);
}
.godziny__stan i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #9a9493; }
.godziny__stan.jest-otwarte i { background: #1f9d55; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(31, 157, 85, .18); animation: puls-otw 2s ease-in-out infinite; }
.godziny__stan.jest-zamkniete i { background: var(--czerwien); }
@keyframes puls-otw { 50% { box-shadow: 0 0 0 calc(7 * var(--u)) rgba(31, 157, 85, 0); } }
.godziny { display: grid; margin: calc(18 * var(--u)) 0 0; padding: 0; list-style: none; }
.godziny li {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  margin: 0 calc(-12 * var(--u));
  border-radius: calc(10 * var(--u));
  border-bottom: 1px solid rgba(38, 37, 37, .07);
  font-size: calc(14.5 * var(--u));
  color: #6a6464;
}
.godziny li b { font-weight: 700; color: var(--grafit); }
.godziny li.jest-dzis { color: #fff; border-bottom-color: transparent; background: linear-gradient(90deg, #840000, #6c0000 55%, #5a0000); }
.godziny li.jest-dzis b { color: #fff; }

/* wejście treści kart */
.js .kanaly .kanal__tresc > * {
  opacity: 0;
  translate: 0 calc(16 * var(--u));
  transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.js .kanaly .usl.jest-w-kadrze .kanal__tresc > * {
  opacity: 1;
  translate: 0 0;
  transition-duration: 1.3s, 1.7s;
}
.js .kanaly .usl.jest-w-kadrze .kanal__tresc > :nth-child(1) { transition-delay: calc(var(--opoz, 0s) + .5s); }
.js .kanaly .usl.jest-w-kadrze .kanal__tresc > :nth-child(2) { transition-delay: calc(var(--opoz, 0s) + .65s); }
.js .kanaly .usl.jest-w-kadrze .kanal__tresc > :nth-child(3) { transition-delay: calc(var(--opoz, 0s) + .8s); }
.js .kanaly .usl.jest-w-kadrze .kanal__tresc > :nth-child(4) { transition-delay: calc(var(--opoz, 0s) + .95s); }

/* ============================================================
   KROK PO KROKU
   ============================================================ */
.kroki {
  position: relative;
  padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
}
.kroki__srodek { padding-left: calc(56 * var(--u)); }
.kroki__tytul {
  margin: calc(14 * var(--u)) 0 0;
  font: 400 calc(48 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .06em;
  color: var(--grafit);
  white-space: nowrap;
  --n: 13;
  --wy: 0s;
}
.js .kroki__srodek.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(.3s + var(--l) * .06s);
}
.kroki__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16 * var(--u));
  margin: calc(40 * var(--u)) 0 0 calc(-56 * var(--u));
  padding: 0;
  list-style: none;
}
.krok {
  position: relative;
  padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(34 * var(--u));
  border-radius: calc(26 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
  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, .04);
}
/* strzałka wymiarowa między krokami */
.krok:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(52 * var(--u));
  right: calc(-28 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h11M12 7l5 5-5 5'/%3E%3C/svg%3E") center / 55% no-repeat,
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow: 0 0 0 calc(3 * var(--u)) #cfcfcf;
}
.krok__nr { font: 400 calc(44 * var(--u))/1 'Draco', sans-serif; color: var(--czerwien); }
.krok__tytul { margin: calc(20 * var(--u)) 0 0; font-size: calc(22 * var(--u)); font-weight: 800; color: var(--grafit); }
.krok__opis { margin: calc(10 * var(--u)) 0 0; font-size: calc(15 * var(--u)); line-height: 1.6; color: #6a6464; text-wrap: pretty; }
.js .krok {
  opacity: 0;
  translate: 0 calc(30 * var(--u));
  transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.js .kroki__srodek.jest-w-kadrze .krok {
  opacity: 1;
  translate: 0 0;
  transition-duration: 1.4s, 1.8s;
  transition-delay: calc(.9s + var(--r) * .22s);
}

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .strona-kontakt .hero--mini .karta__auto { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }

  .kanaly { padding: calc(40 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u)); }
  .kanaly__siatka { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--u)); }
  .kanaly .usl { min-height: 0; }
  .kanaly .usl__karta { border-radius: calc(20 * var(--u)); }
  .kanal__tresc { padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(72 * var(--u)); }
  .kanal__nad { font-size: calc(9 * var(--u)); }
  .kanal__numer { margin-top: calc(12 * var(--u)); font-size: calc(32 * var(--u)); }
  .kanal__tytul { font-size: calc(19 * var(--u)); margin-top: calc(10 * var(--u)); }
  .kanal__opis { font-size: calc(12 * var(--u)); }
  .kanal__tlo-ik { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
  .kanal__link { gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); border-radius: calc(14 * var(--u)); }
  .kanal__link svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: calc(8 * var(--u)); }
  .kanal__link span { font-size: calc(12 * var(--u)); }
  .kanal__link small { font-size: calc(8.5 * var(--u)); }
  .godziny__stan { font-size: calc(11 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); }
  .godziny li { font-size: calc(12 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); margin: 0 calc(-10 * var(--u)); }
  .kanaly .usl__przycisk:not(.usl__przycisk--kolo) { width: auto; padding: 0 calc(18 * var(--u)); }
  .kanaly .usl__przycisk-napis { display: block; }

  .kroki { padding: calc(40 * var(--u)) calc(10 * var(--u)) calc(30 * var(--u)); }
  .kroki__srodek { padding: 0 calc(12 * var(--u)); }
  .kroki__tytul { margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
  .kroki__lista { grid-template-columns: minmax(0, 1fr); gap: calc(26 * var(--u)); margin: calc(22 * var(--u)) calc(-12 * var(--u)) 0; }
  .krok { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(20 * var(--u)); }
  .krok:not(:last-child)::after { top: auto; bottom: calc(-24 * var(--u)); right: 50%; translate: 50% 0; rotate: 90deg; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .krok__nr { font-size: calc(26 * var(--u)); }
  .krok__tytul { font-size: calc(17 * var(--u)); margin-top: calc(12 * var(--u)); }
  .krok__opis { font-size: calc(12 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .kanaly .kanal__tresc > *, .js .krok { opacity: 1 !important; translate: none !important; transition: none !important; }
  .godziny__stan.jest-otwarte i { animation: none; }
}