/* ═══════════════════════════════════════════════════════════════
   DICTIO ARTICLE LANDING PAGE CSS
   Prefix: dca- supaya tidak konflik dengan theme & homepage
   Font: Sora (sans) + DM Serif Display (serif) — sama dengan homepage
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── HIDE AREA JUDUL PAGE + BREADCRUMB BAWAAN THEME ── */
.site-sub-header { display: none !important; }

/* ── RESET & TOKEN ── */
.dca-wrap *, .dca-wrap *::before, .dca-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.dca-wrap {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FAF8F5;
  color: #1A1C1E;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  --bg:           #FAF8F5;
  --bg-2:         #F2EFE9;
  --navy:         #1B3A6B;
  --navy-2:       #24508F;
  --amber:        #C8851A;
  --amber-pale:   #FDF5E8;
  --amber-border: #EDD9A3;
  --ink:          #1A1C1E;
  --ink-2:        #44484E;
  --ink-3:        #8A9099;
  --surface:      #FFFFFF;
  --border:       #DDD8CF;
  --border-light: #EAE6DD;
  --r:            8px;
  --r-img:        8px;
  --px:           20px;
  --gap:          12px;
}

/* ── SHARED ── */
.dca-wrap a { text-decoration: none; color: inherit; }
.dca-wrap a:hover { text-decoration: none; }

.dca-tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--amber); margin-bottom: 5px;
}
.dca-news-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #993C1D; margin-bottom: 3px;
}

/* Thumbnail: semua gambar stretch setinggi card */
.dca-thumb-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.dca-thumb-ph {
  display: block; width: 100%; height: 100%;
  min-height: inherit;
}

/* Wrapper dua tag (parent + sub) */
.dca-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dca-zona-lbl {
  display: flex; align-items: center; gap: 8px;
  padding: 18px var(--px) 10px;
}
.dca-zl-txt {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.dca-zl-line { flex: 1; height: 1px; background: var(--border-light); }

/* ── NEWS TERKINI ── */
.dca-news-sec {
  border-top: 3px solid var(--navy);
  background: var(--bg);
  padding: 16px var(--px) 20px;
  border-bottom: 1px solid var(--border);
}
.dca-news-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dca-news-lbl {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.dca-news-lbl::before {
  content: ''; width: 3px; height: 14px;
  background: var(--navy); border-radius: 1px;
}
.dca-news-see { font-size: .7rem; color: var(--ink-3); }

/* News row: 1 kolom di mobile, 3 kolom di desktop */
.dca-news-row { display: flex; flex-direction: column; gap: 10px; }

.dca-news-item {
  display: flex; gap: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--r); overflow: hidden; min-height: 72px;
  transition: border-color .15s, box-shadow .15s;
}
.dca-news-item:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 8px rgba(27,58,107,.08);
}

/* Thumbnail kiri, setinggi item — align-self stretch supaya full height */
.dca-news-thumb {
  width: 96px; flex-shrink: 0;
  align-self: stretch; min-height: 72px;
  display: flex; flex-direction: column;
}
.dca-news-thumb .dca-thumb-img,
.dca-news-thumb .dca-thumb-ph {
  flex: 1; min-height: 72px;
}
.dca-news-body { padding: 10px 13px; flex: 1; }
.dca-news-title { font-size: .78rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.dca-news-meta  { font-size: .65rem; color: var(--ink-3); margin-top: 4px; }

/* ── PAGE HEADER ── */
.dca-pg-head {
  padding: 12px var(--px);
  border-bottom: 2px solid var(--navy);
  display: flex; justify-content: space-between; align-items: baseline;
}
.dca-pg-title {
  font-size: .85rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
}
.dca-pg-sub { font-size: .68rem; color: var(--ink-3); }

/* ── TOP 2 ── */
.dca-top2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap) var(--px) 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--gap);
}
.dca-top2-item {
  display: flex; flex-direction: column;
  cursor: pointer; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--border-light);
  background: var(--surface);
  transition: box-shadow .18s, transform .18s;
}
.dca-top2-item:hover {
  box-shadow: 0 4px 16px rgba(27,58,107,.10);
  transform: translateY(-2px);
}
.dca-top2-img {
  width: 100%; height: 200px; flex-shrink: 0;
  border-radius: var(--r-img) var(--r-img) 0 0;
  overflow: hidden;
}
.dca-top2-body {
  padding: 14px 16px 16px; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.dca-top2-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem; font-weight: 400; color: var(--navy);
  line-height: 1.35; margin-bottom: 10px;
}
.dca-top2-meta { font-size: .65rem; color: var(--ink-3); }

