/* =====================================================
 * Blog hub — cluster cover art (hub only)
 * ===================================================== */

.page-blog .blog-card__img img.is-cover {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  aspect-ratio: unset;
}

.page-blog .blog-card__img[data-cover="agents"] { --cover-accent: #b85a14; --cover-wash: rgba(184, 90, 20, 0.12); }
.page-blog .blog-card__img[data-cover="rag"] { --cover-accent: #0d9488; --cover-wash: rgba(13, 148, 136, 0.12); }
.page-blog .blog-card__img[data-cover="mobile"] { --cover-accent: #2563eb; --cover-wash: rgba(37, 99, 235, 0.12); }
.page-blog .blog-card__img[data-cover="compliance"] { --cover-accent: #059669; --cover-wash: rgba(5, 150, 105, 0.12); }
.page-blog .blog-card__img[data-cover="cost"] { --cover-accent: #d97706; --cover-wash: rgba(217, 119, 6, 0.12); }
.page-blog .blog-card__img[data-cover="guide"] { --cover-accent: #5b4bb4; --cover-wash: rgba(91, 75, 180, 0.12); }

.page-blog .blog-card__img[data-cover]::before {
  content: attr(data-cover);
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cover-accent);
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  background: rgba(13, 17, 23, 0.72);
  border: 1px solid color-mix(in srgb, var(--cover-accent) 35%, transparent);
  backdrop-filter: blur(6px);
}

.page-blog .blog-card__img[data-cover="agents"]::before { content: "Agents"; }
.page-blog .blog-card__img[data-cover="rag"]::before { content: "RAG & LLMs"; }
.page-blog .blog-card__img[data-cover="mobile"]::before { content: "Mobile"; }
.page-blog .blog-card__img[data-cover="compliance"]::before { content: "Compliance"; }
.page-blog .blog-card__img[data-cover="cost"]::before { content: "Cost Guide"; }
.page-blog .blog-card__img[data-cover="guide"]::before { content: "Guide"; }

.page-blog .blog-card__img[data-cover]::after {
  background: linear-gradient(135deg, var(--cover-wash) 0%, transparent 50%);
}

.page-blog .blog-card__img[data-cover]:has(.is-cover)::after {
  opacity: 0.12;
}

.page-blog .blog-card:hover .blog-card__img img.is-cover {
  transform: scale(1.03);
}

.page-blog .blog-card[data-cover="agents"] { --row-accent: #b85a14; --row-wash: rgba(184, 90, 20, 0.09); }
.page-blog .blog-card[data-cover="rag"] { --row-accent: #0d9488; --row-wash: rgba(13, 148, 136, 0.09); }
.page-blog .blog-card[data-cover="mobile"] { --row-accent: #2563eb; --row-wash: rgba(37, 99, 235, 0.09); }
.page-blog .blog-card[data-cover="compliance"] { --row-accent: #059669; --row-wash: rgba(5, 150, 105, 0.09); }
.page-blog .blog-card[data-cover="cost"] { --row-accent: #d97706; --row-wash: rgba(217, 119, 6, 0.09); }
.page-blog .blog-card[data-cover="guide"] { --row-accent: #5b4bb4; --row-wash: rgba(91, 75, 180, 0.09); }

@media (max-width: 767px) {
  .page-blog .blog-card:hover .blog-card__img img.is-cover {
    transform: none;
  }
}