/* ==========================================================================
   Contact page (page-contact.php)
   On-brand, contained composition consistent with page-about / page-events.
   All rules scoped under .cb-contact-page. Form styling lives in cb-forms.css.
   ========================================================================== */

/* Visually-hidden utility (no global one exists yet). */
.cb-contact-page .cb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- 1. Hero ------------------------------------------------------------- */
.cb-contact-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.cb-contact-hero__inner { max-width: 46rem; }
.cb-contact-hero__eyebrow { margin-bottom: 1rem; }
.cb-contact-hero__title { font-size: var(--cb-text-5xl); margin: 0; max-width: 18ch; }
.cb-contact-hero__copy {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-contact-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* --- 2. Details + map ---------------------------------------------------- */
.cb-contact-details { padding-block: clamp(1rem, 3vw, 2rem) var(--cb-section-y); }
.cb-contact-details__layout {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .cb-contact-details__layout { grid-template-columns: 0.9fr 1.1fr; }
}

.cb-contact-cards {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1rem;
  align-content: start;
}
.cb-contact-card {
  display: flex;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
}
.cb-contact-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  color: var(--cb-cocoa);
  background: var(--cb-surface-alt);
}
.cb-contact-card__label {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: var(--cb-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
}
.cb-contact-card__line { margin: 0; font-size: var(--cb-text-lg); line-height: 1.5; color: var(--cb-text); }
.cb-contact-card__cta {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--cb-caramel);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-caramel) 45%, transparent);
}
.cb-contact-card__cta:hover { color: var(--cb-cocoa); border-bottom-color: currentColor; }

.cb-contact-map {
  margin: 0;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  border: 1px solid var(--cb-border);
  min-height: 20rem;
}
.cb-contact-map__frame { display: block; width: 100%; height: 100%; min-height: 20rem; border: 0; }

/* --- 3. Form ------------------------------------------------------------- */
.cb-contact-form-sec { background: var(--cb-surface-alt); padding-block: var(--cb-section-y); }
.cb-contact-form-sec__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .cb-contact-form-sec__inner { grid-template-columns: 0.85fr 1.15fr; }
}
.cb-contact-form-sec__head { max-width: 30rem; }
.cb-contact-form-sec__title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; }
.cb-contact-form-sec__copy {
  margin-top: 1.25rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-contact-form-sec__form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
}