/* Strategy Page Styles - CityGaerGame */

.strategy-hero {
  background: var(--color-surface-secondary);
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--color-border-light);
}
.strategy-hero .hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .strategy-hero .hero-inner { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.hero-content .hero-lead { color: var(--color-text-muted); max-width: 60ch; }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Content grid with sticky TOC */
.content-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-12); padding-bottom: var(--space-16); }
@media (min-width: 1024px) {
  .content-grid { grid-template-columns: 320px 1fr; align-items: start; }
}

.on-this-page { position: relative; }
@media (min-width: 1024px) {
  .on-this-page { position: sticky; top: calc(var(--space-8)); }
}
.toc-title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.toc-list { display: grid; gap: var(--space-2); }
.toc-list a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); border: 1px solid var(--color-border-light); background: var(--color-surface); transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); }
.toc-list a:hover { background: var(--color-gray-100); }
.toc-list a[aria-current="true"], .toc-list a.active { border-color: var(--color-accent); background: var(--color-primary-pale); color: var(--color-dark-wood); }

/* Sections */
.section { margin-bottom: var(--space-16); }
.section-header .section-intro { color: var(--color-text-muted); }
.media-wrap img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Lists */
.bulleted { list-style: disc; padding-left: 1.25rem; }
.bulleted li { margin-bottom: var(--space-2); }
.steps { list-style: decimal; padding-left: 1.25rem; }
.steps li { margin-bottom: var(--space-2); }

/* Tips filtering */
.tips-list { display: grid; gap: var(--space-4); }

/* Anchor scrolling offset for header */
section[id] { scroll-margin-top: 96px; }

/* High contrast tweak */
@media (prefers-contrast: high) {
  .toc-list a { border-width: 2px; }
}