/* ==========================================================================
   Run Playgrounds — related-posts.css
   Post cards for three places: Related Articles (article pages), the blog grid
   (blog.html) and "Articles by" (author.html). Markup follows
   references/related-articles-template.md (.related-post-card …) and the
   post-optimizer grid (.related-posts-list / .related-posts-card …).
   No Bootstrap on this site: .row / .col-* get a native grid here.
   ========================================================================== */

.related-posts-section,
[data-post-optimizer="related-posts"] { background-color: #F4F1EA; background-image: linear-gradient(180deg, #F4F1EA 0%, #F1EDE4 100%); }

.related-posts-header { margin-bottom: 40px; }
.related-posts-section .section-title,
.related-posts-title { margin: 0 0 12px; font-size: var(--t-40); font-weight: 700; color: var(--green); text-align: left; }
.related-posts-section .section-subtitle { margin: 0 0 40px; max-width: 68ch; color: var(--muted); font-size: var(--t-17); text-align: left; }

/* grid shim for the template's Bootstrap-style classes */
.related-posts-section .row,
.related-posts-list,
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.related-posts-section .row > [class*="col-"] { width: auto; max-width: none; padding: 0; display: flex; }
.related-posts-section .row > [class*="col-"] > * { flex: 1 1 auto; }

/* ---------- card: .related-post-card (template) ---------- */
.related-post-card,
.related-posts-card,
.blog-card {
  position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0;
  background: #FFFFFF; border: 1px solid var(--line-white); border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.related-post-card:hover,
.related-posts-card:hover,
.blog-card:hover { border-color: var(--char); box-shadow: 6px 6px 0 var(--char); transform: translate(-2px, -2px); }
.related-post-card > a:first-child,
.related-posts-card-media,
.blog-thumbnail-wrapper { display: block; overflow: hidden; background: #E3DED3; }
.related-post-image,
.related-posts-card-image,
.blog-thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.related-post-body,
.related-posts-card-content,
.blog-content { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 24px; }
.related-post-category,
.blog-category {
  align-self: flex-start; border: 1px solid var(--green); padding: 2px 8px; color: var(--green);
  font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.related-post-title,
.related-posts-card-title,
.blog-title { margin: 0; font-size: var(--t-23); font-weight: 700; line-height: 1.2; color: var(--char); }
.related-post-title a,
.related-posts-card-link,
.blog-title a { color: var(--char); text-decoration: none; }
.related-post-title a:hover,
.related-posts-card-link:hover,
.blog-title a:hover { color: var(--green); }
.related-post-title a::after,
.blog-title a::after { content: ""; position: absolute; inset: 0; }
.related-post-excerpt,
.related-posts-card-excerpt,
.blog-excerpt { margin: 0; color: var(--muted); font-size: var(--t-17); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.related-post-meta,
.blog-meta-line { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-white); display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* featured card: spans the whole grid, image left */
.blog-card.featured,
.blog-card.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; }
.blog-card.featured .blog-thumbnail-wrapper,
.blog-card.is-featured .blog-thumbnail-wrapper { height: 100%; }
.blog-card.featured .blog-thumbnail,
.blog-card.is-featured .blog-thumbnail { height: 100%; aspect-ratio: auto; min-height: 420px; }
.blog-card.featured .blog-content,
.blog-card.is-featured .blog-content { padding: 40px; justify-content: center; gap: 16px; }
.blog-card.featured .blog-title,
.blog-card.is-featured .blog-title { font-size: var(--t-40); line-height: 1.08; }
.blog-card.featured .blog-excerpt,
.blog-card.is-featured .blog-excerpt { -webkit-line-clamp: 5; }
.blog-card .read-more { position: relative; z-index: 1; align-self: flex-start; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.blog-card .read-more::after { content: " \2192"; }
.blog-card[hidden] { display: none; }

@media (max-width: 991.98px) {
  .related-posts-section .row, .related-posts-list, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card.featured, .blog-card.is-featured { grid-template-columns: 1fr; }
  .blog-card.featured .blog-thumbnail, .blog-card.is-featured .blog-thumbnail { min-height: 0; aspect-ratio: 3 / 2; }
  .blog-card.featured .blog-content, .blog-card.is-featured .blog-content { padding: 24px; }
  .blog-card.featured .blog-title, .blog-card.is-featured .blog-title { font-size: var(--t-30); }
}
@media (max-width: 767.98px) {
  .related-posts-section .row, .related-posts-list, .post-grid { grid-template-columns: 1fr; }
  .related-posts-section .section-title, .related-posts-title { font-size: var(--t-30); }
}
@media (prefers-reduced-motion: reduce) {
  .related-post-card, .related-posts-card, .blog-card { transition: none; }
  .related-post-card:hover, .related-posts-card:hover, .blog-card:hover { transform: none; }
}