/* === GRID CONTAINER === */
#js-grid-blog-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 40px;
padding-top: 20px;
min-height: 400px;
}

/* === CARD === */
.cbp-item {
background: #fff;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cbp-item:hover {
transform: translateY(-6px);
}

/* === IMAGE WRAPPER === */
.cbp-caption {
position: relative;
display: block;
overflow: hidden;
border-radius: 6px;
}


.cbp-caption-defaultWrap img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}

.cbp-caption:hover img {
transform: scale(1.05);
}

/* === HOVER OVERLAY === */
.cbp-caption-activeWrap {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.65),
rgba(0,0,0,0.2)
);
opacity: 0;
transition: opacity 0.35s ease;
display: flex;
align-items: center;
justify-content: center;
}

.cbp-caption:hover .cbp-caption-activeWrap {
opacity: 1;
}

/* === OVERLAY TEXT === */
.cbp-l-caption-text {
color: #fff;
font-size: 12px;
letter-spacing: 6px;
font-weight: 550;
}

/* === TITLE === */
.cbp-l-grid-blog-title {
margin-top: 14px;
font-size: 16px;
font-weight: 500;
padding-left:5px;
color: #1a1a1a;
text-decoration: none;
line-height: 1.4;
}

.cbp-l-grid-blog-title:hover {
color: #15456b;
}

/* === META === */
.cbp-l-grid-blog-date,
.cbp-l-grid-blog-split {
font-size: 11px;
color: #888;
margin-top: 6px;
padding-left:5px;
letter-spacing: 0.5px;
}

/* === DESCRIPTION === */
.cbp-l-grid-blog-desc {
margin-top: 10px;
padding-left:5px;
font-size: 13px;
line-height: 1.6;
color: #555;

/* clamp to 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}