.related-post-wrapper {
    border: 1px dashed #cc0000 !important;
    padding: 12px !important;
    margin: 24px 0 !important;
    background: #fff !important;
    border-radius: 6px !important;
}

/* TOP LABEL */
.related-top-label {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #cc0000 !important;
    margin-bottom: 8px !important;
    border-left: 3px solid #cc0000 !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    margin-top: -25px !important;
    background: #fff !important;
    width: fit-content !important;
    padding-bottom: 5px !important;
}

/* CARD */
.related-post-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #000 !important;
}

/* IMAGE DESKTOP */
.related-post-img {
    width: 120px !important;
    height: 65px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* TITLE */
.related-post-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* REMOVE UNDERLINE – FULL PROOF */
.related-post-card,
.related-post-card *,
.related-post-card:hover,
.related-post-card:hover *,
.related-post-card:focus,
.related-post-card:focus *,
.related-post-card:active,
.related-post-card:active * {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Prevent pseudo-element underline from theme */
.related-post-card::after,
.related-post-card::before,
.related-post-card *::after,
.related-post-card *::before {
    content: none !important;
}

/* Remove underline for all links inside wrapper */
.related-post-wrapper a {
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────── */
/* MOBILE FIX – Title lamba hone par bhi image safe rahe */
@media (max-width: 600px) {
    .related-post-card {
        flex-direction: row !important;          /* ← row hi rakho taaki side-by-side rahe */
        align-items: flex-start !important;
        flex-wrap: nowrap !important;            /* ← important: wrap mat hone do */
        gap: 10px !important;
    }

    .related-post-img {
        width: 120px !important;                 /* ← fixed width rakho (ya 100px/110px bhi try kar sakte ho) */
        min-width: 120px !important;             /* ← yeh line sabse zaroori – shrink nahi hone dega */
        height: auto !important;
        aspect-ratio: 16 / 9 !important;         /* ← better proportion ke liye (optional lekin accha lagta hai) */
        object-fit: contain !important;          /* full image dikhe, crop na ho */
        flex-shrink: 0 !important;               /* ← image ko shrink hone se rokta hai */
    }

    .related-post-title {
        font-size: 15px !important;              /* thoda chhota kar sakte ho agar zarurat pade */
        flex: 1 !important;                      /* title poora bacha hua space le lega */
        overflow-wrap: break-word !important;    /* lamba title break ho jaaye */
        word-break: break-word !important;       /* extra safety */
        hyphens: auto !important;                /* better word breaking */
    }
}