/* ==========================================================================
   Haru Live
   Link Category Show - Mobile
   ========================================================================== */

.link-category-show-page {
    --lcs-bg: #f5f6f8;
    --lcs-card: #ffffff;

    --lcs-text: #111827;
    --lcs-soft: #475569;
    --lcs-muted: #94a3b8;

    --lcs-border: #e5e7eb;
    --lcs-border-soft: #eef2f7;

    --lcs-blue: #2563eb;
    --lcs-blue-soft: #eff6ff;

    --lcs-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 3px 10px rgba(15, 23, 42, .025);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media screen and (max-width: 640px) {

    /* ======================================================================
       Header breadcrumb
       ====================================================================== */

    .link-category-show-breadcrumb {
        display:
            flex;

        align-items:
            center;

        gap:
            4px;

        margin-bottom:
            4px;

        overflow:
            hidden;

        font-size:
            7px;

        line-height:
            1.3;

        color:
            #94a3b8;
    }

    .link-category-show-breadcrumb a {
        max-width:
            120px;

        overflow:
            hidden;

        color:
            #64748b;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        text-decoration:
            none;
    }

    .link-category-show-breadcrumb span {
        flex:
            0 0 auto;

        color:
            #cbd5e1;
    }


    /* ======================================================================
       Page
       ====================================================================== */

    .link-category-show-page {
        width:
            100%;

        max-width:
            100%;

        padding:
            10px
            0
            28px !important;

        background:
            var(--lcs-bg);

        overflow-x:
            hidden;
    }

    .link-category-show-page *,
    .link-category-show-page *::before,
    .link-category-show-page *::after {
        box-sizing:
            border-box;
    }


    /* ======================================================================
       Container
       ====================================================================== */

    .link-category-show-container {
        width:
            100%;

        max-width:
            100% !important;

        padding:
            0
            8px !important;
    }


    /* ======================================================================
       Child categories
       ====================================================================== */

    .link-category-children {
        margin-bottom:
            9px !important;

        padding:
            10px !important;

        border:
            1px solid
            var(--lcs-border) !important;

        border-radius:
            11px !important;

        background:
            #ffffff !important;

        box-shadow:
            var(--lcs-shadow) !important;
    }

    .link-category-children__title {
        margin-bottom:
            7px !important;

        font-size:
            8.5px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;

        color:
            #475569 !important;
    }

    .link-category-children__list {
        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            5px !important;
    }

    .link-category-child {
        min-width:
            0;

        min-height:
            28px;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            3px;

        padding:
            5px
            8px !important;

        border:
            1px solid
            #e2e8f0;

        border-radius:
            999px !important;

        background:
            #f8fafc !important;

        font-size:
            7.5px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        color:
            #475569 !important;

        text-decoration:
            none !important;
    }

    .link-category-child:hover {
        border-color:
            #bfdbfe;

        background:
            var(--lcs-blue-soft) !important;

        color:
            var(--lcs-blue) !important;
    }

    .link-category-child__name {
        max-width:
            150px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

    .link-category-child__count {
        margin-left:
            0 !important;

        flex:
            0 0 auto;

        font-size:
            6.5px !important;

        font-weight:
            700;

        color:
            var(--lcs-blue) !important;
    }


    /* ======================================================================
       Count
       ====================================================================== */

    .link-category-show-count {
        margin-bottom:
            7px !important;

        padding:
            0
            2px;

        font-size:
            7.5px !important;

        line-height:
            1.4 !important;

        color:
            #94a3b8 !important;
    }

    .link-category-show-count strong {
        font-size:
            8px;

        font-weight:
            700;

        color:
            #475569;
    }


    /* ======================================================================
       Link Grid
       ====================================================================== */

    .link-category-show-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;
    }


    /* ======================================================================
       Link Card
       ====================================================================== */

    .link-category-link-card {
        width:
            100%;

        min-width:
            0;

        padding:
            9px !important;

        border:
            1px solid
            var(--lcs-border) !important;

        border-radius:
            9px !important;

        background:
            #ffffff !important;

        box-shadow:
            var(--lcs-shadow) !important;

        text-decoration:
            none !important;
    }

    .link-category-link-card:hover {
        border-color:
            #bfdbfe !important;

        background:
            #f8fbff !important;
    }


    /* ======================================================================
       Category path
       ====================================================================== */

    .link-category-link-card__category {
        margin-bottom:
            4px !important;

        overflow:
            hidden;

        font-size:
            6.5px !important;

        line-height:
            1.3 !important;

        color:
            #94a3b8 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ======================================================================
       Title
       ====================================================================== */

    .link-category-link-card__title {
        display:
            -webkit-box;

        overflow:
            hidden;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.4 !important;

        color:
            #111827 !important;

        word-break:
            keep-all;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }


    /* ======================================================================
       Description
       ====================================================================== */

    .link-category-link-card__description {
        display:
            -webkit-box;

        margin-top:
            4px !important;

        overflow:
            hidden;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            #64748b !important;

        word-break:
            keep-all;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }


    /* ======================================================================
       URL
       ====================================================================== */

    .link-category-link-card__url {
        display:
            block;

        max-width:
            100%;

        margin-top:
            5px !important;

        overflow:
            hidden;

        font-size:
            6.8px !important;

        line-height:
            1.35 !important;

        color:
            var(--lcs-blue) !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ======================================================================
       Pagination
       ====================================================================== */

    .link-category-show-pagination {
        margin-top:
            9px !important;
    }

    .link-category-show-pagination
    .haru-pagination {
        margin-top:
            0 !important;
    }


    /* ======================================================================
       Empty
       ====================================================================== */

    .link-category-show-empty {
        min-height:
            130px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            24px
            12px !important;

        border:
            1px dashed
            #e2e8f0 !important;

        border-radius:
            11px !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;

        font-size:
            8.5px !important;

        line-height:
            1.45 !important;

        color:
            #94a3b8 !important;

        text-align:
            center;

        word-break:
            keep-all;
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

@media screen and (max-width: 390px) {

    .link-category-show-container {
        padding-left:
            6px !important;

        padding-right:
            6px !important;
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

@media screen and (max-width: 350px) {

    .haru-page-header:has(.haru-page-header__actions) {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .haru-page-header__actions {
        width:
            100%;

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr);
    }

    .haru-page-header__action {
        width:
            100%;
    }

    .link-category-child {
        flex:
            1 1 calc(50% - 5px);

        justify-content:
            space-between;
    }

}