.custom-post-loop-widget {
    padding: 0px;
    *{
        font-family: 'Inter',sans-serif;
    }
}

.category-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
    overflow-x: auto;
}

.category-button {
    background-color: #1f2937;
    color: #9ca3af;
    border: none;
    padding: 10px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-scrollbar {
	scrollbar-width: none;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar {
  width: 0;
  display: none;
}

.category-button.active,
.category-button:hover {
    background-color: #fff;
    color: #161B26;
}

.posts-grid-recent {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    border-top:1px solid rgba(255,255,255, 0.1);

    &.recent {
        a {
            .post-card {
                height: 420px;

                .post-info {
                    .post-title {
                        font-size: 24px;
                    }
                }
            }
        }
    }

    a {
        width: 50%;
        &:nth-of-type(odd) {
            .post-card {
                border-right:1px dashed rgba(255,255,255, 0.1);
                border-left:1px solid rgba(255,255,255, 0.1);
            }
        }
        &:nth-of-type(even) {
            .post-card {
                border-right:1px solid rgba(255,255,255, 0.1);
            }
        }
    }

    .post-card {
        background-color:rgba(22,27,38, 1);
        padding: 32px;
        color: white;
        height: 320px;
        border-bottom:1px solid rgba(255,255,255, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        *{position: relative;}

        &:before {
            content:'';
            position:absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            background:#E6E9EA;
            opacity: 0;
            transition:all ease 0.5s;

        }

        &:hover {
            &:before {
                opacity: 0.12;
            }
        }
    
        .post-meta {
            font-size:16px;
            font-weight:500;
            color:rgba(255, 255, 255, 0.6);
            font-family: sans-serif;
            display: flex;
            width: 100%;
            justify-content: end;
            gap:5px;

            .category-name {
                font-size:16px;
                font-weight:500;
                color:rgba(255, 255, 255, 0.6);
            }

            .post-date {
                font-size:16px;
                font-weight:500;
                color:#fff;
            }
        }
    
        .post-info {
            display: flex;
            gap:20px;
            flex-direction: column;
            width: 100%;

            .post-title {
                margin:0px;
                font-size: 20px;
                font-weight: 500;
                width: 100%;
                display: flex;
            }
    
            .post-excerpt {
                margin-top: 10px;
                font-size: 0.95rem;
                color: rgba(255,255,255, 0.6);
                width: 100%;
                display: flex;
            }
        }
    }
}

@media screen and (max-width:768px) {
    .posts-grid-recent {
        flex-direction: column;
    
        a {
            width: 100%;

            &:nth-of-type(odd) {
                .post-card {
                    border-right:1px solid rgba(255,255,255, 0.1);
                }
            }
			
			&:nth-of-type(even) {
				.post-card {
					border-left:1px solid rgba(255,255,255, 0.1);
				}
			}
        }
    }
}

@media screen and (max-width: 480px) {
    .custom-post-loop-widget {
        padding:0;
    }

    .posts-grid-recent {
        .post-card {
            padding:24px;
        }
    }
}