/* Kontakt page.
   Sekcja kontaktowa reużywa niezmienny komponent .final-cta (home/style.css).
   Tu tylko: podtytuł nagłówka, sekcja kalendarza i dane firmy.
   Wszystko w kolumnie treści (.section__inner = --container-page). Tokeny, bez hardkodów. */

.kontakt-page {
  font-family: var(--font-sans);
  color: var(--color-ink);
}

/* ── Nadpisany nagłówek sekcji kontaktowej (Kontakt) ──────────── */
.kontakt-page .final-cta__headline {
  margin-bottom: var(--space-3);
}

/* Mobile: karta osoby przed formularzem (nie po nim) */
@media (max-width: 680px) {
  .kontakt-page .final-cta__photo { order: -1; }
}

.final-cta__subhead {
  font: 400 var(--font-h5)/1.6 var(--font-sans);
  color: var(--ink-62);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}

/* ── Kalendarz (Cal.com) ──────────────────────────────────────── */
.calcom-section {
  background: var(--color-dark);
  border-radius: var(--radius-2xl);
  padding: var(--gap-l);
  text-align: center;
  width: 100%;
}

@media (max-width: 560px) {
  .calcom-section { padding: var(--gap-m); }
}

.calcom-heading {
  font: 700 var(--font-h2)/1.15 var(--font-sans);
  color: var(--color-dark-text);
  margin: 0 0 var(--space-2);
}

.calcom-subtitle {
  font: 400 var(--font-body)/1.6 var(--font-sans);
  color: var(--ink-62);
  max-width: 62ch;
  margin: 0 auto var(--gap-m);
}

.calcom-embed {
  max-width: 100%;
  margin: 0 auto;
  min-height: 700px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ── Dane firmy ───────────────────────────────────────────────── */
.kontakt-firma-title {
  font: 700 var(--font-h3)/1.2 var(--font-sans);
  margin: 0 0 var(--space-5);
}

.kontakt-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}

.kontakt-detail--wide { grid-column: 1 / -1; }

@media (max-width: 400px) {
  .kontakt-details { grid-template-columns: 1fr; }
}

/* Social — ikony (linkedin.svg / instagram.svg) */
.kontakt-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.kontakt-social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--surface-04);
  border-radius: var(--radius-full);
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--duration-fast, .2s) var(--ease-out, ease), color var(--duration-fast, .2s) var(--ease-out, ease);
}

.kontakt-social__link:hover { background: var(--color-accent); color: var(--color-dark-text); }

.kontakt-social__ico {
  width: 20px;
  height: 20px;
  display: block;
}

/* Mapa — statyczny ciemny render + czerwona pinezka, klik → Google Maps */
.kontakt-map {
  position: relative;
  display: block;
  margin-top: var(--space-6);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface-04);
}

.kontakt-map__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1600 / 620;
  object-fit: cover;
  transition: transform var(--duration-slow, .4s) var(--ease-out, ease);
}

@media (max-width: 560px) {
  .kontakt-map__img { aspect-ratio: 3 / 2; }
}

.kontakt-map:hover .kontakt-map__img { transform: scale(1.04); }

/* Odręczna pinezka (SVG, styl sketch jak ikony motywu) — czubek na lokalizacji */
.kontakt-map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  transform: translate(-50%, -100%);
  color: var(--color-accent);
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

.kontakt-map__pin svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.kontakt-map__overlay {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.kontakt-map__label {
  font: 400 clamp(2.2rem, 2.4vw, 2.8rem)/1 var(--font-decorative);
  color: var(--color-accent);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.kontakt-map__cta {
  font: 500 var(--font-caption)/1 var(--font-sans);
  color: var(--color-dark-text);
}

.kontakt-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kontakt-detail__label {
  font: 500 var(--font-caption)/1 var(--font-sans);
  color: var(--ink-48);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kontakt-detail__value {
  font: 500 var(--font-h5)/1.3 var(--font-sans);
}

.kontakt-detail__value a { color: var(--color-ink); text-decoration: none; }
.kontakt-detail__value a:hover { color: var(--color-accent); }