/* Kontakt C2 — prototyp C2 145 15 Kontakt → K145 Page (v A, depth plus, lokd plus, mapa M1, FAQ „moduł”).
   Wartości 1:1 z prototypu. Prototyp ma osobne gałęzie desktop (≥ 1024 px) i telefon; tu jeden dokument:
   układ obu gałęzi daje CSS (display: contents; w Lokalizacji także order), a tam, gdzie gałęzie mają inną kolejność
   treści w dokumencie (zdanie o konsultacji, „Po wysłaniu formularza”), są dwa warianty: -d (desktop) i -m (telefon).
   Wartości liczone w prototypie w JS (renderVals) odtworzone w CSS:
     pxv  = max(0, (W − 1800) / 2) + (W ≥ 1280 ? 76 : 48)            → --kt-px
     col + 24 = (W − 2·pxv + 24) / 12                                   → --kt-col
     flB  = pxv + 5·(col + 24)  (lewa krawędź 6. kolumny)               → --kt-flb (lewa krawędź filmu)
     rmg  = W ≥ 1280 ? 32 : 24,  fh = (W − flB − rmg) / 1.7              → --kt-rmg, --kt-fh (wysokość filmu)
     ov   = W ≥ 1280 ? 72 : 64,  formularz: margin-top 128 + fh − ov     → --kt-ov
     M1.cw = W ≥ 1280 ? max(460, 5·col + 96) : 440                       → szerokość karty lokalizacji
     mpx  = max(20, (W − 640) / 2),  mpxF = max(12, (W − 664) / 2)       → --kt-mpx, --kt-mpxf
     MB.bh = 72 + clamp(150, 0,4·W, 300)                                  → wysokość pasa z panoramą na telefonie
   (W = szerokość ramki .c2-frame = 100cqi; prototyp zaokrągla do pełnych px — tu bez zaokrąglenia, różnica < 1 px).
   PANORAMA: warstwy, przenikania i progi 1:1 z produkcji (public/css/styles.css, .contact-hero__media) — także progi
   w px (760 / 761 px), bo te same wartości sprawdza skrypt panoramy (matchMedia „(min-width: 761px)”); prototyp
   wyznacza tylko ramkę: desktop — kadr 1,7 : 1 z zaokrąglonym narożnikiem, telefon — pas pod Nav87.
   Karta formularza: wnętrze — wspólny komponent (c2/styles/form.css); tu tylko miejsce na stronie i cień K145
   (desktop „depth plus”, telefon — cień podstawowy karty; Głębia nadaje kartom Home inny cień). */

.c2-kt-open, .c2-kt-lok {
  --kt-mpx: max(20px, calc((100cqi - 640px) / 2));
}
.c2-kt-nowrap { white-space: nowrap; }

/* ===================================================================== panorama (produkcja 1:1) */
.c2-kt-film {
  --contact-clip-fade: 1500ms;   /* długość przejścia między klipami — JEDNA wartość, odczytywana też przez JS */
  position: relative;
  height: calc(72px + clamp(150px, 40cqi, 300px));
  overflow: hidden;
  background: #1B2A33;
}
.c2-kt-film img,
.c2-kt-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;   /* kadr produkcji: skyline trzymany po prawej, nie ucięty */
  display: block;
}
/* Dwa sloty nad posterem; klip niewidoczny, dopóki naprawdę nie ruszył (is-playing na zdarzenie „playing”).
   Wchodzący klip (is-top) przenika NAD wychodzącym; pierwsze pojawienie się (is-instant) bez przejścia —
   poster i klatka zerowa klipu to ta sama klatka materiału. Reguła is-instant stoi po is-top celowo. */
