/*
 * Tutorials hub page — scoped styling.
 * Only enqueued on the page using template-pages/template-tutorials.php.
 * Reuses the theme's existing HSL design tokens, same as tutorial-series.css.
 */

.openpress-tutorials-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.openpress-tutorials-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.openpress-tutorials-pill:hover {
  border-color: hsl(var(--accent));
  color: hsl(var(--accent));
}
.openpress-tutorials-pill.is-active {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.openpress-tutorials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .openpress-tutorials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .openpress-tutorials-grid { grid-template-columns: 1fr; }
}
.openpress-tutorials-card.is-hidden {
  display: none;
}