/**
 * Beranda — layout mobile (#mobile)
 * Mencegah konten terpotong; selaras dengan navbar situs di atas.
 */

@media (max-width: 991.98px) {
    #mobile {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

    #mobile .beelang-home-mobile {
        width: 100%;
        max-width: 100%;
    }

    #mobile .container-nav {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #mobile .container-nav > .row {
        margin: 0;
        max-width: 100%;
    }

    #mobile .app-wrap {
        height: auto;
        min-height: 0;
        max-width: 100%;
        overflow: visible;
    }

    #mobile .container-content {
        width: 100%;
        max-width: 100%;
        padding: 1rem 1rem 2rem;
        padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overflow: visible;
    }

    #mobile .mySwiper {
        margin-top: 0.5rem !important;
    }

    #mobile .swiper,
    #mobile .swiper-wrapper {
        max-width: 100%;
    }

    #mobile .swiper-slide img,
    #mobile .card-my-live-course img,
    #mobile .img-grade,
    #mobile .card-image {
        max-width: 100%;
        height: auto;
    }

    #mobile .online-course-title {
        height: auto;
        min-height: 0;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
        align-items: center;
    }

    #mobile .online-course-black {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
    }

    #mobile .see-all {
        flex-shrink: 0;
        white-space: nowrap;
    }

    #mobile .row.pe-5,
    #mobile .col-lg-12.pe-5 {
        padding-right: 0 !important;
    }

    #mobile .row > [class*="col-"] {
        min-width: 0;
    }

    #mobile #kamus-mobile.kamus {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 0.5rem;
        box-sizing: border-box;
    }

    #mobile #kamus-mobile .kamus-word,
    #mobile #kamus-mobile .kamus-word-picture {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: min(100%, 9.5rem);
        max-width: 100%;
        overflow: visible;
        align-self: stretch;
    }

    #mobile #kamus-mobile .description-word-day,
    #mobile #kamus-mobile .description-picture {
        font-size: clamp(1rem, 4.5vw, var(--text-h3, 1.5rem));
        line-height: 1.25;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #mobile #kamus-mobile .kamus-picture {
        font-size: var(--text-body-sm, 1rem);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #mobile #kamus-mobile .image-container {
        padding-top: 56%;
        width: 100%;
        max-width: 100%;
    }

    #mobile .swiper-slide-2,
    #mobile .swiper-slide-3,
    #mobile .swiper-slide-online-course,
    #mobile .swiper-slide-live-course {
        max-width: calc(100vw - 2.5rem);
        box-sizing: border-box;
    }

    #mobile .content-online-course,
    #mobile .content-online-course-testi {
        max-width: 100%;
        box-sizing: border-box;
    }

    #mobile .title-online-course,
    #mobile .judul-live-course,
    #mobile .description-online-course {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #mobile .beelang-home-article-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 6.25rem;
        box-sizing: border-box;
    }

    #mobile .beelang-home-article-card .beelang-home-article-excerpt {
        height: auto !important;
        max-height: none;
    }

    #mobile .subcontent-online-course .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #mobile .btn-go {
        flex-shrink: 0;
    }

    #mobile .contain-live-course {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* My Online Course — badge persentase tidak terpotong di kolom sempit */
    #mobile .beelang-home-my-course-item,
    #mobile .beelang-home-my-course-item > div,
    #mobile .beelang-home-my-course-item .card {
        overflow: visible;
    }

    #mobile .beelang-home-my-course-item .card {
        padding-top: 1.125rem;
        padding-right: 0.625rem;
        min-width: 0;
    }

    #mobile .beelang-home-my-course-item .progress-container {
        top: 0.375rem;
        right: 0.375rem;
        z-index: 3;
    }

    #mobile .beelang-home-my-course-item .progress-circle {
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
    }

    #mobile .beelang-home-my-course-item .progress-circle-inner {
        width: 2.125rem;
        height: 2.125rem;
        font-size: 0.625rem;
        line-height: 1;
    }

    #mobile .beelang-home-my-course-item .progress-text {
        position: static;
        font-size: 0.625rem;
        line-height: 1;
        white-space: nowrap;
    }

    #mobile .beelang-home-my-course-item .card-image {
        width: 100%;
        max-width: 8.75rem;
        margin-left: auto;
        margin-right: auto;
    }

    #mobile .beelang-home-my-course-item .card-content {
        width: 100%;
        text-align: left;
    }

    #mobile .beelang-home-my-course-item .card-content h3 {
        font-size: var(--text-body-sm, 1rem);
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
}