/* ===== Contacts page ===== */

.contacts-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-strong);
}

.contacts-kicker__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* ---------- Head ---------- */

.contacts-head {
  position: relative;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  color: var(--paper-strong);
  border-bottom: 1px solid var(--line);
}

.contacts-head__frame {
  width: var(--frame);
  margin-inline: auto;
  padding: 34px 0 64px;
}

.contacts-head .contacts-kicker {
  margin-top: 74px;
}

.contacts-head__title {
  margin: 0;
  max-width: 720px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.13;
  font-weight: 400;
  text-transform: uppercase;
}

/* ---------- Grid ---------- */

.contacts-grid {
  padding: 32px 0 96px;
  background: var(--bg-0);
}

/* Two independent vertical flows, not a unified grid — Figma's card heights
   are asymmetric (the hub/form column runs taller than the office/feedback
   column) and a single grid would force every cell in a row to match the
   row's tallest item, flattening that intentional height difference. */
.contacts-grid__frame {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.contacts-grid__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  gap: 24px;
}

.contacts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 356px;
  padding: 32px;
  border: 1px solid var(--line);
  overflow: clip;
}

.contacts-card--accent {
  background: var(--accent);
}

.contacts-card--hub,
.contacts-card--form {
  min-height: 578px;
  background: linear-gradient(180deg, #131313 0%, #242424 100%);
}

.contacts-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.contacts-card__text {
  margin: 0;
  max-width: 520px;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--paper-strong);
}

.contacts-card__text--feedback a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contacts-card__text--feedback a:hover {
  color: var(--accent);
}

/* ---------- Buttons (page-local — mirror the homepage's outline/solid-button hover) ---------- */

.contacts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  transition: transform 220ms var(--ease), background-color 220ms ease, border-color 220ms ease;
}

.contacts-btn--outline {
  border: 1px solid var(--paper-strong);
  color: var(--paper-strong);
}

.contacts-btn--solid {
  border: 1px solid var(--paper-strong);
  background: var(--paper-strong);
  color: var(--ink);
}

/* `a, a:link, a:visited { color: inherit }` in the shared styles.css has
   higher specificity than a single class (it matches on element + pseudo-
   class), so on an <a> the rule above loses the cascade and silently
   renders white text on the white button. Qualifying with the `a` element
   evens the specificity and lets source order (this file loads after
   styles.css) decide it correctly. Buttons aren't <a> tags, so they're
   unaffected and already covered by the plain classes above. */
a.contacts-btn--outline {
  color: var(--paper-strong);
}

a.contacts-btn--solid {
  color: var(--ink);
}

.contacts-btn--block {
  width: 100%;
  justify-content: center;
}

.contacts-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Form ---------- */

.contacts-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.contacts-form__field {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.contacts-form__label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--about-metal-1, #cacaca);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.contacts-form__input {
  width: 100%;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--paper-strong);
}

.contacts-form__input:focus {
  outline: none;
}

.contacts-form__input:focus + .contacts-form__label,
.contacts-form__input:not(:placeholder-shown) + .contacts-form__label,
.contacts-form__input:valid:not(:placeholder-shown) + .contacts-form__label {
  opacity: 0;
  transform: translateY(-50%) translateY(-8px);
}

/* Labels sit behind the input text; the phone field carries its own visible
   placeholder from the design, so its label should stay out of the way. */
.contacts-form__field:has(#cf-phone) .contacts-form__label {
  display: none;
}

.contacts-form__input:invalid {
  box-shadow: none;
}

.contacts-form.is-submitted .contacts-form__input:invalid {
  color: var(--accent);
}

.contacts-form__status {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cyan);
}

.contacts-form__status[data-state="error"] {
  color: var(--accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .contacts-grid__frame {
    flex-direction: column;
  }

  /* Unwrap the column divs so their cards become direct flex children of
     .contacts-grid__frame — lets `order` interleave them to match Figma's
     mobile sequence (office, hub, feedback, form) instead of the desktop
     column grouping (office+feedback, then hub+form). */
  .contacts-grid__col {
    display: contents;
  }

  .contacts-card--accent {
    order: 1;
  }

  .contacts-card--hub {
    order: 2;
  }

  .contacts-card--feedback {
    order: 3;
  }

  .contacts-card--form {
    order: 4;
  }

  .contacts-card,
  .contacts-card--hub,
  .contacts-card--form {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .contacts-head .contacts-kicker {
    margin-top: 48px;
  }

  .contacts-card {
    padding: 24px;
  }
}