/* ==========================================================================
   Locations / Contact — address + hours column, two forms
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 4fr 6fr;
    gap: var(--space-8);
    align-items: start;
  }
  /* Details column tracks the page while the taller form column scrolls. */
  .contact-layout__aside {
    position: sticky;
    top: 104px;
  }
}

.contact-detail {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  align-items: start;
  padding-block: var(--space-2);
}
.contact-detail .material-symbols-outlined { color: var(--brand-brass); }
/* `anywhere`, not `break-word`: only `anywhere` also lowers the intrinsic
   min-content width, and that is the actual problem here — the email address is
   a single unbreakable 28-character token that stopped this column shrinking. */
.contact-detail__value {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-detail__meta {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

.form-panel + .form-panel { margin-top: var(--space-6); }