/* ==========================================================================
   contact.css – „Stwórzmy razem coś wyjątkowego." + formularz (Figma y 4090–5256)
   ========================================================================== */

.contact { --k: 1px; --line: rgba(255, 255, 255, .55); padding: 72px 20px 80px; scroll-margin-top: 20px; }
.contact__lead { max-width: 34em; margin: 20px auto 0; }
.contact .line-h { margin-top: 18px; }

.form {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: max(calc(21 * var(--k)), 20px);
  max-width: 782px; margin: 48px auto 0; padding: 29px 0 64px;
}
.field { position: relative; height: 84px; }
.field--email { height: 84px; }
.field--message { height: 160px; }
.field label {
  position: absolute; left: 2px; top: 0; height: calc(41 * var(--k)); display: flex; align-items: center;
  font-size: max(14px, calc(15 * var(--k))); line-height: 1; pointer-events: none;
}
.field input, .field textarea {
  display: block; width: 100%; height: 100%; margin: 0; padding: calc(41 * var(--k)) 2px 8px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line); background: transparent; color: #fff; caret-color: var(--accent);
  font-family: var(--ff); font-size: max(14px, calc(15 * var(--k))); line-height: 1.3;
  transition: border-color .2s ease;
}
.field textarea { resize: none; padding-bottom: 10px; }
.field input:hover, .field textarea:hover { border-bottom-color: rgba(255, 255, 255, .85); }
.field input:focus, .field textarea:focus { border-bottom-color: #fff; outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.field--invalid input, .field--invalid textarea { border-bottom-color: #ff6b6b; }
.field__error { position: absolute; left: 0; top: calc(100% + 4px); color: #ff8a8a; font-size: 12px; line-height: 1.2; letter-spacing: .01em; }
.field__error:empty { display: none; }

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

.form__submit {
  width: 100%; height: 64px; margin-top: 14px; border: 0; border-radius: 8px; background: #fff; color: #000;
  font-family: var(--ff); font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: var(--ls);
  transition: opacity .2s ease;
}
.form__submit:hover { opacity: .88; }
.form__submit:disabled { opacity: .55; cursor: progress; }
.form__status { margin-top: 14px; min-height: 1.4em; font-size: 14px; line-height: 1.4; color: var(--font-3); }
.form__status[data-state="error"] { color: #ff8a8a; }
.form__status[data-state="success"] { color: var(--green); }
.form__status[data-state="info"] { color: #ffd479; }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  .contact { padding: 96px 40px 96px; }
  .contact__lead { font-size: 17px; margin-top: 24px; }
  .contact .line-h { margin-top: 22px; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 33px; margin-top: 64px; padding: 29px 38px 64px 27px; }
  .field--email, .field--message, .form__submit, .form__status { grid-column: 1 / -1; }
  .field--name, .field--surname { height: 80px; }
  .field--email { height: 81.5px; }
  .field--message { height: 157px; }
  .form__submit { height: 80px; font-size: 20px; margin-top: 46px; }
}

/* ---------- desktop (Figma 1728) ---------- */
@media (min-width: 1280px) {
  .contact { --h: 1166; --k: var(--u); padding: 0; scroll-margin-top: calc(20 * var(--u)); }
  .contact__title { font-size: calc(48 * var(--u)); letter-spacing: calc(.96 * var(--u)); line-height: 1; white-space: nowrap; }
  .contact__lead { margin: 0; max-width: none; font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: calc(.4 * var(--u)); }
  .contact .line-h { width: calc(var(--w) * var(--u)); margin: 0; height: calc(3 * var(--u)); }
  .form {
    max-width: none; margin: 0; height: calc(592 * var(--u)); border-radius: calc(9 * var(--u)); background: #000;
    grid-template-columns: calc(342 * var(--u)) calc(342 * var(--u)); column-gap: calc(33 * var(--u));
    padding: calc(29 * var(--u)) 0 0 calc(27 * var(--u)); align-content: start;
  }
  .field--name, .field--surname { height: calc(80 * var(--u)); }
  .field--email { height: calc(81.5 * var(--u)); }
  .field--message { height: calc(157 * var(--u)); }
  .field--email, .field--message, .form__submit, .form__status { width: calc(717 * var(--u)); }
  .form__submit { height: calc(80 * var(--u)); margin-top: calc(46 * var(--u)); border-radius: calc(8 * var(--u)); font-size: max(16px, calc(20 * var(--u))); letter-spacing: calc(.4 * var(--u)); }
  .form__status { position: absolute; left: calc(27 * var(--u)); top: calc(551 * var(--u)); margin: 0; }
}