/* ==========================================================================
   Jlaude Schedule — CALENDAR
   Tampilan Minggu, Bulan, dan Tahun.
   ========================================================================== */

.is-anim .jj-week, .is-anim .jj-month, .is-anim .jj-year { animation: jj-fade .4s both; }

/* --- Minggu ------------------------------------------------------------- */
.jj-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.jj-wcol {
  display: flex; flex-direction: column; gap: 6px; min-height: 460px; padding: 10px;
  border: 1px solid var(--jj-line); border-radius: 18px; transition: background .35s;
}
.jj-wcol.is-active { background: var(--jj-text); color: var(--jj-page); border-color: var(--jj-text); }
.jj-wcol__head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 8px; }
.jj-wcol__head span { font: 500 11px var(--jj-mono); letter-spacing: .06em; text-transform: uppercase; }
.jj-wcol__head strong { font: 600 22px var(--jj-serif); }
.jj-witem {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 11px;
  background: var(--jj-panel); color: var(--jj-ink); text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jj-ink) 5%, transparent); transition: transform .35s var(--jj-ease);
}
.jj-witem:hover { transform: translateY(-2px); }
.jj-witem--special { background: var(--jj-accent); }
.jj-witem.is-past { opacity: .5; }
.jj-witem__top { display: flex; justify-content: space-between; gap: 4px; font: 500 10px var(--jj-mono); }
.jj-witem__name { font: 500 12px/1.25 var(--jj-sans); }

/* --- Bulan -------------------------------------------------------------- */
.jj-dow, .jj-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.jj-dow { margin-bottom: 6px; }
.jj-dow span { padding: 0 10px; font: 500 11px var(--jj-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--jj-muted); }

.jj-mcell {
  display: flex; flex-direction: column; gap: 5px; height: 108px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 14px; text-align: left; color: var(--jj-faint);
  transition: background .3s, transform .35s var(--jj-ease);
}
.jj-mcell:hover { transform: translateY(-2px); }
.jj-mcell.is-out { border-color: var(--jj-line); color: color-mix(in srgb, var(--jj-ink) 18%, transparent); }
.jj-mcell.is-avail { background: var(--jj-panel); color: var(--jj-ink); }
.jj-mcell.is-active { background: var(--jj-text); color: var(--jj-page); }
.jj-mcell__top { display: flex; justify-content: space-between; align-items: baseline; }
.jj-mcell__num { font: 600 20px var(--jj-serif); }
.jj-mcell__tag { font: 500 9.5px var(--jj-mono); letter-spacing: .06em; text-transform: uppercase; }
.jj-mcell__sp {
  padding: 3px 6px; border-radius: 6px; background: var(--jj-accent); color: var(--jj-ink);
  font: 500 10.5px/1.2 var(--jj-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jj-mcell__count { margin-top: auto; display: flex; align-items: center; gap: 6px; font: 400 10.5px var(--jj-mono); opacity: .75; }
.jj-mcell__dots { display: flex; gap: 2px; }
.jj-mcell__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.jj-mcell__bar { display: none; }

/* Daftar edisi spesial bulan ini — hanya mobile */
.jj-mspecials { display: none; }
.jj-mspecials__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--jj-line); }
.jj-mspecials__head h2 { font: 600 20px var(--jj-serif); letter-spacing: -.02em; }
.jj-mspecials__head span { font: 400 12px var(--jj-sans); color: var(--jj-muted); }
.jj-mspec { display: grid; grid-template-columns: 60px minmax(0, 1fr); width: 100%; color: var(--jj-ink); text-align: left; }
.jj-mspec:active { transform: scale(.985); }
.jj-mspec.is-past { opacity: .5; }
.jj-mspec__date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 0; border-radius: 16px 10px 10px 16px; background: var(--jj-accent); }
.jj-mspec__date span { font: 500 10px var(--jj-mono); text-transform: uppercase; }
.jj-mspec__date strong { font: 600 24px/1 var(--jj-serif); }
.jj-mspec__info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 10px 16px 16px 10px; background: var(--jj-panel); }
.jj-mspec__name { font: 500 14px/1.25 var(--jj-sans); }
.jj-mspec__meta { font: 400 11px var(--jj-mono); color: var(--jj-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Tahun -------------------------------------------------------------- */
.jj-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jj-ymonth {
  display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 14px 14px 0;
  border-radius: 18px; background: var(--jj-panel); color: var(--jj-ink); text-align: left;
  transition: transform .4s var(--jj-ease), box-shadow .4s;
}
.jj-ymonth:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--jj-shade) 45%, transparent); }
.jj-ymonth.is-empty { opacity: .55; }
.jj-ymonth__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* Jumlah sesi tidak pernah patah di tengah ("22" lalu "sessions"); bila tetap tidak muat,
   nama bulan yang dipotong dengan elipsis, bukan tata letaknya yang rusak. */
.jj-ymonth__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 22px var(--jj-serif); letter-spacing: -.02em; }
.jj-ymonth__sub { flex: none; white-space: nowrap; font: 500 10.5px/1.25 var(--jj-mono); }
.jj-mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
/* Tanda tanggal (edisi spesial, hari ini) selalu lingkaran: lebar tetap, atau selebar kolom
   bila kolomnya lebih sempit, dengan rasio 1:1. Dulu tingginya tetap dan lebarnya selebar
   kolom, sehingga tanda menjadi oval di kartu yang lebar. */
