/* ============================================================
   EVENT.CSS — Halaman Event
   Memakai base.css, layout.css, desktop.css.
   ============================================================ */

/* ---------- HERO ---------- */
.ev-hero { background:var(--tosca); color:#fff; padding:2rem var(--pad) 2.5rem; }
.ev-hero-inner { display:flex; flex-direction:column; gap:1.75rem; }
.ev-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin-bottom:.5rem; }
.ev-title { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:2rem; line-height:1.05; text-transform:uppercase; margin-bottom:.85rem; }
.ev-desc { font-size:.85rem; line-height:1.6; opacity:.95; margin-bottom:1.5rem; max-width:32rem; }
.ev-stats { display:flex; flex-wrap:wrap; gap:1.25rem 1.75rem; }
.ev-stat-val { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.9rem; line-height:1; }
.ev-stat-lbl { font-size:.66rem; opacity:.85; margin-top:3px; line-height:1.2; }

/* kartu Event Selanjutnya + countdown */
.ev-next { background:var(--tosca-dk); border-radius:16px; padding:1.5rem 1.4rem; }
.ev-next-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-bottom:.5rem; }
.ev-next-title { font-weight:700; font-size:1.05rem; line-height:1.3; margin-bottom:.4rem; }
.ev-next-when { font-size:.8rem; opacity:.85; margin-bottom:1rem; }
.countdown { display:flex; gap:.5rem; margin-bottom:1.1rem; }
.cd-cell { flex:1; text-align:center; }
.cd-num { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.9rem; line-height:1; }
.cd-lbl { font-size:.62rem; opacity:.7; margin-top:2px; }
.ev-next .btn-hero-orange { width:100%; }

/* ---------- TABS FITUR + EVENT UNGGULAN ---------- */
.ev-feature { background:var(--offwhite); padding:2.25rem var(--pad) 2.5rem; }
.ev-tablist { display:flex; gap:1.5rem; border-bottom:2px solid #e3ddd0; overflow-x:auto; margin-bottom:1.75rem; }
.ev-tab { background:none; border:none; cursor:pointer; white-space:nowrap; font-family:Arial,sans-serif; font-weight:700; font-size:1rem; color:var(--gray); padding:0 0 .8rem; position:relative; }
.ev-tab.active { color:var(--tosca); }
.ev-tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--tosca); }

