/* ============================================================
   ALTULA — products.css
   Product list page: series chips, catalog grid, pagination.
   Page hero & filter toolbar styles are shared in common.css;
   header / footer / product-card base styles come from style.css.
   Breakpoints (aligned with style.css):
     < 768px            mobile
     768px — 1024px     tablet portrait
     1024px — 1920px    desktop
     >= 1920px          2K / 4K
   ============================================================ */

/* ============================================================
   Catalog grid (cards reuse .product-card from style.css)
   ============================================================ */

/* Series filter tabs: show title case from data.js instead of all caps */
.catalog-toolbar .catalog-filter__btn {
  text-transform: none;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Card entrance animation, staggered via --d (set in archive-product.php) */
.catalog-grid .product-card {
  animation: catalog-card-in 0.5s ease both;
  animation-delay: var(--d, 0s);
}

@keyframes catalog-card-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Series badge on the card image */
.catalog-grid .product-card__media {
  position: relative;
}

.product-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.3rem 0.75rem;
  background-color: rgba(13, 27, 36, 0.72);
  backdrop-filter: blur(0.25rem);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

/* "View Details" link sits at the bottom-right of the card body */
.catalog-grid .product-card .link-more {
  align-self: flex-end;
}

/* Empty state (shown when a series has no products) */
.catalog-empty {
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  text-align: center;
  color: var(--color-muted);
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- >= 1920px : 2K / 4K --- */
@media (min-width: 120rem) {
  .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- 768px — 1024px : tablet portrait --- */
@media (max-width: 64rem) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Neutralize the homepage "last card spans the row" rule from style.css */
  .catalog-grid .product-card:last-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  .catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- < 768px : mobile --- */
@media (max-width: 48rem) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .product-card__tag {
    top: 0.875rem;
    left: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-grid .product-card {
    animation: none;
  }
}