/* ==========================================================================
   Contact Section
   Block: .contact / .contact-section
   --------------------------------------------------------------------------
   The field, form-layout, choice and contact-method classes live in
   assets/css/form.css, which this block opts into through
   latx_get_form_components(). Only the band itself is here.
   ========================================================================== */

.contact-section {
  background-color: var(--color-background);
}

.contact-section--soft {
  background-color: var(--color-background-sunken);
}

.contact-section--dark {
  background-image: var(--gradient-ink);
}

/* The split layout is shared with the Split Layout block, which declares its
   own copy, so either block can be placed without the other. */
.contact-section .split-layout {
  display: grid;
  gap: var(--space-x-large);
  align-items: start;
}

@media (width >= 62rem) {
  .contact-section .split-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-2x-large);
  }

  /* Form on the left. Source order keeps the contact details first, so a
     screen reader and a phone both get the address before the form. */
  .contact-section .split-layout--reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .contact-section .split-layout--reverse > *:first-child {
    order: 2;
  }

  .contact-section .split-layout--reverse > *:nth-child(2) {
    order: 1;
  }
}

/* On the dark variant the form panel keeps its light ground, because a form
   is easier to complete on one and the fields are styled for it. */
.contact-section--dark .form-layout {
  color: var(--color-ink-800);
  background-color: var(--color-white);
}

.contact-section--dark .form-layout__title {
  color: var(--color-ink-900);
}