/* ==========================================================================
   Haru Live
   Blog Side - Mobile
   ========================================================================== */

.blog-side {
    --bs-card: #ffffff;

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

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

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

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


/* ==========================================================================
   Desktop / common
   ========================================================================== */

.blog-side-card {
    min-width: 0;
}

.blog-side-card__title {
    margin: 0;
}


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

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

    .blog-side {
        display: grid !important;

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

        gap:
            8px !important;

        width:
            100%;

        min-width:
            0;
    }

    .blog-side > :not([hidden]) ~ :not([hidden]) {
        margin-top:
            0 !important;
    }

    .blog-side *,
    .blog-side *::before,
    .blog-side *::after {
        box-sizing:
            border-box;
    }


    /* ======================================================================
       Common Card
       ====================================================================== */

    .blog-side-card {
        width:
            100%;

        min-width:
            0;

        padding:
            10px !important;

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

        border-radius:
            10px !important;

        background:
            var(--bs-card) !important;

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

    .blog-side-card__title,
    .blog-side-card > .text-sm.font-bold.text-gray-900 {
        margin:
            0 !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.3 !important;

        color:
            var(--bs-text) !important;
    }


    /* ======================================================================
       Categories
       ====================================================================== */

    .blog-side-card--categories > .flex.items-center.justify-between {
        gap:
            7px !important;
    }

    .blog-side-card--categories > .flex.items-center.justify-between > a {
        flex:
            0 0 auto;

        font-size:
            7px !important;

        font-weight:
            700 !important;

        line-height:
            1.2 !important;

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

        text-decoration:
            none !important;
    }

    .blog-side-card--categories > .mt-3.flex.flex-wrap {
        gap:
            4px !important;

        margin-top:
            7px !important;
    }

    .blog-side-category,
    .blog-side-card--categories > .mt-3.flex.flex-wrap > a {
        min-height:
            25px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            4px
            7px !important;

        border:
            1px solid
            #e2e8f0;

        border-radius:
            999px !important;

        background:
            #f8fafc;

        font-size:
            6.7px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        color:
            #475569;

        text-decoration:
            none !important;

        white-space:
            nowrap;
    }

    .blog-side-category--active {
        border-color:
            #111827 !important;

        background:
            #111827 !important;

        color:
            #ffffff !important;
    }

    .blog-side-card--categories > p.mt-3 {
        margin-top:
            7px !important;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            #94a3b8 !important;
    }


    /* ======================================================================
       About
       ====================================================================== */

    .blog-side-card--about > a.mt-3 {
        display:
            block;

        margin-top:
            7px !important;

        overflow:
            hidden;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.35 !important;

        color:
            #111827 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        text-decoration:
            none !important;
    }

    .blog-side-card--about > a.mt-3:hover {
        color:
            var(--bs-blue) !important;
    }

    .blog-side-card--about > p.mt-2 {
        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:
            3;

        -webkit-box-orient:
            vertical;
    }


    /* ======================================================================
       Recent Posts
       ====================================================================== */

    .blog-side-card--recent > .mt-3 {
        display:
            grid;

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

        gap:
            5px !important;

        margin-top:
            7px !important;
    }

    .blog-side-card--recent > .mt-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top:
            0 !important;
    }

    .blog-side-recent,
    .blog-side-card--recent > .mt-3 > a {
        width:
            100%;

        min-width:
            0;

        padding:
            7px !important;

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

        border-radius:
            8px !important;

        background:
            #ffffff !important;

        text-decoration:
            none !important;
    }

    .blog-side-recent:hover,
    .blog-side-card--recent > .mt-3 > a:hover {
        border-color:
            #bfdbfe !important;

        background:
            #f8fbff !important;
    }

    .blog-side-recent .line-clamp-2,
    .blog-side-card--recent .line-clamp-2,
    .blog-side-card--recent > .mt-3 > a .line-clamp-2 {
        display:
            -webkit-box;

        overflow:
            hidden;

        font-size:
            8.5px !important;

        font-weight:
            700 !important;

        line-height:
            1.4 !important;

        color:
            #111827 !important;

        word-break:
            keep-all;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }

    .blog-side-recent .mt-1,
    .blog-side-card--recent > .mt-3 > a .mt-1 {
        margin-top:
            3px !important;

        font-size:
            6px !important;

        line-height:
            1.3 !important;

        color:
            #94a3b8 !important;
    }


    /* ======================================================================
       Owner
       ====================================================================== */

    .blog-side-card--owner > .mt-3.flex {
        gap:
            7px !important;

        margin-top:
            7px !important;
    }

    .blog-side-card--owner .h-10.w-10 {
        width:
            36px !important;

        height:
            36px !important;
    }

    .blog-side-card--owner .text-sm.font-semibold {
        overflow:
            hidden;

        font-size:
            8.5px !important;

        font-weight:
            800 !important;

        line-height:
            1.3 !important;

        color:
            #111827 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

    .blog-side-card--owner .text-xs.text-gray-500 {
        margin-top:
            2px;

        font-size:
            6px !important;

        line-height:
            1.2 !important;

        color:
            #94a3b8 !important;
    }


    /* ======================================================================
       Blog Info
       ====================================================================== */

    .blog-side-card--info dl {
        display:
            grid;

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

        gap:
            0;

        margin-top:
            7px !important;
    }

    .blog-side-card--info dl > div {
        min-height:
            29px;

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            8px !important;

        padding:
            5px
            0;

        border-bottom:
            1px solid
            var(--bs-border-soft);
    }

    .blog-side-card--info dl > div:last-child {
        border-bottom:
            0;
    }

    .blog-side-card--info dt {
        min-width:
            0;

        font-size:
            7px !important;

        line-height:
            1.3 !important;

        color:
            #94a3b8 !important;
    }

    .blog-side-card--info dd {
        min-width:
            0;

        max-width:
            65%;

        overflow:
            hidden;

        font-size:
            7.5px !important;

        font-weight:
            700 !important;

        line-height:
            1.3 !important;

        color:
            #334155 !important;

        text-align:
            right;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

}


/* ==========================================================================
   641px ~ 1023px
   태블릿에서 사이드바가 본문 아래로 내려오는 경우
   ========================================================================== */

@media screen and (min-width: 641px) and (max-width: 1023px) {

    .blog-side {
        display:
            grid !important;

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

        gap:
            12px !important;
    }

    .blog-side > :not([hidden]) ~ :not([hidden]) {
        margin-top:
            0 !important;
    }

}


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

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

    .blog-side-card {
        padding:
            9px !important;
    }

}


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

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

    .blog-side-card--categories > .mt-3.flex.flex-wrap {
        display:
            grid !important;

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

    .blog-side-category,
    .blog-side-card--categories > .mt-3.flex.flex-wrap > a {
        width:
            100%;

        min-width:
            0;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }

}