/* ==========================================================================
   GNC SG — Article Card
   ========================================================================== */

/* Fills the grid cell the row stretched for it. Without this the card sizes to
   its own content, so a card whose article has no excerpt sits short and its
   READ ARTICLE link stops lining up with its neighbours'. */
.article-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.article-card:hover {
  box-shadow: var(--shadow-md);
}

.article-card__image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grey-100);
}

/* The image arrives wrapped in a field div, so the img's own `height: 100%`
   below resolved against that wrapper's `auto` rather than against the 16/9
   box — leaving the img at its intrinsic ratio (439x240 against a 439x247
   slot) and a strip of --color-grey-100 showing along the bottom edge.
   Passing the height down the wrapper is what lets object-fit crop instead.
   product-card.css carries the same fix for the same reason. */
.article-card__image > * {
  display: block;
  height: 100%;
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No side padding — article-card.png sets the text flush with the image edge,
   and the grid gap does the separating. */
.article-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 0;
}

/* Two lines maximum, then an ellipsis. Without the cap, one long headline
   pushes its card taller than the rest of the row and the excerpts stop lining
   up — the Education Hub grid has titles several times the design's length. */
.article-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.article-card__title a:hover {
  color: var(--color-primary);
}

/* Two lines, as drawn, with the ellipsis signalling there is more to read. */
.article-card__excerpt {
  flex: 1;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The body field arrives wrapped in a <p>. A block child inside a
   -webkit-box makes the clamp unreliable, so the paragraph is folded into the
   same inline flow and its default margins dropped. */
.article-card__excerpt p {
  display: inline;
  margin: 0;
}

/* Pinned to the foot of the card. The excerpt's flex: 1 only pushes the link
   down on articles that actually have body text — an article without one has
   no excerpt element at all, and its link would ride up under the title. */
.article-card__body .btn--link {
  margin-top: auto;
}