/*
 * Contact page — heading + JetFormBuilder form.
 * Columns: 5 × c with 16 gap, c = (100% - 64px) / 5. Text in column 1, form spans columns 3–5.
 */

.contact-page { padding: 50px 0 120px; }

.contact-page__head {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    align-items:    flex-start;
}
.contact-page__title {
    margin:         0;
    font-size:      clamp(56px, 6.111vw, 88px);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.contact-page__body {
    display:     flex;
    gap:         16px;
    margin-top:  69px;
}
.contact-page__text {
    flex:           0 0 calc((100% - 64px) / 5);
    align-self:     flex-start;
    margin:         0;
    font-family:    var(--font-mono);
    color:          var(--color-muted);
}
.contact-page__form {
    flex:        0 0 calc((100% - 64px) / 5 * 3 + 32px);
    margin-left: calc((100% - 64px) / 5 + 16px);
}

/* ── JetFormBuilder ─────────────────────────────────────────────────────── */
.contact-page .jet-form-builder { display: flex; flex-direction: column; gap: 24px; }
.contact-page .jet-form-builder__fields-group,
.contact-page .jet-form-builder-row { margin: 0; padding: 0; }
.contact-page .jet-form-builder-row.field-type-submit-field { margin-top: 8px; }

.contact-page .jet-form-builder__field-wrap { display: block; }
.contact-page .jet-form-builder-row {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding-bottom: 16px;
    border-bottom:  1px solid var(--grid-line-dark, rgba(14, 14, 16, .12));
}
.contact-page .jet-form-builder-row.field-type-submit-field { padding: 0; border: 0; }
.contact-page .jet-form-builder__label { margin: 0; padding: 0; width: 100%; }
.contact-page .jet-form-builder__label-text { font-size: var(--fs-body); line-height: var(--lh-base); font-weight: var(--fw-regular); color: var(--color-dark); }
.contact-page .jet-form-builder__label-text .jfb-optional { color: var(--color-muted); }
.contact-page .jet-form-builder__required { display: none; }
.contact-page .jet-form-builder__desc { display: none; }

.contact-page .jet-form-builder__field {
    width:          100%;
    padding:        0;
    font:           inherit;
    line-height:    var(--lh-base);
    letter-spacing: inherit;
    color:          var(--color-dark);
    background:     none;
    border:         0;
    border-radius:  0;
    outline:        0;
    box-shadow:     none;
}
.contact-page .jet-form-builder__field::placeholder { color: var(--color-muted); opacity: 1; }
.contact-page textarea.jet-form-builder__field { display: block; height: 20px; min-height: 20px; resize: none; overflow: hidden; }

/* Select: custom arrow, text muted until a value is chosen */
.contact-page select.jet-form-builder__field {
    appearance:         none;
    -webkit-appearance: none;
    padding-right:      52px;
    color:              var(--color-dark);
    background:         url("../../img/arrow-down.svg") right 0 center / 20px 20px no-repeat;
    cursor:             pointer;
}
.contact-page select.jet-form-builder__field:invalid { color: var(--color-muted); }

.contact-page .jet-form-builder-row:focus-within { border-bottom-color: var(--color-dark); }

.contact-page .jet-form-builder__action-button-wrapper,
.contact-page .jet-form-builder__submit-wrap { display: block; width: 100%; }
.contact-page .jet-form-builder__action-button {
    display:         flex;
    justify-content: center;
    text-align:      center;
    width:           100%;
    padding:         6px 16px;
    font:            inherit;
    line-height:     var(--lh-base);
    color:           var(--color-light);
    background:      var(--color-dark);
    border:          0;
    border-radius:   0;
    cursor:          pointer;
}
.contact-page .jet-form-builder__action-button:hover { opacity: .85; }

.contact-page .jet-form-builder__field-error,
.contact-page .jet-form-builder-message--error { margin-top: 8px; font-size: var(--fs-small); color: #c2312a; }
.contact-page .jet-form-builder-messages-wrap { margin-top: 16px; font-size: var(--fs-body); }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .contact-page { padding-bottom: 96px; }
    .contact-page__title { font-size: 64px; }
    .contact-page__body { flex-direction: column; gap: 28px; margin-top: 28px; }
    .contact-page__text { flex: 0 0 auto; max-width: 480px; }
    .contact-page__form { flex: 0 0 auto; margin-left: 0; }
    .contact-page .jet-form-builder { gap: 32px; }
}
@media (max-width: 767px) {
    .contact-page { padding: 40px 0 64px; }
}