/* ==========================================================================
   Jlaude Schedule — TICKETS
   Layout 1 (kelas rutin) & layout 2 (edisi spesial).
   Tiket = dua "halaman buku" (__half--l, __half--r) yang menyatu dengan belahan tipis.
   ========================================================================== */

.jj-listhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--jj-line); }
.jj-listhead h2 { font: 600 24px var(--jj-serif); letter-spacing: -.02em; }
.jj-listhead span { font: 400 13px var(--jj-sans); color: var(--jj-muted); }

.jj-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }

/* --- Struktur tiket ------------------------------------------------------ */
.jj-ticket {
  display: grid; grid-template-columns: 44fr 56fr;
  color: var(--jj-ink); cursor: pointer;
  transition: transform .5s var(--jj-ease); /* tekan di ponsel (:active) */
}
.jj-ticket.is-past { opacity: .5; }
/* backwards, bukan both: sesudah selesai animasi tidak menahan transform: none, yang mengalahkan :hover
   (jebakan 43). */
.is-anim .jj-ticket { animation: jj-in .6s var(--jj-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* Hover: tiket yang di-hover sendiri tidak bergerak dan tanpa filter (Safari melepas gaya :hover-nya bila
   ia naik dengan drop-shadow, jebakan 44). Kedua halamannya yang naik, masing-masing dengan box-shadow;
   bayangan di sisi belahan dipotong clip-path supaya tidak menimpa halaman sebelahnya, sedangkan lekuk di
   antara keduanya tetap berbayang. Dipilih pengguna dari enam varian yang diuji di Safari
   (devtools/share/hover-test.html, varian 5). */
.jj-ticket__half { transition: transform .5s var(--jj-ease), box-shadow .5s; }
.jj-ticket__half--l { clip-path: inset(-60px 0 -60px -60px); }
.jj-ticket__half--r { clip-path: inset(-60px -60px -60px 0); }
@media (hover: hover) {
  .jj-ticket:hover .jj-ticket__half { transform: translateY(-4px); box-shadow: 0 18px 22px color-mix(in srgb, var(--jj-shade) 18%, transparent); }
  .jj-ticket--special:hover .jj-ticket__half { box-shadow: 0 18px 22px color-mix(in srgb, var(--jj-accent) 28%, transparent); }
}

.jj-ticket__half { display: flex; flex-direction: column; overflow: hidden; background: var(--jj-panel); }
.jj-ticket__half--l { min-height: 236px; border-radius: 18px 14px 14px 18px; }
.jj-ticket__half--r { position: relative; border-radius: 14px 18px 18px 14px; }
.jj-ticket__half--r::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--jj-ink) 14%, transparent); }

.jj-ticket__foot {
  flex: none; height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 0 6px 0 16px; background: var(--jj-accent);
}
.jj-ticket__foot--brand { padding: 0 16px; }

/* --- Elemen bersama ------------------------------------------------------ */
.jj-vmeta {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 15px/1 var(--jj-sans);
}
.jj-vmeta i { width: 1px; height: 26px; background: currentColor; flex: none; }
.jj-vmeta__cat { display: none; }

/* Meter elips = persentase kuota terisi */
.jj-meter { flex: none; height: 7px; margin: 0 12px 12px; border: 1px solid var(--jj-ink); border-radius: 50%; overflow: hidden; }
.jj-meter span { display: block; height: 100%; background: var(--jj-ink); transition: width .5s var(--jj-ease); }

.jj-rings { position: relative; flex: none; width: 26px; height: 22px; }
.jj-rings i { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; border: 1px solid var(--jj-accent); border-radius: 50%; }
.jj-rings i:nth-child(2) { left: 6px; }
.jj-rings i:nth-child(3) { left: 12px; }

.jj-info { display: flex; align-items: center; gap: 10px; font: 500 12px/1.35 var(--jj-sans); }
.jj-timerow { display: flex; align-items: center; gap: 10px; font: 500 15px var(--jj-sans); }
.jj-timerow i { flex: 1; height: 1px; background: currentColor; }
.jj-label { font: 500 10px var(--jj-mono); letter-spacing: .1em; text-transform: uppercase; }
.jj-label__type { display: none; }
.jj-quota { font: 500 11px var(--jj-mono); }

.jj-dots { display: flex; gap: 2px; }
.jj-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--jj-empty); transition: background .4s; }
.jj-dots i.on { background: var(--jj-ink); }

.jj-btn {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: var(--jj-ink); color: var(--jj-paper);
  font: 500 12px var(--jj-sans); text-align: center; white-space: nowrap;
  transition: background .25s, color .25s, transform .25s;
}
.jj-btn:hover:not(:disabled) { background: var(--jj-paper); color: var(--jj-ink); }
.jj-btn:disabled { opacity: .55; }
.jj-btn__sm { display: none; }

