/* Blog & Card Styles v3 */
.blog-post {
  width: 100%;
  border-radius: var(--card-radius, 16px);
  display: grid;
  grid-template-columns: 1fr 50px;
  background: var(--bg-card);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
}
.blog-post:hover {
  border-color: var(--border-hover);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 16px rgba(0,212,255,0.04);
}
.blog-link {
  padding: var(--space-2) var(--space-3);
  grid-column: 1 / 2;
  border-right: 1px solid var(--border);
}
.blog-link a {
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  transition: color 0.3s;
}
.blog-link a:hover { color: var(--cyan); }
.blog-link:hover { cursor: pointer; }
.blog-link h3 { font-weight: 500; }

.blog-goto-link {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; grid-column: 2 / 3;
  transition: background 0.3s;
}
.blog-goto-link:hover { background: rgba(0,212,255,0.05); }
.blog-goto-link i { font-size: 1.2rem; color: var(--cyan); }

.blog-arrow {
  width: 14px; height: 50px;
  filter: brightness(0) invert(1);
  opacity: 0.4;
  transition: opacity 0.3s;
}
.blog-post:hover .blog-arrow { opacity: 0.8; }

.more-blogs {
  background: var(--gradient-main);
  border-color: var(--cyan);
}
.more-blogs a { color: white !important; }
.more-blogs:hover {
  box-shadow: 0 8px 28px var(--glow-cyan);
}