/* ============================================================
   BLOGS.CSS — blog listing card layout (horizontal) + blog-only
   styling. Shared tokens / page chrome / pagination live in
   common.css.
   ============================================================ */

/* ── BLOG CARDS ─────────────────────────────────────────────── */
.blogs-grid { display:flex; flex-direction:column; gap:2.5rem; margin:3rem 0; }

.blog-card {
    flex-direction:row; width:100%; min-height:250px;
}
.blog-card:hover {
    transform:translateX(10px);
    box-shadow:-10px 0 30px var(--card-hover-shadow-color);
}

.blog-image-container { width:35%; height:auto; min-width:300px; overflow:hidden; position:relative; flex-shrink:0; }
.blog-image { transition:transform .45s ease; }
.blog-card:hover .blog-image { transform:scale(1.04); }

.blog-content { padding:2rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }

.blog-title { line-height:1.3; }

.blog-description { margin-bottom:1rem; }

.blog-meta {
    display:flex; align-items:center; gap:1rem; margin-bottom:1rem;
    padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap;
}
.author-info { display:flex; align-items:center; gap:.75rem; flex-grow:1; }
.author-img { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--primary); }
.author-details { display:flex; flex-direction:column; }
.author-name { font-weight:600; font-size:.9rem; color:var(--primary); }
.author-role { font-size:.75rem; color:rgba(255,255,255,.6); }
.blog-date { font-size:.8rem; color:rgba(255,255,255,.5); white-space:nowrap; }

/* ── RESPONSIVE (blogs-specific) ─────────────────────────────── */
@media (max-width:1024px) { .blog-element { margin:1.5rem 0 2rem; } }

@media (max-width:850px) {
    .blog-card { flex-direction:column; }
    .blog-image-container { width:100%; height:200px; min-width:unset; }
}

@media (max-width:600px) {
    .blogs-container { width:94vw; }
}

@media (max-width:480px) {
    .blogs-container { width:96vw; padding:1rem 0; }
    .blog-content { padding:1.25rem; }
}