/**
 * Related Posts Component Styles - Matching Uncode Theme
 */

/* Main Container */
.related-posts-component {
    margin-bottom: 40px;
}

.related-posts-title {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

/* Grid Layout - Matching Uncode dimensions */
.related-posts-component .row-container .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -9px;
    margin-left: -9px;
}

.related-posts-component .wpb_column.column_parent {
    padding-left: 0;
    padding-right: 36px;
    margin-bottom: 36px;
    float: left;
}

/* Column width definitions - Exact Uncode widths */
.related-posts-component .wpb_column.column_parent.col-md-12 {
    width: 100%;
}

.related-posts-component .wpb_column.column_parent.col-md-6 {
    width: 50%;
}

.related-posts-component .wpb_column.column_parent.col-md-4 {
    width: 33.33333333%;
}

.related-posts-component .wpb_column.column_parent.col-md-3 {
    width: 25%;
}

/* Clear floats */
.related-posts-component .row-container .row:after {
    content: "";
    display: table;
    clear: both;
}

/* Uncode structure containers */
.related-posts-component .uncol,
.related-posts-component .uncoltable,
.related-posts-component .uncell,
.related-posts-component .uncont {
    display: block;
    width: 100%;
}

/* Post Item Styling - Matching Uncode card size */
.related-posts-component .tmb {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Image Container */
.related-posts-component .t-entry-visual {
    position: relative;
    overflow: hidden;
}

.related-posts-component .t-entry-visual-tc {
    position: relative;
}

.related-posts-component .t-entry-visual-cont {
    position: relative;
    overflow: hidden;
}

.related-posts-component .dummy {
    padding-top: 66.7%;
    background-color: #f7f7f7;
}

.related-posts-component .t-entry-visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.related-posts-component .t-entry-visual:hover img {
    transform: scale(1.05);
}

/* Image Overlay */
.related-posts-component .t-entry-visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.related-posts-component .t-entry-visual-overlay-in {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.related-posts-component .t-entry-visual:hover .t-entry-visual-overlay-in {
    opacity: 0.5;
}

/* Content Area - Matching Uncode padding */
.related-posts-component .t-entry-text {
    padding: 36px;
}

.related-posts-component .t-entry-text-tc {
    padding: 0;
}

/* Meta Container */
.related-posts-component .t-entry-meta-container {
    display: block;
    padding-top: 18px !important;
}

/* Category */
.related-posts-component .t-entry-meta {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

.related-posts-component .t-entry-category {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: inline-block;
}

.related-posts-component .t-entry-category a {
    color: inherit;
    text-decoration: none;
}

/* Comments & Reading Time */
.related-posts-component .t-entry-comments {
    margin: 0 10px; 
    padding: 0;
    font-size: 12px;
    color: inherit;
    display: inline-block;
    vertical-align: middle;
}

.related-posts-component .t-entry-comments .extras {
    display: flex;
    align-items: center;
}

.related-posts-component .t-entry-comments .extras-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.related-posts-component .t-entry-comments .extras-wrap:first-child {
    margin-left: 0;
}

.related-posts-component .t-entry-comments i {
    margin-right: 5px;
    font-size: 12px;
}

/* Title */
.related-posts-component .t-entry-title {
    margin-top: 5px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    clear: both;
}

.related-posts-component .t-entry-title a {
    color: inherit;
    text-decoration: none;
}

/* Excerpt - Matching Uncode height */
.related-posts-component .t-entry-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    margin-bottom: 15px;
}

.related-posts-component .t-entry-excerpt p {
    margin-bottom: 0;
}

/* Read More Button */
.related-posts-component .t-entry-readmore {
    margin-top: 15px;
    display: block;
}

.related-posts-component .post-read-more-btn {
    display: inline-block;
    background-color: transparent;
    color: inherit;
    font-size: 15px;
    text-decoration: none;
}

/* List Layout */
.related-posts-component.layout-list .post-list-item {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.related-posts-component.layout-list .row-child {
    display: flex;
    flex-wrap: wrap;
}

.related-posts-component.layout-list .t-entry-text {
    padding-left: 0;
}

/* Minimal Layout */
.related-posts-component.layout-minimal .post-minimal-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.related-posts-component.layout-minimal .t-inside {
    padding: 10px 0;
}

/* No Related Posts Message */
.related-posts-component .no-related-posts {
    font-style: italic;
    color: inherit;
    text-align: center;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

/* Clearfix */
.related-posts-component .t-entry-meta-container:after {
    content: "";
    display: table;
    clear: both;
}

/* Make cards match Uncode height */
.related-posts-component .t-inside {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.related-posts-component .t-entry-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-posts-component .t-entry-text-tc {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-posts-component .t-entry {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-posts-component .t-entry-readmore {
    margin-top: auto;
}

/* Responsive Adjustments */
@media (min-width: 960px) {
    /* Ensure exact Uncode card sizes on desktop */
    .related-posts-component .row-container {
        max-width: 1980px;
        margin: 0 auto;
    }
    
}

@media (max-width: 959px) {
    .related-posts-component .wpb_column.column_parent.col-md-4,
    .related-posts-component .wpb_column.column_parent.col-md-3 {
        width: 50%;
    }
}

@media (max-width: 569px) {
    .related-posts-component .wpb_column.column_parent.col-md-6,
    .related-posts-component .wpb_column.column_parent.col-md-4,
    .related-posts-component .wpb_column.column_parent.col-md-3 {
        width: 100%;
    }
    
    .related-posts-component.layout-list .col-md-3,
    .related-posts-component.layout-list .col-md-9 {
        width: 100%;
    }
    
    .related-posts-component.layout-list .t-entry-visual {
        margin-bottom: 15px;
    }
    
    /* Ensure meta is properly displayed on mobile */
    .related-posts-component .t-entry-meta,
    .related-posts-component .t-entry-comments {
        display: block;
        float: none;
    }
    
    .related-posts-component .t-entry-comments {
        margin-top: 5px;
    }
}