/* Categories page specific styles (kept minimal; relies on base.css) */

.breadcrumb-wrap { padding-block: var(--space-4); }

.category-hero { padding-block: var(--space-8); }
.category-hero .controls-row { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-5); margin-top: var(--space-4); }
.category-hero .quick-filters { margin-top: var(--space-4); }
.filters-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; user-select: none; }
.filter-chip input { width: 16px; height: 16px; }

.categories-section { padding-block: var(--space-6); }
.categories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }

.category-card { padding: 0; overflow: hidden; }
.category-link { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; height: 100%; }
.category-link:hover .category-media img { transform: scale(1.03); }

.category-media { aspect-ratio: 4 / 3; background: var(--gray-50); }
.category-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-medium) var(--easing-default); }

.category-card .card-body { padding: var(--space-5); display: grid; gap: var(--space-3); }
.category-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.cta-link { color: var(--color-primary); font-weight: 600; }

.more-categories { padding-block: var(--space-8); }
.more-card { margin-top: var(--space-4); }
.more-cta { display: flex; gap: var(--space-4); margin-top: var(--space-5); }

/* Responsive */
@media (max-width: 1024px) {
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-hero .controls-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .categories-grid { grid-template-columns: 1fr; }
  .more-cta { flex-direction: column; }
}