/* =========================================================
   IIPE 2027 - Partner Events + Show Facts
   Aset: partner-events-title.png, show-facts-title.png, dog.png,
         box.png + coin.png (sudah ada), foto event di /2027/assets/partner/
   Semua ukuran pakai cqw (1cqw = 1% lebar panel), jadi skalanya sama dengan desain.
   ========================================================= */

.pe, .sf { background: #FFFFDA; overflow-x: clip; }
/* panel checker selebar layar (tanpa margin krem); isi dibatasi di .pe-inner / .sf-inner */

.pe img, .sf img { display: block; height: auto; image-rendering: pixelated; }

.pe-panel, .sf-panel {
  position: relative;
  width: 100%;
  --tile: min(5.6vw, 105px);
}
.pe-inner, .sf-inner {
  position: relative;
  max-width: 1670px; margin: 0 auto;
  container-type: inline-size;          /* 1cqw = 1% lebar area isi */
}
.pe-panel { z-index: 2; }               /* props menimpa panel Show Facts */
.sf-panel { z-index: 1; }

/* ===================== PARTNER EVENTS ===================== */
.pe-panel {
  background: conic-gradient(#EB3238 25%, #FF424E 0 50%, #EB3238 0 75%, #FF424E 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.pe-title { width: 50.2cqw; margin: 3.7cqw auto 0; }
.pe-title img { width: 100%; }

.pe-panel {
  --pe-frame: .45cqw;                  /* tebal border putih di pinggir gambar */
  --pe-radius: 1.3cqw;
  --pe-clear-top: 4.5cqw;              /* jarak grid dari bawah judul; tinggi box koin tidak boleh masuk ke kartu */
  --pe-clear-bottom: 22cqw;            /* ruang kosong di bawah kartu untuk anjing + box (naikkan kalau masih nyentuh) */
}
.pe-grid {
  position: relative; z-index: 3;      /* kartu SELALU di atas dekorasi */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.6cqw;
  margin: var(--pe-clear-top) 0 var(--pe-clear-bottom); padding: 0 7.8cqw;
  list-style: none;
}
.pe-card {
  box-sizing: border-box;
  display: block; width: 41.4cqw;      /* tinggi mengikuti rasio asli gambar (tidak di-crop) */
  padding: var(--pe-frame);            /* = border putih tipis, gambar tidak ter-crop */
  background: #fff;
  border-radius: var(--pe-radius);
  overflow: hidden;
  transition: transform .12s steps(2);
}
a.pe-card:hover { transform: translateY(-4px); }
a.pe-card:focus-visible { outline: 3px solid #FFFFDA; outline-offset: 4px; }
/* cuma 1 event (banner): lebih lebar di desktop; di mobile tetap 84cqw */
@media (min-width: 721px) {
  .pe-grid:has(> li:only-child) .pe-card { width: min(60cqw, 800px); }
}
.pe-card img {
  width: 100%; height: auto; image-rendering: auto;
  border-radius: calc(var(--pe-radius) - var(--pe-frame));
}

/* props: box + koin (kanan atas) dan box + anjing (kiri bawah) */
.pe-prop { position: absolute; pointer-events: none; }
.pe-prop > .box { width: 100%; }
.pe-coinbox { right: -1cqw; top: -2cqw; width: 17.1cqw; }
.pe-coin {
  position: absolute; left: 50%; top: 0; width: 48%;
  transform: translate(-50%, -58%); z-index: 1;
  animation: pfBob 2.4s steps(4) infinite;
}
.pe-dogbox { left: -1.5cqw; bottom: -7.3cqw; width: 18.9cqw; }
.pe-dog {
  position: absolute; left: 50%; top: 30%; width: 71%;
  transform: translate(-50%, -100%); z-index: 1;
  animation: pfBreath 2s steps(2) infinite;
}

/* ======================== SHOW FACTS ====================== */
.sf-panel {
  background: conic-gradient(#C6FFFF 25%, #DCFFFF 0 50%, #C6FFFF 0 75%, #DCFFFF 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.sf-title { width: 38cqw; margin: 3.6cqw auto 0; }
.sf-title img { width: 100%; }

.sf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.6cqw;
  margin: 2.7cqw 0 0; padding: 0 6cqw 8.8cqw;
  list-style: none;
}

/* kartu angka: skala mengikuti lebar kartu (cqw dari .stat) */
.stat {
  --font: 'IIPE Pixel', ui-monospace, monospace;
  --lab: 12cqw; --val: 30cqw;           /* ukuran label & angka; geser kalau kurang pas */
  container-type: inline-size;
  position: relative; text-align: center; cursor: pointer;
  transition: transform .12s steps(2);
  -webkit-tap-highlight-color: transparent;
}
.stat:hover { transform: translateY(-4px); }
.stat.done { animation: pfPop .3s steps(3); }

.stat-label {
  box-sizing: border-box; height: 17cqw; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: #44C27B;
  border: .9cqw solid #009880; border-bottom-width: 3cqw;
  font: 400 var(--lab)/1 var(--font); letter-spacing: .03em;
  color: #FFFFDA; text-transform: uppercase;
  padding-bottom: .4cqw;
}
.stat-body {
  --s: 1.95cqw;                          /* ukuran 1 anak tangga di pojok bawah */
  --stair: polygon(
    0 0, 100% 0, 100% calc(100% - var(--s) * 5),
    calc(100% - var(--s)) calc(100% - var(--s) * 5), calc(100% - var(--s)) calc(100% - var(--s) * 4),
    calc(100% - var(--s) * 2) calc(100% - var(--s) * 4), calc(100% - var(--s) * 2) calc(100% - var(--s) * 3),
    calc(100% - var(--s) * 3) calc(100% - var(--s) * 3), calc(100% - var(--s) * 3) calc(100% - var(--s) * 2),
    calc(100% - var(--s) * 4) calc(100% - var(--s) * 2), calc(100% - var(--s) * 4) calc(100% - var(--s)),
    calc(100% - var(--s) * 5) calc(100% - var(--s)), calc(100% - var(--s) * 5) 100%,
    calc(var(--s) * 5) 100%, calc(var(--s) * 5) calc(100% - var(--s)),
    calc(var(--s) * 4) calc(100% - var(--s)), calc(var(--s) * 4) calc(100% - var(--s) * 2),
    calc(var(--s) * 3) calc(100% - var(--s) * 2), calc(var(--s) * 3) calc(100% - var(--s) * 3),
    calc(var(--s) * 2) calc(100% - var(--s) * 3), calc(var(--s) * 2) calc(100% - var(--s) * 4),
    var(--s) calc(100% - var(--s) * 4), var(--s) calc(100% - var(--s) * 5), 0 calc(100% - var(--s) * 5));
  position: relative; height: 31cqw; margin: 0 2cqw;
  display: flex; align-items: center; justify-content: center;
  background: #E6563B;                   /* garis tepi oranye tua */
  clip-path: var(--stair);
}
.stat-body::before {
  content: ""; position: absolute; inset: 0 1.3cqw 1.3cqw;
  background: #FF7D61; clip-path: var(--stair);
}
.stat-num {
  position: relative; z-index: 1;
  font: 400 var(--val)/1 var(--font); color: #FFFFDA;
  padding-bottom: 3cqw; white-space: nowrap;
}
.stat.done .stat-num { animation: pfBlink .3s steps(1) 2; }

/* ---- keyframes ---- */
@keyframes pfBob    { 50% { transform: translate(-50%, -66%); } }
@keyframes pfBreath { 50% { transform: translate(-50%, -102%); } }
@keyframes pfPop    { 50% { transform: translateY(-6px); } }
@keyframes pfBlink  { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pe-coin, .pe-dog, .stat.done, .stat.done .stat-num { animation: none; }
}

/* ========================= MOBILE ========================= */
@media (max-width: 720px) {
  .pe-panel, .sf-panel { --tile: 12vw; }

  /* ruang di bawah tombol panah galeri, supaya koin tidak menempel ke tombol */
  .expect:has(+ .pe) .expect-nav { padding-bottom: 20vw; }

  .pe-title { width: 76cqw; margin-top: 15cqw; }     /* turun, di bawah box koin */
  .pe-panel { --pe-frame: 1.2cqw; --pe-radius: 3cqw; --pe-clear-top: 7cqw; --pe-clear-bottom: 32cqw; }
  .pe-grid { flex-direction: column; align-items: center; gap: 4cqw; padding: 0; }
  .pe-card { width: 84cqw; }

  .pe-coinbox { right: -2cqw; top: -3cqw; width: 18cqw; }
  .pe-dogbox  { left: -5cqw; bottom: -10cqw; width: 26cqw; }

  .sf-title { width: 76cqw; margin-top: 8cqw; }
  .pe + .sf .sf-title { margin-top: 15cqw; }          /* di bawah box anjing */
  .sf-grid { grid-template-columns: repeat(2, 1fr); gap: 4cqw; margin-top: 5cqw; padding: 0 6cqw 12cqw; }
}