/* ============================================================
   JURLEJ — SEKCJA 5: DOJAZD
   Po lewej duży „ekran nawigacji" (ciemna mapa), po prawej tekst
   i jasna karta kontaktowa z przyciskiem NAWIGUJ w wycięciu.
   ============================================================ */

.dojazd {
  position: relative;
  /* o 1/3 niższa niż ekran */
  height: 67vh;
  height: 67svh;
  min-height: calc(700 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(64 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
  isolation: isolate;
  overflow: clip;
}
.dojazd__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(38, 37, 37, .07) 1px, transparent 1px) 50% 0 / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .07) 1px, transparent 1px) 50% 0 / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(rgba(38, 37, 37, .04) 1px, transparent 1px) 50% 0 / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .04) 1px, transparent 1px) 50% 0 / calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  pointer-events: none;
}

.dojazd__siatka {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(540 * var(--u));
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(16 * var(--u));
}
.usl--mapa { grid-column: 1; grid-row: 1 / 3; }
.dojazd__tekst { grid-column: 2; grid-row: 1; padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); }
.usl--kontakt { grid-column: 2; grid-row: 2; }

/* ---------------- tekst ---------------- */
.dojazd__nad {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.dojazd__tytul {
  margin: calc(14 * var(--u)) 0 0;
  font: 400 calc(46 * var(--u))/1 'Draco', sans-serif;   /* mieści się w kolumnie 540 */
  letter-spacing: .06em;
  color: var(--grafit);
  white-space: nowrap;
  --n: 5;
  --wy: 0s;
}
.dojazd__opis {
  margin: calc(18 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #3b3939;
}

/* ---------------- ekran mapy ---------------- */
.usl--mapa .usl__karta {
  background: #1b1b1c;
  border-radius: calc(30 * var(--u));
}
/* winieta jak na ekranie w kokpicie — skupia wzrok na trasie */
.usl--mapa .usl__karta::after {
  z-index: 450;
  background:
    radial-gradient(ellipse 80% 75% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
}
.mapa {
  position: absolute;
  inset: 0;
  background: #1b1b1c;
}
/* jasne kafelki OSM w trybie nocnym: odwrócenie, szarość, kontrast */
.mapa .leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(.78) contrast(1.25);
}
.mapa .leaflet-control-attribution {
  background: rgba(20, 20, 20, .6);
  color: #8a8585;
  font: 500 10px Manrope, sans-serif;
}
.mapa .leaflet-control-attribution a { color: #b0aaaa; }
.jest-bez-mapy .mapa::after {
  content: 'Mapa niedostępna — skorzystaj z przycisku NAWIGUJ';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9a9493;
  font: 600 14px Manrope, sans-serif;
}

/* trasa świeci jak w nawigacji */
.mapa__trasa { filter: drop-shadow(0 0 6px rgba(227, 57, 44, .85)); }
/* auto: biała strzałka z czerwoną obwódką */
.mapa__auto svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55)) drop-shadow(0 3px 4px rgba(0, 0, 0, .6));
}
.mapa__auto path { fill: #fff; stroke: #e3392c; stroke-width: 2.5; stroke-linejoin: round; }
.mapa__start span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}
.mapa__start b,
.mapa__cel b {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  translate: -50% 0;
  font: 700 11px Manrope, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.mapa__start b { top: 20px; color: #bdb7b7; }
.mapa__cel b {
  top: -26px;
  font: 400 14px 'Draco', sans-serif;
  letter-spacing: .06em;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #840000, #5a0000);
  box-shadow: 0 0 0 2px #cfcfcf;
  text-shadow: none;
}
.mapa__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #e3392c;
  box-shadow: 0 0 0 4px #fff, 0 0 18px rgba(227, 57, 44, .9);
}
.mapa__puls {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px solid #e3392c;
  animation: mapaPuls 1.8s ease-out infinite;
}
@keyframes mapaPuls {
  0% { opacity: .9; scale: 1; }
  100% { opacity: 0; scale: 3.6; }
}

/* belka manewru — ciemne szkło w lewym górnym rogu ekranu */
.nawi {
  position: absolute;
  z-index: 500;
  left: calc(26 * var(--u));
  top: calc(26 * var(--u));
  right: calc(26 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.nawi__manewr {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  min-width: calc(380 * var(--u));
  padding: calc(16 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: calc(20 * var(--u));
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .45) 0%, rgba(150, 148, 148, 0) 50%),
    linear-gradient(90deg, rgba(132, 0, 0, .92), rgba(90, 0, 0, .92));
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(207, 207, 207, .9), 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .45);
  color: #fff;
}
.nawi__strzalka {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nawi p { margin: 0; }
.nawi__dystans { font: 400 calc(30 * var(--u))/1 'Draco', sans-serif; letter-spacing: .03em; }
.nawi__ulica { margin-top: calc(6 * var(--u)) !important; font-size: calc(14 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, .85); }
/* znak ograniczenia prędkości */
.nawi__limit {
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 calc(7 * var(--u)) #d1261b, 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .45);
  font: 800 calc(22 * var(--u))/1 Manrope, sans-serif;
  color: #1b1b1b;
}

/* czas dojazdu w wycięciu karty — tabliczka bordowa jak w sekcji tuningu */
.usl__notatka--eta { width: calc(320 * var(--u)); }
.eta__czas { margin: 0; font: 400 calc(30 * var(--u))/1 'Draco', sans-serif; color: #fff; }
.eta__czas b { font-weight: 400; }
.eta__info { margin: calc(8 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, .82); }
.nawi__dystans, .eta__czas { white-space: nowrap; }
/* po dojeździe dłuższe napisy — mniejszy stopień, żeby się zmieściły */
.jest-na-miejscu .nawi__dystans { font-size: calc(24 * var(--u)); }
.jest-na-miejscu .eta__czas { font-size: calc(24 * var(--u)); }

/* ---------------- karta kontaktowa ---------------- */
.usl--kontakt .usl__karta {
  border-radius: calc(26 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .82) 100%);
}
.usl--kontakt .usl__karta::after { display: none; }
.usl--kontakt .usl__obrys path { stroke: rgba(90, 86, 86, .32); stroke-width: 1.2; }
/* dwie kolumny: adres i telefon obok siebie, e-mail i godziny na całą
   szerokość — karta bez pustego miejsca */
.kontakt {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: calc(16 * var(--u));
  margin: 0;
  padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(76 * var(--u));
  list-style: none;
}
.kontakt li { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); }
.kontakt__ikona {
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: 50%;
  fill: none;
  stroke: var(--czerwien);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(143, 29, 20, .06);
  box-shadow: inset 0 0 0 1.5px rgba(143, 29, 20, .45);
}
.kontakt span {
  display: block;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9a9493;
}
.kontakt b,
.kontakt a {
  display: block;
  margin-top: calc(5 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  color: var(--grafit);
  overflow-wrap: anywhere;
}
.kontakt a { transition: color .3s var(--ease); }
.kontakt a:hover { color: var(--czerwien); }

/* ---------------- wejście tekstu ---------------- */
.js .dojazd__tekst.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(.15s + var(--l) * .08s);
}
.js .dojazd__nad,
.js .dojazd__opis {
  opacity: 0;
  translate: 0 calc(16 * var(--u));
  filter: blur(6px);
  transition: opacity .4s var(--ease), translate .5s var(--ease), filter .4s var(--ease);
}
.js .dojazd__tekst.jest-w-kadrze .dojazd__nad,
.js .dojazd__tekst.jest-w-kadrze .dojazd__opis {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 1.9s, 1.5s;
}
.js .dojazd__tekst.jest-w-kadrze .dojazd__opis { transition-delay: .8s; }
/* belka nawigacji dochodzi po mapie */
.js .usl--mapa .nawi { opacity: 0; translate: 0 calc(-20 * var(--u)); transition: opacity .4s var(--ease), translate .5s var(--ease); }
.js .usl--mapa.jest-w-kadrze .nawi { opacity: 1; translate: 0 0; transition: opacity 1.2s var(--ease) calc(var(--opoz, 0s) + .5s), translate 1.6s var(--ease) calc(var(--opoz, 0s) + .5s); }

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .dojazd { height: auto; display: block; padding: calc(70 * var(--u)) calc(10 * var(--u)) calc(60 * var(--u)); }
  .dojazd__siatka { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: calc(10 * var(--u)); }
  .dojazd__tekst { grid-column: 1; grid-row: 1; padding: 0 calc(12 * var(--u)) calc(16 * var(--u)); }
  .usl--mapa { grid-column: 1; grid-row: 2; height: calc(560 * var(--u)); }
  .usl--kontakt { grid-column: 1; grid-row: 3; height: auto; }
  .usl--kontakt .usl__karta { position: relative; border-radius: calc(20 * var(--u)); }

  .dojazd__nad { font-size: calc(9 * var(--u)); }
  .dojazd__tytul { font-size: calc(30 * var(--u)); margin-top: calc(10 * var(--u)); }   /* na całą szerokość */
  .dojazd__opis { font-size: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }

  .nawi { left: calc(12 * var(--u)); top: calc(12 * var(--u)); right: calc(12 * var(--u)); }
  .nawi__manewr { min-width: 0; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); }
  .nawi__strzalka { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .nawi__dystans { font-size: calc(20 * var(--u)); }
  .nawi__ulica { font-size: calc(11 * var(--u)); }
  .nawi__limit { width: calc(42 * var(--u)); height: calc(42 * var(--u)); font-size: calc(15 * var(--u)); box-shadow: inset 0 0 0 calc(5 * var(--u)) #d1261b; }
  .usl__notatka--eta { width: calc(200 * var(--u)); }
  .eta__czas { font-size: calc(20 * var(--u)); }
  .eta__info { font-size: calc(10.5 * var(--u)); }
  .jest-na-miejscu .nawi__dystans { font-size: calc(14 * var(--u)); }
  .jest-na-miejscu .eta__czas { font-size: calc(15 * var(--u)); }

  .kontakt { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(72 * var(--u)); }
  .kontakt__ikona { width: calc(36 * var(--u)); height: calc(36 * var(--u)); padding: calc(8 * var(--u)); }
  .kontakt span { font-size: calc(9 * var(--u)); }
  .kontakt b, .kontakt a { font-size: calc(14 * var(--u)); }
  .usl--kontakt .usl__przycisk { width: auto; padding: 0 calc(20 * var(--u)); }
  .usl--kontakt .usl__przycisk-napis { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .js .dojazd__nad, .js .dojazd__opis, .js .usl--mapa .nawi {
    opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important;
  }
  .mapa__puls { animation: none; }
}