/* ═══════════════════════════════════════════════════════════════
   DICTIO CATEGORY PAGE CSS
   Prefix: dcc- supaya tidak konflik dengan theme, homepage, article
   Font: Sora + DM Serif Display — sama dengan halaman lain
   ═══════════════════════════════════════════════════════════════ */

@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 BREADCRUMB BAWAAN THEME ── */
.site-sub-header { display: none !important; }

/* ── RESET & TOKEN ── */
.dcc-wrap *, .dcc-wrap *::before, .dcc-wrap *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
.dcc-wrap {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #FAF8F5;
    color: #1A1C1E;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    --bg:           #FAF8F5;
    --navy:         #1B3A6B;
    --navy-2:       #24508F;
    --amber:        #C8851A;
    --ink:          #1A1C1E;
    --ink-2:        #44484E;
    --ink-3:        #8A9099;
    --surface:      #FFFFFF;
    --border:       #DDD8CF;
    --border-light: #EAE6DD;
    --exc-bg:       #EEF3FA;
    --r:            8px;
    --px:           2px;
    --gap:          8px;
}
.dcc-wrap a { text-decoration: none; color: inherit; }
.dcc-wrap a:hover { text-decoration: none; }

/* ── THUMBNAIL ── */
.dcc-thumb-img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY HEADER
   ═══════════════════════════════════════════════════════════════ */
.dcc-cat-head {
    padding: 14px var(--px) 12px;
    border-bottom: 3px solid var(--navy);
}
.dcc-cat-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.1;
}

