/* Blog Section - Stack to Spread Animation Styles */

#blog-bento-grid {
   position: relative;
   min-height: 600px; /* Ensure enough space for animation */
   overflow: visible; /* Allow cards to move outside grid during animation */
}

/* Standardized blog card styles */
.blog-card {
   position: relative;
   transform-origin: center center;
   will-change: transform, opacity;
   z-index: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
}

/* Individual card z-index for stacking order */
.blog-bento-item[data-id="blog-1"] {
   z-index: 6;
}

.blog-bento-item[data-id="blog-2"] {
   z-index: 5;
}

.blog-bento-item[data-id="blog-3"] {
   z-index: 4;
}

.blog-bento-item[data-id="blog-4"] {
   z-index: 3;
}

.blog-bento-item[data-id="blog-5"] {
   z-index: 2;
}

.blog-bento-item[data-id="blog-6"] {
   z-index: 1;
}

/* Blog card image styling */
.blog-card img {
   transition: transform 0.3s ease;
}

.blog-card:hover img {
   transform: scale(1.05);
}

/* Prevent any scale/transform effects on click */
.blog-card:active,
.blog-card:focus {
   transform: none !important;
   scale: 1 !important;
}

.blog-card:active img,
.blog-card:focus img {
   transform: scale(1) !important;
}