/*
 * Styles for the Related Posts by Category plugin.
 */

/* Container for the entire related posts section */
.rpbc-related-posts {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    clear: both; /* Ensures it appears after floated content */
}

/* Heading style */
.rpbc-related-posts h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

/* List container for the related posts */
.rpbc-related-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Create a responsive grid. It will be 3 columns on larger screens and 2 on smaller ones. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

/* Individual list item */
.rpbc-related-posts li {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Thumbnail image styling */
.rpbc-related-posts li img {
    width: 100%;
    height: auto;
    max-width: 150px; /* Max width for consistency */
    border-radius: 8px;
    margin-bottom: 10px;
    transition: transform 0.2s ease-in-out;
}

/* Add a slight zoom effect on hover */
.rpbc-related-posts li a:hover img {
    transform: scale(1.05);
}


/* Post title link styling */
.rpbc-related-posts li a.rpbc-title {
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: block; /* Makes the entire area clickable */
    color: #333;
}

.rpbc-related-posts li a.rpbc-title:hover {
    color: #0073aa; /* Standard WordPress link hover color */
}