/* Strategy Page Styles - ValorantPL */
.hero-strategy {
  padding: var(--space-16) 0 var(--space-10);
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(255,70,85,0.10) 0%, rgba(255,70,85,0) 60%),
    radial-gradient(60% 60% at 80% 60%, rgba(0,217,255,0.10) 0%, rgba(0,217,255,0) 60%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy p { max-width: 60ch; }
.hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); border: 1px solid var(--color-gray-800); }

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

.search-panel { padding: var(--space-8) 0; background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-gray-800); border-bottom: 1px solid var(--color-gray-800); }
.search-controls { display: grid; gap: var(--space-4); }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip.is-active { background: var(--color-primary); color: var(--color-text-primary); border-color: var(--color-primary); box-shadow: var(--glow-primary); }

.sections { display: grid; gap: var(--space-8); padding-top: var(--space-10); padding-bottom: var(--space-16); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }

.media img { border-radius: var(--radius-xl); border: 1px solid var(--color-gray-800); }
.timeline { display: grid; gap: var(--space-4); }
.checklist { display: grid; gap: var(--space-3); }

.cta-next { margin-top: var(--space-4); }

/* Details summary focus/hover */
details {
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-gray-800);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
details[open] { border-color: var(--color-gray-700); }
summary { cursor: pointer; outline: none; }
summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Utility overrides for cards inside grids */
.card > h3 { margin-bottom: var(--space-3); }

/* Result hiding */
.strategy-item[hidden] { display: none !important; }