/* Sample reports page (extends home.css sr-* styles). */
.sr-hero { padding: 80px 0 40px; text-align: center; background: linear-gradient(180deg, #FDFDFE, var(--off-white-60)); }
.sr-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 56px; letter-spacing: -0.025em; line-height: 1.08; margin: 20px auto; max-width: 820px; }
.sr-hero p { font-size: 19px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; line-height: 1.5; }
.sr-body { padding: 48px 0 96px; }
.sr-filters-wrap { position: sticky; top: 84px; z-index: 30; }
.sr-count { font-size: 14px; color: var(--color-text-subtle); margin-bottom: 24px; }
.sr-count strong { color: var(--color-text); }

@media (max-width: 768px) {
  /* Phones: don't pin the filter bar to the top while scrolling. The bar
   * is two-row at this width (INDUSTRY pills + REGION pills), so sticking
   * it eats valuable scroll real-estate that the visitor needs to read
   * the card grid below. Let it flow with the rest of the page. */
  .sr-filters-wrap { position: static; top: auto; }
}
@media (max-width: 400px) {
  /* Very narrow phones (≤400px — Samsung S8+ at 360px is the practical
   * lower bound): the .sr-meta row was a single-row flex with the title
   * block on the left and the Share + Download buttons clustered on the
   * right. At this width the two buttons would overflow off the right
   * edge of the card. Switch the row to wrap so the action buttons drop
   * onto their own line beneath the title, full-width and tappable. */
  .sr-meta { flex-wrap: wrap; gap: 12px; }
  .sr-meta > *:first-child { flex: 1 1 100%; min-width: 0; }
  .sr-actions { flex: 1 1 100%; gap: 8px; }
  .sr-actions .sr-btn { flex: 1; justify-content: center; }
}