/* Strategy page specific styles (kept minimal, complementing base.css) */
.hero { padding-block: var(--space-12) var(--space-10); background: radial-gradient(800px 400px at 10% -10%, rgb(18 26 45 / 0.40), transparent 60%); }
.hero__grid { display: grid; gap: var(--space-8); grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.hero__media { max-width: 100%; overflow: hidden; }
.hero__media img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, rgb(14 20 36 / 0.85), rgb(14 20 36 / 0.65)); backdrop-filter: blur(6px); border-block: 1px solid var(--gray-700); }
.toc__list { display: grid; grid-auto-flow: column; gap: var(--space-6); overflow-x: auto; padding: var(--space-3) 0; white-space: nowrap; }
.toc__list a { color: var(--gray-200); font-weight: 600; }
.toc__list a.is-active { color: var(--gray-50); text-decoration: underline; text-decoration-color: rgb(143 60 41 / 0.6); }

.strategy-grid { margin-block: var(--space-10); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.strategy-grid > .card { grid-column: span 6; }
.strategy-grid > #mid-game.card, .strategy-grid > #combo-strategies.card { grid-column: span 12; }

@media (max-width: 1024px) { .strategy-grid { grid-template-columns: 1fr; } .strategy-grid > .card { grid-column: span 1; } }

.callout { margin-block: var(--space-8) var(--space-14); }
.stack-mobile { gap: var(--space-5); }
@media (max-width: 680px) { .stack-mobile { flex-direction: column; align-items: stretch; } }

/* Details tweaks */
details { border: 1px solid var(--gray-700); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background-color: var(--color-surface-1); margin-bottom: var(--space-3); }
details[open] { background-color: var(--color-surface-2); }
details summary { cursor: pointer; font-weight: 600; }

/* Focus ring for in-page anchors */
[id] { scroll-margin-top: 96px; }

/* Mobile optimization - prevent horizontal scroll */
@media (max-width: 900px) {
  .hero { padding-block: var(--space-8) var(--space-6); }
  .hero__grid { gap: var(--space-6); }
  .hero__actions { gap: var(--space-3); }
  
  .toc__list { gap: var(--space-4); padding: var(--space-3) var(--space-2); }
  
  .strategy-grid { margin-block: var(--space-6); gap: var(--space-4); }
  
  img, picture, figure, video {
    max-width: 100%;
    height: auto;
  }
  
  .card { padding: var(--space-4); }
  .card__header { margin-bottom: var(--space-3); }
  
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  pre, code { max-width: 100%; overflow-x: auto; }
}