/* Need Support? only. Loaded after site.css. */

/* -------------------------------------------------------------- hero */

.support-hero__lede {
  max-width: 680px;
}

/* The mailto was forced white here, because this hero was navy edge to edge.
 * The words sit on the light panel now, so white is invisible and the default
 * --text-link is both correct and readable. The underline stays. */
.support-hero__lede a {
  text-decoration: underline;
}

/* ----------------------------------------------------------- routing */

/* Four across, declared rather than left to auto-fit.
   auto-fit with a 280px minimum could never reach four here: four tracks plus
   three 24px gaps need 1192px and the content column is 1176px, sixteen short,
   so it settled on three and stranded the fourth card alone on its own row. */
.support-routes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.support-route {
  display: grid;
  align-content: start;
  gap: 16px;
  height: 100%;
  padding: 32px;
  color: var(--text-body);
}

/* Two by two before one column: four cards this short read fine as a pair of
   rows, and dropping straight to a single column makes for a lot of scrolling
   on a page whose whole job is to point somewhere else quickly. */
@media (max-width: 1000px) {
  .support-routes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .support-routes {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------- contact */

.support-contact__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.support-contact__card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.support-contact__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-800);
}

.support-contact__link {
  justify-self: start;
  font-size: 15px;
  font-weight: 500;
}