/* SOHO VUE - 08-contact.css
   sekcja kontaktu, wizytówka doradcy, końcowe CTA
   Fragment 8/13 arkusza soho.css (wiersze 2698-2960 oryginalu).
   KOLEJNOSC LADOWANIA JEST ZNACZACA - patrz includes/head.php. */

/* ---------------------------------------------------------------- kontakt */

/* Jedna sekcja kontaktowa. Po lewej zaproszenie i wizytówka doradcy,
   po prawej formularz na ciemnym panelu. Panel niesie własny zestaw
   tokenów pasma burgundowego, bo leży na jasnym tle: pola, zgody
   i przycisk zachowują się w nim tak samo jak na ciemnym paśmie. */

.kontakt {
  display: grid;
  gap: clamp(2.75rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 1020px) {
  .kontakt {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }
}

.kontakt__aside {
  display: flex;
  flex-direction: column;
}

.kontakt__intro {
  margin-top: var(--head-gap);
  max-width: 42ch;
  color: var(--ink);
}

/* --- wizytówka doradcy ------------------------------------------------ */

/* Karta stoi pod tekstem i domyka lewą kolumnę. Wydziela ją sam odcień
   panelu — bez ramki, cienia i zaokrągleń. */
.doradca {
  margin: clamp(2.4rem, 4.5vw, 3.5rem) 0 0;
  display: grid;
  gap: clamp(1.35rem, 3vw, 2.1rem);
  align-items: center;
}

@media (min-width: 520px) {
  .doradca {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.doradca__ph {
  width: clamp(8.5rem, 14vw, 10.5rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg);
}

.doradca__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

.doradca__body {
  min-width: 0;
}

.doradca__name {
  margin: 0;
}

.doradca__name + .doradca__role {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}

.doradca__list {
  list-style: none;
  margin: clamp(1.2rem, 2.5vw, 1.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.doradca__item {
  display: grid;
  min-width: 0;
}

.doradca__pair {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.doradca__dt {
  font-size: .74rem;
  color: var(--fg-soft);
}

.doradca__link {
  font-family: var(--font-mono);
  font-size: .92rem;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}

.doradca__link:hover {
  color: var(--burgundy);
}

/* --- panel formularza ------------------------------------------------- */

.kontakt__panel {
  --fg: var(--ink);
  --fg-soft: var(--ink);
  --rule: rgba(15, 14, 14, .3);
  --rule-strong: var(--ink);
  --accent: var(--burgundy);
  --panel: #fff;
  --detail: var(--ink);

  background: #fff;
  color: var(--fg);
  padding: clamp(1.75rem, 3.6vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kontakt__panel-label {
  margin-bottom: clamp(1.35rem, 2.4vw, 1.85rem);
}

/* Białe pola od panelu oddziela prosty, czarny obrys. */
.kontakt__panel .field input,
.kontakt__panel .field select,
.kontakt__panel .field textarea {
  border: 1px solid var(--ink);
}

.kontakt__panel .field input:focus,
.kontakt__panel .field select:focus,
.kontakt__panel .field textarea:focus {
  background: #fff;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 1px var(--burgundy);
}

.kontakt__panel .field .err {
  color: var(--ink);
}

/* Przycisk korzysta z koloru DUNE z palety marki. */
.kontakt__panel .btn {
  --btn-bg: var(--dune);
  --btn-fg: var(--ink);
  width: 100%;
  margin-top: .35rem;
}

.kontakt__panel .btn:hover {
  --btn-bg: var(--dune);
}

/* Komunikat po wysłaniu pozostaje na jednolitym białym tle. */
.kontakt__panel .form__status {
  border: 1px solid var(--ink);
  background: #fff;
}

.kontakt__panel .form__status--err {
  background: #fff;
}

.kontakt__fine {
  margin-top: 1rem;
}

@media (max-width: 519px) {
  .doradca {
    justify-items: start;
  }

  .doradca__ph {
    width: 100%;
    max-width: 12rem;
  }
}

/* ------------------------------------------------------------ końcowe CTA */

/* Biała plansza ze znakiem marki. Stoi między sekcją dewelopera
   a formularzem: dwa ciemne pasma rozdziela cisza, bez zdjęcia,
   nagłówka i przycisku. */
.finale {
  background: #fff;
  color: var(--ink);
  padding-block: clamp(5rem, 12vw, 9rem);
  text-align: center;
}

/* Znak pionowy: miara idzie z szerokości, wysokość dopisuje się sama
   z proporcji 893x1053. Węższy niż poziomy lockup, bo blok jest wysoki. */
/* Dodatkowe 100px powietrza nad i pod znakiem, ponad padding sekcji. */
.finale__mark {
  display: block;
  margin: 100px auto;
  width: clamp(150px, 17vw, 250px);
  height: auto;
}

/* Zdjęcia jako osobna sekcja: dwie równe połowy na pełnej szerokości
   ekranu, bez marginesów i bez ograniczenia --maxw. */
.finale-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.finale__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}