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

.blog-show-page {
    --blog-bg: #f5f6f8;
    --blog-card: #ffffff;

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

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

    --blog-blue: #2563eb;

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


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

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

    .blog-show-page {
        width: 100%;
        max-width: 100%;

        background:
            var(--blog-bg) !important;

        overflow-x:
            hidden;
    }

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


    /* ======================================================================
       Top Section
       ====================================================================== */

    .blog-show-page > section {
        border-bottom:
            0 !important;

        background:
            transparent !important;
    }

    .blog-show-page > section > .mx-auto {
        width:
            100%;

        max-width:
            100% !important;

        padding:
            8px
            6px
            0 !important;
    }


    /* ======================================================================
       Hero
       ====================================================================== */

    .blog-hero {
        border:
            1px solid
            var(--blog-border) !important;

        border-radius:
            12px !important;

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

    .blog-hero__banner {
        height:
            170px !important;
    }

    .blog-hero__banner > img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;
    }


    /* ======================================================================
       Hero Content
       ====================================================================== */

    .blog-hero__content {
        left:
            10px !important;

        right:
            10px !important;

        bottom:
            10px !important;
    }

    .blog-hero__content > .mb-2 {
        margin-bottom:
            3px !important;

        font-size:
            7px !important;

        line-height:
            1.2 !important;
    }

    .blog-hero__content h1 {
        display:
            -webkit-box;

        overflow:
            hidden;

        margin:
            0;

        font-size:
            18px !important;

        font-weight:
            800 !important;

        line-height:
            1.25 !important;

        letter-spacing:
            -0.04em;

        word-break:
            keep-all;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }

    .blog-hero__content > p {
        display:
            -webkit-box;

        max-width:
            100% !important;

        margin-top:
            4px !important;

        overflow:
            hidden;

        font-size:
            7.5px !important;

        line-height:
            1.45 !important;

        color:
            rgba(255, 255, 255, .86) !important;

        word-break:
            keep-all;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }


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

    .blog-hero__categories {
        display:
            flex !important;

        flex-wrap:
            nowrap !important;

        gap:
            4px !important;

        margin-top:
            7px !important;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

    .blog-hero__categories::-webkit-scrollbar {
        display:
            none;
    }

    .blog-hero__categories a {
        flex:
            0 0 auto;

        min-height:
            24px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            4px
            7px !important;

        border-radius:
            999px !important;

        font-size:
            6.5px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        white-space:
            nowrap;

        text-decoration:
            none !important;
    }


    /* ======================================================================
       Hero Footer
       ====================================================================== */

    .blog-hero__footer {
        display:
            grid !important;

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

        align-items:
            center !important;

        gap:
            8px !important;

        padding:
            9px !important;
    }

    .blog-hero__footer > .flex.items-center.gap-3 {
        min-width:
            0;

        gap:
            7px !important;
    }

    .blog-hero__footer .h-12.w-12 {
        width:
            40px !important;

        height:
            40px !important;

        border-width:
            2px !important;
    }

    .blog-hero__footer .text-sm.font-semibold {
        overflow:
            hidden;

        font-size:
            9px !important;

        font-weight:
            800 !important;

        line-height:
            1.25 !important;

        color:
            #111827 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

    .blog-hero__footer .text-xs.text-gray-500 {
        margin-top:
            2px;

        overflow:
            hidden;

        font-size:
            6.5px !important;

        line-height:
            1.3 !important;

        color:
            #94a3b8 !important;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ======================================================================
       Owner / Subscribe Actions
       ====================================================================== */

    .blog-hero__footer > .flex.items-center.gap-2 {
        gap:
            4px !important;
    }

    .blog-hero__footer > .flex.items-center.gap-2 a,
    .blog-hero__footer > .flex.items-center.gap-2 button {
        min-height:
            30px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            5px
            8px !important;

        border-radius:
            999px !important;

        font-size:
            7px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        white-space:
            nowrap;

        text-decoration:
            none !important;
    }


    /* ======================================================================
       Main Layout
       ====================================================================== */

    .blog-show-main {
        display:
            grid !important;

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

        gap:
            9px !important;

        width:
            100%;

        max-width:
            100% !important;

        padding:
            9px
            6px
            28px !important;
    }


    /* ======================================================================
       Post List Header
       ====================================================================== */

    .blog-post-list {
        display:
            grid;

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

        gap:
            8px !important;
    }

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

    .blog-post-list > .flex.items-center.justify-between {
        padding:
            0
            2px;
    }

    .blog-post-list > .flex.items-center.justify-between h2 {
        margin:
            0;

        font-size:
            13px !important;

        font-weight:
            800 !important;

        line-height:
            1.3 !important;

        color:
            #111827 !important;
    }

    .blog-post-list > .flex.items-center.justify-between .text-sm {
        font-size:
            7.5px !important;

        color:
            #94a3b8 !important;
    }


    /* ======================================================================
       Post Card
       ====================================================================== */

    .blog-post-card {
        border:
            1px solid
            var(--blog-border) !important;

        border-radius:
            10px !important;

        background:
            #ffffff !important;

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

        transform:
            none !important;
    }

    .blog-post-card > a {
        padding:
            9px !important;

        text-decoration:
            none !important;
    }

    .blog-post-card .mb-3.flex {
        gap:
            3px
            5px !important;

        margin-bottom:
            5px !important;

        font-size:
            6.5px !important;

        line-height:
            1.35 !important;

        color:
            #94a3b8 !important;
    }

    .blog-post-card .mb-3.flex span {
        white-space:
            nowrap;
    }

    .blog-post-card .rounded-full.bg-gray-100 {
        padding:
            3px
            5px !important;

        font-size:
            6.3px !important;
    }

    .blog-post-card h3 {
        display:
            -webkit-box;

        overflow:
            hidden;

        margin:
            0;

        font-size:
            11px !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;
    }

    .blog-post-card p {
        display:
            -webkit-box;

        margin-top:
            5px !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;
    }

    .blog-post-card .mt-5 {
        margin-top:
            7px !important;

        font-size:
            7.5px !important;

        font-weight:
            700 !important;

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


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

    .blog-post-empty {
        min-height:
            150px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        padding:
            24px
            12px !important;

        border:
            1px dashed
            #e2e8f0 !important;

        border-radius:
            10px !important;

        background:
            #ffffff !important;
    }

    .blog-post-empty > .text-lg {
        font-size:
            10px !important;

        font-weight:
            800 !important;

        color:
            #111827 !important;
    }

    .blog-post-empty > p {
        margin-top:
            4px !important;

        font-size:
            7.5px !important;

        color:
            #94a3b8 !important;
    }

    .blog-post-empty > a {
        min-height:
            31px;

        margin-top:
            9px !important;

        padding:
            5px
            9px !important;

        border-radius:
            999px !important;

        font-size:
            7px !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;
    }


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

    .blog-post-list > .pt-4 {
        padding-top:
            1px !important;
    }

    .blog-post-list .haru-pagination {
        margin-top:
            0 !important;
    }


    /* ======================================================================
       Sidebar
       ====================================================================== */

    .blog-sidebar {
        margin-top:
            0 !important;
    }

    .blog-sidebar > :not([hidden]) ~ :not([hidden]) {
        margin-top:
            8px !important;
    }

}


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

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

    .blog-hero__footer {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .blog-hero__footer > .flex.items-center.gap-2 {
        display:
            grid !important;

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

        width:
            100%;
    }

    .blog-hero__footer > .flex.items-center.gap-2 a,
    .blog-hero__footer > .flex.items-center.gap-2 button {
        width:
            100%;
    }

}


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

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

    .blog-hero__banner {
        height:
            160px !important;
    }

    .blog-hero__content h1 {
        font-size:
            16px !important;
    }

    .blog-hero__footer > .flex.items-center.gap-2 {
        grid-template-columns:
            minmax(0, 1fr);
    }

}