/* ==========================================================================
   Contact page (contact.php) — design/reference/04-contact.png
   Page-only styles; shared classes live in components.css. Tokens only.
   ========================================================================== */

/* ---------- Info + form ---------- */
.ct-main { padding-top: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.ct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    align-items: start;
}
@media (min-width: 992px) {
    .ct-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
.ct-info .ab-lead { margin-bottom: 1.5rem; }

.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-card {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 18px 20px;
    background: var(--ab-gray-1);
    border: 1px solid var(--ab-gray-2);
    border-radius: var(--ab-radius);
}
.ct-card .ab-icon-badge { flex: none; }
.ct-card__title { font: var(--ab-small); font-weight: 600; color: var(--ab-dark); margin: 0 0 2px; }
.ct-card__value { margin: 0; font-weight: 500; color: var(--ab-text); overflow-wrap: anywhere; }
.ct-card__value a { color: inherit; text-decoration: none; }
.ct-card__value a:hover { color: var(--ab-primary); text-decoration: underline; }
.ct-card__note { margin: 4px 0 0; font: var(--ab-caption); font-size: .8125rem; color: var(--ab-text-muted); }

.ct-follow { margin-top: 1.5rem; }
.ct-follow__title { font: var(--ab-small); font-weight: 600; color: var(--ab-dark); margin: 0 0 .6rem; }
.ct-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-socials a {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ab-primary); color: var(--ab-white); text-decoration: none;
    transition: background-color .2s var(--ab-ease);
}
.ct-socials a:hover { background: var(--ab-primary-dark); color: var(--ab-white); }

.ct-form-card {
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--ab-gray-1);
    border: 1px solid var(--ab-gray-2);
    border-radius: var(--ab-radius-lg);
    scroll-margin-top: calc(var(--ab-header-h, 72px) + 16px);
}
.ct-form-card__intro { color: var(--ab-text-soft); margin: .5rem 0 1.25rem; max-width: 52ch; }
.ct-alert { margin-bottom: 1.25rem; }
.ct-required-note { margin: 0; }
.ct-optional { font-weight: 400; color: var(--ab-text-muted); }
.ct-textarea-wrap > i { top: 24px; }
.ct-form-card .ab-error { display: flex; gap: .35rem; align-items: flex-start; }
.ct-privacy {
    display: flex; justify-content: center; align-items: flex-start; gap: .5rem;
    margin: 0; text-align: center;
    font: var(--ab-caption); font-size: .8125rem; color: var(--ab-text-muted);
}
.ct-privacy > i { color: var(--ab-primary); }

/* ---------- Find us ---------- */
.ct-map-section { padding-bottom: var(--ab-section-y); }
.ct-map {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--ab-gray-2);
    border-radius: var(--ab-radius-lg);
    background: var(--ab-primary-50);
    overflow: hidden;
}
.ct-map__card {
    display: flex; gap: 1rem; align-items: flex-start;
    margin: 16px; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--ab-white);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow);
}
.ct-map__card .ab-icon-badge { flex: none; }
.ct-map__title { font: var(--ab-h3); color: var(--ab-dark); margin: 0 0 .5rem; }
.ct-map__card p { color: var(--ab-text-soft); font: var(--ab-small); margin: 0 0 .75rem; }
.ct-map__hours { display: flex; align-items: center; gap: .4rem; }
.ct-map__card .ab-btn { margin-top: .5rem; }
.ct-map__frame { min-height: 280px; }
.ct-map__frame iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; }
.ct-map__placeholder {
    height: 100%; min-height: 280px; padding: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    text-align: center; color: var(--ab-text-soft); font: var(--ab-small);
}
.ct-map__placeholder > i { font-size: 2rem; color: var(--ab-primary); }
.ct-map__addr { margin: 0; font-weight: 600; color: var(--ab-dark); }
.ct-map__note { margin: 0; max-width: 36ch; font: var(--ab-caption); color: var(--ab-text-muted); }
@media (min-width: 992px) {
    .ct-map { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); min-height: 200px; }
    .ct-map__card { margin: 16px 0 16px 16px; align-self: center; }
    .ct-map__frame, .ct-map__frame iframe { min-height: 100%; }
}

/* ---------- Quick answers ---------- */
.ct-faq { padding-top: 0; }
.ct-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (min-width: 992px) {
    .ct-faq__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; }
}
.ct-faq__intro .ab-lead { margin-bottom: 1rem; }
.ct-faq .ab-accordion { gap: 8px; }
.ct-faq .ab-accordion__body p { margin: 0; }