/* Scoped styles for the component */




        #all-post-grid-02 {
            font-family: 'Anek Bangla', sans-serif;
            font-size: 18px;
            line-height: 1.8;
            word-spacing: 0.1rem;
            letter-spacing: 0.02em;
            color: #333; /* Default text color for the component */
        }

        /* Mobile specific font size for the component */
        @media (max-width: 767px) {
            #all-post-grid-02 {
                font-size: 17px;
            }
        }

        #all-post-grid-02 h1,
        #all-post-grid-02 h2,
        #all-post-grid-02 h3,
        #all-post-grid-02 h4,
        #all-post-grid-02 h5,
        #all-post-grid-02 h6 {
            font-family: 'Anek Bangla', sans-serif;
            line-height: 1.6;
            letter-spacing: 0.01em;
            word-spacing: 0.08rem;
            color: #1a1a1a;
        }

        #all-post-grid-02 .gradient-active-pagination {
            background: linear-gradient(45deg, #1a1a1a 0%, #4a4a4a 100%);
            color: #ffffff;
        }

        #all-post-grid-02 .blog-card {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-color: #e0e0e0;
            padding: 0.7rem;
        }

        #all-post-grid-02 .blog-card.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Glass effect overlay */
.glass {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#all-post-grid-02 .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-color: #a0a0a0;
}

#all-post-grid-02 .blog-card img {
    transition: transform 0.3s ease-in-out;
}

#all-post-grid-02 .blog-card:hover img {
    transform: scale(1.03);
}

#all-post-grid-02 .pagination-button {
    transition: all 0.3s ease-in-out;
    border: 1px solid #e0e0e0;
}

#all-post-grid-02 .pagination-button:not(.gradient-active-pagination):hover {
    background-color: #e8e8e8;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
        #all-post-grid-02 .pagination-button:not(.gradient-active-pagination):hover {
            background-color: #e8e8e8;
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        #all-post-grid-02 .pagination-button.gradient-active-pagination {
            animation: pulse 1.5s infinite ease-in-out alternate;
            color: #ffffff;
        }

        /* Keyframes are global, no need to scope */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
            100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
        }

        #all-post-grid-02 .post-title-link {
            position: relative;
            display: block;
            color: inherit;
            text-decoration: none;
            line-height: 1.6;
            word-spacing: 0.08rem;
            letter-spacing: 0.01em;
            margin: 0;
            text-align: justify;
            height: auto;
        }

        #all-post-grid-02 .post-title-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: currentColor;
            transition: width 0.3s ease-in-out;
        }

        #all-post-grid-02 .blog-card:hover .post-title-link::after {
            width: 100%;
        }

        #all-post-grid-02 .line-clamp-3 {
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        #all-post-grid-02 .post-description {
            line-height: 1.8;
            word-spacing: 0.1rem;
            letter-spacing: 0.02em;
            margin: 0;
            text-align: justify;
        }
        #all-post-grid-02 .post-content-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            flex-grow: 1;
        }
        #all-post-grid-02 .post-meta {
            margin-bottom: 0;
        }

        #all-post-grid-02 .post-details-bottom {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid #f0f0f0;
        }

        #all-post-grid-02 .aspect-ratio-16x9 {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 9 / 16 = 0.5625 */
            overflow: hidden;
            border-radius: 7px;
        }

        #all-post-grid-02 .aspect-ratio-16x9 img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Mobile specific styles for pagination */
        @media (max-width: 767px) {
            #all-post-grid-02 .pagination-container {
                flex-direction: row;
                justify-content: center;
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                gap: 0.25rem;
                padding: 0.5rem 0;
            }

            #all-post-grid-02 .pagination-container .pagination-button {
                font-size: 0.875rem;
                padding: 0.375rem 0.75rem;
                min-width: unset;
            }
        }