/* Components page styles — minimal and complementary to base.css */
.components-hero {
  padding: var(--space-15) 0 var(--space-10);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(224,177,92,0.07), transparent 60%),
    radial-gradient(1200px 600px at 110% 0%, rgba(142,34,48,0.06), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0) 40%);
}
.components-hero .hero__inner { display: grid; gap: var(--space-8); }
.components-hero h1 { margin: 0; }
.components-hero p { max-width: var(--measure); }
.components-hero .hero__actions { display: flex; gap: var(--space-6); flex-wrap: wrap; }

.search { margin-top: var(--space-4); }
.search__row { display: flex; gap: var(--space-4); align-items: center; }
.search__help { color: var(--color-muted); margin-top: var(--space-3); font-size: var(--fs-sm); }

.toc { margin-block: var(--space-10); }
.toc__title { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.toc__list a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.toc__list a:hover { filter: brightness(1.05); }

.component-section { margin-block: var(--space-12); }
.media figcaption { color: var(--color-muted); margin-top: var(--space-3); font-size: var(--fs-sm); }

.setup { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.setup li { list-style: decimal; }

.gallery { margin-block: var(--space-12); }
.gallery .card { padding: var(--space-4); }
.gallery figcaption { color: var(--color-muted); margin-top: var(--space-3); text-align: center; font-size: var(--fs-sm); }

/* Search filtering state */
[data-filtered="true"] { display: none !important; }
#no-results { margin-top: var(--space-6); color: var(--color-muted); }

@media (max-width: 640px) {
  .components-hero { padding-top: var(--space-12); }
  .toc__list { grid-template-columns: 1fr; }
}