/* ==========================================================
   CONTACT SECTION — universal module styles
   Section key: contact_section · partial: web/partials/contact_section.php
   ----------------------------------------------------------
   Generic, token-only (--mt-*). No template-specific colors or
   layout logic — the active template's token set skins this, and a
   template may override .contact-section in its own CSS layer.
   v1 layout: desktop = info (left) + form (right); mobile = stacked.
   Emitted once per page by the partial (no head-css preload).
   ========================================================== */

.contact-section {
    padding: var(--mt-section-py-sm, 64px) 0;
}

/* ── Two-column grid ─────────────────────────────────────── */
.contact-section__grid {
    display: grid;
    /* 40 / 60 (info / form): contact info is terse (short phone/email/address
       rows); the form is the primary interactive element and benefits from the
       extra width. Collapses to a single column below the breakpoint. */
    grid-template-columns: 2fr 3fr;
    gap: clamp(var(--mt-space-6, 24px), 4vw, var(--mt-space-12, 48px));
    align-items: start;
}

/* One-sided instances render full width and centered. */
.contact-section__grid--form-only,
.contact-section__grid--info-only {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}

/* Stack below the desktop breakpoint (info first, then form). */
@media (max-width: 860px) {
    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: var(--mt-space-8, 32px);
    }
}

/* ── Info column ─────────────────────────────────────────── */
.contact-section__heading {
    margin: 0 0 var(--mt-space-3, 12px);
    color: var(--mt-text-heading, #0f172a);
    font-size: var(--mt-text-2xl, 1.75rem);
    font-weight: var(--mt-weight-bold, 700);
    line-height: var(--mt-leading-tight, 1.15);
}

.contact-section__desc {
    margin: 0 0 var(--mt-space-5, 20px);
    color: var(--mt-text-muted, #64748b);
    line-height: var(--mt-leading-normal, 1.6);
}

.contact-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-3, 12px);
}

.contact-section__item {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    color: var(--mt-text-body, #334155);
    font-size: var(--mt-text-md, 1.05rem);
}

.contact-section__ico {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--mt-radius-md, 10px);
    background: var(--mt-surface-subtle, rgba(15, 23, 42, 0.05));
    color: var(--mt-brand-primary, #0B63C5);
    font-size: 0.95rem;
}

.contact-section__item a {
    color: inherit;
    text-decoration: none;
    transition: color var(--mt-duration-fast, 0.15s) ease;
    word-break: break-word;
}
.contact-section__item a:hover {
    color: var(--mt-accent, #0ea5e9);
}

.contact-section__hours {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    margin-top: var(--mt-space-4, 16px);
    color: var(--mt-text-body, #334155);
}

.contact-section__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-5, 20px);
}
.contact-section__social-link {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--mt-radius-sm, 6px);
    border: 1px solid var(--mt-border-default, #e2e8f0);
    color: var(--mt-text-body, #334155);
    text-decoration: none;
    transition: color var(--mt-duration-fast, 0.15s) ease,
                border-color var(--mt-duration-fast, 0.15s) ease;
}
.contact-section__social-link:hover {
    color: var(--mt-accent, #0ea5e9);
    border-color: var(--mt-accent, #0ea5e9);
}

.contact-section__map {
    margin-top: var(--mt-space-6, 24px);
    border-radius: var(--mt-radius-md, 10px);
    overflow: hidden;
    border: 1px solid var(--mt-border-default, #e2e8f0);
}
.contact-section__map iframe {
    display: block;
    width: 100%;
    min-height: 280px;
    border: 0;
}

/* ── Form column ─────────────────────────────────────────── */
/* The DIRECT-mode embedded form ships as a standalone homepage section
   (form-module.css: padding 60px 0 + a filled background + an 880px centered
   inner container). Inside this grid cell that chrome adds vertical bulk + a
   coloured box and unbalances the two columns. Strip it back to a flush,
   transparent form that fills the column. SCOPED to .contact-section__form so
   homepage form slots and DIRECT-mode pages keep their own Form Engine styling
   untouched — no global override. */
.contact-section__form .form-module {
    margin-top: 0;
    padding: 0;
    background: transparent;
}
.contact-section__form .form-module__inner {
    max-width: none;
    margin: 0;
    padding: 0;
}