/* Wrapper Related Post */
.abu-related-post-wrapper { margin: 30px 0; }
.abu-related-post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Item Related Post */
.abu-related-item {
    display: flex;
    flex-direction: row; /* judul di samping thumbnail */
    align-items: flex-start;
    width: calc(33.33% - 10px); /* 3 kolom desktop */
    box-sizing: border-box;
}

.abu-related-item img {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: cover;
}

.abu-related-content {
    display: flex;
    flex-direction: column;
}

.abu-related-content span {
    display: block;
    line-height: 1.2em;
    max-height: 3.6em; /* ~3 baris */
    overflow: hidden;
    text-overflow: ellipsis;
}

.abu-related-date {
    font-size: 0.85em;
    color: #666;
    margin-top: 3px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .abu-related-item {
        width: 100%; /* list full width */
        flex-direction: row; /* tetap row, thumbnail di kiri */
    }
}

/* Styling tulisan Related Posts dengan garis bawah elegan */
.abu-related-post-wrapper h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    text-transform: none;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.abu-related-post-wrapper h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* jarak garis dari tulisan */
    width: 100%;
    height: 2px; /* tebal garis */
    background: linear-gradient(to right, #0073aa, #00bcd4); /* gradient garis */
    border-radius: 2px; /* ujung garis melengkung */
}