/* =========================================================
   CSS KHUSUS HALAMAN "PRESTASI"
   Sama seperti page-program-keahlian.css: layout & komponen khusus
   halaman ini, tapi warna tetap ambil dari variabel :root di
   assets/css/muspla-design.css (jangan hardcode kode warna baru).
   Prefix class "pr-" dipakai supaya tidak bentrok dengan class
   halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.pr-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:64px 0 64px;
}
.pr-hero-blob-1{
  top:-140px; right:-100px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,.28) 0%, transparent 70%);
}
.pr-hero-blob-2{
  bottom:-160px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.pr-hero-wrap{ position:relative; z-index:1; }
.pr-hero-text{ max-width:680px; }
.pr-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.pr-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:560px; }

/* Kartu statistik "menggantung" di batas bawah hero — pola sama dengan
   halaman Profil/Program Keahlian, supaya identitas antar halaman konsisten. */
.pr-stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(255,255,255,.14); border-radius:var(--radius-md) var(--radius-md) 0 0;
  margin-top:48px; overflow:hidden; transform:translateY(40px);
  box-shadow:var(--shadow);
}
.pr-stat-card{ background:var(--white); padding:26px 18px; text-align:center; }
.pr-stat-num{ font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,2.6vw,32px); font-weight:800; color:var(--blue-deep); }
.pr-stat-label{ margin-top:4px; font-size:12.5px; color:var(--ink-soft); font-weight:600; }

/* ================= BADGE TINGKAT ================= */
.pr-badge{
  display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.03em;
  padding:5px 12px; border-radius:100px; text-transform:uppercase;
}
.pr-badge-nasional{ background:var(--yellow-light); color:var(--blue-deep); border:1.5px solid var(--yellow-deep); }
.pr-badge-provinsi{ background:var(--blue-light); color:var(--blue-deep); border:1.5px solid var(--blue); }
.pr-badge-kabupaten{ background:var(--cream); color:var(--ink-soft); border:1.5px solid rgba(14,79,66,.18); }
.pr-year{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.pr-nama{ display:block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--blue); }

/* ================= PRESTASI UNGGULAN ================= */
.pr-featured-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pr-featured-card{
  position:relative; background:var(--white); border-radius:var(--radius-lg); padding:30px;
  border:1px solid var(--blue-light); box-shadow:var(--shadow-sm); transition:transform .2s ease;
}
.pr-featured-card:hover{ transform:translateY(-6px); }
.pr-featured-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pr-featured-icon{
  width:48px; height:48px; border-radius:14px; background:var(--blue-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.pr-featured-card h3{ font-size:17px; font-weight:800; color:var(--blue-deep); line-height:1.4; margin-bottom:10px; }
.pr-featured-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }

/* ================= FILTER KATEGORI ================= */
.pr-filter-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px;
}
.pr-filter-pill{
  font-family:inherit; cursor:pointer; white-space:nowrap; font-size:13.5px; font-weight:700;
  color:var(--ink); background:var(--white); border:1.5px solid var(--blue-light); border-radius:100px;
  padding:10px 20px; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.pr-filter-pill:hover{ border-color:var(--blue); color:var(--blue-deep); }
.pr-filter-pill.is-active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* ================= GRID SEMUA PRESTASI ================= */
.pr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pr-card{
  position:relative; background:var(--white); border-radius:var(--radius-md); padding:24px;
  border:1px solid var(--blue-light); box-shadow:var(--shadow-sm); transition:transform .2s ease;
}
.pr-card:hover{ transform:translateY(-4px); }
.pr-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pr-card h4{ font-size:15px; font-weight:800; color:var(--blue-deep); line-height:1.4; margin-bottom:8px; }
.pr-card-desc{ font-size:13px; color:var(--ink-soft); line-height:1.6; }

.pr-empty{ text-align:center; color:var(--ink-soft); font-size:14px; margin-top:12px; }

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .pr-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .pr-featured-grid{ grid-template-columns:repeat(2,1fr); }
  .pr-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .pr-stat-grid{ grid-template-columns:repeat(2,1fr); transform:translateY(24px); }
  .pr-hero{ padding-bottom:40px; }
  .pr-featured-grid{ grid-template-columns:1fr; }
  .pr-grid{ grid-template-columns:1fr; }
  .pr-filter-bar{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
}