/* Styles for service-card.hbs — one service card.
   Ported from the legacy `HomeAdvertiseCard.vue`. */

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 24px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background-color: var(--gray-0);
}

/* A fixed height with a capped width, so three images of different proportions
   line up on one baseline. `max-width` overrides the global `img` rule's `100%`,
   and `height` its `auto`.

   `width: auto` is required, not decorative: the markup carries real `width`
   attributes so the browser can reserve the right box before the file arrives,
   and without this the attribute would win and stretch each image to the 300px
   cap. Auto lets the fixed height and the true ratio decide instead. */
.service-card-image {
  width: auto;
  max-width: 300px;
  height: 250px;
}

/* `width: 100%` rather than letting the centred flex item size to its text: the
   divider above this block has to span the whole card, which it only does by
   accident while the copy stays long enough to fill the row. */
.service-card-body {
  width: 100%;
  padding: 16px;
  border-top: 1px solid var(--gray-200);
}

.service-card-title {
  margin-top: 8px;
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.service-card-text {
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

@media (min-width: 1000px) {
  .service-card-body {
    padding: 24px;
  }

  .service-card-title {
    font-size: 20px;
  }

  .service-card-text {
    margin-top: 16px;
    font-size: 16px;
    line-height: 26px;
  }
}