/* Heroes Page Specific Styles - Baxelplgame.com */

.section-hero-showcase .hero-grid .hero-card .media-frame,
.section-merch .media-frame,
.section-spotlight .spotlight-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-neutral-800);
  box-shadow: var(--shadow-md);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-base);
}

.hero-card:hover .media-frame img,
.card-interactive:hover .media-frame img,
.spotlight-card:hover .spotlight-media img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Lore accordions */
.lore-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--color-primary);
}
.lore-item summary::-webkit-details-marker { display: none; }
.lore-item summary::after {
  content: '\25BC';
  float: right;
  color: var(--color-text-secondary);
  transition: transform var(--transition-base);
}
.lore-item[open] summary::after { transform: rotate(180deg); }

/* Spotlight layout */
.spotlight-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
}
.spotlight-content ul li::before {
  content: '✧';
  color: var(--color-primary);
  font-weight: bold;
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}

@media (max-width: 768px) {
  .spotlight-inner { grid-template-columns: 1fr; }
}

/* Community form feedback */
#community-feedback .alert { margin-top: var(--space-4); }

/* Subtle section separators */
.section-abilities .card ul,
.section-progression .card ul { margin-top: var(--space-3); }