/* Sector overview + sector detail pages. Reuses .sector-index-card,
   .return-row/.return-pill and .pill from ticker.css, and .company-grid/
   .company-card from styles.css, so this file only adds the grid layout. */
.sector-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem;
}
.sector-overview-card { max-width: none; width: 100%; }

/* Sector detail header: a compact data-page header, not the marketing
   .hero (huge title + decorative orb) meant for the homepage. */
.sector-detail-hero {
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  margin-top: 1rem;
}
.sector-detail-title {
  margin: .3rem 0 .3rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.sector-detail-returns { max-width: 340px; margin-top: .75rem; }

@media (max-width: 560px) {
  .sector-overview-grid { grid-template-columns: 1fr; }
  .sector-detail-returns { max-width: none; }
}