/* ============================================================
   KHOTBAH.CSS — Arsip khotbah dwibahasa (listing + detail)
   Memakai artikel.css (kartu & detail) dan belajar.css (chip, search).
   ============================================================ */

/* ---------- LISTING ---------- */
.kh-card { cursor:pointer; }
.kh-card .ar-cover { aspect-ratio:16/7; flex-direction:column; gap:.3rem; color:#fff; }
.kh-no { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.7rem; line-height:1; }
.kh-ref { font-size:.74rem; font-weight:700; opacity:.92; padding:0 .8rem; text-align:center; }
.kh-ko { word-break:keep-all; font-size:.72rem; color:var(--gray); margin:-.15rem 0 .45rem; }
.kh-count { font-size:.78rem; color:var(--gray); margin-top:1.25rem; }
.kh-empty { font-size:.86rem; color:var(--gray); padding:2rem 0; }
.ar-pagination { flex-wrap:wrap; }
.ar-pg { cursor:pointer; }

/* ---------- DETAIL ---------- */
.kh-title-ko { word-break:keep-all; font-size:.95rem; opacity:.9; margin-top:.2rem; }
.kh-back { display:inline-block; font-size:.78rem; font-weight:700; color:#fff; opacity:.9; margin-bottom:1rem; }
.kh-toggle { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-size:.8rem; font-weight:700; padding:.6rem 1.15rem; border-radius:999px; border:1.5px solid var(--tosca); color:var(--tosca); background:#fff; cursor:pointer; }
.kh-toggle[aria-expanded="true"] { background:var(--tosca); color:#fff; }
.kh-ko-box { margin-top:1.25rem; padding:1.25rem 1.25rem .4rem; background:var(--offwhite); border-radius:14px; }
.kh-ko-box[hidden] { display:none; }
.kh-ko-box h3 { font-weight:700; font-size:1rem; color:var(--black); margin-bottom:.2rem; }
.kh-ko-box .kh-ko-ref { font-size:.76rem; color:var(--gray); margin-bottom:1rem; }
.kh-ko-box p { font-size:.86rem; color:#333; line-height:1.9; margin-bottom:1rem; word-break:keep-all; }
.kh-source { font-size:.74rem; color:var(--gray); margin-top:1rem; }
.kh-source a { color:var(--tosca-dk); text-decoration:underline; }
.kh-nav { display:flex; justify-content:space-between; gap:1rem; max-width:46rem; margin:0 auto; padding:1rem var(--pad) 3rem; }
.kh-nav a { flex:1; font-size:.8rem; color:var(--black); border:1.5px solid var(--border); border-radius:14px; padding:.85rem 1rem; line-height:1.4; }
.kh-nav a span { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--tosca); margin-bottom:.2rem; }
.kh-nav a.next { text-align:right; }
.kh-nav a:only-child.next { margin-left:auto; max-width:50%; }
.kh-nav a:only-child.prev { max-width:50%; }

@media (min-width:1024px) {
  .kh-nav { padding:1rem 0 3rem; }
}