/* Infographics page-specific styles (scoped and minimal) */
:root {
  --ig-primary: hsl(12 88% 54%);
  --ig-secondary: hsl(200 90% 45%);
  --ig-accent: hsl(48 96% 54%);
  --ig-warm: hsl(18 90% 62%);
  --ig-tense: hsl(342 85% 54%);
  --ig-calm: hsl(200 70% 48%);
  --ig-bg: hsl(0 0% 99%);
}

.infographics-page .container { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }

/* Hero */
.hero { background: var(--ig-bg); }
.hero__content { padding: clamp(2rem, 3vw, 3rem) 0; }
.hero__title { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.2; }
.hero__subtitle { margin-top: .5rem; color: hsl(0 0% 30%); max-width: 60ch; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.hero__figure { margin: 0; }
.hero__figure img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Subnav */
.subnav { position: sticky; top: 0; z-index: 20; background: white; border-bottom: 1px solid hsl(0 0% 90%); }
.subnav__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .25rem; list-style: none; margin: 0; padding: .5rem 0; }
.subnav__link { display: block; text-align: center; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; color: hsl(222 15% 20%); background: hsl(0 0% 98%); border: 1px solid hsl(0 0% 90%); }
.subnav__link:hover, .subnav__link:focus { outline: none; border-color: var(--ig-secondary); color: var(--ig-secondary); background: hsl(0 0% 100%); }
.subnav__link.is-active { background: var(--ig-secondary); color: white; border-color: var(--ig-secondary); }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-block: clamp(1.5rem, 2.5vw, 2rem); }
.card { grid-column: span 12; background: white; border: 1px solid hsl(0 0% 90%); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px hsl(0 0% 0% / .04); }
.card--media .card__figure img { aspect-ratio: 5 / 3; object-fit: cover; }

@media (min-width: 800px){
  .card { grid-column: span 6; }
}

.card__header { padding: 1rem 1rem 0.5rem; border-bottom: 1px solid hsl(0 0% 94%); }
.card__kicker { margin: .25rem 0 0; color: hsl(0 0% 35%); font-size: .95rem; }
.card__body { padding: 1rem; display: grid; gap: .75rem; }
.card__footer { padding: .75rem 1rem 1rem; display: flex; gap: .5rem; justify-content: space-between; flex-wrap: wrap; align-items: center; }

/* Lists */
.list { padding-left: 1.25rem; }
.list--ordered { list-style: decimal; padding-left: 1.5rem; }

/* Buttons - align with base styles but scoped */
.btn { cursor: pointer; border: 1px solid transparent; border-radius: 10px; padding: .6rem .9rem; font-weight: 600; }
.btn-primary { background: var(--ig-primary); color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--ig-accent); color: #222; }
.btn-secondary:hover { filter: brightness(0.97); }
.btn-ghost { background: transparent; border-color: hsl(0 0% 85%); color: hsl(222 15% 20%); }
.btn-ghost:hover { border-color: var(--ig-secondary); color: var(--ig-secondary); }
.btn-link { background: transparent; color: var(--ig-secondary); text-decoration: underline; }

/* Bars infographic */
.bars { display: grid; gap: .5rem; margin-top: .25rem; }
.bar { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: .75rem; }
.bar__label { font-weight: 600; color: hsl(222 15% 20%); }
.bar__value { position: relative; display: block; height: 10px; background: hsl(0 0% 94%); border-radius: 999px; overflow: hidden; }
.bar__value::before { content: ""; position: absolute; inset: 0; width: var(--value, 50%); background: linear-gradient(90deg, var(--ig-secondary), var(--ig-primary)); border-radius: 999px; }

/* Legend swatches */
.legend { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.legend__item { display: inline-flex; gap: .5rem; align-items: center; }
.legend__swatch { inline-size: 18px; block-size: 18px; border-radius: 4px; border: 1px solid hsl(0 0% 80%); display: inline-block; }
.legend__swatch--warm { background: var(--ig-warm); }
.legend__swatch--tense { background: var(--ig-tense); }
.legend__swatch--calm { background: var(--ig-calm); }

/* Pills */
.pill-grid { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill { padding: .4rem .7rem; border-radius: 999px; font-weight: 600; color: white; }
.pill--gameplay { background: var(--ig-secondary); }
.pill--story { background: var(--ig-primary); }
.pill--art { background: var(--ig-accent); color: #222; }

/* Quotes */
.quote { margin: 0; padding: .75rem 1rem; border-left: 4px solid var(--ig-secondary); background: hsl(0 0% 98%); border-radius: 8px; }
.quote + .quote { margin-top: .5rem; }

/* CTA */
.cta { margin-block: 2rem 3rem; }
.cta__inner { background: linear-gradient(135deg, hsl(200 90% 98%), hsl(48 100% 97%)); border: 1px solid hsl(0 0% 90%); padding: 1.25rem; border-radius: 16px; display: grid; gap: .5rem; }
.cta__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Accessibility helpers */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }