/* ===== ORIGINAL LAYOUT (Preserved) ===== */
.related-posts-nav, #related_posts_thumbnails {
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-posts-nav:after, .relpost-thumb-wrapper:after {
    content: '';
    display: block;
    clear: both;
}

.related-posts-nav>li, #related_posts_thumbnails li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}

.related-posts-nav>li>a, .relpost-block-single {
    border-bottom: none;
    margin: 0;
    padding: 6px;
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #ddd;
    background-color: #dedede;
}

.related-posts-nav>li>a:hover, .relpost-block-single:hover {
    background-color: #333;
}

/* ===== IMAGE & TEXT CONTAINERS (Original Styles) ===== */
.related-post-list-item-inner-container, 
.relpost-custom-block-single {
    width: 180px;
    height: 210px;
    margin: 0;
    padding: 0;
    background-color: #dedede;
}

.related-post-list-item-img-container, 
.relpost-block-single-image {
    width: 180px !important;
    height: 180px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0;
    padding: 0;
}

.related-post-list-item-text-container, 
.relpost-block-single-text {
    width: 180px;
    margin: 3px 0 0;
    padding: 0;
    font: normal 12px Lato;
    color: #333;
    overflow: hidden;
}

/* ===== RESPONSIVE COLUMNS (New Fixes) ===== */
.relpost-block-container {
    display: grid;
    grid-template-columns: repeat(5, 180px);
    gap: 10px;
    justify-content: center;
    padding: 10px 0;
    margin: 0 auto;
    width: 100%;
}

/* Tablet (3 columns) */
@media (max-width: 1024px) {
    .relpost-block-container {
        grid-template-columns: repeat(3, 180px);
    }
    .relpost-block-single:nth-child(n+4), 
    .related-posts-nav>li:nth-child(n+4) {
        display: none;
    }
}

/* Mobile (1 column) */
@media (max-width: 600px) {
    .relpost-block-container {
        grid-template-columns: repeat(1, 180px);
    }
    .relpost-block-single:nth-child(n+2), 
    .related-posts-nav>li:nth-child(n+2) {
        display: none;
    }
}

/* ===== COMPATIBILITY (Original + New) ===== */
.relpost_card_title {
    font-weight: 700;
    font-size: inherit;
    margin: 0;
}

.rpth_post_date, .rpth_list_date {
    font-size: 11px;
    color: #666;
    display: block;
    padding-top: 5px;
}

/* RTL Support */
html[dir="rtl"] .relpost-block-single,
html[dir="rtl"] #related_posts_thumbnails li {
    float: right;
}