.ev-featured { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.ev-feat-photo { position:relative; background:linear-gradient(160deg,var(--tosca),var(--tosca-dk)); min-height:240px; }
.ev-feat-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ev-feat-photo-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:240px; color:rgba(255,255,255,.85); font-size:.85rem; }
.ev-feat-badge { position:absolute; left:1rem; bottom:1rem; color:#fff; }
.ev-feat-badge .d { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:2rem; line-height:.95; }
.ev-feat-badge .m, .ev-feat-badge .w { font-size:.7rem; font-weight:700; letter-spacing:.05em; }
.ev-feat-badge .spk { font-size:.82rem; margin-top:.4rem; opacity:.95; }

.ev-feat-body { padding:1.4rem; }
.ev-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.85rem; }
.ev-chip { font-size:.66rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; }
.ev-chip--zoom { background:#fff4d6; color:#9a6b00; }
.ev-chip--member { background:#dcefe9; color:var(--tosca-dk); }
.ev-kicker { font-size:.74rem; font-weight:700; letter-spacing:.05em; color:var(--gray); margin-bottom:.3rem; }
.ev-feat-title { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.25rem; line-height:1.2; text-transform:uppercase; margin-bottom:.7rem; }
.ev-feat-desc { font-size:.85rem; line-height:1.6; color:#444; margin-bottom:1rem; }
.ev-meta { list-style:none; margin-bottom:1.25rem; }
.ev-meta li { font-size:.82rem; color:#333; padding:.2rem 0; }
.ev-meta b { color:var(--black); }
.ev-feat-btns { display:flex; flex-direction:column; gap:.65rem; }
.ev-feat-btns .btn-hero-orange,
.ev-feat-btns .btn-detail { width:100%; }
.btn-detail { background:var(--tosca); color:#fff; border:none; border-radius:999px; font-weight:700; font-size:.95rem; padding:.75rem 1.5rem; cursor:pointer; }
.btn-detail:hover { filter:brightness(.97); }

/* ---------- BANNER MEMBER ---------- */
.ev-member { background:var(--tosca); color:#fff; text-align:center; padding:2.5rem var(--pad); }
.ev-member-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:.5rem; }
.ev-member-title { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.6rem; line-height:1.15; margin-bottom:.75rem; }
.ev-member-desc { font-size:.875rem; line-height:1.6; opacity:.95; max-width:42rem; margin:0 auto 1.5rem; }

/* ---------- SEMUA EVENT MENDATANG ---------- */
.ev-upcoming { background:var(--white); padding:2.5rem var(--pad); }
.ev-sec-title { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.4rem; text-transform:uppercase; margin-bottom:1.25rem; }
.ev-filter { display:flex; gap:1.25rem; border-bottom:2px solid #eee; overflow-x:auto; margin-bottom:1.5rem; }
.ev-fbtn { background:none; border:none; cursor:pointer; white-space:nowrap; font-weight:700; font-size:.92rem; color:var(--gray); padding:0 0 .7rem; position:relative; }
.ev-fbtn.active { color:var(--tosca); }
.ev-fbtn.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--tosca); }

.ev-row { display:flex; gap:1rem; align-items:flex-start; background:var(--offwhite); border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:1rem; }
.ev-row-date { text-align:center; flex-shrink:0; min-width:46px; }
.ev-row-date .d { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.5rem; color:var(--tosca); line-height:1; }
.ev-row-date .m { font-size:.6rem; font-weight:700; color:var(--gray); letter-spacing:.04em; }
.ev-row-body { flex:1; min-width:0; }
.ev-row-title { font-weight:700; font-size:.95rem; margin-bottom:.25rem; }
.ev-row-info { font-size:.76rem; color:var(--gray); margin-bottom:.4rem; }
.ev-row-chips { display:flex; gap:.4rem; flex-wrap:wrap; }
.ev-row-act { flex-shrink:0; text-align:right; }
.ev-row-act .btn-hero-orange { padding:.5rem 1.4rem; }
.ev-seats { font-size:.7rem; color:#c0392b; font-weight:700; margin-top:.4rem; }
.ev-empty { color:var(--gray); font-size:.9rem; padding:1.5rem 0; }

/* ---------- ARSIP ---------- */
.ev-archive { background:var(--offwhite); padding:2.5rem var(--pad) 3rem; }
.ev-arch-grid { display:grid; grid-template-columns:1fr; gap:1.1rem; margin-bottom:1.75rem; }
.ev-arch-card { background:var(--tosca); color:#fff; border-radius:12px; padding:1.1rem 1.2rem; display:flex; gap:1rem; align-items:flex-start; }
.ev-arch-date { text-align:center; flex-shrink:0; min-width:42px; }
.ev-arch-date .d { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.4rem; line-height:1; }
.ev-arch-date .m { font-size:.58rem; font-weight:700; opacity:.85; }
.ev-arch-body { flex:1; min-width:0; }
.ev-arch-title { font-weight:700; font-size:.92rem; line-height:1.3; margin-bottom:.25rem; }
.ev-arch-info { font-size:.72rem; opacity:.85; margin-bottom:.7rem; }
.ev-arch-card .btn-hero-orange { padding:.45rem 1.1rem; font-size:.82rem; }
.ev-arch-all { text-align:center; }
.ev-arch-all .btn-hero-orange { padding:.85rem 3rem; font-size:1rem; }

/* ============================================================
   TABLET (≥ 680px)
   ============================================================ */
@media (min-width:680px) {
  .ev-title { font-size:2.5rem; }
  .ev-featured { flex-direction:row; }
  .ev-feat-photo { flex:0 0 42%; min-height:auto; }
  .ev-feat-btns { flex-direction:row; }
  .ev-arch-grid { grid-template-columns:1fr 1fr; }
  .ev-member-title { font-size:2rem; }
}

/* ============================================================
   DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width:1024px) {
  .ev-hero { padding:0; }
  .ev-hero-inner { max-width:1180px; margin:0 auto; padding:3.5rem 40px; flex-direction:row; justify-content:space-between; align-items:flex-start; gap:3rem; }
  .ev-hero-text { flex:1; }
  .ev-title { font-size:2.9rem; }
  .ev-desc { font-size:1rem; }
  .ev-stats { gap:2.5rem; }
  .ev-stat-val { font-size:2.3rem; }
  .ev-next { flex:0 0 360px; }
  .cd-num { font-size:2.1rem; }

  .ev-feature { padding:3.5rem 0; }
  .ev-tablist, .ev-feature > .wrap { }
  .ev-tab { font-size:1.15rem; }
  .ev-featured { box-shadow:0 12px 40px rgba(0,0,0,.07); }
  .ev-feat-photo { flex:0 0 40%; }
  .ev-feat-body { padding:2.25rem; }
  .ev-feat-title { font-size:1.7rem; }
  .ev-feat-btns .btn-hero-orange, .ev-feat-btns .btn-detail { width:auto; padding-left:2rem; padding-right:2rem; }

  .ev-member { padding:4rem 0; }
  .ev-member-title { font-size:2.4rem; }

  .ev-upcoming { padding:4rem 0; }
  .ev-sec-title { font-size:1.7rem; }
  .ev-row { padding:1.25rem 1.75rem; align-items:center; }
  .ev-row-date { min-width:64px; }
  .ev-row-date .d { font-size:1.9rem; }
  .ev-row-title { font-size:1.05rem; }

  .ev-archive { padding:4rem 0 5rem; }
  .ev-arch-grid { gap:1.5rem; }
}