/* --- Layout 1: kelas rutin ---------------------------------------------- */
.jj-ticket__media { flex: 1; display: flex; gap: 10px; padding: 10px 8px 10px 10px; }
.jj-ticket__media .jj-photo { flex: 1; border-radius: 12px; }
.jj-ticket__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.jj-ticket__title { font: 600 30px/.98 var(--jj-serif); letter-spacing: -.025em; text-wrap: balance; }
.jj-ticket__desc {
  margin-top: auto; font: 400 11.5px/1.45 var(--jj-sans); color: var(--jj-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Layout 2: edisi spesial (warna dibalik) ---------------------------- */
.jj-ticket--special .jj-ticket__half { background: var(--jj-accent); }
.jj-ticket--special .jj-ticket__half--r::before { background: color-mix(in srgb, var(--jj-ink) 18%, transparent); }
.jj-ticket--special .jj-ticket__foot { background: var(--jj-panel); }
.jj-ticket--special .jj-rings i { border-color: var(--jj-ink); }
.jj-ticket--special .jj-btn:hover:not(:disabled) { background: var(--jj-accent); color: var(--jj-ink); }

.jj-ticket__sbody { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.jj-ticket__sbody .jj-photo { margin-top: auto; height: 104px; border-radius: 12px; }
.jj-ticket__sright { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; }
.jj-ticket__thumb { height: 58px; border-radius: 12px; }
.jj-ticket__titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 6px; }
.jj-ticket__titlerow .jj-ticket__title { font-size: 27px; line-height: 1; }
.jj-ticket__date { flex: none; font: 500 14px var(--jj-sans); }
.jj-ticket__sright .jj-info { padding: 0 6px; font-size: 11.5px; }
.jj-foot-stack { display: flex; flex-direction: column; gap: 5px; }
.jj-foot-stack .jj-quota { display: none; }

/* --- Tablet: 1 kolom ---------------------------------------------------- */
/* (dulu @container jj (max-width: 1023px); kelas jj-w-1023 dari app.js, jebakan 44) */
:where(.jj-w-1023) .jj-tickets { grid-template-columns: minmax(0, 1fr); }


/* --- Mobile: tiket bertumpuk atas–bawah, belahan horizontal ------------- */
/* (dulu @container jj (max-width: 639px); kelas jj-w-639 dari app.js, jebakan 44) */
:where(.jj-w-639) .jj-tickets { gap: 16px; }
:where(.jj-w-639) .jj-ticket { grid-template-columns: minmax(0, 1fr); }
:where(.jj-w-639) .jj-ticket:active { transform: scale(.985); }
:where(.jj-w-639) .jj-ticket__half--l { min-height: 0; border-radius: 18px 18px 14px 14px; }
:where(.jj-w-639) .jj-ticket__half--r { border-radius: 14px 14px 18px 18px; }
/* Halaman bertumpuk: bayangan halaman atas tidak dipotong (halaman bawah digambar di atasnya, jadi yang
   tampak hanya di sisi kiri-kanan dan menyambung); bayangan halaman bawah dipotong di sisi atasnya. */
:where(.jj-w-639) .jj-ticket__half--l { clip-path: none; }
:where(.jj-w-639) .jj-ticket__half--r { clip-path: inset(0 -60px -60px -60px); }
:where(.jj-w-639) .jj-ticket__half--r::before { right: 0; bottom: auto; width: auto; height: 1px; }
:where(.jj-w-639) .jj-ticket__foot--brand, :where(.jj-w-639) .jj-ticket__desc, :where(.jj-w-639) .jj-ticket__thumb { display: none; }
:where(.jj-w-639) .jj-ticket__foot { height: 54px; padding: 0 7px 0 16px; }
:where(.jj-w-639) .jj-btn { height: 40px; padding: 0 18px; font-size: 13px; }
:where(.jj-w-639) .jj-ticket__title, :where(.jj-w-639) .jj-ticket__titlerow .jj-ticket__title { font-size: 26px; line-height: 1; }

/* rutin */
:where(.jj-w-639) .jj-ticket__media { flex-direction: column; padding: 10px 10px 0; }
:where(.jj-w-639) .jj-ticket__media .jj-photo { flex: none; height: 156px; }
:where(.jj-w-639) .jj-vmeta { writing-mode: horizontal-tb; transform: none; padding: 0 4px; font-size: 14px; }
:where(.jj-w-639) .jj-vmeta i { width: 18px; height: 1px; }
:where(.jj-w-639) .jj-vmeta span:nth-child(3) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.jj-w-639) .jj-vmeta__cat { display: block; font: 500 11px var(--jj-sans); }
:where(.jj-w-639) .jj-meter { margin: 10px 14px 12px; }
:where(.jj-w-639) .jj-ticket__body { gap: 10px; padding: 14px 16px 16px; }
:where(.jj-w-639) .jj-info { font-size: 12.5px; }

/* spesial */
:where(.jj-w-639) .jj-ticket__sbody { padding: 12px 12px 10px; }
:where(.jj-w-639) .jj-ticket__sbody .jj-photo { height: 156px; }
:where(.jj-w-639) .jj-label__type { display: inline; }
:where(.jj-w-639) .jj-ticket__sright { padding: 14px 16px 16px; }
:where(.jj-w-639) .jj-ticket__titlerow, :where(.jj-w-639) .jj-ticket__sright .jj-info { padding: 0; }
:where(.jj-w-639) .jj-foot-stack .jj-quota { display: block; font-size: 10.5px; }
:where(.jj-w-639) .jj-foot-stack .jj-dots i { width: 6px; height: 6px; }