/* Lore page styles – cyber-brązowy, mroczno-nowoczesny, wysoki kontrast */

.hero-lore {
  position: relative;
  background:
    radial-gradient(800px 500px at 15% 10%, rgba(31, 228, 228, 0.08), transparent 60%),
    radial-gradient(700px 450px at 85% 20%, rgba(255, 209, 102, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0))
  ;
}
.hero-inner { display: grid; gap: var(--space-24); align-items: center; grid-template-columns: 1.1fr 1fr; padding-block: var(--space-56); }
.hero-copy h1 { text-shadow: 0 0 24px rgba(31, 228, 228, 0.25); }
.hero-sub { color: var(--color-text-muted); max-width: 60ch; }
.hero-ctas { display: flex; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-16); }
.hero-visual { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.hero-visual img { display: block; width: 100%; height: auto; }

@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; padding-block: var(--space-40); } }

.section { padding-block: var(--space-48); }
.media-section { padding-block: var(--space-56); }
.media-figure { margin-top: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-md); }
.media-figure figcaption { padding: var(--space-12) var(--space-16); color: var(--color-text-muted); font-size: var(--text-sm); border-top: 1px solid var(--color-border); }

.list-cards .card h3 { margin-bottom: var(--space-8); }

.timeline { display: grid; gap: var(--space-8); margin-top: var(--space-16); padding: 0; list-style: none; }
.timeline li { position: relative; padding: var(--space-12) var(--space-16); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.t-year { font-family: var(--font-mono); color: var(--color-gold); margin-right: var(--space-8); }

.glossary-search { margin-top: var(--space-8); max-width: 720px; }
.glossary { display: grid; gap: var(--space-16); margin-top: var(--space-16); }
.g-item { padding: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(31, 228, 228, 0.03), rgba(255, 209, 102, 0.02) 70%), var(--color-surface); }
.g-item dt { font-weight: 700; font-family: var(--font-display); }
.g-item dd { margin-top: var(--space-8); color: var(--color-text-muted); }

.cta-wrap { padding-block: var(--space-56); background: linear-gradient(180deg, rgba(31, 228, 228, 0.06), rgba(0,0,0,0)); }

/* Focus visibility for anchor groups */
.hero-ctas a:focus-visible { box-shadow: var(--shadow-glow-teal); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 { text-shadow: none; }
}