/* Стили для карточек постов */
.post-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border-radius: 8px;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Улучшенные стили для изображений в карточках блога */
.post-image-container {
  height: 160px; /* уменьшена с 200px */
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  position: relative;
}

/* ИЛИ Вариант 2: Сохранить масштабирование, но изменить точку фокуса */
.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* показывать верхнюю часть изображения */
  transition: transform 0.4s ease-in-out;
}

.post-card:hover .post-image {
  transform: scale(1.05);
}

/* Градиент для лучшей читаемости текста на изображениях */
.post-image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* На маленьких экранах корректируем углы рамки */
@media (max-width: 767.98px) {
  .post-image-container {
    border-radius: 8px 8px 0 0;
    height: 140px; /* уменьшена с 180px */
  }
}

/* Улучшение общего внешнего вида */
.card-title a {
  position: relative;
  transition: color 0.2s;
}

.card-title a:hover {
  color: #0d6efd !important;
}

/* Стилизация пагинации */
.pagination .page-link {
  border-radius: 4px;
  margin: 0 3px;
}

.pagination .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Анимация при загрузке страницы */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-list article {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

.post-list article:nth-child(1) { animation-delay: 0.1s; }
.post-list article:nth-child(2) { animation-delay: 0.2s; }
.post-list article:nth-child(3) { animation-delay: 0.3s; }
.post-list article:nth-child(4) { animation-delay: 0.4s; }
.post-list article:nth-child(5) { animation-delay: 0.5s; }
.post-list article:nth-child(n+6) { animation-delay: 0.6s; }

/* Стили для тегов */
.badge {
  font-weight: 500;
  transition: all 0.2s ease;
}

.badge.bg-light {
  background-color: #f1f3f5 !important;
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Стиль для активного тега */
.badge.bg-primary {
  background-color: #0d6efd !important;
}

/* Анимация для тегов */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tags .badge {
  animation: fadeInRight 0.3s ease-out forwards;
  animation-delay: calc(var(--tag-index, 0) * 0.1s);
  opacity: 0;
}

.tags .badge:nth-child(1) { --tag-index: 1; }
.tags .badge:nth-child(2) { --tag-index: 2; }
.tags .badge:nth-child(3) { --tag-index: 3; }
.tags .badge:nth-child(4) { --tag-index: 4; }
.tags .badge:nth-child(5) { --tag-index: 5; }