/**
 * related-posts.css — related article cards · procyclingapparel.com
 * Covers the post-optimizer grid, the Bootstrap-row variant, and render_article.py's
 * literal markup:
 *   <section class="related-posts-section"><h2>Related Articles</h2>
 *     <div class="related-posts-list">
 *       <a href="/{slug}" class="related-posts-card"><img ...>
 *         <div class="related-posts-card-body"><h3>{title}</h3></div></a>
 * §0: g-100 fill cards, 10px radius, no shadow, no hover lift (fill change only).
 */

.related-posts-section,
[data-post-optimizer="related-posts"] {
  box-sizing: border-box;
  margin: 56px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--g-200, #E5E7EB);
}
.related-posts-header { margin-bottom: 24px; }
.related-posts-title,
.related-posts-section > h2,
.related-posts-section > .container > h2,
.article-content .related-posts-section > h2 {
  font: 600 clamp(24px, 2vw, 30px)/1.15 var(--ff-head, "IBM Plex Sans Condensed", Arial, sans-serif);
  color: var(--ink, #111827);
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.related-posts-list { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .related-posts-list { grid-template-columns: 1fr; } }

.related-posts-card,
.related-post-card,
.article-content a.related-posts-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--g-100, #F3F4F6);
  border-radius: 10px;
  overflow: hidden;
  color: var(--ink, #111827);
  text-decoration: none;
  font-weight: 400;
  transition: background-color 160ms;
}
.related-posts-card:is(:hover, :focus-visible),
.related-post-card:is(:hover, :focus-within) { background: var(--g-50, #F9FAFB); }

.related-posts-card-media { display: block; overflow: hidden; }
.related-posts-card-image,
.related-post-image,
.related-posts-card > img,
.article-content .related-posts-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  background: var(--g-200, #E5E7EB);
}

.related-posts-card-content,
.related-post-body,
.related-posts-card-body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 22px; }

.related-post-category {
  display: inline-block;
  font: 600 13px/1.4 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-600, #4B5563);
  margin-bottom: 8px;
}

.related-posts-card-title,
.related-post-title,
.related-posts-card-body h3,
.article-content .related-posts-card-body h3 {
  font: 600 19px/1.3 var(--ff-head, "IBM Plex Sans Condensed", Arial, sans-serif);
  color: var(--ink, #111827);
  margin: 0;
  padding: 0;
  border: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.related-posts-card-link,
.related-post-title a { color: inherit; text-decoration: none; }
.related-posts-card-link:hover,
.related-post-title a:hover { text-decoration: underline; }

.related-posts-card-excerpt,
.related-post-excerpt {
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--g-600, #4B5563);
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.related-posts-section .row.g-4 > [class*="col-"] { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .related-posts-card, .related-post-card { transition: none; }
}