/*
 * Kalisawah Related Package Badge Fix v1.2.0
 *
 * SCOPE KERAS:
 * Hanya markup related package yang terkonfirmasi dari DevTools:
 * .kspm-related-grid
 *   > article.kspm-related-card
 *     > a.kspm-related-image
 *       > span.kspm-related-badge
 *
 * Tidak ada selector global .badge dan tidak ada JavaScript/DOM mutation.
 */

.kspm-related-grid .kspm-related-card .kspm-related-image {
    position: relative !important;
    overflow: hidden !important;
}

.kspm-related-grid .kspm-related-card .kspm-related-image > .kspm-related-badge {
    position: absolute !important;

    /* Batalkan kemungkinan inset/right/bottom yang membuat badge meregang. */
    inset: auto !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;

    /* Paksa badge shrink-to-content, bukan sebesar media/image. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-self: auto !important;

    width: max-content !important;
    inline-size: max-content !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    height: auto !important;
    block-size: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;

    border-radius: 999px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    float: none !important;
    clear: none !important;
    transform: none !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Jaga elemen badge tidak ikut mendapat ukuran media dari pseudo/child styling. */
.kspm-related-grid .kspm-related-card .kspm-related-image > .kspm-related-badge::before,
.kspm-related-grid .kspm-related-card .kspm-related-image > .kspm-related-badge::after {
    max-width: 100% !important;
    max-height: 100% !important;
}

@media (max-width: 767px) {
    .kspm-related-grid .kspm-related-card .kspm-related-image > .kspm-related-badge {
        top: 8px !important;
        left: 8px !important;
        max-width: calc(100% - 16px) !important;
        padding: 5px 7px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
}