/* ══════════════════════════════════════
   CONTACT — блок довіри, форма заявки, стани відправки
   ══════════════════════════════════════
   Підключати ОСТАННІМ. */

/* ══════════════════════════════════════
   CONTACT
   ══════════════════════════════════════ */
.section--contact {
  background: var(--c-surface);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact__inner {
  position: relative;
  z-index: 2;
}

/* Дисплейний шрифт — лише надпис і підзаголовок. Раніше правило висіло на всій
   секції, тож його успадковували і поля вводу: набирати текст декоративним
   шрифтом незручно, а будь-який новий елемент мовчки отримував той самий шрифт. */
.section--contact .section__tag,
.section--contact .contact__sub {
  font-family: var(--font-display);
}

.section--contact .section__title {
  font-size: min(clamp(1.6rem, 4vw, 3.2rem), clamp(1.4rem, 4.4vh, 3.2rem));
}

.contact__sub {
  font-size: var(--fit-lead);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: clamp(6px, 1.2vh, 16px) 0 var(--fit-gap);
}

.contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.6vh, 18px) 28px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  padding: 0 20px;
}

/* Parallelogram form-group — mirrors .nav__btn shape */
.form-group {
  background: var(--c-bg);
  border: none;
  border-radius: 6px;
  transform: skewX(-12deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background var(--transition), box-shadow var(--transition);
}

.form-group:focus-within {
  background: var(--c-surface-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.form-group__inner {
  padding: clamp(6px, 1.2vh, 14px) clamp(16px, 2vw, 28px);
  transform: skewX(12deg);
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: clamp(2px, 0.5vh, 6px);
  display: block;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.form-group__input,
.form-group__textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  /* Явно: елементи форми НЕ успадковують font-family від сторінки — без цього
     рядка вони падають на браузерний Arial. */
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  /* 21px висоти — промах на дотик; мінімальна ціль 44px */
  min-height: 44px;
}

.form-group__textarea {
  resize: none;
  height: clamp(48px, 8vh, 96px);
}

/* --c-dark (#444342) на --c-bg (#0f0f0f) давав 1.94:1 — плейсхолдер було
   фізично не прочитати. --c-muted дає 7.33:1. */
.form-group__input::placeholder,
.form-group__textarea::placeholder {
  color: var(--c-muted);
  font-family: var(--font-body);
}

/* ── Сигнали довіри перед формою ── */
.contact__trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.2vh, 12px) clamp(20px, 4vw, 48px);
  list-style: none;
  margin: 0 auto var(--fit-gap);
  padding: clamp(6px, 1.1vh, 20px) 24px;
  max-width: 720px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.contact__trust-item {
  text-align: center;
}

.contact__trust-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 3vh, 26px);
  line-height: 1;
  color: var(--c-accent);
}

.contact__trust-key {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 6px;
}

/* ── Помилки полів і статус відправки ── */
.form-group__req {
  color: var(--c-accent);
  text-decoration: none;
  border: none;
}

.form-error {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-error);
  margin-top: 6px;
}

.form-group__input--invalid,
.form-group__textarea--invalid {
  /* Колір рамки на скошеній коробці читається погано — підсвічуємо підкресленням */
  box-shadow: inset 0 -2px 0 var(--c-error);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 14px);
  margin-top: var(--fit-gap);
}

.contact__fallback {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--c-muted);
}

.contact__fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-accent);
  text-decoration: none;
}

.contact__fallback a:hover {
  text-decoration: underline;
}

.contact__status {
  grid-column: 1 / -1;
  margin-top: clamp(8px, 1.6vh, 18px);
  padding: clamp(8px, 1.4vh, 12px) 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.contact__status[hidden] {
  display: none;
}

.contact__status--success {
  background: rgba(68, 221, 68, 0.1);
  border: 1px solid rgba(68, 221, 68, 0.35);
  color: #7fe07f;
}

.contact__status--error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.35);
  color: #ff8080;
}

/* Submit button — identical to .nav__btn--contact, just larger */
.contact__submit {
  font-size: min(20px, clamp(15px, 2.4vh, 20px));
  padding: clamp(8px, 1.4vh, 12px) clamp(22px, 3vw, 36px);
}

.about__btn {
  display: flex;
  width: fit-content;
  margin: var(--fit-gap) auto 0;
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .contact__form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* CTA не мали куди стискатись: white-space: nowrap + width: fit-content —
     на 375px «Партнерство та інвестиції» виїжджало за екран і різалось,
     бо main має overflow-x: hidden. */
  .contact__submit {
    font-size: 16px;
    padding: 12px 20px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ── Вузькі екрани: секція має вміститись в один екран ──
   Стискаємо ОФОРМЛЕННЯ (підзаголовок, блок довіри, відступи), не чіпаючи ані
   тексту, ані мінімальної тач-цілі 44px і ані кегля нижче 14px. */
@media (max-width: 700px) {
  /* CTA «Партнерство» лишався останніми 7px, що не давали секції влізти */
  .about__btn { margin-top: 10px; }

  .contact__sub {
    font-size: 13px;
    letter-spacing: 1px;
    margin: clamp(4px, 0.8vh, 10px) 0 clamp(8px, 1.4vh, 14px);
  }

  /* Три показники в один рядок замість трьох: 188px → ~60px */
  .contact__trust {
    flex-wrap: nowrap;
    gap: 4px 12px;
    padding: clamp(6px, 1vh, 10px) 8px;
  }

  .contact__trust-val { font-size: 16px; }

  .contact__trust-key {
    font-size: 9px;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }

  .contact__fallback { font-size: 12px; }
}