/* Category Tile
   Color dot + category name + article count
   Used on: homepage categories section */

.category-tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.category-tile:hover {
  border-color: color-mix(in srgb, var(--category-color, var(--text)) 50%, transparent);
  background: color-mix(in srgb, var(--category-color, var(--meta)) 8%, transparent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.category-tile__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--category-color, var(--meta));
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.category-tile:hover .category-tile__dot {
  transform: scale(1.3);
}

.category-tile__name {
  font-weight: 600;
  color: var(--heading);
}

.category-tile__count {
  color: var(--meta);
  font-size: var(--text-xs);
}

/* Grid layout for category tiles */
.category-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}