/* Frontend Styles for Related Posts Block */

.bmwp-related-posts {
    margin: var(--dian-spacing-32) 0;
}

/* Title */
.bmwp-related-posts .bmwp-rp-title {
    font-family: var(--dian-bague-medium);
    font-size: var(--dian-body-18);
    font-weight: 500;
    color: var(--surface-100);
    padding: var(--dian-spacing-24) var(--dian-spacing-16) var(--dian-spacing-24) var(--dian-spacing-16);
    line-height: var(--dian-line-height-body);
    border-top: 1px solid var(--surface-20);
    margin-bottom: 0;
}

/* Post List */
.bmwp-rp-list {
    display: flex;
    flex-direction: column;
    gap: var(--dian-spacing-8);
}

/* Post Item */
.bmwp-rp-item {
    display: flex;
    align-items: center;
    gap: var(--dian-spacing-16);
    padding: var(--dian-spacing-16);
    text-decoration: none;
    color: #333;
    transition: background 0.15s ease;
}

.bmwp-rp-item:nth-child(odd) {
    background: var(--surface-30);
}

.bmwp-rp-item:nth-child(even) {
    background: var(--surface-0);
}

.bmwp-rp-item:last-child {
    border-bottom: none;
}

.bmwp-rp-item:focus-visible {
    outline: 2px solid #009ca7;
    outline-offset: -2px;
}

/* Thumbnail */
.bmwp-rp-thumbnail {
    width: 94px;
    height: 70px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f0f0f0;
}

.bmwp-rp-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bmwp-rp-no-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    background: #f5f5f5;
}

/* Post Title */
.bmwp-rp-post-title {
    font-family: var(--dian-bague-reg);
    font-size: var(--dian-body-18);
    color: var(--surface-100);
    text-decoration: underline;
    line-height: var(--dian-line-height-body-sm);
}

.bmwp-rp-item:hover .bmwp-rp-post-title {
    color: var(--contrast);
}

/* Responsive Design */
@media (max-width: 600px) {
    .bmwp-rp-item {
        gap: 12px;
        padding: 12px 14px;
    }

    .bmwp-rp-thumbnail {
        width: 60px;
        height: 45px;
    }
}

@media (min-width: 1240px) {
    .bmwp-rp-post-title {
        width: 42ch;
    }
}

/* Focus States for Accessibility */
.bmwp-rp-item:focus {
    outline: 2px solid #009ca7;
    outline-offset: -2px;
}

/* Print Styles */
@media print {
    .bmwp-rp-item {
        border-bottom: 1px solid #ccc;
        background: #fff !important;
    }

    .bmwp-rp-post-title {
        color: #000;
    }
}