:root {
--dbbg-cols: 3;
--dbbg-cols-t: 2;
--dbbg-cols-m: 1;
--dbbg-ratio: 66.66%;
--dbbg-text: #111827;
--dbbg-meta: #6b7280;
--dbbg-tag-bg: #f3f4f6;
--dbbg-tag: #111827;
--dbbg-border-color: #e5e7eb;
--dbbg-border-width: 1px;
--dbbg-filter-text: #111827;
--dbbg-filter-hover: #015E33;
--dbbg-filter-active: #111827;
--dbbg-pad: 16px;
--dbbg-img-radius: 10px;
--dbbg-card-radius: 0;
--dbbg-btn: #111827;
--dbbg-btn-hover: #015E33;
} .dbbg-wrap { color: var(--dbbg-text); }
.dbbg-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.dbbg-filters a { padding:.375rem .625rem; border:1px solid var(--dbbg-border-color); border-radius:999px; text-decoration:none; font-size:.85rem; color: var(--dbbg-filter-text); transition: all .15s ease; }
.dbbg-filters a:hover { border-color: var(--dbbg-filter-hover); color: var(--dbbg-filter-hover); }
.dbbg-filters a.active { background: var(--dbbg-filter-active); color:#fff; border-color: var(--dbbg-filter-active); } .dbbg-grid { display:grid; gap:0; grid-template-columns: repeat(var(--dbbg-cols), minmax(0, 1fr)); border-top: var(--dbbg-border-width) solid var(--dbbg-border-color); border-left: var(--dbbg-border-width) solid var(--dbbg-border-color); border-radius: var(--dbbg-card-radius); overflow:hidden; }
@media (max-width: 1024px){ .dbbg-grid { grid-template-columns: repeat(var(--dbbg-cols-t), minmax(0, 1fr)); } }
@media (max-width: 640px){ .dbbg-grid { grid-template-columns: repeat(var(--dbbg-cols-m), minmax(0, 1fr)); } }
.dbbg-card { background: transparent; border-right: var(--dbbg-border-width) solid var(--dbbg-border-color); border-bottom: var(--dbbg-border-width) solid var(--dbbg-border-color); }
.dbbg-inner { padding: var(--dbbg-pad); display:flex; flex-direction:column; gap:12px; height:100%; }
.dbbg-meta-row.top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dbbg-date { color: var(--dbbg-meta); font-size:.85rem; }
.dbbg-badge { background: var(--dbbg-tag-bg); color: var(--dbbg-tag); text-decoration:none; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; }
.dbbg-media { position: relative; display:block; overflow:hidden; border-radius: var(--dbbg-img-radius); }
.dbbg-media::before { content:""; display:block; padding-top: var(--dbbg-ratio); }
.dbbg-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: var(--dbbg-img-radius); }
.dbbg-content { display:flex; flex-direction:column; gap:8px; }
.dbbg-title { font-size:1.125rem; line-height:1.3; margin:0; }
.dbbg-title a { text-decoration:none; color:inherit; }
.dbbg-title a:hover { text-decoration:underline; }
.dbbg-excerpt { margin:0; color: var(--dbbg-meta); } .dbbg-read { margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; color: var(--dbbg-btn); }
.dbbg-read .dbbg-label { position:relative; display:inline-block; }
.dbbg-read .dbbg-label::after {
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: currentColor;
transform: scaleX(0); transform-origin: left center; transition: transform .18s ease;
}
.dbbg-read:hover { color: var(--dbbg-btn-hover); }
.dbbg-read:hover .dbbg-label::after { transform: scaleX(1); }
.dbbg-read .dbbg-arrow { transition: transform .18s ease; }
.dbbg-read:hover .dbbg-arrow { transform: translateX(3px); } .dbbg-pagination { padding: 16px; }
.dbbg-pagination ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.dbbg-pagination a, .dbbg-pagination span { display:block; padding:.5rem .75rem; border:1px solid var(--dbbg-border-color); border-radius:8px; text-decoration:none; color:var(--dbbg-text); }
.dbbg-pagination .current { background: var(--dbbg-filter-active); color:#fff; border-color: var(--dbbg-filter-active); }