/* =========================================================
   Kontakt — style podstrony (Figma: frame "Kontakt" 58:2)
   ========================================================= */

/* ---------- Dane kontaktowe + formularz ---------- */
.contact { padding: 32px 0 120px; }
.contact__grid {
  display: grid;
  grid-template-columns: 488fr 688fr;
  gap: 24px;
  align-items: stretch;
}
.contact__data { display: flex; flex-direction: column; gap: 16px; }

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border-radius: 16px;
  background: var(--c-soft);
}
.contact-card__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: .118em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact-card__email {
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -.5px;
}
.contact-card__email:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.contact-card__address {
  font-style: normal;
  font-size: 17px;
  line-height: 26px;
}
.contact-card__note { font-size: 13px; line-height: 16px; color: var(--c-muted); }
.contact-card__group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.contact-card__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ciemna karta z telefonem */
.contact-card--dark {
  gap: 14px;
  padding: 40px;
  background: var(--c-ink);
  color: var(--c-white);
}
.contact-card--dark .contact-card__label { color: var(--c-green); }
.contact-card__phone {
  font-size: 40px;
  line-height: 48px;
  font-weight: 300;
  letter-spacing: -1.5px;
  white-space: nowrap;
}
.contact-card__desc { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .65); }
.contact-card__cta { padding-top: 10px; }
.contact-card__btn { padding: 12px 23px; font-size: 14px; line-height: 17px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  transition: box-shadow .2s;
}
.pill:hover { box-shadow: inset 0 0 0 1px var(--c-ink); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pill__dot--allegro { background: #ff5a00; }
.pill__dot--olx { background: #002f34; }
.pill__dot--fb { background: #1877f2; }

/* ---------- Formularz ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-white);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.contact-form__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.contact-form__title { font-size: 32px; line-height: 39px; font-weight: 300; letter-spacing: -1px; }
.contact-form__sub { font-size: 14px; line-height: 17px; color: var(--c-muted); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--grow { flex: 1 1 auto; }
.field__label { font-size: 12px; font-weight: 500; line-height: 15px; }
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-ink);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: #9e9e9c; opacity: 1; }
.field__input:hover { border-color: #c9c9c6; }
.field__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(140, 198, 63, .35); }
.field__textarea {
  flex: 1 1 auto;
  min-height: 160px;
  height: auto;
  padding: 13px 16px;
  resize: none;          /* desktop: pole rośnie razem z kolumną danych */
}
.field.is-invalid .field__input { border-color: #d93025; }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, .2); }
.field__error { font-size: 12px; line-height: 16px; color: #c5221f; }

.contact-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  width: 100%;
  padding: 16px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  transition: background-color .2s, opacity .2s;
}
.contact-form__submit:hover { background: #7db535; }
.contact-form__submit[disabled] { opacity: .6; cursor: progress; }

.contact-form__status {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 20px;
}
.contact-form__status.is-success { background: #eef6e3; color: #2f5410; }
.contact-form__status.is-error { background: #fdecea; color: #8a1c14; }

.contact-form__info {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-muted);
}
.contact-form__info p:last-child { white-space: nowrap; }
.contact-form__info a { color: inherit; }
.contact-form__info a:hover { color: var(--c-ink); text-decoration: underline; }

/* ---------- Mapa ---------- */
.map__frame {
  position: relative;
  height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #e8eae4;
}
/* iframe szerszy od ramki: znacznik Google (środek mapy) wypada
   w miejscu pinezki z Figmy (874 / 1392 = 62.8% szerokości) */
.map__iframe {
  position: absolute;
  top: 0; left: 0;
  width: 125.6%;
  height: 100%;
  border: 0;
}
.map__card {
  position: absolute;
  left: 65.23%;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.map__name { font-size: 16px; font-weight: 500; line-height: 19px; }
.map__address { font-size: 13px; line-height: 19px; color: var(--c-muted); white-space: nowrap; }
.map__cta { padding-top: 12px; }
.map__btn { padding: 10px 18px; }

/* ---------- FAQ ---------- */
.faq__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.faq__lead { width: 440px; flex-shrink: 0; font-size: 15px; line-height: 24px; color: var(--c-muted); }
.faq__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.faq__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0 28px;
  border-top: 1px solid #dcdcd9;
}
.faq__q { font-size: 17px; font-weight: 500; line-height: 24px; }
.faq__a { font-size: 15px; line-height: 24px; color: var(--c-muted); }
.faq__a a { color: inherit; text-decoration: underline; text-decoration-color: rgba(107, 107, 107, .4); text-underline-offset: 3px; }
.faq__a a:hover { color: var(--c-ink); }

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .map__iframe { width: 100%; }
  .map__card { left: auto; right: 24px; }
}

@media (max-width: 1024px) {
  .contact { padding-bottom: 72px; }
  .contact__grid { grid-template-columns: 1fr; }
  .field__textarea { resize: vertical; }
  .contact__data { display: grid; grid-template-columns: 1fr 1fr; }
  .faq__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .faq__lead { width: auto; max-width: 620px; }
}

@media (max-width: 768px) {
  .contact__data { display: flex; }
  .faq__cols { grid-template-columns: 1fr; gap: 0; }
  .map__frame { height: auto; display: flex; flex-direction: column; background: var(--c-soft); }
  .map__iframe { position: static; width: 100%; height: 320px; }
  .map__card { position: static; border-radius: 0; box-shadow: none; background: var(--c-soft); }
}

@media (max-width: 640px) {
  .contact { padding-top: 16px; padding-bottom: 56px; }
  .contact-card { padding: 24px; }
  .contact-card--dark { padding: 28px 24px; }
  .contact-card__phone { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
  .contact-form { padding: 28px 20px; }
  .contact-form__title { font-size: 28px; line-height: 34px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__info { flex-direction: column; gap: 4px; }
  .map__card { padding: 20px; }
  .map__address { white-space: normal; }
}