/* PSEXS Custom Related Posts Grid Styling - Horizontal grid on desktop, vertical stack on mobile */

/* Main container */
.crp_related.crp-rounded-thumbs {
    clear: both;
    margin: 1.25rem auto;
}

/* The grid */
.crp_related.crp-rounded-thumbs ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on large screens - all horizontal */
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual grid items (cards) */
.crp_related.crp-rounded-thumbs li {
    margin: 0;
    padding: 0;
    min-width: 140px; /* safeguard so items don't get too small just above the breakpoint */
}

/* Thumbnail wrapper */
.crp_related.crp-rounded-thumbs figure {
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative; /* for the type badge overlay */
}

/* Featured images - consistent size via aspect-ratio + object-fit */
.crp_related.crp-rounded-thumbs .crp_thumb,
.crp_related.crp-rounded-thumbs img.crp_featured {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* nice thumbnail proportion - change to 16/9 or 1/1 if preferred */
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* Site type badge - top right corner of the thumbnail image (e.g. "Cam", "AI GF", "Porn") */
.crp_related.crp-rounded-thumbs .crp-type {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* clicks pass through to the link */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Title under the thumbnail */
.crp_related.crp-rounded-thumbs .crp_title {
    display: block;
    margin-top: 6px;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.35;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Match counts under each thumbnail (X same niches, X same payment options) */
.crp_related.crp-rounded-thumbs .match-counts {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}
.crp_related.crp-rounded-thumbs .match-counts span {
    display: inline-block;
    margin-right: 8px;
}

/* Clean link */
.crp_related.crp-rounded-thumbs .crp_link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Responsive grid columns to keep items decent size:
   - >1000px (desktop): 4 columns - all on one horizontal line
   - 769-1000px: 3 columns so thumbnails don't turn small
   - <769px (mobile): 2 columns per row (horizontal fill); will wrap to additional rows if more items
*/
@media (max-width: 1000px) {
    .crp_related.crp-rounded-thumbs ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .crp_related.crp-rounded-thumbs ul {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile, horizontal */
        gap: 12px;
    }
    
    .crp_related.crp-rounded-thumbs .crp_thumb {
        aspect-ratio: 16 / 9;
    }
}