/* Gaya khusus Agenda. Primitif bersama ada di page.module.css. */

.item {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 4.5rem 1fr;
  align-items: start;
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-kartu);
}

/* Blok tanggal — tanggal besar di atas bulan */
.dateBlock {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  width: 4.5rem;
  padding: 0.6rem 0.4rem;
  border-radius: var(--r-kartu);
  background: var(--primary-isi);
  color: #fff;
  line-height: 1;
}

.dateDay {
  font-size: var(--t-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dateMonth {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dateYear {
  font-size: var(--t-mikro);
  opacity: 0.85;
}

/* Kegiatan lampau: tanpa penekanan warna */
.itemPast {
  border-left-color: var(--border);
}

.itemPast .dateBlock {
  background: var(--surface-2);
  color: var(--text-muted);
}

/*
  POLA TIGA KEADAAN, bukan media query tunggal.

  Media query sendirian hanya mengenal tema SISTEM; ia tidak tahu pengunjung
  menekan toggle tema. Stempel `[data-theme]` sendirian tidak tahu tema sistem.
  Keduanya diperlukan, dan lengan sistemnya WAJIB dipagari media query —
  `:root:not([data-theme='light'])` cocok dengan setiap root tak berstempel,
  termasuk yang bersistem terang, sehingga tanpa pagar itu nilai gelapnya bocor
  ke tema terang. (Cacat semacam itu benar-benar terjadi pada `.cardFlagship`
  di program.module.css.)

  Nilainya tidak berubah. `#2a2a2e` tetap literal di sini, bukan token, karena
  ia bidang netral khusus mode gelap yang tidak punya padanan di tangga
  `--brand-*` — memaksakannya ke token akan mengubah tampilannya. Pemindahannya
  ke globals.css tercatat sebagai pekerjaan terpisah.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .itemPast .dateBlock {
    background: #2a2a2e;
  }
}

:root[data-theme='dark'] .itemPast .dateBlock {
  background: #2a2a2e;
}

.itemBody {
  min-width: 0;
}

.itemTitle {
  margin: 0 0 0.4rem;
  font-size: var(--t-isi);
  line-height: 1.4;
}

.itemTitle a {
  color: var(--text);
  text-decoration: none;
  display: inline;
  min-height: auto;
}

.itemTitle a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.summary {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.6;
}

/* Penanda batal — warna disertai teks, bukan warna saja */
.cancelled {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: var(--t-mikro);
  font-weight: 700;
}

/*
  Pola tiga keadaan, sama seperti `.itemPast .dateBlock` di atas.

  Ketiga nilai gelapnya — #331416, #6b2a2f, #e8a5aa — TIDAK diubah, tetapi
  perlu dicatat: ketiganya sama persis dengan `.healthMerah` di
  program.module.css. Satu peran semantik ("merah: batal / bermasalah") ditulis
  dua kali sebagai literal di dua berkas. Menyatukannya menjadi token status di
  globals.css adalah pekerjaan tersendiri, dan menyentuh warna status hijau dan
  kuning juga — keputusan yang bukan milik saya.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cancelled {
    background: #331416;
    border-color: #6b2a2f;
    color: #e8a5aa;
  }
}

:root[data-theme='dark'] .cancelled {
  background: #331416;
  border-color: #6b2a2f;
  color: #e8a5aa;
}

.titleCancelled {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------- Detail ---------- */

.hero {
  width: 100%;
  max-width: 56rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-kartu);
  margin: 2rem 0 0;
}

.detailLayout {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .detailLayout {
    grid-template-columns: 1fr 18rem;
    gap: 3rem;
  }
}

.infoCard {
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
}

.infoList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-dasar);
}

.infoRow {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.infoRow:last-child {
  border-bottom: 0;
}

.infoLabel {
  display: block;
  color: var(--text-muted);
  font-size: var(--t-kecil);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.15rem;
}

.infoValue {
  font-weight: 600;
  overflow-wrap: break-word;
}

/*
  Tajuk "Narasumber" pada halaman agenda.

  Sebelumnya ditulis sebagai `className={pr.prose ? undefined : undefined}` —
  sebuah ternari yang kedua cabangnya `undefined`, jadi tidak pernah memasang
  kelas apa pun — lalu ditambal `style` inline berisi 1,15rem dan 2rem. Dua
  angka itu tidak berasal dari tangga ukuran mana pun dan tidak ikut berubah
  bila tangganya diubah. Sekarang memakai token yang sama dengan tajuk sederajat
  di halaman lain.
*/
.subJudul {
  margin: 2rem 0 0.75rem;
  font-size: var(--t-sedang);
}

.linkList {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.linkList li {
  padding: 0.4rem 0;
}

@media (max-width: 34rem) {
  .item {
    grid-template-columns: 3.4rem 1fr;
    gap: 0.9rem;
  }
  .dateBlock {
    width: 3.4rem;
  }
  .dateDay {
    font-size: var(--t-sedang);
  }
}