/* Image cards for the blog index and the landing page.
 *
 * Applies ONLY to a card that carries a featured image: blog.js adds `blog-card--image` to the
 * article when a post has `featured_image`, and the landing card carries the same class. A card
 * without an image is untouched by every rule here.
 *
 * The compiled tailwind.css has no aspect-ratio utilities, so the 16:9 frame is set here. The frame
 * reserves its height before the file arrives (no layout shift) and the <img> also carries
 * width/height attributes for the same reason.
 */
.blog-card--image .blog-card__media {
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
  overflow: hidden;
}
.blog-card--image .blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The card is one link. The global outline sits on the <a>, which is inside an overflow:hidden
   article, so an outward outline would be clipped; draw it inside the card instead. */
.blog-card--image a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: -3px;
  border-radius: 0.5rem;
}
.blog-card--image:focus-within {
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}
/* The excerpt on an image card is its only description and runs to 200 characters: allow five lines
   rather than the three that cut it mid-clause. */
.blog-card--image .blog-card__excerpt { -webkit-line-clamp: 5; line-clamp: 5; }
.blog-card--image .blog-card__title { color: #111827; }
.blog-card--image a:hover .blog-card__title,
.blog-card--image a:focus-visible .blog-card__title { color: #3730a3; text-decoration: underline; }
/* Landing card: image beside the text from tablet width up, stacked on a phone. */
.blog-card--landing a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
@media (min-width: 768px) {
  .blog-card--landing a { flex-direction: row; }
  .blog-card--landing .blog-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 15rem; }
}
.blog-card--landing .blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .blog-card--landing .blog-card__body { padding: 2rem; } }
.blog-card--landing .blog-card__kicker { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #3730a3; margin-bottom: .5rem; }
.blog-card--landing .blog-card__title { font-size: 1.5rem; line-height: 1.25; font-weight: 800; margin-bottom: .75rem; }
.blog-card--landing .blog-card__excerpt { color: #374151; margin-bottom: 1rem; }
.blog-card--landing .blog-card__cta { font-weight: 600; color: #1d4ed8; }
.blog-card--landing a:hover .blog-card__cta { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .blog-card--image { transition: none; } }