/* Custom styles for the blog home and page layout */
@import '@/tailwindcss';

/* Page Content Styles */
.blog-main {
  padding: 2rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Post Card Design */
.post-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:shadow-lg hover:translate-y-1;
  border: 1px solid #f0f0f0;
}

.post-card:hover {
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

/* Featured Post Styling */
.featured-post {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 text-white overflow-hidden rounded-t-lg;
}

.featured-post h2 {
  @apply bg-white text-blue-600 text-lg font-medium p-4 rounded-t-lg;
}

/* Post Card Content */
.post-card-content {
  @apply p-6;
}

.post-card-meta {
  @apply text-sm text-blue-500 mb-2;
}

/* Pagination Styling */
.pagination {
  @apply mt-8 flex justify-center space-x-3;
}

.pagination a {
  @apply px-4 py-2 rounded-full border border-blue-900 hover:bg-blue-100 transition-colors;
}

.pagination a.active {
  @apply bg-blue-100 text-blue-700 font-medium;
}

/* Related Posts Section */
.related-posts {
  @apply py-8 border-t border-gray-200 mt-8 pt-6;
}

.related-title {
  @apply text-2xl font-semibold pb-4 border-b border-gray-200 pb-4 mb-6;
}

/* Sidebar Styles */
.sidebar {
  @apply p-4 bg-gray-50 rounded-lg;
}

/* Post Tags */
.tags {
  @apply mt-2;
}

.tag {
  @apply inline-block px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm mr-2;
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
  .post-list {
    @apply grid gap-6;
  }

  .post-card {
    @apply shadow;
  }

  .blog-main {
    @apply px-2;
  }
}

/* Hero Section Overlay */
.hero-overlay {
  position: absolute;
  bottom: 0;
  color: white;
  width: 100%;
  background: rgba(14 165 236 / 0.9);
  @apply p-5 text-center transform -translate-y-1/4;
}

.hero-title {
  @apply text-3xl font-bold;
}