/* Home page specific styles (keeps consistency with base.css) */

.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(26,29,46,0.2) 0%, rgba(26,29,46,0.8) 100%), url('../images/game/gameplay-01.webp') center/cover no-repeat;
  padding: var(--space-16) 0 var(--space-12);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 20% 20%, rgba(232,116,59,0.15) 0%, transparent 60%),
              radial-gradient(50% 50% at 80% 80%, rgba(61,110,77,0.12) 0%, transparent 55%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: var(--z-base);
}

.hero-copy .lead {
  color: var(--color-parchment);
}

.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-search {
  margin-top: var(--space-8);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.search-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); }

.quick-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.section { padding: var(--space-12) 0; }
.section.alt { background: var(--color-background-elevated); }

.media img.pixel-img { box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

@media (max-width: 768px) { .order-mobile { order: -1; margin-bottom: var(--space-6); } }

.palette { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
.palette-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.palette-list li { list-style: none; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); box-shadow: var(--shadow-base); background: var(--swatch); border: 1px solid rgba(0,0,0,0.25); }

.section-banner { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.banner-img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }

/* Card links hover effect within discoverability */
.section .card { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.section .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 20px rgba(232,116,59,0.15); }