/* Heroes page styles – modern, responsive, consistent with base.css */

.page-hero {
  padding: var(--space-56) 0 var(--space-32);
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(0,229,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.15));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero .breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
}
.page-hero .breadcrumbs ol { display: flex; gap: 8px; align-items: center; list-style: none; padding: 0; margin: 0; }
.page-hero .breadcrumbs li { opacity: 0.9; }
.page-hero .breadcrumbs li+li::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; opacity: 0.4; margin: 0 6px; }
.page-hero p { color: var(--color-text-muted);  }

.section { padding: var(--space-40) 0; }

/* Filters */
.filter-bar { margin-top: var(--space-24); }
.filters-form .filters-row { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
.filter-group .filter-label { font-weight: 700; display: block; margin-bottom: 6px; }
.filter-group .filter-help { color: var(--color-text-muted); font-size: var(--text-xs); }
.roles .roles-options { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.filter-actions { display: flex; align-items: center; gap: var(--space-16); }
.results-count { color: var(--color-text-muted); }

@container (min-width: 640px) {
  .filters-form .filters-row { grid-template-columns: 2fr 2fr auto; align-items: end; }
}

/* Heroes grid */
.heroes-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 640px) { .heroes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .heroes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-card { display: grid; gap: var(--space-12); grid-template-rows: auto auto 1fr auto; }
.hero-card .hero-media { border-radius: var(--radius-md); overflow: hidden; }
.hero-card .hero-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.hero-points { color: var(--color-text-muted); padding-left: 1rem; }
.hero-points li { margin: 6px 0; }

/* Top picks */
.top-picks { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .top-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick-title { display: flex; align-items: center; gap: 10px; }

/* Guides */
.guides-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-card p { color: var(--color-text-muted); }

/* Counterpicks */
.counter-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .counter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Patch list */
.patch-list details { padding: var(--space-16) var(--space-16); }
.patch-list details+details { margin-top: var(--space-12); }
.patch-list summary { cursor: pointer; }
.patch-list ul { margin-top: var(--space-12); color: var(--color-text-muted); padding-left: 1rem; }

/* Skins gallery */
.skins-gallery { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .skins-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skin-item figcaption { padding: 10px; font-size: var(--text-sm); color: var(--gray-300); background: rgba(255,255,255,0.03); }

/* Videos */
.video-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-item iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; display: block; }

/* Community */
.community-cards { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .community-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.community-cta { margin-top: var(--space-24); display: flex; gap: var(--space-16); flex-wrap: wrap; }

/* Accessibility helpers */
[hidden] { display: none !important; }