/* Theme: School Profile (inspired) */
/* Requires Bootstrap 5 baseline */

/* --- Variables (easy to customize) --- */
:root{
  --primary: #0b4b75;    /* deep blue */
  --accent: #d4aa00;     /* warm gold */
  --muted: #6c757d;
  --bg: #f7f9fb;
  --card: #ffffff;
  --radius: 12px;
  --max-width: 1200px;
  --container-padding: 1.25rem;
}

/* --- Global --- */
html,body{
  height:100%;
  font-family: 'Inter', sans-serif;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

.container-narrow{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* --- Topbar / Navbar --- */
.site-topbar{
  background: linear-gradient(90deg, rgba(11,75,117,0.98), rgba(6,45,72,0.98));
  color:#fff;
  font-size:0.95rem;
  padding:0.25rem 0;
}
.site-topbar .small {
  opacity:0.95;
}

/* Main navbar */
.navbar-custom{
  transition: all .28s ease;
  background: rgba(0, 60, 150, 0.95);
  position:sticky;
  top:0;
  z-index:1100;
}
.navbar-custom.scrolled{
  background: rgba(0, 60, 150, 0.95);
  box-shadow: 0 6px 20px rgba(11,75,117,0.08);
}
.navbar-custom .navbar-brand{
  font-weight:700;
  color:var(--primary);
  letter-spacing:0.3px;
}
.navbar-custom .nav-link{
  color: rgba(0, 60, 150, 0.95);
  padding:0.6rem 0.8rem;
}
.navbar-custom.scrolled .nav-link{
  color: #222;
}
.navbar-custom .nav-link:hover{ opacity:0.9; }

/* Accent button */
.btn-accent{
  background:var(--accent);
  color:#1a1a1a;
  font-weight:600;
  border-radius:10px;
  padding:0.5rem 0.9rem;
  box-shadow: 0 6px 18px rgba(212,170,0,0.12);
}

/* --- Hero / Jumbotron --- */
.site-hero{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}
.site-hero .hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:contrast(0.95) saturate(1.05) brightness(0.55);
  transform:scale(1.03);
}
.hero-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,75,117,0.35), rgba(6,45,72,0.45));
}
.hero-inner{
  position:relative; z-index:3;
  padding:3.5rem 1rem;
  max-width:1100px;
}
.hero-title{
  font-size:2.1rem; font-weight:800; margin-bottom:0.5rem;
  text-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hero-sub{
  font-size:1.05rem; color:rgba(255,255,255,0.9); margin-bottom:1rem;
}

/* Hero CTA group */
.hero-ctas { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* --- Section headings --- */


/* --- Cards: Articles / Programs --- */
.card-school{
  border:none; border-radius:var(--radius); background:var(--card); box-shadow: 0 6px 20px rgba(36,50,75,0.06);
  overflow:hidden;
}
.card-school .card-body{ padding:1rem; }
.card-school .card-title{ font-weight:700; color:var(--primary); font-size:1.05rem; }
.card-school .card-excerpt{ color:var(--muted); font-size:0.95rem; margin-top:0.5rem; }

/* grid utilities */
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.75rem; }

/* --- Gallery thumbnails --- */
.gallery-thumb{
  border-radius:10px; overflow:hidden; background:#eee;
}
.gallery-thumb img{ width:100%; height:160px; object-fit:cover; display:block; }

/* --- Agenda list --- */
.agenda-item{
  display:flex; gap:1rem; align-items:flex-start; padding:0.8rem 0; border-bottom:1px dashed #eee;
}
.agenda-item .date{
  min-width:72px; text-align:center; background:#fff; border-radius:8px; padding:0.5rem; box-shadow: 0 4px 12px rgba(11,75,117,0.04);
  font-weight:700; color:var(--primary);
}

/* --- Footer --- */
.site-footer{
  background:#0b2340; color:#d9e8ff; padding:2.25rem 0;
}
.site-footer a{ color: #fff; text-decoration:none; }
.site-footer .footer-brand{ font-weight:800; color:var(--accent); font-size:1.1rem; }
.site-footer small{ color:#c7d8f0; }

/* --- Responsiveness --- */
@media (max-width: 992px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .hero-title{ font-size:1.6rem; }
  .site-hero{ min-height:360px; }
}
@media (max-width: 640px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .container-narrow{ padding:0 1rem; }
  .hero-inner{ padding:2rem 0; }
}

.hero-bg {
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Hero default (desktop) */
.site-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

/* Mobile & small tablets */
@media (max-width: 768px) {
  .site-hero {
    min-height: 100vh;               /* penuh tinggi layar */
    align-items: flex-start;         /* konten naik ke atas */
    padding-top: 4rem;               /* kasih jarak biar tidak nabrak navbar */
    text-align: center;              /* teks ke tengah */
  }

  .hero-bg {
    background-size: cover;
    background-position: top center; /* fokus area atas gambar */
    height: 100%;                    /* pastikan penuh */
  }

  .hero-inner {
    padding: 2rem 1rem;              /* lebih kecil padding */
    max-width: 100%;
  }

  .hero-title {
    font-size: 1.6rem;               /* perkecil judul */
    line-height: 1.3;
  }

  .hero-sub {
    font-size: 0.95rem;              /* teks ringkas */
  }

  .hero-ctas {
    justify-content: center;         /* tombol ke tengah */
  }
}

/* Extra small (≤480px) */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.3rem;
  }
  .hero-sub {
    font-size: 0.85rem;
  }
}