/*
  Halaman Kegiatan (US-10). Butuh tokens-v2.css dan komponen-v2.css.
  Tab, kartu, lencana, tombol memakai komponen bersama; berkas ini hanya menambah yang khas halaman ini:
  petak tanggal, kartu kegiatan, jadwal mingguan, keadaan memuat dan kosong.
  Tanpa JS: tiga bagian bertumpuk (.tab belum diberi kelas .tab--aktif).
*/

/* ---------- Tab ---------- */
.tab { max-width: 100%; }
/* Tanpa JS tidak ada tablist, panel bertumpuk dengan jarak antar bagian */
.tab__panel + .tab__panel { margin-top: var(--jarak-8); }
.tab--aktif .tab__panel + .tab__panel { margin-top: 0; }
.tab__panel { padding-top: var(--jarak-5); }
.tab__panel:focus-visible { outline-offset: 6px; }
.tab__judul { margin: 0 0 var(--jarak-5); color: var(--warna-teks-merek); }

/* T-01: sebelum skrip memasang tab, hanya panel bawaan (Sedang, atau yang ditunjuk #hash lewat :target) yang tampil dan tempat tab
   dipesan. Tanpa ini tiga panel bertumpuk dulu, lalu dua menghilang dan tab muncul: lompatan sebesar halaman. */
.js .tab:not(.tab--aktif) .tab__panel:not(#sedang):not(:target) { display: none; }
.js .tab:not(.tab--aktif):has(.tab__panel:target:not(#sedang)) #sedang { display: none; }
.js .tab:not(.tab--aktif) .tab__panel { margin-top: 0; }
.js .tab:not(.tab--aktif)::before { content: ""; display: block; height: calc(var(--sentuh-besar) + 14px); }
@container halaman (min-width: 35.5em) { .js .tab:not(.tab--aktif)::before { height: 3.6rem; } }

/* Dua baris di ponsel: nama di atas, jumlah di bawah, supaya tidak patah di tengah "(12)" */
.tab__tombol { flex-direction: column; line-height: 1.2; padding-block: var(--jarak-2); }
.tab__jumlah { font-weight: var(--tebal-normal); }
.tab__tombol[aria-selected="true"] .tab__jumlah { font-weight: var(--tebal-tegas); }
/* Ponsel: baris jumlah dipesan walau masih kosong, supaya nama tab tidak melompat saat "(n)" terisi (T-01) */
.tab__jumlah:empty { min-height: 1.2em; }
@container halaman (min-width: 35.5em) {
  .tab__tombol { flex-direction: row; gap: var(--jarak-2); font-size: var(--teks-l); }
  .tab__jumlah:empty { display: none; }
}
/* Tab aktif tetap berbeda tanpa warna (bentuk): garis limau 5px di atas, sudah di komponen-v2. Panel hanya satu yang tampil. */

/* ---------- Judul bagian di dalam panel ---------- */
.bagian-judul { margin: 0 0 var(--jarak-4); font-size: var(--teks-xl); }
@container halaman (max-width: 35.49em) { .bagian-judul { font-size: 1.278rem; } }
[data-bagian="berlangsung"]:not(:empty) { margin-bottom: var(--jarak-8); }

/* ---------- Petak tanggal ---------- */
.petak-tanggal {
  flex: none; width: 4.5rem; padding: var(--jarak-2) var(--jarak-1) var(--jarak-3);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: var(--radius-sedang); border: 2px solid var(--warna-latar-pekat);
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih);
}
.petak-tanggal__hari { font-family: var(--huruf-judul); font-weight: var(--tebal-judul); font-size: var(--teks-2xl); line-height: 1.05; }
.petak-tanggal__bulan { font-size: var(--teks-s); font-weight: var(--tebal-tegas); line-height: 1.2; }
/* Status tampak lewat bentuk dan teks lencana, petak hanya mengikuti warnanya */
.kegiatan-kartu--akan .petak-tanggal { background: var(--warna-limau); border-color: var(--warna-limau); color: var(--warna-teks-di-limau); }
.kegiatan-kartu--sudah .petak-tanggal { background: var(--warna-latar-tenang); border-color: var(--warna-garis); color: var(--warna-teks); }

/* ---------- Kartu kegiatan ---------- */
.kegiatan-daftar { align-items: stretch; }
.kegiatan-daftar--lebar { grid-template-columns: minmax(0, 1fr); }
.kegiatan-kartu {
  display: flex; flex-direction: column; height: 100%;
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar);
  box-shadow: var(--bayang-kartu); overflow: hidden;
}
.kegiatan-kartu--sedang { border-color: var(--warna-merek); border-width: 2px; }
.kegiatan-kartu__foto { aspect-ratio: 16 / 10; background: var(--warna-latar-tenang); }
.kegiatan-kartu__foto .kartu__foto { width: 100%; height: 100%; object-fit: cover; }
.kegiatan-kartu__badan { display: flex; align-items: flex-start; gap: var(--jarak-4); padding: var(--jarak-4) var(--jarak-4) var(--jarak-5); flex: 1; }
.kegiatan-kartu__teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--jarak-2); }
.kegiatan-kartu__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2) var(--jarak-3); }
.kegiatan-kartu__hitung { font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); font-size: var(--teks-s); }
.kegiatan-kartu__judul { margin: 0; font-size: var(--teks-l); line-height: 1.3; overflow-wrap: break-word; }
.kegiatan-kartu__tanggal { margin: 0; font-weight: var(--tebal-tegas); max-width: none; }
.kegiatan-kartu__rincian { margin: 0; display: grid; gap: var(--jarak-1); }
.kegiatan-kartu__baris { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@container halaman (min-width: 26.5em) { .kegiatan-kartu__baris { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--jarak-2); align-items: baseline; } }
.kegiatan-kartu__baris dt { font-size: var(--teks-s); font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); }
.kegiatan-kartu__baris dd { margin: 0; overflow-wrap: break-word; }
.kegiatan-kartu__deskripsi { margin: var(--jarak-1) 0 0; max-width: none; }
.kegiatan-kartu__berita { align-self: flex-start; margin-top: var(--jarak-2); }

