/* Blog Showcase for Divi 5 - frontend and Visual Builder styles. */
.d5bs{--d5bs-c-d:3;--d5bs-c-t:2;--d5bs-c-m:1;--d5bs-gap:24px;--d5bs-ratio:16/9;--d5bs-accent:#2563eb;--d5bs-cols:var(--d5bs-c-d);position:relative;width:100%}
.d5bs *,.d5bs *::before,.d5bs *::after{box-sizing:border-box}
@media (max-width:980px){.d5bs{--d5bs-cols:var(--d5bs-c-t)}}
@media (max-width:767px){.d5bs{--d5bs-cols:var(--d5bs-c-m)}}

/* Grid */
.d5bs-grid{display:grid;grid-template-columns:repeat(var(--d5bs-cols),minmax(0,1fr));gap:var(--d5bs-gap)}

/* Card */
.d5bs-card{display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 14px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease}
.d5bs-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(15,23,42,.14)}
.d5bs-thumb{display:block;position:relative;aspect-ratio:var(--d5bs-ratio);overflow:hidden;background:#e8ebf0}
.d5bs-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.d5bs-card:hover .d5bs-thumb img{transform:scale(1.04)}
.d5bs-body{display:flex;flex-direction:column;gap:10px;padding:20px;flex:1 1 auto;min-width:0}
.d5bs-cats{display:flex;flex-wrap:wrap;gap:6px}
.d5bs-cats a{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(37,99,235,.1);color:var(--d5bs-accent);font-size:12px;font-weight:600;text-decoration:none;line-height:1.6}
.d5bs-title{margin:0;padding:0;font-size:20px;line-height:1.3}
.d5bs-title a{color:inherit;text-decoration:none}
.d5bs-title a:hover{text-decoration:underline}
.d5bs-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:#6b7280}
.d5bs-excerpt{margin:0;padding:0;font-size:15px;line-height:1.65;color:#4b5563}
.d5bs-readmore{margin-top:auto;padding-top:4px;font-weight:600;color:var(--d5bs-accent);text-decoration:none}
.d5bs-readmore:hover{text-decoration:underline}
.d5bs-empty{margin:0;padding:24px;text-align:center;color:#6b7280}

/* Grid Extended: image beside text */
.d5bs--grid-extended .d5bs-card{flex-direction:row}
.d5bs--grid-extended .d5bs-thumb{flex:0 0 42%;aspect-ratio:auto;min-height:100%}
.d5bs--grid-extended .d5bs-thumb img{position:absolute;inset:0}
@media (max-width:767px){
  .d5bs--grid-extended .d5bs-card{flex-direction:column}
  .d5bs--grid-extended .d5bs-thumb{flex:none;aspect-ratio:var(--d5bs-ratio);min-height:0}
}

/* Slider (native scroll snap, enhanced by frontend.js) */
.d5bs-slider{position:relative}
.d5bs-track{display:flex;gap:var(--d5bs-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 14px}
.d5bs-track::-webkit-scrollbar{display:none}
.d5bs-track>.d5bs-card{flex:0 0 calc((100% - var(--d5bs-gap) * (var(--d5bs-cols) - 1)) / var(--d5bs-cols));scroll-snap-align:start}
.d5bs-arrow{position:absolute;top:calc(50% - 20px);z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#fff;color:#111827;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.2);transition:opacity .2s,transform .2s}
.d5bs-arrow:hover{transform:scale(1.08)}
.d5bs-arrow[disabled]{opacity:.35;cursor:default;transform:none}
.d5bs-prev{left:-8px}
.d5bs-next{right:-8px}
.d5bs-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.d5bs-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .2s,transform .2s}
.d5bs-dot[aria-selected="true"]{background:var(--d5bs-accent);transform:scale(1.25)}

/* Buttons, pagination and load more */
.d5bs-pagination-wrap{display:flex;justify-content:center;margin-top:32px}
.d5bs-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.d5bs-btn{appearance:none;min-width:42px;padding:10px 18px;border:1px solid var(--d5bs-accent);border-radius:8px;background:transparent;color:var(--d5bs-accent);font:inherit;font-weight:600;line-height:1.2;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.d5bs-btn:hover:not([disabled]),.d5bs-btn[aria-current="page"]{background:var(--d5bs-accent);color:#fff}
.d5bs-btn[disabled]{opacity:.4;cursor:default}
.d5bs-dots-gap{padding:0 4px;color:#6b7280}
.d5bs.is-loading .d5bs-grid{opacity:.5;transition:opacity .2s}
.d5bs-loadmore.is-loading{opacity:.6;pointer-events:none}