/* AVHS Centennial — Modern dark theme with AV purple/yellow accents */
:root{
  --av-purple:#7f1e9c;
  --av-yellow:#f0d91a;
  --surface-0:#0b0d11;
  --surface-1:#10131a;
  --surface-2:#151a22;
  --text-0:#ffffff;
  --text-1:rgba(255,255,255,.78);
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,0.25);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
}
html,body{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(127,30,156,.12), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(240,217,26,.10), transparent 60%),
    linear-gradient(180deg, var(--surface-0), #0a0c10 50%, var(--surface-0));
  color:var(--text-0);
}
html{ scroll-behavior:smooth; }
/* Header / Navbar */
.app-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(12,14,18,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(90deg, var(--av-purple), var(--av-yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand img{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.app-shell{
  display:grid; grid-template-columns:300px 1fr; gap:24px; padding:20px 20px 28px;
}
/* Sidebar filters */
.panel{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:16px;
}
.panel h5{ margin: 6px 0 12px 0; color:var(--text-0); }
.muted{ color:var(--text-1); }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text-1); font-size:.9rem;
}
.controls .form-control{
  background:rgba(255,255,255,.08); color:var(--text-0);
  border:1px solid var(--border); border-radius:999px;
}
.controls .btn{
  color:var(--text-0); border-color:var(--border); border-radius:999px;
  background:rgba(255,255,255,.06);
}
.controls .btn:hover{
  background:linear-gradient(90deg, rgba(127,30,156,.25), rgba(240,217,26,.25));
  border-color:transparent;
}
/* Main content */
.summary{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; color:var(--text-1);
}
.year-section{
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow);
  margin-bottom:18px; overflow:hidden;
}
.year-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.year-title{
  display:inline-block; font-weight:900; padding:.35rem .9rem; border-radius:12px;
  background:rgba(0,0,0,.45); border:1px solid var(--border);
}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px; padding:14px;
}
.card{
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
}
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card .card-body{ padding:10px 12px; }
.badge{
  display:inline-block; padding:.2rem .55rem; border-radius:999px;
  background:linear-gradient(90deg, var(--av-purple), var(--av-yellow));
  color:#111; font-weight:800; font-size:.7rem;
}
/* Modal */
.modal-content{ background:var(--surface-1); border:1px solid var(--border); }
.modal .carousel-inner img{ max-height:80vh; object-fit:contain; background:#000; }
/* Footer */
.footer{
  margin: 22px 20px 28px; padding:12px 16px; border-top:1px solid var(--border);
  color:var(--text-1);
}
@media (max-width: 992px){
  .app-shell{ grid-template-columns:1fr; }
}

/* Hero section with Amador colors */
.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:68vh; padding:60px 16px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(127,30,156,.35), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(240,217,26,.28), transparent 60%),
    linear-gradient(29deg, rgba(0,212,255,0.15) 0%, rgba(127,30,156,0.35) 25%, rgba(240,217,26,0.25) 100%);
  border-bottom:1px solid var(--border);
}
.hero-inner{
  max-width:960px;
}
.hero img{
  width:88px; height:88px; margin-bottom:12px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.hero h1{
  font-weight:900; letter-spacing:.3px; margin: 6px 0 8px 0;
}
.hero p{ color:var(--text-1); margin:0 0 16px 0; }
.hero .cta{
  display:inline-flex; gap:10px; align-items:center;
}
.hero .btn-primary{
  background:linear-gradient(90deg, var(--av-purple), var(--av-yellow));
  color:#111; border:none; border-radius:999px; padding:.6rem 1rem; font-weight:800;
}
.hero .btn-secondary{
  background:rgba(255,255,255,.08); color:var(--text-0); border:1px solid var(--border);
  border-radius:999px; padding:.6rem 1rem; font-weight:700;
}