/* Kartu Sedang: foto di kiri pada layar lebar */
@container halaman (min-width: 42.5em) {
  .kegiatan-kartu--lebar { flex-direction: row; }
  .kegiatan-kartu--lebar .kegiatan-kartu__foto { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
  .kegiatan-kartu--lebar .kegiatan-kartu__foto .kartu__foto { position: absolute; inset: 0; }
  .kegiatan-kartu--lebar .kegiatan-kartu__badan { padding: var(--jarak-5); }
}

/* Muat lebih banyak */
.kegiatan-daftar__lagi { margin-top: var(--jarak-5); width: 100%; }
@container halaman (min-width: 35.5em) { .kegiatan-daftar__lagi { width: auto; min-width: 18rem; display: flex; margin-inline: auto; } }
.kegiatan-daftar__bungkus h3:focus, .kegiatan-daftar__bungkus h4:focus { outline: none; }
.kegiatan-daftar__bungkus h3:focus-visible, .kegiatan-daftar__bungkus h4:focus-visible { outline: var(--fokus-lebar) solid var(--fokus-cincin); outline-offset: 4px; box-shadow: 0 0 0 var(--fokus-halo-lebar) var(--fokus-halo); }

/* ---------- Jadwal rutin mingguan ---------- */
.jadwal__jam {
  margin: 0 0 var(--jarak-5); padding: var(--jarak-3) var(--jarak-4); max-width: none;
  background: var(--warna-latar-tint); border-left: 6px solid var(--warna-merek); border-radius: var(--radius-sedang);
}
.jadwal__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-4); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) { .jadwal__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container halaman (min-width: 55.5em) { .jadwal__daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jadwal__hari {
  display: flex; flex-direction: column; gap: var(--jarak-2); padding: var(--jarak-4);
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar);
}
.jadwal__hari--ini { border: 3px solid var(--warna-merek); background: var(--warna-latar-tint); padding: calc(var(--jarak-4) - 2px); }
.jadwal__nama { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2) var(--jarak-3); font-size: var(--teks-l); color: var(--warna-teks-merek); }
.jadwal__sesi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-3); }
.jadwal__butir { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--jarak-3); align-items: baseline; padding-top: var(--jarak-3); border-top: 1px solid var(--warna-garis-halus); }
.jadwal__butir:first-child { padding-top: 0; border-top: 0; }
.jadwal__waktu { font-weight: var(--tebal-judul); font-family: var(--huruf-judul); font-size: var(--teks-m); }
.jadwal__materi { overflow-wrap: break-word; }
.jadwal__libur, .jadwal__catatan-hari { margin: 0; max-width: none; }
.jadwal__libur { font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); }
.jadwal__catatan-hari { font-size: var(--teks-s); color: var(--warna-teks-lembut); }
.jadwal .belum-ada { margin: 0; }
@container halaman (max-width: 20em) { .jadwal__butir { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Kosong dan memuat ---------- */
.kosong {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--jarak-4);
  padding: var(--jarak-5); background: var(--warna-latar-kartu); border: 2px solid var(--warna-garis); border-radius: var(--radius-besar);
}
.kosong__teks { margin: 0; font-size: var(--teks-l); max-width: 36rem; }
.kosong .belum-ada { margin: 0; }

/* Kerangka memuat: tinggi tetap (tanpa gerak), hanya tampil bila JS aktif */
.memuat { display: none; }
.js .memuat { display: grid; gap: var(--jarak-4); }
.memuat > span { display: block; min-height: 9rem; border-radius: var(--radius-besar); background: var(--warna-latar-tenang); border: 1px solid var(--warna-garis-halus); }
@container halaman (min-width: 35.5em) { .memuat--kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container halaman (min-width: 55.5em) { .memuat--kartu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kegiatan-kartu .belum-ada--sebaris, .jadwal .belum-ada--sebaris { white-space: normal; }

/* Ponsel sempit: petak tanggal mendatar di atas teks, supaya judul tidak terjepit */
@container halaman (max-width: 26.49em) {
  .kegiatan-kartu__badan { flex-direction: column; gap: var(--jarak-3); }
  .petak-tanggal { width: auto; flex-direction: row; align-items: baseline; gap: var(--jarak-2); padding: var(--jarak-1) var(--jarak-4); }
  .petak-tanggal__hari { font-size: var(--teks-xl); }
  .petak-tanggal__bulan { font-size: var(--teks-m); }
  .kegiatan-kartu__teks { width: 100%; }
}