/* Contact: the address and hours on the left, the message form in a mint panel on the right,
   with 80px side margins from tablets up, as on faberpet.ro. */
.pbly .contact-page + .site-footer { margin-top: 0; }

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

.pbly .contact > .wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--pbly-space-10) var(--pbly-space-20);
  width: min(100% - 2 * var(--pbly-space-20), var(--pbly-layout-wrapper-max));
}

.pbly .contact__details {
  padding-left: var(--pbly-space-10);
  color: var(--pbly-color-text-muted);
  font-weight: var(--pbly-font-weight-medium);
}

.pbly .contact__title {
  margin-bottom: var(--pbly-space-15);
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

.pbly .contact__details p + p { margin-top: var(--pbly-space-3-5); }

.pbly .contact__subtitle {
  margin-block: calc(var(--pbly-space-10) + var(--pbly-space-3-5)) var(--pbly-space-5);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-md-plus);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .contact__form-panel {
  padding: var(--pbly-space-12);
  border-radius: var(--pbly-radius-2xl);
  background: var(--pbly-color-palette-mint);
}

.pbly .contact__form-panel .contact__subtitle { margin-block: 0 var(--pbly-space-3-5); }

.pbly .contact-form { gap: var(--pbly-space-3); }
.pbly .contact-form .form-field__input { line-height: var(--pbly-font-line-height-field); }

.pbly .contact-form .form__submit {
  justify-self: stretch;
  padding-block: var(--pbly-space-4);
  line-height: 1;
}

/* Tablets: the form panel goes under the details, across the full width. */
@media (max-width: 64rem) {
  .pbly .contact > .wrapper {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--pbly-space-15) + var(--pbly-space-3-5));
  }

  .pbly .contact__form-panel { padding: var(--pbly-space-10); }
}

/* Phones: 20px side margins and the details indented by 10px. */
@media (max-width: 47.9375rem) {
  .pbly .contact { padding-block: var(--pbly-space-15) var(--pbly-space-10); }
  .pbly .contact > .wrapper {
    row-gap: calc(var(--pbly-space-10) + var(--pbly-space-3-5));
    width: min(100% - 2 * var(--pbly-layout-wrapper-gutter), var(--pbly-layout-wrapper-max));
  }

  .pbly .contact__details { padding-inline: var(--pbly-space-2-5); }
  .pbly .contact__title { margin-bottom: var(--pbly-space-5); }
  .pbly .contact__form-panel { padding: var(--pbly-space-10) var(--pbly-space-5); }
}

/* The JetFormBuilder form in the panel: its own markup set like the prototype's .form-field / .form__submit. */
.pbly .contact__form-panel .jet-form-builder {
  display: grid;
  gap: var(--pbly-space-3);
}

.pbly .contact__form-panel .jet-form-builder-row { margin: 0; padding: 0; }

.pbly .contact__form-panel .jet-form-builder__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pbly .contact__form-panel .jet-form-builder__field {
  width: 100%;
  padding: var(--pbly-space-4);
  border: 1px solid var(--pbly-color-palette-line-dark);
  border-radius: var(--pbly-radius-md);
  background: var(--pbly-color-surface-raised);
  color: var(--pbly-color-text-primary);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-field);
}

.pbly .contact__form-panel .jet-form-builder__field::placeholder {
  color: var(--pbly-color-palette-grey-dark);
  opacity: 1;
}

.pbly .contact__form-panel .jet-form-builder__field:focus {
  border-color: var(--pbly-color-action-primary);
  outline: 1px solid var(--pbly-color-action-primary);
  outline-offset: -2px;
}

.pbly .contact__form-panel textarea.jet-form-builder__field {
  min-height: 7.6875rem; /* exception: the prototype's four-row textarea, which JetFormBuilder does not size */
  resize: vertical;
}

.pbly .contact__form-panel .jet-form-builder__submit-wrap { margin: 0; }

.pbly .contact__form-panel .jet-form-builder__action-button {
  width: 100%;
  padding-block: var(--pbly-space-4);
  line-height: 1;
}

.pbly .contact__form-panel .jet-form-builder-message,
.pbly .contact__form-panel .jet-form-builder__field-error {
  margin-top: var(--pbly-space-2);
  color: var(--pbly-color-text-muted);
}