/* Simple Related Posts - Frontend Styles */

.srp-related-posts {
    margin: 40px 0;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 3px;
}

.srp-heading {
    margin: 0 0 20px 0;
    color: inherit;
}

.srp-heading .srp-category-link {
    text-decoration: none;
    transition: opacity 0.2s;
}

.srp-heading .srp-category-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.srp-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
}

.srp-item {
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    display: list-item;
}

.srp-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.srp-thumbnail {
    flex-shrink: 0;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 3px;
}

.srp-thumbnail img {
    display: block;
    max-width: 60px;
    height: auto;
}

.srp-link {
    text-decoration: none;
    transition: opacity 0.2s;
}

.srp-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Bullet style variant (if you prefer traditional bullets) */
.srp-related-posts.srp-bullets .srp-list {
    list-style: disc;
    padding-left: 20px;
}

.srp-related-posts.srp-bullets .srp-item {
    display: list-item;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .srp-related-posts {
        padding: 20px;
        margin: 30px 0;
    }
    
    .srp-thumbnail img {
        max-width: 50px;
    }
}