/* New Post Grid Styles */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px; /* Added space below the header */
    padding: 0 15px; /* Added horizontal padding */
    margin-bottom: 50px; /* Added space above the footer */
}

.post-card {
    background-color: var(--main-div-color) !important;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Added drop shadow */
}

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

.post-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.post-card-content {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Thin border */
    border-top: none; /* Remove top border to connect with image */
}

.post-card-content p {
    font-size: 13px; /* Adjusted font size */
    color: #b0b0b0; /* Lighter gray color */
    margin: 0 0 5px 0; /* Added bottom margin */
}

.post-card-content h3 {
    font-size: 17px; /* Adjusted font size */
    font-weight: bold; /* Made bolder */
    color: #ffffff; /* White color for title */
    margin: 0;
}

.post-card a {
    color: inherit; /* Remove blue color from linked text */
    text-decoration: none; /* Ensure no underline */
}

/* Responsive adjustments for post grid */
@media (max-width: 480px) {
    .post-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        padding: 0 10px; /* Adjust padding for smaller screens */
    }

    .post-card img {
        height: 220px;
    }
}

/* 18+ Filter Styles for Homepage Post Cards */
body.filter-18-active .post-card.post-18-plus img {
    filter: blur(10px); /* Apply blur effect */
    transition: filter 0.3s ease; /* Smooth transition for blur */
}

body.filter-18-active .post-card.post-18-plus:hover img {
    filter: blur(0px); /* Remove blur on hover */
}