/* ==========================================================================
   EVENT-PAGE.CSS — halaman publik "Event" (event.php).
   Prefix "ev-" supaya tidak bentrok dengan style lain. Dimuat lewat $extraCss
   di event.php (bersama ranking-agent.css untuk hero "ra-grow-*").
   ========================================================================== */

/* Tombol pill atas (Kembali ke Beranda / pindah halaman) — sama dengan halaman Ranking */
.ev-pill-btn{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border);
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--herbal);
  cursor:pointer; font-family:'Karla',sans-serif; text-decoration:none; transition:transform .2s, box-shadow .2s;
}
.ev-pill-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(31,95,33,.12); }
.ev-pill-btn-solid{ background:var(--herbal); border-color:var(--herbal); color:#fff; }

/* Section per status */
.ev-section{ margin-bottom:38px; }
.ev-section-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ev-section-head h3{ font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--herbal); margin:0; }
.ev-count{
  font-size:11.5px; font-weight:700; color:#8a6d3a; background:var(--gold-soft);
  padding:3px 10px; border-radius:999px; font-variant-numeric:tabular-nums;
}
.ev-empty{ background:#fff; border:1px dashed var(--border); border-radius:14px; padding:26px 20px; }

/* Grid & kartu */
.ev-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.ev-card{
  background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 4px 18px rgba(31,95,33,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ev-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(31,95,33,.12); }
.ev-ongoing{ border-color:rgba(200,155,74,.55); box-shadow:0 10px 28px rgba(200,155,74,.16); }
.ev-finished{ opacity:.82; }
.ev-finished .ev-media img{ filter:grayscale(.55); }

.ev-media{ position:relative; aspect-ratio:16/9; background:var(--herbal-deep); overflow:hidden; }
.ev-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev-media-empty{ background:linear-gradient(135deg, var(--herbal) 0%, var(--herbal-deep) 100%); }
.ev-leaf{ position:absolute; right:-20px; bottom:-30px; width:190px; height:auto; }

.ev-status{
  position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 12px; border-radius:999px; color:#fff; backdrop-filter:blur(4px);
}
.ev-status-ongoing{ background:linear-gradient(135deg,#e6c488,#c89b4a); color:#1a2e25; }
.ev-status-upcoming{ background:rgba(31,95,33,.88); }
.ev-status-finished{ background:rgba(90,102,95,.85); }

.ev-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ev-period{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600; }
.ev-title{ font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--herbal); margin:0; line-height:1.2; }
.ev-desc{ font-size:13.5px; line-height:1.7; color:#3a4a40; margin:0; }
.ev-reward{
  align-self:flex-start; font-size:12.5px; font-weight:700; color:#8a6d3a; background:var(--gold-soft);
  padding:6px 12px; border-radius:10px;
}
.ev-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.ev-note{ font-size:12px; font-weight:700; color:var(--herbal); }
.ev-detail-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#8a6d3a;
  background:var(--gold-soft); padding:8px 14px; border-radius:999px; text-decoration:none;
  white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;
}
.ev-detail-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(200,155,74,.28); }
.ev-detail-btn svg{ flex-shrink:0; }

@media(max-width:600px){
  .ev-grid{ grid-template-columns:1fr; }
  .ev-title{ font-size:22px; }
}
@media (prefers-reduced-motion:reduce){
  .ev-card, .ev-pill-btn, .ev-detail-btn{ transition:none; }
}