.jj-mini span {
  width: min(24px, 100%); aspect-ratio: 1; justify-self: center;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font: 500 10.5px var(--jj-sans); color: color-mix(in srgb, var(--jj-ink) 28%, transparent);
}
.jj-mini .is-avail { color: var(--jj-ink); }
.jj-mini .is-special { background: var(--jj-accent); }
.jj-mini .is-today { box-shadow: inset 0 0 0 1.5px var(--jj-ink); }
.jj-ymonth__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 30px;
  margin: auto -14px 0; padding: 0 14px; background: var(--jj-accent); font: 500 11px var(--jj-sans);
}
/* Nama situs bisa panjang: nama yang dipotong, keterangan di kanannya tetap utuh. */
.jj-ymonth__foot .jj-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.jj-ymonth__foot > :last-child { flex: none; white-space: nowrap; }

/* --- Tablet ------------------------------------------------------------- */
/* (dulu @container jj (max-width: 1023px); kelas jj-w-1023 dari app.js, jebakan 44) */
:where(.jj-w-1023) .jj-week { gap: 4px; }
:where(.jj-w-1023) .jj-wcol { padding: 6px; }
:where(.jj-w-1023) .jj-witem { padding: 7px 8px; }
:where(.jj-w-1023) .jj-witem__top { flex-direction: column; gap: 1px; }
:where(.jj-w-1023) .jj-witem__top span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.jj-w-1023) .jj-mcell { height: 92px; }
:where(.jj-w-1023) .jj-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* --- Kartu bulan sempit ------------------------------------------------- */
/* Di bawah lebar ini nama bulan yang panjang (September, November, December) dan jumlah
   sesinya tidak muat sebaris, baik pada tiga kolom tablet sempit maupun dua kolom mobile.
   Jumlah sesi turun ke bawah nama. Barisnya tetap disediakan walau kosong (bulan yang
   sudah lewat), supaya kisi tanggal kartu-kartu yang bersebelahan tetap sejajar. */
/* (dulu @container jj (max-width: 760px); kelas jj-w-760 dari app.js, jebakan 44) */
:where(.jj-w-760) .jj-ymonth__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; }
:where(.jj-w-760) .jj-ymonth__name { max-width: 100%; }
:where(.jj-w-760) .jj-ymonth__sub { min-height: 1.25em; }


/* --- Mobile ------------------------------------------------------------- */
/* (dulu @container jj (max-width: 639px); kelas jj-w-639 dari app.js, jebakan 44) */
:where(.jj-w-639) .jj-month { display: flex; flex-direction: column; gap: 26px; }
:where(.jj-w-639) .jj-dow, :where(.jj-w-639) .jj-mgrid { gap: 4px; }
:where(.jj-w-639) .jj-dow span { padding: 0; text-align: center; font-size: 10px; letter-spacing: .04em; }
:where(.jj-w-639) .jj-mcell { height: 52px; padding: 0; gap: 7px; align-items: center; justify-content: center; border-radius: 12px; }
/* Di mobile isi sel dipusatkan, jadi kembali selebar isinya. */
:where(.jj-w-639) .jj-mcell > * { width: auto; }
:where(.jj-w-639) .jj-mcell__top { display: block; }
:where(.jj-w-639) .jj-mcell__num { font-size: 16px; line-height: 1; }
:where(.jj-w-639) .jj-mcell__tag, :where(.jj-w-639) .jj-mcell__sp, :where(.jj-w-639) .jj-mcell__count { display: none; }
:where(.jj-w-639) .jj-mcell__bar { display: block; width: 14px; height: 3px; border-radius: 2px; background: transparent; }
:where(.jj-w-639) .jj-mcell.has-sessions .jj-mcell__bar { background: color-mix(in srgb, var(--jj-ink) 30%, transparent); }
:where(.jj-w-639) .jj-mcell.is-active.has-sessions .jj-mcell__bar { background: color-mix(in srgb, var(--jj-page) 55%, transparent); }
:where(.jj-w-639) .jj-mcell.has-special .jj-mcell__bar { background: var(--jj-accent); }
:where(.jj-w-639) .jj-mspecials { display: flex; flex-direction: column; gap: 8px; }

:where(.jj-w-639) .jj-year { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:where(.jj-w-639) .jj-ymonth__name { font-size: 18px; }
:where(.jj-w-639) .jj-mini span { width: min(19px, 100%); font-size: 9.5px; }


/* --- Ponsel paling sempit ----------------------------------------------- */
/* Kaki kartu bulan tidak lagi memuat nama situs dan keterangannya sekaligus. Keterangan
   ("2 special editions", "Past") yang dipertahankan; nama situs sudah ada di kepala halaman. */
/* (dulu @container jj (max-width: 389px); kelas jj-w-389 dari app.js, jebakan 44) */
:where(.jj-w-389) .jj-ymonth__foot .jj-brand { display: none; }