.c2-kt-film video {
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.c2-kt-film video.is-top { z-index: 1; transition-duration: var(--contact-clip-fade); }
.c2-kt-film video.is-instant { transition-duration: 0s; }
.c2-kt-film video.is-playing { opacity: 1; }
/* Telefon: wyłącznie poster mobilny z produkcji (ten sam plik, bez powiększenia), w pasie Stage 145 dopasowanym tak, by obok
   panoramy miasta był widoczny most (decyzja właściciela 2026-11-05). Obraz na szerokość pasa, od górnej krawędzi; pas ma
   75% szerokości okna ≈ 65% wysokości posteru (1170 × 1344) — przy każdej szerokości: niebo pod paskiem Nav87, wieżowce,
   most nad Wisłą. Prototyp: 72 px + clamp(150 px, 40cqi, 300 px) i powiększenie ×1,1 (sama panorama).
   Wideo: druga linia obrony jak w produkcji — skrypt i tak nie podpina źródeł poniżej 761 px. */
@media (max-width: 760px) {
  .c2-kt-film { height: 75cqi; }
  .c2-kt-film img { bottom: auto; height: auto; aspect-ratio: 1170 / 1344; object-position: 50% 0%; }
  .c2-kt-film video { display: none; }
}
/* ograniczony ruch — chowamy klip, zostaje statyczny poster */
@media (prefers-reduced-motion: reduce) {
  .c2-kt-film video { display: none; }
}

/* ===================================================================== 01 — telefon (< 1024 px) */
.c2-kt-open { position: relative; display: flex; flex-direction: column; }
.c2-kt-left, .c2-kt-head { display: contents; }
.c2-kt-intro {
  position: relative;
  margin-top: -24px;
  padding: 24px var(--kt-mpx) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--c-bg);
  border-radius: 0 24px 0 0;
}
.c2-kt-formcol { padding: 24px max(12px, calc((100cqi - 664px) / 2)) 0; }

.c2-kt-eyebrow { font: 600 .75rem var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-petrol); }
.c2-kt-h1 {
  font: 500 clamp(1.9375rem, 8.6cqi, 2.625rem)/1.08 var(--f-serif);
  letter-spacing: -.012em;
  color: var(--c-ink);
  text-wrap: balance;
}
.c2-kt-lead { margin-top: 2px; font: 400 1rem/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2-kt-note { margin-top: 4px; font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2 .c2-kt-note__link { color: var(--c-petrol); font-weight: 600; text-underline-offset: 4px; }
.c2 .c2-kt-note__link:focus-visible { outline-offset: 2px; }

/* dane kontaktowe — telefon: wiersz „ikona · numer · Zadzwoń”, e-mail */
.c2-kt-dane { margin-top: 6px; display: flex; flex-direction: column; }
.c2-kt-dane__lbl { font: 500 .875rem var(--f-sans); color: var(--c-muted); }
.c2 .c2-kt-tel, .c2 .c2-kt-mail { color: var(--c-ink); text-decoration: none; }
/* numer ze zwykłymi spacjami i zawijany wiersz: przy zwykłym tekście zawsze w jednej linii (numer ok. 135 px), przy tekście
   200% / zoomie numer łamie się między grupami cyfr, a „Zadzwoń” schodzi pod spód — bez poziomego przewijania */
.c2-kt-tel { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; border-top: 1px solid var(--c-ink); }
.c2-kt-tel .c2-kt-dane__lbl, .c2-kt-mail .c2-kt-dane__lbl { display: none; }
.c2-kt-tel__num { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 1.625rem/1.1 var(--f-serif); }
.c2-kt-tel__num svg { width: 26px; height: 26px; flex: none; }
.c2-kt-tel__call { margin-left: auto; padding: 4px 0; font: 600 .875rem var(--f-sans); color: var(--c-petrol); }
.c2-kt-mail { min-height: 56px; display: flex; align-items: center; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.c2-kt-mail__row { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 1rem var(--f-sans); overflow-wrap: anywhere; }
.c2-kt-mail__row svg { width: 24px; height: 24px; flex: none; }
.c2-kt-office { display: none; }
.c2 .c2-kt-tolok {
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--c-petrol);
}
.c2 .c2-kt-tolok--m {
  margin-top: -6px;
  font: 500 .9375rem var(--f-sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.c2 .c2-kt-tolok--m:focus-visible { outline-offset: 2px; }
.c2 .c2-kt-tolok--d { display: none; }

/* „Po wysłaniu formularza” */
.c2-kt-po.c2-kt-po--d, .c2-kt-note.c2-kt-note--d { display: none; }
.c2-kt-po { padding: 32px var(--kt-mpx) 0; display: flex; flex-direction: column; gap: 10px; }
.c2-kt-po__label { font: 600 .75rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.c2-kt-po__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c-ink); }
.c2-kt-po__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  font: 400 .9375rem/1.55 var(--f-sans);
  color: var(--c-body);
}
.c2-kt-po__list li > span + span { text-wrap: pretty; }
.c2-kt-po__n { font: 500 1.125rem/1.35 var(--f-serif); color: var(--c-petrol); }

/* „Co warto opisać” — tylko desktop (na telefonie: panel „Co warto opisać?” w formularzu) */
.c2-kt-hint { display: none; }
.c2-kt-hint__title { font: 500 1.5rem/1.2 var(--f-serif); color: var(--c-ink); }
.c2-kt-hint__intro { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2-kt-hint__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #B9C7C3; }
.c2-kt-hint__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #C9D5D1;
  font: 400 .9375rem/1.5 var(--f-sans);
  color: var(--c-body);
  text-wrap: wrap;   /* w prototypie <div> — bez wspólnego „pretty” dla li (base.css) */
}
.c2-kt-hint__list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--c-petrol); }

