/* ======================================================================
   File   : lore-page.css
   Scope  : ONLY inside <div class="lore-page">…</div>
   Goal   : Sidebar LEFT, blue story panel RIGHT, tidy spacing,
            square sidebar image, blue King’s Code CTA with white text,
            and a constrained hero image on lore pages.
   ====================================================================== */

/* --- Title & header spacing --- */
.lore-page .lore-page-title{
  font-family:'Luckiest Guy', cursive;
  font-size:2.2rem;
  color:#1261A0;
  letter-spacing:1.5px;
  margin:0 0 .5rem 0;
  padding-bottom:.4rem;
  border-bottom:2px solid #1261A0;
}
.lore-page .lore-header{ margin-bottom:.75rem; }

/* --- HERO on lore page: fixed frame + crop --- */
.lore-page .lore-hero-banner{
  margin:.5rem 0 1rem 0;   /* breathing room under hero */
  height:340px;            /* adjust if you prefer 300–380px */
  overflow:hidden;
  border-radius:8px;
}
.lore-page .lore-hero-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* --- Layout: sidebar LEFT + generous gap --- */
.lore-page .lore-container{
  display:grid;
  grid-template-columns:300px 1fr;   /* narrow sidebar | story */
  column-gap:44px;
  grid-template-areas:"aside main";
  align-items:start;
}
.lore-page .lore-side{ grid-area:aside; }
.lore-page .lore-main{ grid-area:main; }

/* --- Story panel (RIGHT) --- */
.lore-page .lore-story{
  background:#d0e7ff;
  border:1px solid #b8cff1;
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 6px rgba(18,97,160,.08);
}

/* --- Sidebar cards --- */
.lore-page .lore-side .card{
  background:#fff;
  border:1px solid #e6e9ee;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(18,97,160,.06);
  padding:1rem;
  margin:0 0 1rem 0;
  box-sizing:border-box;
}
.lore-page .card-heading{
  font-family:'Luckiest Guy', cursive;
  font-size:1.1rem;
  color:#1261A0;
  margin:0 0 .6rem 0;
  letter-spacing:.5px;
}
.lore-page .card-body{ line-height:1.6; }

/* --- Sidebar image (matches your <img class="sidebar-square"> too) --- */
.lore-page .image-card .card-body{ padding:.5rem; }
.lore-page .image-card figure{ margin:0; }
.lore-page .image-card a.image-card-link{ display:block; }
.lore-page .image-card img,
.lore-page .image-card picture img,
.lore-page img.sidebar-square{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  max-height:420px;
}

/* --- Links inside lore page only --- */
.lore-page a{ color:#1976D2; text-decoration:none; }
.lore-page a:hover{ color:#0E4A7A; text-decoration:underline; }
.lore-page a:visited{ color:#115293; }

/* --- “More Stories” list tightening --- */
.lore-page .more-lore-card .card-body ul{ margin:0; padding-left:1rem; }
.lore-page .more-lore-card .card-body li{ margin:.25rem 0; }

/* --- King’s Code CTA: blue panel + white button text --- */
.lore-page .kings-code-cta{
  background:#d0e7ff;
  border:1px solid #b8cff1;
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 6px rgba(18,97,160,.08);
}
.lore-page .kings-code-cta__link{
  display:block;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  color:#fff !important;         /* force white text */
  background:#1261A0;
  padding:12px 16px;
  border-radius:8px;
  line-height:1.25;
}
.lore-page .kings-code-cta__link:hover{ background:#0e4a7a; }

/* --- Simple scoped modal, in case global modal styles are missing --- */
.lore-page .modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
}
.lore-page .modal-content{
  background:#fff;
  max-width:720px;
  margin:6% auto;
  padding:1.25rem 1.5rem;
  border-radius:12px;
  position:relative;
  box-shadow:0 0 20px rgba(0,0,0,.25);
}
.lore-page .modal-close{
  position:absolute;
  top:10px; right:14px;
  font-size:1.6rem;
  color:#777;
  cursor:pointer;
  border:0; background:none;
}

/* --- Responsive: stack columns (sidebar first) --- */
@media (max-width:980px){
  .lore-page .lore-container{
    grid-template-columns:1fr;
    grid-template-areas:
      "aside"
      "main";
    column-gap:0;
  }
  .lore-page .lore-hero-banner{ height:260px; }
}