/* ── ZONA A: GRID 3 ── */
.dca-grid3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  padding: 0 var(--px) var(--gap);
  border-bottom: 1px solid var(--border);
}
.dca-g3-item {
  display: flex; flex-direction: column;
  cursor: pointer; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--border-light);
  background: var(--surface);
  transition: box-shadow .18s, transform .18s;
}
.dca-g3-item:hover {
  box-shadow: 0 4px 12px rgba(27,58,107,.08);
  transform: translateY(-2px);
}
.dca-g3-img { width: 100%; height: 130px; flex-shrink: 0; }
.dca-g3-body { padding: 11px 13px 13px; flex: 1; }
.dca-g3-title {
  font-size: .82rem; font-weight: 600; color: var(--navy);
  line-height: 1.38;
}
.dca-g3-meta { font-size: .65rem; color: var(--ink-3); margin-top: 6px; }

/* ── ZONA B: BESAR + SIDEBAR ── */
.dca-zonab {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: var(--gap);
  padding: 0 var(--px) var(--gap);
  border-bottom: 1px solid var(--border);
}
.dca-zb-main {
  display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface);
  cursor: pointer; transition: box-shadow .18s, transform .18s;
}
.dca-zb-main:hover {
  box-shadow: 0 4px 16px rgba(27,58,107,.10);
  transform: translateY(-2px);
}
.dca-zb-img { width: 100%; height: 180px; flex-shrink: 0; }
.dca-zb-body { padding: 14px 16px 16px; flex: 1; }
.dca-zb-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1rem; font-weight: 400; color: var(--navy);
  line-height: 1.35; margin-bottom: 8px;
}
.dca-zb-exc {
  font-size: .75rem; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px;
}
.dca-zb-meta { font-size: .65rem; color: var(--ink-3); }

/* Sidebar items */
.dca-zb-side {
  display: flex; flex-direction: column; gap: var(--gap);
}
.dca-zb-si {
  display: flex; cursor: pointer;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface);
  flex: 1; transition: box-shadow .18s, transform .18s;
}
.dca-zb-si:hover {
  box-shadow: 0 4px 12px rgba(27,58,107,.08);
  transform: translateY(-2px);
}
.dca-zb-si-thumb {
  width: 80px; flex-shrink: 0; align-self: stretch;
  min-height: 80px;
}
.dca-zb-si-body { padding: 10px 12px; flex: 1; }
.dca-zb-si-title {
  font-size: .78rem; font-weight: 600; color: var(--navy); line-height: 1.38;
}
.dca-zb-si-meta { font-size: .63rem; color: var(--ink-3); margin-top: 4px; }

/* ── ZONA C: LIST 2 PER BARIS ── */
.dca-listc {
  padding: 0 var(--px) var(--gap);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--gap);
}
.dca-lrow {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
.dca-li {
  display: flex; cursor: pointer;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface);
  transition: box-shadow .18s, transform .18s;
}
.dca-li:hover {
  box-shadow: 0 4px 12px rgba(27,58,107,.08);
  transform: translateY(-2px);
}
.dca-li-thumb {
  width: 96px; min-width: 96px; flex-shrink: 0; align-self: stretch;
  min-height: 80px; object-fit: cover; object-position: center;
}
.dca-li-body { padding: 11px 13px; flex: 1; }
.dca-li-title {
  font-size: .8rem; font-weight: 600; color: var(--navy); line-height: 1.38;
}
.dca-li-meta { font-size: .63rem; color: var(--ink-3); margin-top: 4px; }

/* ── ZONA D: GRID 4 KECIL ── */
.dca-grid4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: 0 var(--px) var(--gap);
  border-bottom: 1px solid var(--border);
}
.dca-g4-item {
  display: flex; flex-direction: column;
  cursor: pointer; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--border-light);
  background: var(--surface);
  transition: box-shadow .18s, transform .18s;
}
.dca-g4-item:hover {
  box-shadow: 0 4px 12px rgba(27,58,107,.08);
  transform: translateY(-2px);
}
.dca-g4-img { width: 100%; height: 90px; flex-shrink: 0; }
.dca-g4-body { padding: 10px 11px 12px; flex: 1; }
.dca-g4-title {
  font-size: .75rem; font-weight: 600; color: var(--navy); line-height: 1.35;
}
.dca-g4-meta { font-size: .63rem; color: var(--ink-3); margin-top: 4px; }

