/* Contact page of the new design. The form is validated & sent by js/contact.js (jquery.validate);
   the shared form pieces (errors, replies, loader) are in forms.css. */

/* — hero: the photo is already 12:5, so it shows whole on wide screens — */
.contact-hero { aspect-ratio: 12 / 5; margin: 32px 6px 6px; }
.contact-hero > img { position: absolute; inset: 0; object-position: 75% center; }
@media (max-width: 720px) {
    .contact-hero { aspect-ratio: 4 / 3; }
}

/* — form beside the details — */
.contact-grid {
    margin-top: 40px; padding: 6px;
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 48px;
}
@media (max-width: 800px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-form textarea.input { resize: vertical; min-height: 160px; }
.contact-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-form__foot .btn { margin-left: auto; }

/* — details — */
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-info h6 { opacity: 0.6; margin: 0 0 4px; }
.contact-info__value {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 24px; line-height: 1.2; overflow-wrap: anywhere;
}
.contact-info__org { margin: 0; font-size: 16px; }