/* Kontakt: adres, nawigacja i interaktywna mapa prawdziwej okolicy. */

.kontakt-dojazd {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--paper);
  scroll-margin-top: 4.5rem;
}

.kontakt-dojazd__plate {
  padding-block: clamp(3rem, 7vw, 6.5rem);
  background: var(--panel);
}

/* --- Tresc -------------------------------------------------------------- */
.kontakt-dojazd__in {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}

@media (min-width: 900px) {
  .kontakt-dojazd__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  .kontakt-dojazd__side { grid-column: 1 / 6; }
  .kontakt-dojazd__body { grid-column: 6 / -1; }
}

.kontakt-dojazd__lab { display: block; margin-bottom: clamp(1rem, 2vw, 1.6rem); }

.kontakt-dojazd__h {
  font-size: clamp(2.1rem, 6.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 900px) {
  .kontakt-dojazd__h { font-size: clamp(2rem, 3vw, 3.25rem); }
}

.kontakt-dojazd__h .line { display: block; }

/* Adres jest tu druga wielkoscia w sekcji - ma sie czytac z drugiego konca
   pokoju, bo po to ludzie wchodza na te podstrone. Hairline pod nim ciagnie
   sie przez cala kolumne i zamyka blok bez ramki. */
.kontakt-dojazd__adr {
  display: grid;
  gap: 0.4rem;
  padding-bottom: clamp(1.35rem, 2.6vw, 2rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.kontakt-dojazd__street {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.kontakt-dojazd__city {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--muted);
}

.kontakt-dojazd__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.kontakt-dojazd__note {
  flex: 1 1 22ch;
  max-width: 44ch;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

.kontakt-dojazd__note a {
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease);
}

.kontakt-dojazd__note a:hover { color: var(--purple); }

/* Ponizej 1100 obok pigulki zostaje na przypis mniej niz 25 znakow w wierszu,
   wiec przypis schodzi pod nia zamiast lamac sie na cztery linijki. */
@media (max-width: 1099px) {
  .kontakt-dojazd__note { flex-basis: 100%; }
}

@media (max-width: 559px) {
  .kontakt-dojazd__act { flex-direction: column; align-items: stretch; }
  .kontakt-dojazd__btn { width: 100%; }
}

.kontakt-dojazd__in > .salon-map { grid-column: 1 / -1; }