/* ── MINI HEADER (page 2+) ── */
.dcc-mini-head {
    padding: 11px var(--px) 10px;
    border-bottom: 3px solid var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dcc-mini-left {
    display: flex; align-items: center; gap: 8px;
}
.dcc-mini-back {
    font-size: .7rem; font-weight: 600; color: var(--ink-3);
}
.dcc-mini-back:hover { color: var(--navy); }
.dcc-mini-sep {
    width: 1px; height: 14px; background: var(--border);
}
.dcc-mini-label {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem; font-weight: 400; color: var(--navy);
}
.dcc-mini-pg {
    font-size: .62rem; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION WRAPPER
   ═══════════════════════════════════════════════════════════════ */
.dcc-section {
    border-top: 2px solid var(--navy);
    margin-top: 2px;
}
.dcc-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--px) 8px;
}
.dcc-sec-lbl {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--navy);
    display: flex; align-items: center; gap: 4px;
}
.dcc-sec-lbl::before {
    content: ''; width: 3px; height: 12px;
    background: var(--navy); border-radius: 1px;
}
.dcc-sec-sub {
    font-size: .58rem; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   TERBARU — 1 featured + 4 list
   ═══════════════════════════════════════════════════════════════ */
.dcc-latest-wrap {
    padding: 0 var(--px) 12px;
    border-bottom: 1px solid var(--border-light);
}
.dcc-lat-feat {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 10px;
}
.dcc-lat-feat-img {
    display: block; width: 100%; height: 180px;
    object-fit: cover; object-position: center;
}
.dcc-lat-feat-body {
    padding: 10px 12px 13px;
}
.dcc-lat-new {
    display: inline-block;
    background: var(--amber); color: #fff;
    font-size: .55rem; font-weight: 700;
    padding: 2px 7px; border-radius: 100px;
    margin-bottom: 5px;
}
.dcc-lat-feat-title {
    font-family: 'DM Serif Display', serif;
    font-size: .95rem; font-weight: 400;
    color: var(--navy); line-height: 1.3;
    margin-top: 5px; margin-bottom: 6px;
}
.dcc-lat-feat-meta {
    font-size: .6rem; color: var(--ink-3);
}

/* List #2–5 */
.dcc-lat-list {
    display: flex; flex-direction: column;
}
.dcc-lat-li {
    display: flex; align-items: flex-start;
    gap: 8px; padding: 7px 0;
    border-bottom: 1px solid #F0EDE8;
}
.dcc-lat-li:last-child { border-bottom: none; }
.dcc-lat-num {
    font-size: .9rem; font-weight: 700;
    color: var(--border); flex-shrink: 0;
    width: 18px; line-height: 1.2;
}
.dcc-lat-li-title {
    font-size: .7rem; font-weight: 600;
    color: var(--navy); line-height: 1.35;
}
.dcc-lat-li-meta {
    font-size: .58rem; color: var(--ink-3); margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   PILIHAN TERBAIK — 2 besar + 3 thumbnail kanan
   ═══════════════════════════════════════════════════════════════ */
.dcc-best-top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    padding: 0 var(--px) var(--gap);
}
.dcc-bt {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.dcc-bt:hover {
    box-shadow: 0 3px 10px rgba(27,58,107,.08);
    transform: translateY(-1px);
}
.dcc-bt-img {
    display: block; width: 100%; height: 120px;
    object-fit: cover; object-position: center;
}
.dcc-bt-body { padding: 9px 10px 11px; flex: 1; }
.dcc-bt-title {
    font-family: 'DM Serif Display', serif;
    font-size: .85rem; font-weight: 400;
    color: var(--navy); line-height: 1.3; margin-bottom: 5px;
}
.dcc-bt-meta { font-size: .58rem; color: var(--ink-3); }

/* 3 thumbnail — teks kiri, gambar kanan */
.dcc-best-bot {
    display: flex; flex-direction: column;
    gap: var(--gap);
    padding: 0 var(--px) 12px;
    border-bottom: 1px solid var(--border-light);
}
.dcc-bb {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.dcc-bb:hover {
    box-shadow: 0 3px 8px rgba(27,58,107,.07);
    transform: translateY(-1px);
}
.dcc-bb-body { padding: 9px 10px; flex: 1; min-width: 0; }
.dcc-bb-title {
    font-size: .7rem; font-weight: 600;
    color: var(--navy); line-height: 1.33;
}
.dcc-bb-meta { font-size: .57rem; color: var(--ink-3); margin-top: 3px; }
.dcc-bb-img {
    width: 80px; flex-shrink: 0;
    align-self: stretch; min-height: 70px; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PALING BANYAK DIBACA
   ═══════════════════════════════════════════════════════════════ */
.dcc-pop-wrap {
    padding: 0 var(--px) 12px;
    border-bottom: 1px solid var(--border-light);
}
.dcc-pp-item {
    display: flex; align-items: center;
    gap: 10px; padding: 9px 0;
    border-bottom: 1px solid #F0EDE8;
    transition: opacity .12s;
}
.dcc-pp-item:last-child { border-bottom: none; }
.dcc-pp-item:hover { opacity: .85; }
.dcc-pp-rank {
    font-size: 1rem; font-weight: 700;
    color: var(--border); flex-shrink: 0;
    width: 20px; text-align: center;
}
.dcc-pp-body { flex: 1; min-width: 0; }
.dcc-pp-title {
    font-size: .72rem; font-weight: 600;
    color: var(--navy); line-height: 1.35;
}
.dcc-pp-meta { font-size: .58rem; color: var(--ink-3); margin-top: 3px; }
.dcc-pp-thumb {
    width: 72px; height: 72px;
    border-radius: 6px; flex-shrink: 0;
    object-fit: cover; object-position: center;
    overflow: hidden; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   SEMUA ARTIKEL — header + sort
   ═══════════════════════════════════════════════════════════════ */
.dcc-all-section { }
.dcc-all-head {
    padding: 12px var(--px) 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.dcc-all-lbl { }
.dcc-all-counter {
    font-size: .6rem; color: var(--ink-3);
}
.dcc-sort { display: flex; gap: 5px; }
.dcc-sort-btn {
    font-size: .58rem; font-weight: 600;
    padding: 3px 9px; border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-3);
    transition: all .15s;
}
.dcc-sort-btn:hover { border-color: var(--navy); color: var(--navy); }
.dcc-sort-on {
    background: var(--navy); border-color: var(--navy); color: #fff;
}
.dcc-sort-on:hover { opacity: .9; }

/* ═══════════════════════════════════════════════════════════════
   ARTIKEL BESAR (2 pertama page 1 — atau 1 pertama page 2+)
   ═══════════════════════════════════════════════════════════════ */
.dcc-all-list {
    padding: 0 var(--px);
    display: flex; flex-direction: column; gap: var(--gap);
}
.dcc-ab {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.dcc-ab:hover {
    box-shadow: 0 3px 10px rgba(27,58,107,.08);
    transform: translateY(-1px);
}
.dcc-ab-img {
    display: block; width: 100%; height: 170px;
    object-fit: cover; object-position: center;
}
.dcc-ab-body { padding: 11px 13px 13px; }
.dcc-ab-title {
    font-size: .85rem; font-weight: 600;
    color: var(--navy); line-height: 1.38;
    margin-bottom: 6px;
}
.dcc-ab-exc {
    font-size: .68rem; color: var(--ink-2);
    line-height: 1.6;
    padding: 7px 10px;
    background: var(--exc-bg);
    border-radius: 5px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dcc-ab-foot {
    display: flex; justify-content: space-between;
}
.dcc-ab-meta { font-size: .58rem; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════
   ARTIKEL ROW (thumb kanan)
   ═══════════════════════════════════════════════════════════════ */
.dcc-ar {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.dcc-ar:hover {
    box-shadow: 0 3px 10px rgba(27,58,107,.08);
    transform: translateY(-1px);
}
.dcc-ar-body {
    padding: 10px 11px; flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-between; min-width: 0;
}
.dcc-ar-title {
    font-size: .75rem; font-weight: 600;
    color: var(--navy); line-height: 1.35;
    margin-bottom: 5px;
}
.dcc-ar-exc {
    font-size: .65rem; color: var(--ink-2);
    line-height: 1.55;
    padding: 6px 9px;
    background: var(--exc-bg);
    border-radius: 5px;
    margin-bottom: 7px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dcc-ar-foot {
    display: flex; justify-content: space-between;
}
.dcc-ar-meta { font-size: .57rem; color: var(--ink-3); }
.dcc-ar-thumb {
    width: 110px; flex-shrink: 0;
    align-self: stretch; min-height: 110px; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.dcc-pagination {
    padding: 16px var(--px) 20px;
    display: flex; align-items: center;
    justify-content: center; gap: 5px;
}
.dcc-pgb {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 6px;
    font-size: .68rem; font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-2);
    transition: all .15s;
}
.dcc-pgb:hover { border-color: var(--navy); color: var(--navy); }
.dcc-pgb-on {
    background: var(--navy); border-color: var(--navy); color: #fff;
}
.dcc-pgb-on:hover { opacity: .9; }
.dcc-pgb-arr { color: var(--ink-3); font-size: .85rem; }
.dcc-pg-info {
    font-size: .58rem; color: var(--ink-3); margin-left: 4px;
}

/* ── EMPTY STATE ── */
.dcc-empty {
    padding: 24px var(--px);
    font-size: .78rem; color: var(--ink-3); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ≥ 700px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
    .dcc-wrap {
        --px:  32px;
        --gap: 14px;
    }

    /* Cat header */
    .dcc-cat-name { font-size: 2rem; }

    /* Terbaru desktop: featured kiri + list kanan */
    .dcc-latest-wrap {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: var(--gap);
        align-items: start;
    }
    .dcc-lat-feat { margin-bottom: 0; }
    .dcc-lat-feat-img { height: 220px; }
    .dcc-lat-feat-title { font-size: 1.1rem; }
    .dcc-lat-li-title { font-size: .85rem; }
    .dcc-lat-li-meta  { font-size: .68rem; }

    /* Pilihan terbaik desktop */
    .dcc-bt-img { height: 220px; }
    .dcc-bt-title { font-size: .95rem; }
    .dcc-best-bot { flex-direction: row; }
    .dcc-bb { flex: 1; }
    .dcc-bb-img { width: 90px; min-height: 80px; }
    .dcc-bb-title { font-size: .8rem; }
    .dcc-bb-meta  { font-size: .65rem; }

    /* Populer desktop: 2 kolom, thumbnail lebih besar */
    .dcc-pop-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--gap);
    }
    .dcc-pp-item { border-bottom: 1px solid #F0EDE8; }
    .dcc-pp-thumb { width: 90px; height: 90px; border-radius: 7px; }
    .dcc-pp-title { font-size: .78rem; }

    /* Semua artikel desktop */
    .dcc-all-list-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        margin-bottom: var(--gap);
    }
    .dcc-ab-img { height: 200px; }
    .dcc-ab-title { font-size: .92rem; }
    .dcc-ab-exc { font-size: .72rem; -webkit-line-clamp: 4; }
    .dcc-ar-thumb { width: 300px; min-height: 180px; }
    .dcc-ar { min-height: 180px; }
    .dcc-ar-title { font-size: .8rem; }
    .dcc-ar-exc { font-size: .68rem; -webkit-line-clamp: 4; }

    /* Pagination */
    .dcc-pgb { width: 34px; height: 34px; font-size: .72rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤ 699px — override spesifik
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
    /* Terbaru: perbesar font list #2-5 */
    .dcc-lat-li-title { font-size: .78rem; }
    .dcc-lat-li-meta  { font-size: .65rem; }

    /* Pilihan terbaik: tetap 2 kolom di mobile */
    .dcc-best-top { grid-template-columns: 1fr 1fr; }
    .dcc-bt-img { height: 110px; }
    .dcc-bt-title { font-size: .82rem; }

    /* Pilihan terbaik thumbnail: gambar setinggi card */
    .dcc-bb { align-items: stretch; }
    .dcc-bb-img { width: 90px; min-height: unset; align-self: stretch; height: auto; }

    /* Populer: perbesar font judul, sembunyikan item 6-10 */
    .dcc-pp-title { font-size: .78rem; }
    .dcc-pp-item:nth-child(n+6) { display: none; }

    /* Semua artikel thumbnail row: setinggi card */
    .dcc-ar { align-items: stretch; }
    .dcc-ar-thumb { width: 100px; min-height: unset; align-self: stretch; height: auto; }
}