/* Components page styles (kept minimal, leveraging base.css) */
.hero-components {
  background: linear-gradient(180deg, rgba(13,34,58,0.35), rgba(13,34,58,0));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-24);
  align-items: center;
}
.hero-copy p { color: var(--color-text-muted); }
.hero-cta { margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap; }

/* Components grid */
.components-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-24);
}
.components-grid .component p { color: var(--color-text); }

/* Filters */
.components-filter { margin-top: var(--space-16); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; }
.filter-chip input { accent-color: var(--color-primary); }

/* Galleries */
.gallery-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-16); }
.visuals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-16); }

/* Expansions and testimonials */
.expansions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }

/* Responsive */
@media (max-width: 1024px) {
  .components-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .gallery-2, .visuals-grid, .components-grid, .expansions-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
}