/* ── LOAD MORE ── */
.dca-load-more { padding: 20px var(--px) 24px; text-align: center; }
.dca-load-btn {
  display: inline-block; font-family: 'Sora', sans-serif;
  font-size: .78rem; font-weight: 700; color: var(--navy);
  border: 1.5px solid var(--navy); border-radius: 100px;
  padding: 9px 26px; cursor: pointer; background: transparent;
  transition: all .18s;
}
.dca-load-btn:hover { background: var(--navy); color: #fff; }
.dca-load-count { font-weight: 400; opacity: .7; }

/* More articles */
.dca-more-wrap {
  padding: 0 var(--px) var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
  border-top: 1px solid var(--border);
}
.dca-more-item { border-right: none !important; }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ≥ 700px
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  .dca-wrap { --px: 32px; --gap: 16px; }

  /* News: 3 kolom */
  .dca-news-row { flex-direction: row; gap: var(--gap); }
  .dca-news-item { flex: 1; }
  .dca-news-thumb { width: 110px; min-height: 80px; }
  .dca-news-title { font-size: .8rem; }

  /* Page header */
  .dca-pg-title { font-size: 1rem; }

  /* Top 2 */
  .dca-top2-img { height: 240px; }
  .dca-top2-title { font-size: 1.2rem; }

  /* Zona A */
  .dca-g3-img { height: 160px; }
  .dca-g3-title { font-size: .88rem; }

  /* Zona B */
  .dca-zb-img { height: 220px; }
  .dca-zb-title { font-size: 1.1rem; }
  .dca-zb-si-thumb { width: 100px; min-height: 90px; }

  /* Zona C */
  .dca-li-thumb { width: 120px; min-height: 90px; }
  .dca-li-title { font-size: .85rem; }

  /* Zona D */
  .dca-g4-img { height: 110px; }
  .dca-g4-title { font-size: .78rem; }

  /* More: 2 kolom */
  .dca-more-wrap { flex-direction: row; flex-wrap: wrap; }
  .dca-more-item { width: calc(50% - var(--gap) / 2); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤ 699px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 699px) {

  /* Top 2: stack vertikal */
  .dca-top2 { grid-template-columns: 1fr; }
  .dca-top2-img { height: 180px; }

  /* Zona A: 2 kolom sedang, item ke-3 jadi list */
  .dca-grid3 { grid-template-columns: 1fr 1fr; }
  .dca-g3-item:nth-child(3) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .dca-g3-item:nth-child(3) .dca-g3-img {
    width: 96px; height: auto; flex-shrink: 0; min-height: 80px;
  }
  .dca-g3-img { height: 110px; }

  /* Zona B: stack vertikal */
  .dca-zonab { grid-template-columns: 1fr; }
  .dca-zb-img { height: 160px; }
  .dca-zb-side { flex-direction: column; }

/* Zona C mobile */
.dca-lrow { grid-template-columns: 1fr !important; gap: 8px !important; }
.dca-li { border-radius: var(--r) !important; border: 1px solid var(--border-light) !important; box-shadow: none !important; transform: none !important; }
.dca-li-thumb { width: 96px !important; min-width: 96px !important; min-height: 80px !important; border-radius: 0 !important; margin: 0 !important; align-self: stretch !important; object-fit: cover !important; }
.dca-li-body { padding: 12px !important; }
.dca-listc { background: transparent !important; border: none !important; }


  .dca-li:last-child { border-bottom: none; }
  .dca-li-thumb { width: 72px; min-height: 64px; border-radius: 6px; margin: 8px 0 8px 12px; align-self: center; flex-shrink: 0; }
  .dca-li-body { padding: 10px 12px 10px 10px; }
  .dca-listc { border-bottom: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--border-light); }

  /* Zona D: 2 kolom */
  .dca-grid4 { grid-template-columns: 1fr 1fr; }
  .dca-g4-img { height: 100px; }
}