/* =========================
   Filters
========================= */

.dbg-blog-filter-bar{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin: 16px 0 16px;
    text-align: center;
}

.dbg-blog-filter-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 40px;
    border:0;
    border-radius:0;
    background:#31006f;
    color:#fff;
    font:18px/1 "Beausite Light", sans-serif;
    cursor:pointer;
    transition:opacity .2s ease, background .2s ease;
}

.dbg-blog-filter-btn:hover{ opacity:.85; }
.dbg-blog-filter-btn.active{ opacity:1; background:#6d61ee; }

/* NOTE: you had a typo: .dtg-filter-btn.active should be .dbg-blog-filter-btn.active */


/* =========================
   Grid + cards
========================= */

.dbg-blog-grid{
    --dbg-cols:3;
    display:grid;
    grid-template-columns:repeat(var(--dbg-cols), minmax(0,1fr));
    gap:16px;
    width:80%;
    margin:0 auto;
    overflow:visible;
}

.dbg-blog-item{
    display:flex;
    flex-direction:column;
    cursor:pointer;
    font-family:"Beausite Classic Regular", Open Sans, Arial, sans-serif;
    transition:opacity .25s ease;
    border:1px solid #DADADA;
}



.dbg-blog-item:focus-visible{
    outline:2px solid rgba(10,44,63,.6);
    outline-offset:4px;
}

.dbg-blog-item-image{
    position:relative;
    overflow:hidden;
}

.dbg-blog-item-image img {
    display: block;
    width: 100%;
    height: auto;
}
.dbg-blog-item-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(59,93,116,.3);
    z-index:1;
}

.dbg-blog-item-overlay{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    text-align: left;
    /* max-width: 520px; */
    padding: 0 16px;
    padding-left: clamp(16px, 4vw, 40px);
    width: 80%;
    margin: 0 auto;
}

