/* Gaya khusus Berita.
 * Primitif bersama (.page, .title, .badge, .meta, .grid, .empty, .error)
 * ada di page.module.css — jangan disalin ulang ke sini.
 */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  overflow: hidden;
}

.cardMedia {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--surface-2);
}

/*
  Bidang pengganti ketika artikel tidak punya sampul.

  Merah tua bergradasi, bukan kotak abu kosong: kotak abu terbaca sebagai foto
  yang gagal dimuat, sementara bidang merah terbaca sebagai keputusan. Gradasinya
  menegaskan bahwa ini bidang buatan, bukan foto yang kehilangan warna.

  CATATAN: beranda memakai bidang yang lebih pucat (`.gambarKosong`) untuk
  keadaan yang sama. Dua wajah untuk satu keadaan, dan penyatuannya tercatat
  sebagai temuan tersendiri di anti-slop/audit-001.
*/
.cardMediaFallback {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--t-kecil);
  letter-spacing: 0.16em;
}

.cardBody {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1;
}

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

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

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

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

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

.articleTitle {
  margin: 0.75rem 0 0.9rem;
  font-size: var(--t-h1);
  line-height: 1.22;
}

.byline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-dasar);
  color: var(--text-muted);
}

.author {
  color: var(--text);
  font-weight: 600;
}

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

.caption {
  margin: 0.6rem 0 0;
  font-size: var(--t-kecil);
  color: var(--text-muted);
  max-width: 56rem;
}

/*
  Pembungkus gambar sampul.

  Di situs lama ini gaya sebaris: style={{ margin: 0 }} langsung di JSX.
  Nilainya sama persis; yang berubah hanya tempatnya. Gaya sebaris tidak
  terjangkau media query maupun keadaan tema, jadi begitu sampul perlu jarak
  berbeda di layar sempit, nilainya harus pindah ke sini juga.
*/
.figurSampul {
  margin: 0;
}