/**
 * Project Archive Styles
 * 
 * @package perfectfinish
 * @version 1.0.0
 * @author Kay Jilesen
 */

/* Hero Section */
.project-archive-hero {
  @apply min-h-[400px];
}

.project-archive-hero__breadcrumbs {
  @apply text-white/90;
}

.project-archive-hero__breadcrumbs a {
  @apply text-white/90 no-underline transition-colors duration-300;
}

.project-archive-hero__breadcrumbs a:hover {
  @apply text-white;
}

.project-archive-hero__breadcrumbs .breadcrumb-current {
  @apply text-white/70;
}

/* Filters Section */
.project-archive-filters {
  @apply transition-all duration-300;
}

.project-archive-filter-btn {
  @apply py-2 px-5 bg-transparent border-2 border-grey/10 rounded-lg text-grey-dark text-sm font-medium cursor-pointer transition-all duration-300 whitespace-nowrap;
}

.project-archive-filter-btn:hover {
  @apply border-secondary text-secondary;
  background-color: rgba(26, 22, 3, 0.05);
}

.project-archive-filter-btn.active {
  @apply bg-secondary border-secondary text-white;
}

/* Projects Grid */
.project-archive-grid__wrapper {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    @apply opacity-0;
    transform: translateY(20px);
  }
  to {
    @apply opacity-100;
    transform: translateY(0);
  }
}

.project-archive-item {
  @apply opacity-100 transition-all duration-300;
}

.project-archive-item.hidden {
  @apply hidden;
}

.project-archive-item__image-wrapper {
  @apply bg-grey-light;
}

.project-archive-item__link {
  @apply no-underline text-inherit;
}

.project-archive-item__excerpt {
  @apply line-clamp-2;
}

/* Pagination */
.project-archive-pagination {
  @apply flex justify-center;
}

.project-archive-pagination .pagination {
  @apply flex gap-2 items-center;
}

.project-archive-pagination .pagination a,
.project-archive-pagination .pagination span {
  @apply py-2 px-4 border border-grey/10 rounded-md no-underline text-grey-dark transition-all duration-300;
}

.project-archive-pagination .pagination a:hover {
  @apply bg-secondary border-secondary text-white;
}

.project-archive-pagination .pagination .current {
  @apply bg-secondary border-secondary text-white;
}

/* Empty State */
.project-archive-empty {
  @apply min-h-[300px] flex items-center justify-center;
}

/* Responsive */
@media (max-width: 768px) {
  .project-archive-hero {
    @apply min-h-[300px];
  }
  
  .project-archive-filters__wrapper {
    @apply overflow-x-auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .project-archive-filters__wrapper::-webkit-scrollbar {
    @apply hidden;
  }
  
  .project-archive-filter-btn {
    @apply flex-shrink-0;
  }
}