/* Lore page specific styles (focused, no duplication of base.css components) */

.lore-hero { padding: var(--space-11) 0; color: #e9eef9; position: relative; }
.lore-hero .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.lore-hero .hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.lore-hero .hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

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

/* Media frame with blueprint/stone accent */
.media-frame { border: 2px solid rgba(255,255,255,0.2); border-radius: var(--radius-lg); overflow: hidden; background: #0f2a56; }

/* TOC and search */
.lore-search { margin-bottom: var(--space-5); }
.toc .toc-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.toc .toc-list a { display: inline-block; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 600; }
.toc .toc-list a.is-active { border-color: var(--color-accent-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* Sections */
.section-title { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); }

/* Timeline styling */
.timeline { counter-reset: step; list-style: none; padding: 0; margin-top: var(--space-5); display: grid; gap: var(--space-5); }
.timeline li { position: relative; padding-left: 2.5rem; }
.timeline li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.15rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--color-primary); color: #fff; border-radius: var(--radius-round); box-shadow: var(--shadow-sm); font-weight: 700; }
.timeline li + li { border-top: 1px dashed var(--gray-300); padding-top: var(--space-4); }

/* CTA wrap in quests */
.cta-wrap { margin-top: var(--space-5); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Search highlight */
mark { background: color-mix(in srgb, var(--color-accent) 35%, #fff); padding-inline: 2px; border-radius: 3px; }

/* Utility to hide on filter */
.is-hidden { display: none !important; }