.blog-post {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  cursor: pointer;
  position: relative;
}

.blog-post > a.blog-post-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-post:hover,
.blog-post:focus {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  outline: none;
}

.blog-post h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 2;
}

.blog-post h3 a {
  color: var(--global-text-color);
  transition: color var(--transition-smooth);
}

.blog-post h3 a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}

.blog-meta {
  font-size: var(--font-size-sm);
  color: var(--global-text-color-light);
  margin-bottom: var(--spacing-md);
  position: relative;
  z-index: 2;
}

.blog-excerpt {
  color: var(--global-text-color);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
  position: relative;
  z-index: 2;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.blog-tags a {
  display: inline-block;
  background-color: var(--global-code-bg-color);
  color: var(--global-text-color);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 16px;
  transition: all var(--transition-smooth);
  text-decoration: none;
}

.blog-tags a:hover {
  background-color: var(--global-theme-color);
  color: #fff;
  text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post {
    padding: var(--spacing-lg);
  }

  .blog-post h3 {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 576px) {
  .blog-post {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .blog-post h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
  }

  .blog-meta {
    font-size: 12px;
    margin-bottom: var(--spacing-sm);
  }

  .blog-excerpt {
    font-size: 13px;
    margin-bottom: var(--spacing-sm);
  }

  .blog-tags {
    gap: 4px;
  }

  .blog-tags a {
    font-size: 10px;
    padding: 3px 8px;
  }
}