/* blog.css - Halaman Blog dwshop.solacewp.com
Dimuat hanya di Posts Page (/blog/) lewat functions.php child theme.
Mengembalikan tampilan blog dua kolom yang hilang saat migrasi
theme Essentials -> Hello Elementor (FASE 4). Acuan: darrelwilson.com/blog/ */
.dw-blog{--dw-brand:var(--e-global-color-accent,#D02920);--dw-brand-hover:#8A140C;--dw-heading:var(--e-global-color-primary,#12141A);--dw-text:#4A4F57;--dw-text-light:#8C9096;--dw-border:#E6E9F0;--dw-bg:#F2F3F6;--dw-card:#FFFFFF;--dw-radius:16px;--dw-shadow:0 2px 10px rgba(18,20,26,.06);--dw-shadow-hover:0 14px 34px rgba(18,20,26,.13);--dw-gap:34px;background:var(--dw-bg);padding:44px 20px 68px;color:var(--dw-text)}
.dw-blog__inner{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--dw-gap);max-width:1200px;margin:0 auto;align-items:start}
.dw-blog--full .dw-blog__inner{grid-template-columns:minmax(0,1fr)}
.dw-blog__main{min-width:0}
/* 1. Kartu artikel */
.dw-blog .dw-card{background:var(--dw-card);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);overflow:hidden;margin:0 0 30px;transition:transform .28s ease,box-shadow .28s ease}
.dw-blog .dw-card:hover{transform:translateY(-4px);box-shadow:var(--dw-shadow-hover)}
.dw-card__media{position:relative;padding:18px 18px 0}
.dw-card__medialink{display:block;border-radius:12px;overflow:hidden;line-height:0}
.dw-card__img{display:block;width:100%;height:clamp(190px,30vw,420px);object-fit:cover;transition:transform .5s ease}
.dw-blog .dw-card:hover .dw-card__img{transform:scale(1.045)}
.dw-card__overlay{position:absolute;left:18px;right:18px;bottom:0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0 0 12px 12px;background:linear-gradient(to top,rgba(8,10,14,.72),rgba(8,10,14,0));pointer-events:none}
.dw-card__overlay a{pointer-events:auto}
.dw-card__author{display:inline-flex;align-items:center;gap:9px;min-width:0}
.dw-card__avatar{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.85);display:block}
.dw-card__authorname{color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-card__stats{display:inline-flex;align-items:center;gap:8px;flex:none}
.dw-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--dw-heading);font-size:12px;font-weight:700;line-height:1;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.dw-chip--likes{padding:0;background:transparent;box-shadow:none}
.dw-chip--likes .pixfort-likes{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--dw-heading);font-size:12px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.dw-chip svg{flex:none}
/* 2. Badan kartu */
.dw-card__body{padding:18px 22px 22px}
.dw-card__cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.dw-blog .dw-badge{display:inline-block;padding:5px 11px;border-radius:6px;background:rgba(208,41,32,.09);color:var(--dw-brand);font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;transition:background .2s ease,color .2s ease}
.dw-blog .dw-badge:hover{background:var(--dw-brand);color:#fff}
.dw-blog .dw-card__title{margin:0 0 10px;font-size:clamp(19px,2.1vw,24px);line-height:1.32;font-weight:700}
.dw-blog .dw-card__title a{color:var(--dw-heading);text-decoration:none;transition:color .2s ease}
.dw-blog .dw-card__title a:hover{color:var(--dw-brand)}
.dw-card__excerpt{margin:0 0 18px;font-size:15px;line-height:1.72;color:var(--dw-text)}
/* 3. Footer kartu */
.dw-card__footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:15px;border-top:1px solid var(--dw-border);flex-wrap:wrap}
.dw-blog .dw-card__date{display:inline-flex;align-items:center;gap:7px;color:var(--dw-text-light);font-size:13px;font-weight:600;text-decoration:none}
.dw-blog .dw-card__more{display:inline-flex;align-items:center;gap:7px;color:var(--dw-brand);font-size:14px;font-weight:700;text-decoration:none}
.dw-blog .dw-card__more:hover{color:var(--dw-brand-hover)}
.dw-blog .dw-card__more svg{transition:transform .22s ease}
.dw-blog .dw-card__more:hover svg{transform:translateX(4px)}
/* 4. Pagination */
.dw-blog .navigation.pagination{margin-top:34px}
.dw-blog .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dw-blog .nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;border-radius:10px;background:var(--dw-card);box-shadow:var(--dw-shadow);color:var(--dw-heading);font-size:14px;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.dw-blog .nav-links .page-numbers:hover{background:var(--dw-heading);color:#fff;transform:translateY(-2px)}
.dw-blog .nav-links .page-numbers.current{background:var(--dw-brand);color:#fff}
.dw-blog .nav-links .page-numbers.dots{background:transparent;box-shadow:none}
.dw-blog .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 5. Kosong */
.dw-empty{background:var(--dw-card);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);padding:46px 30px;text-align:center}
.dw-empty h2{margin:0 0 8px;color:var(--dw-heading)}
/* 6. SIDEBAR - menormalkan keluaran widget pixfort yang dulu memakai CSS Bootstrap theme Essentials */
.dw-blog__side{min-width:0}
.dw-blog__side .widget{background:var(--dw-card);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);padding:22px 20px;margin:0 0 26px}
.dw-blog__side .widget:empty{display:none}
.dw-blog__side .widget-title{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--dw-border);color:var(--dw-heading);font-size:16px;font-weight:700;line-height:1.3}
.dw-blog__side ul{list-style:none;margin:0;padding:0}
/* 6a. Recent Posts */
.dw-blog__side .widget_pix_recent_posts li{margin:0 0 12px}
.dw-blog__side .widget_pix_recent_posts li:last-child{margin-bottom:0}
.dw-blog__side .widget_pix_recent_posts .card{position:relative;display:block;border-radius:12px;overflow:hidden;background:#101216;min-height:104px}
.dw-blog__side .widget_pix_recent_posts .card > div:first-child{position:absolute!important;inset:0!important;top:0!important;left:0!important;transform:none!important;z-index:0!important;width:100%!important;height:100%!important}
.dw-blog__side .widget_pix_recent_posts .card img{width:100%!important;height:100%!important;object-fit:cover;opacity:.5;transition:transform .5s ease,opacity .3s ease}
.dw-blog__side .widget_pix_recent_posts .card:hover img{transform:scale(1.07);opacity:.62}
.dw-blog__side .widget_pix_recent_posts .pix-p-20{position:relative;z-index:1;display:flex;align-items:flex-end;gap:10px;min-height:104px;padding:16px}
.dw-blog__side .widget_pix_recent_posts .pix-p-20 > div{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;width:100%}
.dw-blog__side .widget_pix_recent_posts .card-title{margin:0;color:#fff;font-size:14px;font-weight:700;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dw-blog__side .widget_pix_recent_posts a{text-decoration:none}
.dw-blog__side .widget_pix_recent_posts .pixfort-likes{color:rgba(255,255,255,.85);font-size:12px;display:inline-flex;align-items:center;white-space:nowrap}
/* 6b. Promo Box */
.dw-blog__side .pix-promo-box{position:relative;display:block;border-radius:12px;overflow:hidden;background:#101216}
.dw-blog__side .pix-promo-box .card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;transition:transform .55s ease,opacity .3s ease}
.dw-blog__side .pix-promo-box:hover .card-img{transform:scale(1.06);opacity:.58}
.dw-blog__side .pix-promo-box .pix-img-overlay{position:relative;z-index:1;display:flex;align-items:flex-end;width:100%;padding:20px;min-height:300px!important;text-decoration:none;background:linear-gradient(to top,rgba(8,10,14,.75),rgba(8,10,14,.05))}
.dw-blog__side .pix-promo-box .badge{display:inline-block;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:700;line-height:1.2}
.dw-blog__side .pix-promo-box .card-title{margin:10px 0 8px;color:#fff;font-size:20px;font-weight:700;line-height:1.3}
.dw-blog__side .pix-promo-box-link{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:700}
.dw-blog__side .pix-promo-box-link svg{transition:transform .22s ease}
.dw-blog__side .pix-promo-box:hover .pix-promo-box-link svg{transform:translateX(4px)}
/* 6c. Categories */
.dw-blog__side .pix_categories_widget{display:flex;flex-wrap:wrap;gap:8px}
.dw-blog__side .pix_categories_widget a{display:inline-flex;align-items:center;padding:7px 13px;border:1px solid var(--dw-border);border-radius:8px;background:#fff;color:var(--dw-text);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.dw-blog__side .pix_categories_widget a:hover{background:var(--dw-brand);border-color:var(--dw-brand);color:#fff}
/* 6d. Widget blok (iklan) */
.dw-blog__side .widget_block{padding:0;background:transparent;box-shadow:none;overflow:hidden}
.dw-blog__side .widget_block img,.dw-blog__side .widget_block ins{max-width:100%}
/* 7. Responsif */
@media (max-width:1024px){.dw-blog__inner{grid-template-columns:minmax(0,1fr)}.dw-blog__side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}.dw-blog__side .widget{margin-bottom:0}}
@media (max-width:640px){.dw-blog{padding:26px 14px 46px;--dw-gap:20px}.dw-card__media{padding:12px 12px 0}.dw-card__overlay{left:12px;right:12px;padding:11px 12px}.dw-card__body{padding:15px 16px 18px}.dw-card__excerpt{font-size:14.5px}.dw-blog__side{grid-template-columns:minmax(0,1fr)}}
.dw-card__avatar--initial{display:inline-flex;align-items:center;justify-content:center;background:var(--dw-brand);color:#fff;font-size:14px;font-weight:700;line-height:1;letter-spacing:0}
/* 8. Header arsip (kategori, tag, penulis, tanggal) */
.dw-archive__header{background:var(--dw-card);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);padding:26px 30px;margin:0 0 26px}
.dw-archive__title{margin:0;font-size:clamp(22px,3vw,32px);line-height:1.25;font-weight:700;color:var(--dw-heading)}
.dw-archive__title span{color:var(--dw-brand)}
.dw-archive__desc{margin-top:10px;font-size:15px;line-height:1.7;color:var(--dw-text)}
.dw-archive__desc p:last-child{margin-bottom:0}
.dw-archive__count{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;background:var(--dw-bg);color:var(--dw-text-light);font-size:12.5px;font-weight:700}
.dw-archive .dw-blog__inner{max-width:900px}
@media (max-width:640px){.dw-archive__header{padding:20px 18px}}
/* ==========================================================================
9. SINKRONISASI TIPOGRAFI dengan darrelwilson.com/blog/
Nilai di bawah diambil langsung dari CSS yang dipakai theme Essentials
(uploads/wp-scss-cache/pixfort-core-style.css) dan dari Elementor Kit
post-151821.css, bukan dari perkiraan:
Elementor Kit : Poppins, teks 16px / 400 / 1.7em, warna teks #000000
h4,.h4 : 20px -> judul kartu
h5,.h5 : 1.5rem -> judul widget sidebar
h6,.h6 : 1.125rem -> judul kartu Recent Posts
.text-xs : 12px -> tanggal
.text-sm : 14px -> tautan kategori sidebar
.btn-sm : 0.75rem/1.3 -> tombol Read more
h1..h6 : line-height 1.28, letter-spacing -0.01em, Poppins
.font-weight-bold : 700
.text-heading-default / .text-body-default : var(--pix-black) = #000
.text-primary : var(--pix-primary) = #212529 -> teks badge kategori
.bg-primary-light : rgba(78,88,98,.15) -> latar badge kategori
.text-gray-1 : #f8f9fa -> judul di kartu Recent Posts
body : letter-spacing -0.01em
========================================================================== */
.dw-blog{font-family:var(--e-global-typography-text-font-family,"Poppins"),sans-serif;letter-spacing:-.01em;color:#000}
/* Judul kartu - h4 20px / 700 / #000 */
.dw-blog .dw-card__title{font-size:20px;line-height:1.28;font-weight:700;letter-spacing:-.01em}
.dw-blog .dw-card__title a{color:#000}
/* Kutipan - teks dasar 16px / 400 / 1.7em / #000 */
.dw-blog .dw-card__excerpt{font-size:16px;line-height:1.7;font-weight:400;color:#000}
/* Tanggal - .text-xs 12px / 400 / #000 */
.dw-blog .dw-card__date{font-size:12px;font-weight:400;color:#000}
/* Read more - .btn-sm .font-weight-bold 12px / 700 / #000 */
.dw-blog .dw-card__more{font-size:.75rem;line-height:1.3;font-weight:700;color:#000}
.dw-blog .dw-card__more:hover{color:var(--e-global-color-accent,#D02920)}
/* Badge kategori - 12px / 700 / #212529 di atas rgba(78,88,98,.15) */
.dw-blog .dw-badge{font-size:12px;line-height:12px;font-weight:700;padding:5px 10px;color:#212529;background:rgba(78,88,98,.15)}
.dw-blog .dw-badge:hover{background:rgba(78,88,98,.3);color:#212529}
/* Nama penulis pada overlay gambar */
.dw-blog .dw-card__authorname{font-size:12px;font-weight:700}
/* Sidebar */
.dw-blog__side .widget-title{font-size:1.5rem;line-height:1.28;font-weight:700;color:#000;letter-spacing:-.01em}
.dw-blog__side .widget_pix_recent_posts .card-title{font-size:1.125rem;line-height:1.28;font-weight:700;color:#f8f9fa;letter-spacing:-.01em}
.dw-blog__side .pix_categories_widget a{font-size:14px;font-weight:700;color:#000}
.dw-blog__side .pix-promo-box .card-title{font-size:1.5rem;line-height:1.28;font-weight:700;letter-spacing:-.01em}
/* ==========================================================================
10. SKALA HEADING RESPONSIF
Theme Essentials mengecilkan seluruh heading pada lebar <= 1024px.
Aturan aslinya (pixfort-core-style.css, juga ikut disisipkan inline
di halaman referensi):
@media screen and (max-width:1024px){
h4,.h4{font-size:15px}
h5,.h5{font-size:1.275rem}
h6,.h6{font-size:1.06875rem}
}
Tanpa blok ini, judul kartu tetap 20px di tablet dan laptop kecil,
sementara referensi sudah turun ke 15px.
Ukuran non-heading (.text-xs 12px, teks 16px) tidak diskalakan di
referensi, jadi tidak diubah di sini.
========================================================================== */
@media screen and (max-width:1024px){
.dw-blog .dw-card__title{font-size:15px}
.dw-blog__side .widget-title{font-size:1.275rem}
.dw-blog__side .pix-promo-box .card-title{font-size:1.275rem}
.dw-blog__side .widget_pix_recent_posts .card-title{font-size:1.06875rem}
}
/* ==========================================================================
11. BORDER RADIUS & GARIS PEMISAH - disamakan dengan darrelwilson.com/blog/
Nilai diambil dari pixfort-core-style.css:
.rounded-lg { border-radius: var(--pix-border-radius-normal, 0.3rem) }
.rounded-xl { border-radius: var(--pix-border-radius-large, 5px) }
Pemetaan markup referensi:
.pix-content-box ... rounded-lg -> latar kartu artikel = 0.3rem
.card.rounded-lg.overflow-hidden -> bingkai gambar utama = 0.3rem
widget Recent Posts ... rounded-xl -> kartu pos di sidebar = 5px
.pix-promo-box ... rounded-xl -> banner Monthly Deal = 5px
Referensi juga tidak memakai garis pemisah di atas baris
tanggal / Read more, jadi border-top dihapus. Jarak vertikalnya
mengikuti .pix-pb-20 (20px) di bawah kutipan.
========================================================================== */
.dw-blog{--dw-radius:.3rem}
/* Latar kartu artikel + bingkai gambar unggulan */
.dw-blog .dw-card{border-radius:.3rem}
.dw-blog .dw-card__medialink{border-radius:.3rem}
.dw-blog .dw-card__img{border-radius:.3rem}
.dw-blog .dw-card__overlay{border-radius:0 0 .3rem .3rem}
/* Hapus garis pemisah di atas tanggal & Read more */
.dw-blog .dw-card__footer{border-top:0;padding-top:0}
.dw-blog .dw-card__excerpt{margin-bottom:20px}
/* Sidebar: kartu pos & banner promo memakai rounded-xl (5px) */
.dw-blog__side .widget{border-radius:.3rem}
.dw-blog__side .widget_pix_recent_posts .card{border-radius:5px}
.dw-blog__side .pix-promo-box{border-radius:5px}
.dw-blog__side .pix_categories_widget a{border-radius:.3rem}
/* Header arsip & kondisi kosong mengikuti radius yang sama */
.dw-archive__header{border-radius:.3rem}
.dw-blog .dw-empty{border-radius:.3rem}
/* ==========================================================================
12. AUTHOR & WIDGET TANPA KOTAK - disamakan dengan darrelwilson.com/blog/
1) Nama & avatar penulis.
Di referensi, tautan penulis dirender KOSONG:
Tidak ada avatar maupun nama yang terlihat, hanya tooltip.
Elemen tetap dirender di HTML (baik untuk SEO dan pembaca layar),
hanya disembunyikan secara visual. Lencana suka digeser ke kanan.
2) Latar widget sidebar.
Referensi tidak membungkus widget dengan kartu putih - section
.widget tampil polos tanpa background, shadow, maupun padding.
3) Garis di bawah judul widget.
Referensi memakai tanpa border,
dengan .pix-mb-10 { margin-bottom: 10px }.
========================================================================== */
/* 1. Sembunyikan nama & avatar penulis */
.dw-blog .dw-card__author{display:none}
.dw-blog .dw-card__overlay{justify-content:flex-end}
/* 2. Widget sidebar tanpa kotak */
.dw-blog__side .widget{background:transparent;box-shadow:none;padding:0;border-radius:0}
/* 3. Judul widget tanpa garis bawah */
.dw-blog__side .widget-title{border-bottom:0;padding-bottom:0;margin-bottom:10px}