.dbg-blog-cat{
    margin:0 0 6px;
    color:rgba(255,255,255,.85);
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.dbg-blog-item-content{
    padding: 24px;
}

.dbg-blog-title{ margin:0; color:#000; }
.dbg-blog-title h2{ margin:0; color:#000; }

.dbg-blog-category{ margin:0; color:#6d61ee; }
.dbg-blog-category h4{ margin:0; color:#6d61ee; }


/* =========================
   Swiper controls + progress pagination
========================= */

.dbg-swiper{
    --dbg-bullet-size:6px;
    --dbg-bullet-gap:10px;
    --dbg-bullet-bg:rgba(255,255,255,0.5);
    --dbg-bullet-fill:rgba(59,93,116,0.9);
    --dbg-swiper-delay:6000ms;
    position:relative;
    margin-bottom: 2rem;
}

.dbg-swiper .dbg-swiper-instance{ position:relative; }

.dbg-swiper-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:8px 10px;
    pointer-events:none;
}


.dbg-swiper-controls .swiper-pagination,
.dbg-swiper-controls .dbg-swiper-toggle{
    pointer-events:auto;
}

.dbg-swiper-controls .swiper-pagination{
    position: static;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--dbg-bullet-gap);
    width: 72%; /* optional: keeps pills a sensible width */
}


/* Each pill */
.dbg-swiper .swiper-pagination-bullet{
    flex: 1;                 /* auto-sizes per number of slides */
    width: auto;             /* override any fixed width */
    height: var(--dbg-bullet-size);
    border-radius: 999px;
    background: var(--dbg-bullet-bg);
    opacity: 1;
    overflow: hidden;
    border: 0;
    padding: 0;
    cursor: pointer;

    position: relative;      /* IMPORTANT: anchors the progress span */
    margin: 0 !important;    /* Swiper sometimes adds margins */
}

.dbg-swiper .swiper-pagination-bullet .dbg-bullet-progress{
    position: absolute;
    inset: 0;
    background: var(--dbg-bullet-fill);
    transform: scaleX(0);
    transform-origin: left;
}

.dbg-swiper .swiper-pagination-bullet-active .dbg-bullet-progress{
    animation: dbgBulletFill var(--dbg-swiper-delay) linear forwards;
}

.dbg-swiper.is-paused .swiper-pagination-bullet-active .dbg-bullet-progress{
    animation-play-state: paused;
}
.dbg-swiper .dbg-blog-item-image img{
    display: block;
    width: 100%;
    object-fit: cover;
    min-height: 500px;
}

.dbg-swiper-toggle{
    background:transparent;
    border:0;
    color:#fff;
    cursor:pointer;
    font:inherit;
}
.dbg-swiper .dbg-blog-title {
    color: #FFF;
    font-family: 'larken', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 66px;
}
.dbg-swiper .dbg-blog-cat {
    color: #FFF;
    font-family: 'larken', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 18px;
}
@keyframes dbgBulletFill{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
}

/* Hide arrows if Swiper adds them */
.dbg-swiper .swiper-button-prev,
.dbg-swiper .swiper-button-next{ display:none !important; }

@media (prefers-reduced-motion: reduce){
    .dbg-swiper .swiper-pagination-bullet-active .dbg-bullet-progress{
        animation:none;
        transform:scaleX(1);
    }
}




/* =========================
   Blog Content
========================= */
.dbg-insight-blog-image{
    position: relative;
}

.dbg-insight-blog-image .et_pb_image_wrap img{
    display: block;
    width: 100%;
    object-fit: cover;
    min-height: 500px;
}
.dbg-insight-blog-image .et_pb_image_wrap:after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(59, 93, 116, .3);
     z-index: 1;
 }

.dbg-insight-blog-image .et_pb_post_title{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    text-align: left;
    padding: 0 16px;
    padding-left: clamp(16px, 4vw, 40px);
    width: 80%;
    margin: 0 auto;
}

.dbg-insight-blog-image .entry-title{
    color:white;
    font-family: 'larken', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 66px;
}
.dbg-insight-blog-image .et_pb_title_meta_container{
    color:white;
}
.dbg-insight-blog-image .et_pb_title_meta_container a{
    color:white !important;
    font-family: 'larken', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .06em;
    text-transform: uppercase;
	display:block;
}

.dbg-insight-blog-image .et_pb_title_container{
	display: flex;
    flex-direction: column-reverse;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1024px){
    .dbg-blog-grid{ --dbg-cols:3; }
    .dbg-blog-filter-btn{ margin:.2rem; }
    .dbg-swiper .dbg-blog-title {
        font-size: 52px;
    }
    .dbg-swiper .dbg-blog-cat {
        font-size: 16px;
    }
    .dbg-insight-blog-image .entry-title{
        font-size:52px;
    }
    .dbg-insight-blog-image .et_pb_title_meta_container a{
        font-size: 16px;
    }
    .dbg-blog-filter-bar{
        display:block;
    }
    .dbg-blog-filter-btn{
        font-size: 14px;
        padding: 16px 30px;
        display: inline-block;
        margin-bottom: .5rem;
        margin-right: .5rem;
    }
}

@media (max-width: 768px){
    .dbg-blog-grid{ --dbg-cols:2; }
    .dbg-blog-filter-btn{
        font-size: 14px;
        padding: 16px 30px;
        display: inline-block;
        margin-bottom: .5rem;
        margin-right: .5rem;
    }
    .dbg-swiper .dbg-blog-title {
        font-size: 48px;
    }
    .dbg-swiper .dbg-blog-cat {
        font-size: 14px;
    }
    .dbg-insight-blog-image .dbg-category-title{
        top: 35%;
    }
    .dbg-insight-blog-image .entry-title{
        font-size:48px;
    }
    .dbg-insight-blog-image .et_pb_title_meta_container a{
        font-size: 14px;
    }
    .dbg-blog-filter-bar{
        display:block;
    }
}

@media (max-width: 500px){
    .dbg-swiper{
        margin-top:20px;
    }
    .dbg-blog-grid{ --dbg-cols:1; }
    .dbg-blog-filter-btn{
        font-size: 14px;
        padding: 16px 30px;
        display: inline-block;
        margin-bottom: .5rem;
        margin-right: .5rem;
    }
    .dbg-swiper .dbg-blog-title {
        font-size:36px;
    }
    .dbg-swiper .dbg-blog-cat {
        font-size: 14px;
    }
    .dbg-blog-filter-bar{
        display:block;
    }
    .dbg-insight-blog-image .entry-title{
        font-size:36px;
    }
    .dbg-insight-blog-image .et_pb_title_meta_container a{
        font-size: 14px;
    }
}