/* Styles for article-card.hbs — one blog post card.
   Ported from the legacy `components/custom/blogArticles/BlogArticlesItem.vue`;
   the 1000 breakpoint and every size below are the legacy values.

   The card is an anchor, and the global reset already strips its underline and
   inherits its colour, so nothing here has to undo link styling. */

/* `flex-start` rather than the legacy `center`: should a card ever end up with
   spare height, centring the contents would float the cover image away from the
   top edge it is rounded to match. The body below absorbs it instead. */
.article-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background-color: var(--gray-0);
}

/* The legacy markup hung the fixed height and the top corners off the `<img>`
   itself. They are on the wrapper here so that a post with no featured image
   still occupies the same box — the panel shows, the picture is simply absent.
   14px against the card's 16px is the legacy value: the radius of the inner edge
   of a 1px border. */
.article-card-media {
  flex-shrink: 0;
  height: 210px;
  border-radius: 14px 14px 0 0;
  background-color: var(--gray-100);
  overflow: hidden;
}

/* Fills the panel and crops rather than distorts. `object-position: bottom` is
   the legacy choice, and it matters for these covers: the blog's artwork carries
   its subject low, so cropping from the top loses the least. */
.article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* `flex: 1` is what makes any spare height land here rather than below the
   border. The row's cards each end at their own content, so normally there is
   none to place. */
.article-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
}

/* Clamped to one line, two from 1000px. No `min-height`: the legacy title box
   was only as tall as the words in it, so a post whose title fits on one line
   keeps its excerpt and date where the old site put them rather than pushing
   them down by a reserved second line.

   The `-webkit-` prefixed properties are still the only ones every current engine
   implements; `line-clamp` is beside them for the ones that have moved on. */
.article-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-top: 8px;
  margin-bottom: 4px;
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
  line-height: 29px;
  text-overflow: ellipsis;
}

.article-card-excerpt,
.article-card-date {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.article-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 4px;
  text-overflow: ellipsis;
}

/* The legacy 4px gap, and a plain margin so the date sits directly under the
   excerpt. `margin-top: auto` would instead push it onto the card's bottom edge
   whenever the body had height to spare, which the old site never did. */
.article-card-date {
  margin-top: 4px;
}

@media (min-width: 1000px) {
  .article-card-media {
    height: 250px;
  }

  .article-card-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 20px;
    line-height: 32px;
  }

  .article-card-excerpt,
  .article-card-date {
    font-size: 16px;
    line-height: 26px;
  }

  .article-card-excerpt {
    margin-top: 8px;
  }

  .article-card-date {
    margin-top: 8px;
  }
}