/* Styles for contact.hbs — the contact page.

   Ported from the legacy `components/pages/contact/Contact.vue`; the 1000
   breakpoint and every value below it are the legacy's, read off the compiled
   stylesheet the live site serves.

   `.contact-box` and the `.contact-text` pair live here rather than in either
   partial because both `partials/channels.hbs` and `partials/location.hbs`
   render them, and rules shared by sibling partials belong to the parent
   (agents/ui.md → Component Stylesheets). */

.contact-section {
  margin: 40px 0;
}

/* The sprite only defines <symbol>s; it must never occupy layout space. */
.contact-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.contact-title {
  color: var(--gray-900);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}

.contact-description {
  margin: 8px 0 80px;
  color: var(--gray-600);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

.contact-box {
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-text-label {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 400;
}

/* `font-style` is pinned because one of these is an <address>, which the UA
   renders italic; nothing in this design is italic. `font-weight` is pinned for
   the mirror-image reason — another is a <strong>, which the UA renders bold,
   and the legacy set 400 here to cancel exactly that. */
.contact-text-value {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 1000px) {
  .contact-section {
    margin: 80px 0;
  }

  .contact-title {
    font-size: 36px;
  }

  .contact-description {
    margin: 16px 0 80px;
    font-size: 20px;
  }

  /* Two columns from here up: the channel cards stack down the first, the
     office card fills the second — see `partials/location.css`. */
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }
}