/* Blog page styles — replaces inline styles so the page works under CSP style-src 'self' */
.page-blog .blog-body { padding-top: 5rem; padding-bottom: 6rem; }
.page-blog .blog-grid { grid-template-columns: 1fr; }
.page-blog .blog-feed-container { margin-top: 2rem; }
.page-blog .blog-feed-head { margin-bottom: 2.5rem; }
.page-blog .blog-feed-title { margin-bottom: 0.5rem; }

.page-blog .blog-card {
  padding: 3.5rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 3.5rem;
  background: var(--color-surface, #ffffff);
}
.page-blog .blog-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-blog .blog-card-badge {
  color: var(--color-cyan, #00d2ff);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-blog .blog-card-source { font-size: 0.85rem; opacity: 0.7; }
.page-blog .blog-card-title { margin-bottom: 1rem; text-align: left; }
.page-blog .blog-card-title a { color: inherit; text-decoration: none; }
.page-blog .blog-card-desc { margin-bottom: 2rem; line-height: 1.6; opacity: 0.85; text-align: left; }
.page-blog .blog-card-actions { display: flex; gap: 1rem; align-items: center; justify-content: flex-start; }
.page-blog .blog-card .icon-arrow { width: 14px; height: 14px; margin-left: 0.25rem; }
.page-blog .blog-empty { text-align: center; padding: 2rem 0; opacity: 0.6; }

/* Thumbnail layout: text first, image on the trailing side = right in English (LTR), left in Arabic (RTL) */
.page-blog .blog-card-body { min-width: 0; }
.page-blog .blog-card.has-thumb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
  gap: 2.5rem;
  align-items: center;
}
.page-blog .blog-card-thumb {
  order: 2;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.page-blog .blog-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.page-blog .blog-card-thumb:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .page-blog .blog-card-thumb img { transition: none; }
  .page-blog .blog-card-thumb:hover img { transform: none; }
}
@media (max-width: 760px) {
  .page-blog .blog-card.has-thumb { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .page-blog .blog-card-thumb { order: 0; } /* phones: image above the text */
}