/* =====================================================================
   article-card.css — Docokids blog article card (.article-card).

   A wide thumbnail, a small tag line, the title, a short intro. No border and
   no box: the image carries the weight and the title is the loud voice, like
   the doctor cards of team.css. The WHOLE card is one <a>, so the anchor text
   Google reads is the article title.

   Named .article-card and NOT .blog-card on purpose: .blog-card already exists
   twice in the OLD stack (static/css/style.css and
   static/css/landings/principal/blog.css), which base_ds.html never loads. The
   two could not collide at runtime, but the same name for two different
   anatomies is a trap for whoever greps next.

   Every value is a var(--token).
   ===================================================================== */
.article-card {
  display: block;
  text-decoration: none;
  color: var(--gris-oscuro);
  transition: color 150ms ease;
}
.article-card:hover,
.article-card:focus-visible {
  color: var(--p-verde);
}
.article-card__image {
  /* 3:2 — la proporción con la que el modelo ya guarda las imágenes del blog
     (ResizedImageField a 476x317), así que el recorte no quita casi nada. */
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin-bottom: var(--space-3);
}
.article-card__tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-rosado);
  margin: 0 0 var(--space-2) 0;
}
.article-card__title {
  /* Solo el token de tamaño; el line-height y el tracking los pone la regla
     global de h3 en base.css. Mismo criterio que .doctor__name. */
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
  color: inherit;
}
.article-card__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gris-secundario);
  margin: 0;
}