/* static/css/pages/contact.css */

.page-subtitle {
    text-align: center;
    max-width: 700px;
    margin: -10px auto 40px auto;
    font-size: 1.1em;
    color: var(--text-color);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.contact-details-container {
    background-color: var(--bg-light-gray);
    border-radius: 8px;
    padding: 30px;
}

.contact-details-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
}

.contact-details-container address,
.contact-details-container dl {
    line-height: 1.7;
}

.contact-details-container dt {
    font-weight: 600;
    margin-top: 15px;
}

.contact-details-container dd {
    margin-left: 0;
}

@media (min-width: 992px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr;
    }
    .contact-details-container {
        /* On desktop, the details might appear before the form in the source order */
        grid-row: 1;
        grid-column: 2;
    }
    .contact-form-container {
        grid-row: 1;
        grid-column: 1;
    }
}