/*
 * explore.css — Explore Page Styles
 * Phase 7 — Meu Planetinha
 *
 * Styles for the Explorar Jogos page: heading, sticky filter bar,
 * planet pill buttons, mobile dropdown, grid layout, empty state.
 *
 * Depends on: base.css (tokens), cards.css (card grid base), componentes.css (btn-primario)
 * Load after: cards.css
 */

/* ===========================================
   HERO / HEADING
   =========================================== */

.explore-hero {
  padding: var(--espaco-2xl) 0 var(--espaco-lg);
  text-align: center;
}

.explore-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-4xl);
  font-weight: 400;
  color: var(--cor-texto);
  margin: 0 0 var(--espaco-sm);
}

.explore-subtitulo {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-lg);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ===========================================
   FILTER BAR — sticky below nav
   =========================================== */

.explore-filter-bar {
  position: sticky;
  top: var(--nav-altura);  /* nav height token */
  z-index: 90;
  background: rgba(13, 26, 58, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--espaco-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===========================================
   DESKTOP PILL BUTTONS — #explore-filters
   =========================================== */

.explore-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espaco-sm);
}

.explore-filters:empty {
  display: none;
}

.explore-filter-btn {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 700;
  padding: var(--espaco-xs) var(--espaco-lg);
  min-height: 2.75rem; /* 44px minimum touch target (WCAG 2.5.5) */
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition:
    background var(--duracao-rapida) var(--easing-padrao),
    border-color var(--duracao-rapida) var(--easing-padrao),
    color var(--duracao-rapida) var(--easing-padrao),
    transform var(--duracao-rapida) var(--easing-padrao);
  white-space: nowrap;
}

.explore-filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.explore-filter-btn:active {
  transform: translateY(1px);
}

/* "Todos" button — always looks the same, never gets active highlight.
   Context decision: "Todos" has no active/highlighted state. */
.explore-filter-btn[data-planet="todos"] {
  border-color: rgba(255, 255, 255, 0.4);
}

/* ===========================================
   PLANET-ACTIVE STATES — per data-planet
   =========================================== */

.explore-filter-btn[data-planet="calculon"].explore-filter-btn--active {
  background: var(--planeta-calculon-cor);
  border-color: var(--planeta-calculon-cor);
  color: var(--planeta-calculon-texto);
}

.explore-filter-btn[data-planet="letrion"].explore-filter-btn--active {
  background: var(--planeta-letrion-cor);
  border-color: var(--planeta-letrion-cor);
  color: var(--planeta-letrion-texto);
}

.explore-filter-btn[data-planet="naturox"].explore-filter-btn--active {
  background: var(--planeta-naturox-cor);
  border-color: var(--planeta-naturox-cor);
  color: var(--planeta-naturox-texto);
}

.explore-filter-btn[data-planet="terramund"].explore-filter-btn--active {
  background: var(--planeta-terramund-cor);
  border-color: var(--planeta-terramund-cor);
  color: var(--planeta-terramund-texto);
}

.explore-filter-btn[data-planet="globish"].explore-filter-btn--active {
  background: var(--planeta-globish-cor);
  border-color: var(--planeta-globish-cor);
  color: var(--planeta-globish-texto);
}

/* ===========================================
   MOBILE DROPDOWN — ≤640px
   =========================================== */

.explore-filters-mobile {
  display: none;
}

.explore-filter-select {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  font-weight: 700;
  padding: var(--espaco-sm) var(--espaco-lg);
  border-radius: var(--borda-raio-lg);
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(13, 26, 58, 0.8);
  color: #FFFFFF;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espaco-md) center;
  padding-right: var(--espaco-2xl);
}

.explore-filter-select:focus {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ===========================================
   GAME GRID — explicit column overrides
   =========================================== */

.explore-games {
  padding: var(--espaco-xl) 0 var(--espaco-2xl);
}

.explore-games .game-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ===========================================
   EMPTY STATE — explore page variant
   =========================================== */

.explore-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--espaco-3xl) var(--espaco-lg);
}

.explore-empty-icon {
  font-size: var(--texto-4xl);
  display: block;
  margin-bottom: var(--espaco-md);
  opacity: 0.6;
}

.explore-empty-text {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-lg);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--espaco-lg);
}

.explore-empty-btn {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  font-weight: 700;
  padding: var(--espaco-sm) var(--espaco-xl);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  transition:
    background var(--duracao-rapida) var(--easing-padrao),
    transform var(--duracao-rapida) var(--easing-padrao);
}

.explore-empty-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* ===========================================
   RESPONSIVE
   =========================================== */

/* Tablet: 2 columns, 641–1024px */
@media (max-width: 1024px) {
  .explore-games .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: ≤640px */
@media (max-width: 640px) {
  .explore-titulo {
    font-size: var(--texto-2xl);
  }

  .explore-subtitulo {
    font-size: var(--texto-base);
  }

  /* Hide desktop pill buttons, show mobile dropdown */
  .explore-filters {
    display: none;
  }

  .explore-filters-mobile {
    display: flex;
    justify-content: center;
  }

  /* 1 column grid */
  .explore-games .game-grid {
    grid-template-columns: 1fr;
    gap: var(--espaco-lg);
  }

  .explore-games .game-card {
    max-width: 100%;
  }
}