/* ==========================
   CONTACT PAGE LAYOUT
   Two-column split: a decorative coffee-themed illustration + intro on the
   left, the form on the right. Collapses to a single column under 1024px,
   with the form first (the actionable part) and the illustration second —
   same "content before decoration on mobile" reasoning as elsewhere in this
   project's responsive layouts.
========================== */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: stretch;
    margin-top: 2rem;
}

.contact-visual {
    background: linear-gradient(160deg, var(--color-secondary), var(--color-muted));
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
}

.contact-visual__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0.75rem 0 1rem;
    color: var(--color-text-dark);
}

.contact-visual__text {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 40ch;
}

.contact-visual__illustration {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: auto auto 0;
}

.contact-form-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-form-panel {
        order: 1;
    }

    .contact-visual {
        order: 2;
    }

    .contact-visual__illustration {
        max-width: 220px;
        margin-top: 2rem;
    }
}