/* ==========================================================================
   SEKCJA: podstrona Kontakt (v6)
   --------------------------------------------------------------------------
   Z makiety „FlyConcept - Kontakt (v6)", ramka 108:326: 1440×854,
   padding 100 / 80, dwie kolumny po 560 px, odstęp 100.

   560 + 100 + 560 = 1220 przy kontenerze 1280, czyli 60 px luzu po prawej.
   Tak jest w makiecie — kolumny mają STAŁE 560 px, nie `1fr`. Wersja z `1fr`
   rozciągnęłaby kartę formularza do 590 px i przełamała jej nagłówek
   w innym miejscu niż w projekcie.

   ⚠️ WYGLĄD KARTY FORMULARZA NIE JEST TUTAJ.
   Robi go assets/css/sections/form-card.css (wspólny z kartą zgłoszeniową
   franczyzy). Tutaj nadpisujemy WYŁĄCZNIE cztery tokeny, którymi te dwie
   makiety się różnią.
   ========================================================================== */

.fc-contact {
  padding-block: var(--fc-sp-100);
}

.fc-contact__grid {
  display: grid;
  grid-template-columns: 560px 560px;
  gap: var(--fc-sp-100);
  align-items: start;
}

/* ---------------------------------------------------------------------------
   KOLUMNA LEWA — odstęp 20 px między wszystkimi blokami
   --------------------------------------------------------------------------- */
.fc-contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
  min-width: 0;
}

/* Etykieta nad nagłówkiem: components/eyebrow.css (klasa `fc-eyebrow`). */

.fc-contact__title {
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h1-sub);
  line-height: var(--fc-lh-h1-sub);
  letter-spacing: var(--fc-ls-h1-cta);
}

/* Zapowiedź jest BIAŁA i półgruba — jedyny taki akapit w serwisie.
   Krycie 85% odróżnia ją od nagłówka, nie gasząc do koloru tekstu. */
.fc-contact__lead {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-text);
  opacity: var(--fc-opacity-lead-soft);
}

.fc-contact__text {
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* ---------------------------------------------------------------------------
   KARTA Z DANYMI KONTAKTOWYMI — makieta 108:332
   --------------------------------------------------------------------------- */
.fc-contact__card {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
  margin: 0;
  /* Obrys w Figmie rysuje się do środka — patrz form-card.css. */
  padding: calc(var(--fc-sp-28) - var(--fc-border-width));
  list-style: none;
  background: var(--fc-glass-4);
  border: var(--fc-border-width) solid var(--fc-color-hairline);
  border-radius: var(--fc-radius-xl);
}

.fc-contact__row {
  display: flex;
  align-items: center;
  gap: var(--fc-sp-16);
}

.fc-contact__row-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fc-form-field-radius);
  background: var(--fc-glass-6);
  color: var(--fc-color-text);
}

.fc-contact__row-text {
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-award);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-text);
  text-decoration: none;
  /* Długi adres nie ma rozpychać karty ponad 560 px. */
  min-width: 0;
  overflow-wrap: anywhere;
}

a.fc-contact__row-text:hover,
a.fc-contact__row-text:focus-visible {
  color: var(--fc-color-accent-alt);
}

/* ---------------------------------------------------------------------------
   KOLUMNA PRAWA — karta formularza

   Cztery liczby, którymi ta karta różni się od zgłoszeniowej. Reszta wyglądu
   przychodzi z form-card.css i ma tu zostać nieruszona.
   --------------------------------------------------------------------------- */
.fc-contact__form {
  --fc-form-card-w: 560px;
  --fc-form-card-pad: var(--fc-sp-40);
  --fc-form-card-radius: var(--fc-radius-2xl);
  --fc-form-card-gap: var(--fc-sp-22);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */

/* Poniżej 1440 px kontener jest węższy niż 1220 px treści — stałe 560 px
   przestaje się mieścić i kolumny muszą zacząć ustępować. */
@media (max-width: 1439.98px) {
  .fc-contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: var(--fc-sp-56);
  }
}

@media (max-width: 899.98px) {
  .fc-contact {
    padding-block: var(--fc-sp-56);
  }

  /* Formularz pod treścią, nie obok — przy dwóch kolumnach na telefonie
     żadna z nich nie ma szerokości na własny placeholder. */
  .fc-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fc-sp-40);
  }

  .fc-contact__form {
    --fc-form-card-pad: var(--fc-sp-28);
  }
}