/* karta formularza: cień podstawowy K145 Form (telefon) zamiast cienia Głębi dla Home */
.c2-kt-formcol [data-c2-form] { box-shadow: 0 1px 2px rgba(18, 40, 42, .05), 0 18px 40px -22px rgba(18, 40, 42, .22); }


@media (hover: hover) {
  .c2 .c2-kt-tel:hover, .c2 .c2-kt-mail:hover { color: var(--c-petrol); }
}

/* ===================================================================== 01 — desktop (≥ 1024 px) */
@media (min-width: 64em) {
  /* margines = --px fundamentu (decyzja właściciela 2026-11-05: w linii z Nav87 i stopką; prototyp: 48 → 76 px przy 1280 px) */
  .c2-kt-open, .c2-kt-lok { --kt-px: var(--px); }
  .c2-kt-open {
    --kt-col: calc((100cqi - 2 * var(--kt-px) + 24px) / 12);
    --kt-flb: calc(var(--kt-px) + 5 * var(--kt-col));
    --kt-rmg: 24px;
    --kt-ov: 64px;
    --kt-fh: calc((100cqi - var(--kt-flb) - var(--kt-rmg)) / 1.7);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    padding: 0 var(--kt-px) 120px;
  }
  .c2-kt-film {
    position: absolute;
    z-index: 0;
    top: calc(128px + var(--n87-top-extra, 0px));   /* + pasek narzędzi PL | EN na górze strony (nav87.css) */
    left: var(--kt-flb);
    right: var(--kt-rmg);
    height: var(--kt-fh);
    border-radius: 0 64px 0 0;
    /* głębia: miękki cień nieruchomego opakowania (nie klipów) — box-shadow, bez filtra i bez zmiany wymiarów */
    box-shadow: var(--c2-sh-media-box);
  }
  /* to samo zaokrąglenie na posterze i klipach — WebKit nie zawsze przycina wideo w warstwie kompozytora do promienia rodzica */
  .c2-kt-film img, .c2-kt-film video { border-radius: 0 64px 0 0; }
  .c2-kt-left {
    grid-column: 1 / 6;
    position: relative;
    z-index: 1;
    padding-top: calc(128px + var(--n87-top-extra, 0px));
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .c2-kt-intro { display: contents; }
  .c2-kt-head { display: flex; flex-direction: column; gap: 20px; }
  .c2-kt-po.c2-kt-po--d { display: flex; }
  .c2-kt-note.c2-kt-note--d { display: block; }
  .c2-kt-po.c2-kt-po--m, .c2-kt-note.c2-kt-note--m { display: none; }
  .c2-kt-formcol {
    grid-column: 6 / 13;
    position: relative;
    z-index: 2;
    margin: calc(128px + var(--n87-top-extra, 0px) + var(--kt-fh) - var(--kt-ov)) 0 0 28px;
    padding: 0;
  }
  .c2-kt-formcol [data-c2-form] {
    box-shadow: 0 -4px 12px -3px rgba(6, 18, 20, .55), 0 -1px 2px rgba(6, 18, 20, .18), 0 3px 6px rgba(18, 40, 42, .07), 0 16px 34px -20px rgba(18, 40, 42, .22), 0 52px 96px -46px rgba(18, 40, 42, .38);
  }

  .c2-kt-eyebrow { font-size: .8125rem; }
  .c2-kt-h1 { font-size: clamp(2.75rem, 4.15cqi, 4.125rem); line-height: 1.04; letter-spacing: -.016em; }
  .c2-kt-lead { margin-top: 4px; font-size: 1.125rem; line-height: 1.6; max-width: 32.5rem; }
  .c2-kt-note { margin-top: 0; font-size: 1.125rem; line-height: 1.6; max-width: 32.5rem; }

  .c2-kt-dane { margin-top: 0; }
  .c2-kt-tel, .c2-kt-mail {
    min-height: 44px;
    padding: 16px 0 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .c2-kt-mail { gap: 6px; border-bottom: 0; }
  .c2-kt-tel .c2-kt-dane__lbl, .c2-kt-mail .c2-kt-dane__lbl { display: block; }
  .c2-kt-tel__num { gap: 14px; font-size: 2.25rem; line-height: 1.12; }
  .c2-kt-tel__num svg { width: 30px; height: 30px; }
  .c2-kt-tel__call { display: none; }
  .c2-kt-mail__row { gap: 14px; font-size: clamp(1rem, 1.6cqi, 1.25rem); }
  .c2-kt-mail__row svg { width: 26px; height: 26px; }
  .c2-kt-office { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--c-line); }
  .c2-kt-office__addr { display: flex; align-items: flex-start; gap: 14px; font: 500 1.0625rem/1.5 var(--f-sans); color: var(--c-ink); text-wrap: wrap; }   /* w prototypie <span> — bez „pretty” */
  .c2-kt-office__addr svg { width: 26px; height: 26px; flex: none; margin-top: -1px; }
  .c2-kt-office__online { padding-left: 40px; font: 400 1rem/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
  .c2 .c2-kt-tolok--d { display: flex; margin-left: 40px; font: 600 1rem var(--f-sans); text-underline-offset: 5px; }
  .c2 .c2-kt-tolok--m { display: none; }

  .c2-kt-po { padding: 0; gap: 14px; }
  .c2-kt-po__label { font-size: .8125rem; }
  .c2-kt-po__list li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 14px 0; font-size: 1.0625rem; }
  .c2-kt-po__n { font-size: 1.25rem; line-height: 1.3; }

  .c2-kt-hint { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; background: var(--c-mint); }
}
@media (min-width: 80em) {
  /* duże ekrany (korekta 2026-11-10): panorama kończy się na ramie 1920 px (jak ilustracje hero), a nie przy krawędzi
     okna — do 1920 px bez zmian */
  .c2-kt-open { --kt-rmg: calc(32px + max(0px, calc((100cqi - 1920px) / 2))); --kt-ov: 72px; }
  .c2-kt-formcol { grid-column: 7 / 13; margin-left: 0; }
}

/* ===================================================================== 02 Lokalizacja — telefon */
.c2-kt-lok { display: flex; flex-direction: column; gap: 16px; padding: 56px var(--kt-mpx); }
.c2-kt-lok__m1, .c2-kt-lok__card { display: contents; }
.c2-kt-lok__eyebrow { order: 1; }
.c2-kt-lok__title {
  order: 2;
  font: 500 clamp(1.75rem, 7.6cqi, 2.25rem)/1.1 var(--f-serif);
  letter-spacing: -.01em;
  color: var(--c-ink);
  text-wrap: balance;
}
.c2-kt-lok__online { order: 3; margin-top: -2px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); text-wrap: pretty; }

