/* Lore page styles — minimal, responsive, neon-accented, leveraging base.css */

.page-hero {
  background: radial-gradient(1200px 600px at 20% 10%, rgba(0,255,213,0.06), transparent),
              radial-gradient(1000px 500px at 80% 20%, rgba(255,0,153,0.06), transparent),
              #0b0e14;
  color: var(--text-on-dark, #e9eef5);
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}
.page-hero .hero-inner {
  max-width: var(--container-max, 1160px);
  margin: 0 auto;
  padding: 0 1rem;
}
.page-hero h1 { 
  line-height: 1.15;
  margin-bottom: .5rem;
}
.page-hero .lead {
  opacity: .9;
  margin-bottom: 1rem;
}

#lore-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
  max-width: 720px;
}
#lore-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,255,213,0.25);
  color: inherit;
  padding: .75rem .9rem;
  border-radius: .5rem;
}
#lore-search::placeholder { color: rgba(233,238,245,.6); }
#lore-search-form .btn-primary {
  padding: .75rem 1rem;
}
#lore-search-form .form-help { 
  grid-column: 1 / -1; 
  font-size: .9rem; 
  opacity: .8; 
}

.hero-media { 
  max-width: var(--container-max, 1160px); 
  margin: 1rem auto 0; 
}
.media-frame {
  display: block;
  padding: .5rem;
  border-radius: .75rem;
  border: 1px solid rgba(0,255,213,0.25);
  background:
    linear-gradient(180deg, rgba(255,0,153,0.05), rgba(0,0,0,0)) border-box;
}
.media-frame img { 
  display: block; width: 100%; height: auto; border-radius: .5rem; 
}
.media-frame figcaption { 
  font-size: .9rem; opacity: .8; margin-top: .5rem; 
}

.toc {
  max-width: var(--container-max, 1160px);
  margin: 1rem auto;
  padding: 0 1rem;
}
.toc ol { 
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; 
  counter-reset: toc;
}
.toc li { list-style: none; }
.toc a {
  display: block;
  padding: .6rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,0,153,0.25);
  background: rgba(255,0,153,0.06);
  text-decoration: none;
}
.toc a:focus-visible { outline: 2px solid #00ffd5; outline-offset: 2px; }

.lore-section {
  max-width: var(--container-max, 1160px);
  margin: 2rem auto;
  padding: 0 1rem;
}
.lore-section header { margin-bottom: .75rem; }
.lore-section h2 { margin-bottom: .25rem; }
.lore-section .section-intro { opacity: .85; }

.lore-section details { 
  margin-top: .75rem; 
  border: 1px solid rgba(0,255,213,0.25); 
  border-radius: .5rem; 
  padding: .5rem .75rem; 
  background: rgba(0,255,213,0.05); 
}

.cta-bar {
  border: 1px solid rgba(0,255,213,0.25);
  border-radius: .75rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(0,255,213,0.06), rgba(255,0,153,0.06));
  display: grid;
  gap: .75rem;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.related-links {
  max-width: var(--container-max, 1160px);
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}
.related-links ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.related-links a { 
  display: inline-block; padding: .5rem .75rem; border-radius: .5rem;
  border: 1px solid rgba(255,0,153,0.25); background: rgba(255,0,153,0.06); text-decoration: none; 
}

.breadcrumbs { max-width: var(--container-max, 1160px); margin: .75rem auto 0; padding: 0 1rem; }
.breadcrumbs ol { display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumbs li { opacity: .9; }
.breadcrumbs a[aria-current="page"] { text-decoration: none; pointer-events: none; opacity: .7; }

/* Utilities */
.visually-hidden { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.is-hidden { display: none !important; }