/* Home Theme Patch - makes Home match the Classes theme.
   This file extends the classes page styles and lightly overrides Home.
   Safe to add without touching existing files. */

/* 1) Import the Classes page theme so we reuse its variables & components */
@import url("/assets/css/classes_style.css");

/* 2) Align the home background to the Classes look */
body{
  background:
    radial-gradient(1200px 800px at 10% 5%, rgba(202,162,75,0.05), transparent 60%),
    radial-gradient(1000px 700px at 90% 100%, rgba(42,122,83,0.05), transparent 60%),
    linear-gradient(180deg, #1a1510, #0e0b0a 60%);
  color: #2b221a;
  font-family: "Cinzel","Cormorant Garamond","Goudy Old Style",Georgia,"Times New Roman",serif;
}

/* 3) Home hero uses the parchment/card vibe from the Classes cards */
.home-hero{
  margin: clamp(16px, 5vw, 48px) auto 10px;
  max-width:1200px;
  padding: 0 16px;
}
.home-hero .sc-card{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
}
@media (max-width: 940px){
  .home-hero .sc-card{ grid-template-columns: 1fr; }
}

/* Image banner area (keeps your castle vibe but framed like a card) */
.hero-img{
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #c8b07e;
  background:
    linear-gradient(180deg, rgba(234,215,177,0.45), rgba(220,198,155,0.25)),
    url('/assets/images/castle-bg.jpg') center/cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}

/* Text column */
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding: 10px 14px 16px 0;
}
.hero-title{
  margin:0 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color:#2b221a;
  letter-spacing:.02em;
}
.hero-sub{ color:#5a4a3b; margin:0; }

/* 4) Sections below hero reuse the Classes grid/cards */
.home-sections{ max-width:1200px; margin: 8px auto 48px; padding: 0 16px; }
.home-head{
  display:flex; align-items:center; gap:14px;
  color:var(--sc-parchment);
  margin: 14px 0 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.home-head .crest{
  width:42px; height:42px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--sc-gold), var(--sc-gold-2), var(--sc-gold));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05), inset 0 0 0 3px rgba(0,0,0,0.4);
}

/* Utility for tiny headers inside cards */
.muted{ color:#57462f; font-size:.95rem; }