/*
 * Tampilan tulisan panjang: /sejarah-catur, dan halaman blog berikutnya.
 *
 * Berkas terpisah dari app.css dengan alasan yang sama seperti legal.css: halaman ini
 * dibaca berurutan dari atas ke bawah, bukan dipindai sambil bermain. Yang dikejar
 * panjang baris yang nyaman (±68 huruf), jarak antarbaris yang longgar, dan judul yang
 * jelas tingkatannya — bukan kepadatan informasi seperti kartu-kartu di beranda.
 *
 * Warnanya tidak punya satu pun nilai baru: semuanya peubah dari app.css, supaya
 * halaman tulisan tidak diam-diam menjadi pulau dengan hijau yang berbeda sendiri.
 */

.post-wrap { max-width: 880px; }

/* ------------------------------------------------------------------ kepala ---- */

.post-hero {
  display: flex; align-items: center; gap: 26px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #fff; border-radius: 20px; padding: 26px 28px; margin: 8px 0 26px;
}
.ph-txt { flex: 1; min-width: 0; }
.ph-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.post-hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.18; color: #fff; }
.ph-sub { margin: 0 0 12px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .93); }
.ph-meta { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82); }

/* Papan kecil di kepala halaman. Petak & bidaknya datang dari `.mini-board` di app.css
   (dipakai bersama kepala beranda dan kartu OG); yang ditentukan di sini cuma ukuran dan
   bayangannya. */
.ph-board {
  flex: none; width: 232px;
  border-radius: 16px; box-shadow: 0 14px 34px rgba(4, 30, 18, .28);
}

@media (max-width: 720px) {
  .post-hero { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px; }
  .post-hero h1 { font-size: 25px; }
  .ph-board { width: 176px; align-self: center; }
}

/* -------------------------------------------------------------------- isi ----- */

.post { font-size: 17px; line-height: 1.78; color: var(--text); }
.post > p { margin: 0 0 18px; max-width: 68ch; }
.post h2 {
  margin: 34px 0 12px; font-size: 24px; line-height: 1.25;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.post h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.post h3 { margin: 24px 0 8px; font-size: 18px; }
.post a { color: var(--accent); }
.post strong { font-weight: 700; }

.post ul, .post ol { margin: 0 0 18px; padding-left: 22px; max-width: 68ch; }
.post li { margin-bottom: 8px; }

/* Gambar: selalu selebar tulisan, dengan keterangan di bawahnya. Latar putih di balik
   gambar dipasang sengaja — berkas SVG-nya tembus pandang, dan tanpa latar itu ia akan
   ikut berubah warna kalau suatu hari halaman ini punya tema gelap. */
.post figure { margin: 24px 0 26px; }
.post figure img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 8px;
}
.post figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.post-quote {
  margin: 26px 0; padding: 18px 22px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 14px 14px 0;
  font-size: 18px; line-height: 1.6; color: var(--text);
}
.post-quote p { margin: 0; }

/* Ajakan di kaki tulisan. Dua tombol, bukan lima: yang baru selesai membaca sejarah
   catur sedang ingin bermain atau ingin belajar, dan menawarkan segalanya sekaligus
   adalah cara membuatnya tidak menekan apa pun. */
.post-cta {
  margin: 32px 0 10px; padding: 22px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--bg-soft);
}
.post-cta h2 { margin: 0 0 8px; border: 0; padding: 0; font-size: 20px; }
.post-cta p { margin: 0 0 14px; color: var(--muted); max-width: 60ch; }
.post-cta .row { display: flex; flex-wrap: wrap; gap: 10px; }

.post-note {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

/* ------------------------------------------------------- daftar artikel ----- */
/* /artikel dan blok "Baca juga" di bawah tiap tulisan (src/routes/artikel.js). Kartu
   berlatar putih di atas halaman terang, sampulnya selalu 1200×630 supaya barisnya rata. */

.al-crumbs { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.al-crumbs a { color: var(--accent); text-decoration: none; }
.al-hero { margin-bottom: 22px; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.al-grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.al-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.al-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(4, 30, 18, .10); }
.al-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--bg-soft); }
.al-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.al-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.al-card h2 { margin: 0; font-size: 17px; line-height: 1.3; border: 0; padding: 0; }
.al-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-meta { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.al-related { margin-top: 30px; }
.al-related h2 { margin-bottom: 14px; }
.post .al-related .al-card h2 { margin: 0; font-size: 15.5px; }

/* Sampul di kepala tulisan: tanpa bingkai & bantalan seperti gambar di dalam isi —
   ia gambar utuh 1200×630 yang sudah punya latar sendiri. */
.post .post-cover { margin: 0 0 26px; }
.post .post-cover img { padding: 0; border: 0; border-radius: 18px; }
.post h4 { margin: 18px 0 6px; font-size: 16px; }
.post blockquote {
  margin: 22px 0; padding: 14px 20px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 12px 12px 0; max-width: 68ch;
}
.post code { font-size: .92em; background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; }

/* Tabel di dalam artikel (29 Sep 2026). Dibungkus .al-table yang bisa digulung ke samping:
   di layar 360px, tabel empat kolom tidak muat dan tanpa pembungkus ini ia memaksa SELURUH
   halaman menggulung ke kanan — bukan tabelnya saja. */
.al-table { max-width: 68ch; margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.al-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.al-table th, .al-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.al-table thead th { background: var(--accent-soft); color: var(--accent-dark, var(--text)); font-weight: 800; white-space: nowrap; }
.al-table tbody tr:last-child td { border-bottom: 0; }