/* Responsive additions for the contact page. Loaded after contact.css. */

@media (max-width: 1480px) {
    .contact-page {
        padding-top: calc(var(--header-h) + clamp(42px, 5vw, 72px));
    }

    .contact-page__content {
        grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.25fr);
        gap: clamp(48px, 6vw, 86px);
        margin-top: clamp(92px, 8vw, 128px);
    }

    .contact-page__title {
        font-size: clamp(48px, 4.6vw, 62px);
    }

    .contact-page__lead {
        font-size: clamp(20px, 1.7vw, 23px);
    }

    .contact-form {
        min-height: 0;
        padding: clamp(38px, 4vw, 52px) clamp(40px, 4.6vw, 64px) clamp(64px, 5vw, 72px);
    }
}

@media (max-width: 1180px) {
    .contact-page {
        min-height: auto;
        padding-top: calc(var(--header-h) + clamp(36px, 6vw, 58px));
    }

    .contact-page__content {
        margin-top: clamp(56px, 8vw, 84px);
    }

    .contact-page__lead {
        max-width: 38rem;
    }

    .contact-form {
        max-width: 900px;
    }
}

@media (max-width: 760px) {
    .contact-page {
        padding-top: calc(var(--header-h) + 30px);
        padding-bottom: 64px;
    }

    .contact-page__crumbs {
        flex-wrap: wrap;
    }

    .contact-page__crumbs [aria-current="page"] {
        flex: 1 1 9rem;
        min-width: 0;
    }

    .contact-page__content {
        margin-top: 52px;
    }

    .contact-page__title {
        font-size: clamp(36px, 10vw, 48px);
        line-height: 1.08;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .contact-page__lead {
        font-size: 18px;
        line-height: 1.45;
    }

    .contact-form {
        padding: 24px 20px 60px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form__submit {
        font-size: 16px;
    }

    .contact-form input {
        height: 58px;
    }

    .contact-form textarea {
        height: clamp(170px, 42vh, 220px);
        min-height: 170px;
        resize: vertical;
    }

    .contact-form__submit {
        min-height: 58px;
    }
}

@media (max-width: 420px) {
    .contact-page {
        padding-bottom: 48px;
    }

    .contact-page__content {
        gap: 30px;
        margin-top: 44px;
    }

    .contact-page__lead {
        font-size: 17px;
    }

    .contact-page__lead br {
        display: none;
    }

    .contact-form {
        gap: 12px;
        padding-inline: 16px;
        border-radius: 16px;
    }

    .contact-form input {
        padding-inline: 17px;
    }

    .contact-form textarea {
        padding: 16px 17px;
    }

    .contact-form__status {
        right: 16px;
        left: 16px;
    }
}