/* =========================================================================
   CONTACT PAGE
   ========================================================================= */

.contact {
  padding-block: var(--space-xl);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "contact-eyebrow"
    "contact-heading"
    "contact-copy"
    "contact-form"
    "contact-details";
}

.contact__heading {
  font-size: var(--text-xl);
  max-width: 22ch;
}

.contact__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

/* ---- details panel ------------------------------------------------------ */
.contact-details {
  background: var(--colour-field-pale);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  align-self: start;
}

.contact-details__heading {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-field-deep);
}

.contact-details__list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-details__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.contact-details__list i {
  color: var(--colour-leash);
  width: 1.3rem;
}

.contact-details__list a {
  text-decoration: none;
  font-weight: 700;
}

.contact-details__list a:hover {
  text-decoration: underline;
}

.contact-details__note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--colour-ink-soft);
}

/* ---- form ---------------------------------------------------------------- */
.contact-form {
  background: var(--colour-paper-raised);
  border: 1px solid var(--colour-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-form__heading {
  font-size: var(--text-md);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.contact-form__field label {
  font-size: var(--text-sm);
  font-weight: 700;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding: 0.65em 0.85em;
  background: var(--colour-paper);
  color: var(--colour-ink);
  transition: border-color 0.2s var(--ease-out);
}

.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
  border-color: var(--colour-field);
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: var(--space-2xs);
}

.contact-form__status {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--colour-field-deep);
  min-height: 1.4em;
}

.contact-form__status.is-error {
  color: var(--colour-leash-deep);
}

@media (min-width: 64rem) {
  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "contact-eyebrow contact-eyebrow contact-eyebrow contact-eyebrow contact-eyebrow contact-eyebrow . . . . . ."
      "contact-heading contact-heading contact-heading contact-heading contact-heading contact-heading . . . . . ."
      "contact-copy contact-copy contact-copy contact-copy contact-copy contact-copy . . . . . ."
      "contact-form contact-form contact-form contact-form contact-form contact-form . contact-details contact-details contact-details contact-details contact-details";
    column-gap: var(--space-lg);
    align-items: start;
  }
}