/* mapa P03 — własny podgląd (siatka i znacznik) do chwili narysowania mapy Mapbox wczytywanej po wejściu sekcji w widok */
.c2-kt-map {
  order: 4;
  position: relative;
  isolation: isolate;
  margin: 6px calc(-1 * var(--kt-mpx)) 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0 28px 0 0;
  background-color: #E9EDEB;
  background-image: repeating-linear-gradient(0deg, transparent 0 47px, rgba(30, 86, 80, .08) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(30, 86, 80, .08) 47px 48px);
}
/* .c2-kt-map > … — silniejsze niż .mapboxgl-map { position: relative } z arkusza Mapbox (inaczej kontener w kadrze ma wysokość 0) */
.c2-kt-map__live, .c2-kt-map > .c2-kt-map__live { position: absolute; inset: 0; }
.c2-kt-map__pin { position: absolute; left: 50%; top: 54%; display: flex; align-items: center; gap: 10px; transform: translate(-11px, -11px); }
.c2-kt-map__dot { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #FFFFFF; border: 6px solid var(--c-petrol); box-shadow: 0 0 0 8px rgba(30, 86, 80, .16); }
.c2-kt-map__label { padding: 6px 10px; background: #FFFFFF; font: 600 .8125rem var(--f-sans); color: var(--c-ink); box-shadow: 0 6px 16px -10px rgba(18, 40, 42, .5); }
/* znacznik na żywej mapie — ten sam rysunek co w podglądzie (kontakt.js: mapboxgl.Marker) */
.c2-kt-map__pin--live { position: static; transform: none; pointer-events: none; }
.c2-kt-map.is-ready > .c2-kt-map__pin { display: none; }
/* cały kadr jest przyciskiem (Enter / Spacja natywnie) — etykieta „Powiększ mapę” w rogu */
.c2-kt-map__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.c2-kt-map__open:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: -4px; }
.c2-kt-map__zoom {
  position: absolute;
  right: 12px;
  top: 58px;
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  font: 600 .875rem var(--f-sans);
  color: var(--c-petrol);
  transition: background-color 240ms var(--ease);
}
.c2-kt-map__zoom svg { flex: none; }
@media (hover: hover) { .c2-kt-map__open:hover .c2-kt-map__zoom { background: var(--c-mint); } }
.c2-kt-map__note {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 12px;
  background: #FFFFFF;
  font: 500 .875rem/1.45 var(--f-sans);
  color: var(--c-body);
  box-shadow: 0 6px 16px -10px rgba(18, 40, 42, .5);
}
.c2-kt-map__note[hidden] { display: none; }
/* kontrolki przybliżania tylko w powiększonym panelu — w kadrze sekcji mapa jest bez gestów (jak produkcja: .kmap .mapboxgl-ctrl-top-right) */
.c2-kt-map > .c2-kt-map__live .mapboxgl-ctrl-top-right { display: none; }
.c2-kt-map .mapboxgl-ctrl-top-right { top: 4px; }

/* powiększona mapa — dialog (produkcja: ta sama instancja mapy przeniesiona do panelu) */
.c2-kt-mapdlg {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2.5vw, 32px);
  background: rgba(18, 40, 42, .55);
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.c2-kt-mapdlg[hidden] { display: none; }
.c2-kt-mapdlg.is-open { opacity: 1; }
.c2-kt-mapdlg__box {
  display: flex;
  flex-direction: column;
  width: min(94vw, 1400px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 0 24px 0 0;
  box-shadow: 0 24px 60px -30px rgba(18, 40, 42, .6);
  transform: translateY(6px);
  transition: transform 280ms var(--ease);
}
.c2-kt-mapdlg.is-open .c2-kt-mapdlg__box { transform: none; }
.c2-kt-mapdlg__box:focus { outline: none; }
.c2-kt-mapdlg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--c-line-light, #DCE3E0); }
.c2-kt-mapdlg__title { margin: 0; font: 600 .75rem var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted, #5B6B6C); }
.c2-kt-mapdlg__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* kontrolki panelu — przyciski C2 (bez podkreślenia): „Wyznacz trasę” jak w karcie adresu (obrys petrol, róg R1),
   „Zamknij” — spokojny przycisk bez obrysu; hover: tło mint; fokus klawiatury: obrys 2 px petrol */
.c2 .c2-kt-mapdlg__act {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0 12px 0 0;
  background: transparent;
  font: 600 .9375rem var(--f-sans);
  color: var(--c-petrol);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.c2 .c2-kt-mapdlg__act--route { border-color: var(--c-petrol); }
.c2 .c2-kt-mapdlg__act--close { padding: 0 12px; }
.c2 .c2-kt-mapdlg__act svg { flex: none; display: block; }
@media (hover: hover) { .c2 .c2-kt-mapdlg__act:hover { background: var(--c-mint); color: var(--c-petrol); text-decoration: none; } }
.c2 .c2-kt-mapdlg__act:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.c2-kt-mapdlg__stage { position: relative; height: min(78vh, calc(100dvh - 7rem)); background: #E9EDEB; }
.c2-kt-mapdlg__map, .c2-kt-mapdlg__map > .c2-kt-map__live { position: absolute; inset: 0; }
.c2-kt-mapdlg__loading { position: absolute; left: 16px; right: 16px; top: 16px; width: fit-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 12px; background: #FFFFFF; font: 500 .9375rem var(--f-sans); color: var(--c-body); }
.c2-kt-mapdlg__loading[hidden] { display: none; }
html.c2-kt-mapdlg-open { overflow: hidden; }
@media (max-width: 600px) { .c2-kt-mapdlg__stage { height: min(64vh, calc(100dvh - 9rem)); } }
@media (prefers-reduced-motion: reduce) { .c2-kt-mapdlg, .c2-kt-mapdlg__box { transition: none; transform: none; } }

.c2-kt-lok__box {
  order: 5;
  position: relative;
  margin-top: -44px;
  padding: 20px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
  border-radius: 0 24px 0 0;
  box-shadow: 0 0 1px rgba(18, 40, 42, .12), 0 -2px 6px -2px rgba(18, 40, 42, .13), 0 1px 2px rgba(18, 40, 42, .06), 0 14px 30px -22px rgba(18, 40, 42, .30);
}
.c2-kt-lok__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.c2-kt-lok__addr { font: 500 1rem/1.55 var(--f-sans); font-style: normal; }
.c2-kt-lok__br { display: none; }
.c2 .c2-kt-route {
  position: relative;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-petrol);
  border-radius: 0 12px 0 0;
  background: transparent;
  color: var(--c-petrol);
  font: 600 .9375rem var(--f-sans);
  max-width: 100%;
  text-decoration: none;   /* prototyp: nowrap — tu łamanie dopiero, gdy przycisk nie mieści się w karcie (zoom 200% na telefonie) */
}
.c2-kt-ico-out { flex: none; display: block; }
@media (hover: hover) { .c2 .c2-kt-route:hover { background: var(--c-mint); color: var(--c-petrol); } }
.c2-kt-lok__rows { margin: 0; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--c-ink); }
.c2-kt-lok__rows > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; margin-bottom: -1px; border-bottom: 1px solid var(--c-line); }
.c2-kt-lok__rows dt { font: 600 .875rem/1.5 var(--f-sans); color: var(--c-ink); }
.c2-kt-lok__rows dd { margin: 0; font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }

.c2-kt-faq { order: 6; margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.c2-kt-faq__q { margin: 0 0 10px; font: 500 1.5rem/1.2 var(--f-serif); letter-spacing: -.005em; color: var(--c-ink); text-wrap: balance; }
.c2-kt-faq__a { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); text-wrap: pretty; }

/* ===================================================================== 02 Lokalizacja — desktop */
@media (min-width: 64em) {
  .c2-kt-lok {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
    padding: 0 var(--kt-px) 136px;
  }
  .c2-kt-lok__m1 {
    grid-column: 1 / -1;
    position: relative;
    min-height: 640px;
    padding: 48px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    border-radius: 0 64px 0 0;
  }
  .c2-kt-map {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    background-image: repeating-linear-gradient(0deg, transparent 0 63px, rgba(30, 86, 80, .08) 63px 64px), repeating-linear-gradient(90deg, transparent 0 63px, rgba(30, 86, 80, .08) 63px 64px);
  }
  .c2-kt-map__note { left: auto; right: 20px; bottom: 80px; max-width: 420px; }
  .c2-kt-map__pin { left: 68%; gap: 12px; }
  .c2-kt-map__label { font-size: .875rem; }
  /* nad atrybucją Mapbox w prawym dolnym rogu (podgląd statyczny i mapa interaktywna) — musi pozostać widoczna */
  .c2-kt-map__zoom { right: 20px; top: auto; bottom: 44px; padding: 0 16px; font-size: .9375rem; }

  .c2-kt-lok__card {
    position: relative;
    z-index: 1;
    width: 440px;
    padding: 36px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #FFFFFF;
    border-radius: 0 40px 0 0;
    box-shadow: 0 0 1.5px rgba(18, 40, 42, .16), 0 -2px 5px -2px rgba(18, 40, 42, .14), 0 2px 4px rgba(18, 40, 42, .08), 0 16px 34px -20px rgba(18, 40, 42, .24), 0 48px 90px -44px rgba(18, 40, 42, .34);
  }
  .c2-kt-lok__eyebrow, .c2-kt-lok__title, .c2-kt-lok__online, .c2-kt-map, .c2-kt-lok__box, .c2-kt-faq { order: 0; }
  .c2-kt-lok__title { font-size: clamp(2.25rem, 3.2cqi, 3.125rem); line-height: 1.08; }
  .c2-kt-lok__online { display: none; }
  .c2-kt-lok__box { display: contents; }
  .c2-kt-lok__addr { font-size: 1.125rem; }
  .c2-kt-lok__sep { display: none; }
  .c2-kt-lok__br { display: inline; }
  .c2-kt-lok__rows > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
  .c2-kt-lok__rows dt { font-size: .9375rem; line-height: 1.55; }
  .c2-kt-lok__rows dd { font-size: 1rem; }

  .c2-kt-faq {
    grid-column: 1 / -1;
    margin-top: 72px;
    padding-top: 40px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .c2-kt-faq__q { grid-column: 1 / 6; margin: 0; font-size: 1.875rem; line-height: 1.18; }
  .c2-kt-faq__a { grid-column: 7 / 12; margin-top: 6px; font-size: 1.125rem; }
}
@media (min-width: 80em) {
  .c2-kt-lok__card { width: max(460px, calc(5 * (100cqi - 2 * var(--kt-px) - 264px) / 12 + 96px)); }
}