/* Themes page specific styles. Reuses base.css utilities and components. */
.hero-themes {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(46,107,255,0.08), transparent),
              radial-gradient(900px 500px at 90% 0%, rgba(57,255,20,0.08), transparent);
}
.hero-themes .hero-inner { display: grid; gap: var(--space-6); }
.hero-themes .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4) 0; list-style: none; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs li[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.breadcrumbs li + li::before { content: "/"; color: var(--gray-400); margin: 0 var(--space-2); }

.themes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.theme-card { overflow: hidden; }
.theme-media { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4); }
.theme-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-700); font-weight: 600; font-size: var(--fs-sm); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.35; }

.section-cta .cta-card { text-align: center; background: linear-gradient(180deg, var(--color-surface), color-mix(in oklab, var(--color-primary) 4%, var(--color-surface))); }

/* Subtle reveal on scroll */
.theme-card { opacity: 0; transform: translateY(10px); transition: opacity var(--duration-slow) var(--ease-spring), transform var(--duration-slow) var(--ease-spring); }
.theme-card.is-visible { opacity: 1; transform: translateY(0); }