/* WBS extended styles with CSS variables */
:root{
  --wbs-gap: 1.25rem;
  --wbs-card-pad: 1rem;
  --wbs-title-size: 1rem;
}
.wbs-grid{display:grid;gap:var(--wbs-gap,1.25rem)}
.wbs-cols-1{grid-template-columns:1fr}
.wbs-cols-2{grid-template-columns:repeat(2,1fr)}
.wbs-cols-3{grid-template-columns:repeat(3,1fr)}
.wbs-cols-4{grid-template-columns:repeat(4,1fr)}
.wbs-card{border:1px solid rgba(0,0,0,.08);padding:var(--wbs-card-pad,1rem);border-radius:6px;background:#fff}
.wbs-title{margin:.5rem 0 0}
.wbs-meta{font-size:.9em;opacity:.8;margin:.25rem 0 .5rem}
.wbs-excerpt{margin:.5rem 0 0}
.wbs-thumb img{width:100%;height:auto;display:block;border-radius:4px}
.wbs-sidebar .wbs-side-block{margin-bottom:1.25rem}
.wbs-recent-list{list-style:none;margin:0;padding:0}
.wbs-recent-item{display:flex;gap:.75rem;margin:.5rem 0}
.wbs-recent-thumb img{width:72px;height:auto;border-radius:4px;display:block}
.wbs-recent-title{display:block;font-weight:600}
.wbs-recent-date{display:block;font-size:.85em;opacity:.8}
/* Tabs */
.wbs-tabs{margin:1rem 0}
.wbs-tab-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.wbs-tab-nav button{border:1px solid rgba(0,0,0,.1);background:#f7f7f7;padding:.4rem .75rem;border-radius:999px;cursor:pointer}
.wbs-tab-nav button.active{background:#fff;border-color:rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wbs-share{margin:1rem 0;opacity:.9}
.wbs-breadcrumbs{margin:.5rem 0 1rem;font-size:.9em;opacity:.9}
.wbs-reading-time{margin:.25rem 0 1rem;font-size:.9em;opacity:.9}
.wbs-related{margin:2rem 0 0}
.wbs-related ul{margin:.5rem 0 0 1rem}
.wbs-toc{border:1px solid rgba(0,0,0,.08);padding:1rem;border-radius:6px;background:#fff}
.wbs-load-wrap{text-align:center;margin:1rem 0}
.wbs-load-more{padding:.6rem 1rem;border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:4px;cursor:pointer}
/* Carousel */
.wbs-carousel{position:relative;overflow:hidden}
.wbs-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.wbs-slide.active{position:relative;opacity:1}
.wbs-slide-thumb img{width:100%;height:auto;border-radius:6px;display:block}
.wbs-slide-meta{margin-top:.5rem}
.wbs-slide-title{font-weight:600;display:block}
.wbs-slide-date{font-size:.9em;opacity:.8}
@media (max-width:768px){
  .wbs-cols-3{grid-template-columns:repeat(2,1fr)}
  .wbs-cols-4{grid-template-columns:repeat(2,1fr)}
}