/* ==========================================================================
   Page: contact  (site/contact/show)
   --------------------------------------------------------------------------
   .ct-details  three cards: navy "talk to us" (big phone + pills) · white
                visit card (address, directions, email, socials) · lemon hours
   .ct-main     message form (or the thank-you card) beside the map card
   ========================================================================== */

.ct-details { grid-template-columns: 1.15fr 1.15fr 0.9fr; }
.ct-details h2, .ct-main h2 { font-size: var(--fs-lg); }

/* Talk to us */
.ct-call { display: flex; flex-direction: column; gap: var(--s-2); }
.ct-call p { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.ct-call__number { margin-top: auto; padding-top: var(--s-4); color: var(--lemon); font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.01em; }
.ct-call__more { color: #fff; font-family: var(--font-num); font-weight: 600; }
.ct-call__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* Visit */
.ct-visit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.ct-line { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink-soft); }
.ct-line .icon { margin-top: 0.3em; color: var(--teal); }
.ct-line a:hover { color: var(--navy); text-decoration: underline; }
.ct-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.5em 1em;
    border-radius: var(--r-pill);
    background: var(--card-soft);
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background-color var(--t-fast) var(--ease);
}
.ct-link:hover { background: var(--lemon); }
.ct-socials { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); color: var(--ink-faint); font-size: var(--fs-sm); font-weight: 600; }
.ct-socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card-soft); color: var(--navy); }
.ct-socials a:hover { background: var(--lemon); }

/* Hours */
.ct-hours dl { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.ct-hours dl > div + div { padding-top: var(--s-3); border-top: 1px solid rgb(32 57 74 / 0.15); }
.ct-hours dt { font-weight: 700; }
.ct-hours dd { color: rgb(32 57 74 / 0.8); font-family: var(--font-num); font-weight: 600; font-size: var(--fs-sm); }

/* Form + map */
.ct-main { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
#message { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }
.ct-form__text { margin-block: var(--s-2) var(--s-5); color: var(--ink-soft); font-size: var(--fs-sm); }
.ct-form__text a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
.ct-form__hint { margin-top: calc(var(--s-2) * -1); color: var(--ink-faint); font-size: var(--fs-xs); }
.ct-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ct-map { min-height: 420px; }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ct-done { display: grid; justify-items: start; align-content: center; gap: var(--s-3); }
.ct-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lemon); font-size: 1.6rem; }
.ct-done p { max-width: 36rem; color: var(--ink-soft); font-size: var(--fs-md); }
.ct-done__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

@media (max-width: 1199.98px) {
    .ct-details { grid-template-columns: 1fr 1fr; }
    .ct-hours { grid-column: 1 / -1; }
    .ct-hours dl { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .ct-hours dl > div + div { padding-top: 0; border-top: 0; }
}
@media (max-width: 991.98px) {
    .ct-details, .ct-main { grid-template-columns: 1fr; }
    .ct-map { min-height: 300px; }
}
@media (max-width: 575.98px) {
    .ct-call__actions .btn { flex: 1; }
}