/* ============================================
   RELATED ARTICLES PARTIAL
   ============================================ */

.related-articles-section {
  background: #f8fafc;
  padding: 56px 0 64px;
  border-top: 1px solid #e2e8f0;
}

.related-articles-heading {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 28px;
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.related-article-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.related-article-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

.related-article-img-link { display: block; aspect-ratio: 16/9; overflow: hidden; }

.related-article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.related-article-card:hover .related-article-img { transform: scale(1.04); }

.related-article-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a3a5c, #2B7FBF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.related-article-body { padding: 16px; }

.related-article-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.4;
  margin: 0 0 8px;
}

.related-article-title a { color: inherit; text-decoration: none; }
.related-article-title a:hover { color: #1a6fc4; }

.related-article-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #94a3b8;
}

@media (max-width: 640px) {
  .related-articles-grid { grid-template-columns: 1fr; }
}