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

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

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

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

    --bps-blue: #2563eb;
    --bps-indigo: #4f46e5;

    --bps-red: #dc2626;
    --bps-green: #15803d;

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


/* ==========================================================================
   Existing quote
   ========================================================================== */

.quote-placement-none {
    width: 100%;
}

.quote-placement-left {
    width: 55%;
    margin-right: auto;
}

.quote-placement-right {
    width: 55%;
    margin-left: auto;
}

.quote-placement-center {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.quote-placement-full {
    width: 100%;
}

.quote-style-default {
    border-left: 4px solid #d1d5db;
    padding-left: 14px;
    color: #4b5563;
    font-style: italic;
}

.quote-style-box {
    border: 4px solid #d1d5db;
    padding: 18px;
    background: #fff;
    color: #4b5563;
}

.quote-style-bubble {
    position: relative;
    border: 4px solid #d1d5db;
    padding: 18px;
    background: #fff;
    color: #4b5563;
    margin-bottom: 18px;
}

.quote-style-bubble::after {
    content: '';
    position: absolute;
    left: 28%;
    bottom: -18px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-left: 4px solid #d1d5db;
    border-bottom: 4px solid #d1d5db;
    transform: rotate(-45deg);
}

.quote-style-fancy {
    text-align: center;
    color: #4b5563;
    font-style: italic;
}

.quote-style-fancy .quote-mark {
    font-size: 42px;
    line-height: 1;
    color: #9ca3af;
}


/* ==========================================================================
   Link tool
   ========================================================================== */

.editor-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 24px 26px;
    margin: 18px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.editor-link-card:hover {
    background: #fafafa;
}

.editor-link-card__content {
    flex: 1;
    min-width: 0;
}

.editor-link-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.editor-link-card__description {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 18px;
}

.editor-link-card__site {
    font-size: 14px;
    color: #9ca3af;
}

.editor-link-card__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f4f6;
}

.editor-link-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   TOC
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

.post-heading-anchor {
    scroll-margin-top: 120px;
}

.post-toc-card {
    max-height: 680px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    padding: 12px;
}

.post-toc-title {
    padding: 4px 6px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.post-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-toc-link {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.45;
    text-decoration: none;
    word-break: keep-all;
}

.post-toc-link:hover {
    background: #f3f4f6;
    color: #2563eb;
}

.post-toc-depth-1 {
    padding-left: 8px;
    font-weight: 700;
    color: #111827;
}

.post-toc-depth-2 {
    padding-left: 18px;
    font-weight: 600;
}

.post-toc-depth-3 {
    padding-left: 28px;
}

.post-toc-depth-4 {
    padding-left: 38px;
    font-size: 11px;
}

.post-toc-depth-5 {
    padding-left: 48px;
    font-size: 11px;
    color: #6b7280;
}

.post-toc-depth-6 {
    padding-left: 58px;
    font-size: 11px;
    color: #9ca3af;
}


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

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

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

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

        overflow-x: hidden;
    }

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


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

    .blog-post-hero {
        border-bottom: 0 !important;
        background: transparent !important;
    }

    .blog-post-hero > .mx-auto {
        padding:
            8px
            6px
            0 !important;
    }

    .blog-post-hero__card {
        border-radius: 12px !important;

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

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

    .blog-post-hero__content {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
    }

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

        font-size: 6.8px !important;
    }

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

        overflow: hidden;

        margin: 0;

        font-size: 17px !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-post-hero__content > p {
        display: -webkit-box;

        margin-top: 4px !important;

        overflow: hidden;

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

    .blog-post-hero__categories {
        flex-wrap: nowrap !important;

        gap: 4px !important;

        margin-top: 6px !important;

        overflow-x: auto;

        scrollbar-width: none;
    }

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

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

        min-height: 23px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 4px 7px !important;

        font-size: 6.3px !important;

        white-space: nowrap;
    }


    /* footer */

    .blog-post-hero__footer {
        display: grid !important;

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

        gap: 8px !important;

        align-items: center !important;

        padding: 9px !important;
    }

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

        gap: 7px !important;
    }

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

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

        font-size: 9px !important;
        font-weight: 800 !important;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

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

        overflow: hidden;

        font-size: 6.5px !important;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

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

    .blog-post-hero__footer > .flex.items-center.gap-2 a {
        min-height: 29px;

        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;

        white-space: nowrap;

        text-decoration: none !important;
    }


    /* ======================================================================
       Spoiler
       ====================================================================== */

    .blog-post-spoiler {
        margin-top: 8px !important;

        padding:
            0
            6px !important;
    }

    .blog-post-spoiler > div {
        border-radius: 10px !important;
    }

    .blog-post-spoiler .border-b {
        padding: 8px !important;
    }

    .blog-post-spoiler .font-semibold {
        font-size: 9px !important;
    }

    .blog-post-spoiler .text-sm {
        margin-top: 3px !important;

        font-size: 7px !important;
    }

    .blog-post-spoiler img {
        max-height: 360px !important;
    }


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

    .blog-post-main {
        grid-template-columns: minmax(0,1fr) !important;

        gap: 9px !important;

        width: 100%;
        max-width: 100% !important;

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


    /* ======================================================================
       Article
       ====================================================================== */

    .blog-post-article {
        width: 100%;
        max-width: 100% !important;

        border-radius: 11px !important;

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


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

    .blog-post-header {
        padding: 10px !important;
    }

    .blog-post-header > .mb-4.flex {
        gap: 4px !important;

        margin-bottom: 7px !important;
    }

    .blog-post-header > .mb-4.flex > span {
        min-height: 22px;

        padding: 3px 6px !important;

        border-radius: 999px !important;

        font-size: 6.3px !important;
        line-height: 1 !important;
    }

    .blog-post-header > h1 {
        margin: 0;

        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;

        letter-spacing: -0.04em;

        word-break: keep-all;
    }


    /* ======================================================================
       Author box
       ====================================================================== */

    .blog-post-author-box {
        margin-top: 8px !important;

        padding: 8px !important;

        border-radius: 9px !important;
    }

    .blog-post-author-box > .flex.flex-col {
        gap: 8px !important;
    }

    .blog-post-author-box .h-10.w-10 {
        width: 36px !important;
        height: 36px !important;
    }

    .blog-post-author-box .text-sm.font-semibold {
        font-size: 8.5px !important;
    }

    .blog-post-author-box .mt-0\.5 {
        margin-top: 2px !important;

        gap: 2px 4px !important;

        font-size: 6.3px !important;
    }

    .blog-post-author-box > .flex.flex-col > .flex.flex-wrap.items-center.gap-2.text-xs {
        display: grid !important;

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

        gap: 4px !important;

        width: 100%;
    }

    .blog-post-author-box > .flex.flex-col > .flex.flex-wrap.items-center.gap-2.text-xs > span {
        min-height: 27px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 4px 5px !important;

        font-size: 6.2px !important;

        white-space: nowrap;
    }


    /* hidden message */

    .blog-post-header > .mt-4.rounded-md {
        margin-top: 8px !important;

        padding: 8px !important;
    }

    .blog-post-header > .mt-4.rounded-md .text-sm {
        font-size: 7.5px !important;
    }


    /* ======================================================================
       Post Body
       ====================================================================== */

    .blog-post-body {
        padding: 9px !important;
    }

    .blog-post-content {
        width: 100%;

        padding: 8px !important;

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

        border-radius: 8px !important;

        overflow-x: hidden;
    }

    .blog-post-content > div {
        max-width: 100%;

        font-size: 14px !important;

        line-height: 1.7 !important;

        word-break: normal;
        overflow-wrap: anywhere;
    }


    /* paragraphs */

    .blog-post-content p {
        max-width: 100%;

        margin:
            .65em
            0 !important;

        overflow-wrap: anywhere;
    }


    /* headings */

    .blog-post-content h1 {
        font-size: 21px !important;
    }

    .blog-post-content h2 {
        font-size: 19px !important;
    }

    .blog-post-content h3 {
        font-size: 17px !important;
    }

    .blog-post-content h4 {
        font-size: 15px !important;
    }

    .blog-post-content h5 {
        font-size: 14px !important;
    }

    .blog-post-content h6 {
        font-size: 13px !important;
    }

    .blog-post-content h1,
    .blog-post-content h2,
    .blog-post-content h3,
    .blog-post-content h4,
    .blog-post-content h5,
    .blog-post-content h6 {
        max-width: 100%;

        margin-top: 1.2em !important;
        margin-bottom: .45em !important;

        word-break: keep-all;
    }


    /* ======================================================================
       Editor Images
       ====================================================================== */

    .blog-post-content img {
        max-width: 100% !important;

        height: auto !important;
    }

    .blog-post-content div[style*="display:flex"][style*="flex-wrap:nowrap"] {
        max-width: 100%;

        gap: 4px !important;

        overflow-x: auto;
    }

    .blog-post-content div[style*="display:flex"][style*="flex-wrap:nowrap"] > div {
        min-width: 0;
    }


    /* ======================================================================
       Lists
       ====================================================================== */

    .blog-post-content ul,
    .blog-post-content ol {
        max-width: 100%;

        margin-left: 18px !important;

        padding-left: 0 !important;
    }

    .blog-post-content li {
        margin: 3px 0;

        overflow-wrap: anywhere;
    }


    /* ======================================================================
       Quote
       ====================================================================== */

    .quote-placement-left,
    .quote-placement-right,
    .quote-placement-center,
    .quote-placement-full,
    .quote-placement-none {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .quote-style-default {
        border-left-width: 3px;

        padding-left: 9px;

        font-size: 13px;
    }

    .quote-style-box,
    .quote-style-bubble {
        padding: 10px !important;

        border-width: 2px !important;

        font-size: 13px;
    }

    .quote-style-bubble::after {
        width: 16px;
        height: 16px;

        bottom: -11px;

        border-left-width: 2px;
        border-bottom-width: 2px;
    }

    .quote-style-fancy .quote-mark {
        font-size: 28px;
    }


    /* ======================================================================
       Code
       ====================================================================== */

    .blog-post-content pre {
        max-width: 100%;

        margin:
            10px
            0 !important;

        padding: 9px !important;

        border-radius: 7px !important;

        overflow-x: auto;

        font-size: 11px !important;
        line-height: 1.5 !important;

        -webkit-overflow-scrolling: touch;
    }

    .blog-post-content code {
        font-size: inherit;
    }


    /* ======================================================================
       Table
       ====================================================================== */

    .blog-post-content .overflow-x-auto {
        max-width: 100%;

        margin:
            10px
            0 !important;

        -webkit-overflow-scrolling: touch;
    }

    .blog-post-content table {
        min-width: 520px !important;

        font-size: 10px !important;
    }

    .blog-post-content th,
    .blog-post-content td {
        padding:
            6px
            7px !important;

        line-height: 1.4;
    }


    /* ======================================================================
       Checklist
       ====================================================================== */

    .blog-post-content label.flex.items-center {
        gap: 6px !important;

        font-size: 13px;
    }

    .blog-post-content input[type="checkbox"] {
        width: 15px;
        height: 15px;

        flex: 0 0 auto;
    }


    /* ======================================================================
       Video
       ====================================================================== */

    .blog-post-content .video-card {
        width: 100% !important;

        max-width: 100% !important;

        margin:
            10px
            0 !important;
    }

    .blog-post-content .video-card__preview {
        width: 100%;

        aspect-ratio: 16 / 9;

        overflow: hidden;
    }

    .blog-post-content .video-card__preview iframe,
    .blog-post-content .video-card__preview img {
        width: 100% !important;
        height: 100% !important;
    }

    .blog-post-content .video-card__body {
        padding: 7px !important;
    }

    .blog-post-content .video-card__title {
        font-size: 9px !important;
    }

    .blog-post-content .video-card__meta {
        margin-top: 3px;

        overflow: hidden;

        font-size: 6.5px !important;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


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

    .editor-link-card {
        gap: 8px;

        padding: 9px !important;

        margin:
            10px
            0 !important;

        border-radius: 8px;
    }

    .editor-link-card__title {
        margin-bottom: 4px;

        font-size: 10px !important;
        line-height: 1.35;
    }

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

        margin-bottom: 5px;

        overflow: hidden;

        font-size: 7.5px !important;
        line-height: 1.45;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .editor-link-card__site {
        display: block;

        overflow: hidden;

        font-size: 6.5px !important;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .editor-link-card__thumb {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }


    /* ======================================================================
       Attachment
       ====================================================================== */

    .blog-post-attachments {
        margin-top: 10px !important;

        padding: 9px !important;

        border-radius: 9px !important;
    }

    .blog-post-attachments > .font-semibold {
        font-size: 9px !important;
        font-weight: 800 !important;
    }

    .blog-post-attachments ul {
        margin-top: 5px !important;
        margin-left: 16px !important;

        font-size: 7.5px !important;
    }

    .blog-post-attachments li {
        margin: 3px 0;
    }


    /* ======================================================================
       Series
       ====================================================================== */

    .blog-post-series {
        margin-top: 10px !important;

        padding: 9px !important;

        border-radius: 9px !important;
    }

    .blog-post-series > .mb-3 {
        margin-bottom: 6px !important;
    }

    .blog-post-series .text-xs {
        font-size: 6px !important;
    }

    .blog-post-series .font-semibold {
        font-size: 9px !important;
    }

    .blog-post-series > .mb-3 > a {
        min-height: 27px;

        display: inline-flex;

        align-items: center;

        padding: 4px 7px !important;

        font-size: 7px !important;
    }

    .blog-post-series > .grid {
        gap: 5px !important;
    }

    .blog-post-series > .grid a,
    .blog-post-series > .grid > div > div {
        min-height: 52px;

        padding: 7px !important;

        font-size: 7px !important;
    }

    .blog-post-series .truncate.font-medium {
        font-size: 7.5px !important;
    }


    /* ======================================================================
       Post Actions
       ====================================================================== */

    .blog-post-actions {
        margin-top: 10px !important;

        padding: 8px !important;

        border-radius: 9px !important;
    }

    .blog-post-actions > .flex.flex-wrap {
        display: grid !important;

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

        gap: 5px !important;
    }

    .blog-post-actions form,
    .blog-post-actions a,
    .blog-post-actions button {
        width: 100%;
        min-width: 0;
        margin:0;
    }

    .blog-post-actions button,
    .blog-post-actions a {
        min-height: 31px !important;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 5px 6px !important;

        font-size: 7px !important;

        text-align: center;

        white-space: normal !important;

        word-break: keep-all;
    }


    /* ======================================================================
       Recommended
       ====================================================================== */

    .blog-post-recommended {
        margin-top: 12px !important;

        padding-top: 10px !important;
    }

    .blog-post-recommended > .mb-4 {
        margin-bottom: 6px !important;
    }

    .blog-post-recommended h3 {
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .blog-post-recommended > .mb-4 > span {
        font-size: 6.5px !important;
    }

    .blog-post-recommended > .space-y-2 {
        display: grid;

        gap: 5px;
    }

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

    .blog-post-recommended a {
        padding: 8px !important;

        border-radius: 8px !important;
    }

    .blog-post-recommended .truncate.text-sm {
        font-size: 8.5px !important;
        font-weight: 700 !important;
    }

    .blog-post-recommended .mt-1.flex {
        gap: 3px !important;

        font-size: 6.2px !important;
    }


    /* ======================================================================
       Share
       ====================================================================== */

    .blog-post-share {
        margin-top: 12px !important;

        padding-top: 9px !important;
    }

    .blog-post-share > .mb-2 {
        margin-bottom: 6px !important;

        font-size: 8.5px !important;
        font-weight: 800 !important;
    }

    .blog-post-share > .flex {
        display: grid !important;

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

        gap: 5px !important;
    }

    .blog-post-share button,
    .blog-post-share a {
        min-height: 30px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        padding: 5px 4px !important;

        border-radius: 7px !important;

        font-size: 6.8px !important;

        text-decoration: none !important;

        white-space: nowrap;
    }


    /* ======================================================================
       Comments wrapper
       ====================================================================== */

    .blog-post-body > .mt-8.border-t.pt-6 {
        margin-top: 12px !important;

        padding-top: 10px !important;
    }


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

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

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


    /* ======================================================================
       TOC
       ====================================================================== */

    .post-toc-card {
        max-height: none;

        padding: 9px;

        border-radius: 9px;

        box-shadow: var(--bps-shadow);
    }

    .post-toc-title {
        padding:
            2px
            2px
            6px;

        margin-bottom: 5px;

        font-size: 9px;
    }

    .post-toc-list {
        gap: 1px;
    }

    .post-toc-link {
        padding: 5px 6px;

        font-size: 7px;

        line-height: 1.4;
    }

    .post-toc-depth-1 {
        padding-left: 6px;
    }

    .post-toc-depth-2 {
        padding-left: 12px;
    }

    .post-toc-depth-3 {
        padding-left: 18px;
    }

    .post-toc-depth-4 {
        padding-left: 24px;

        font-size: 6.8px;
    }

    .post-toc-depth-5 {
        padding-left: 30px;

        font-size: 6.5px;
    }

    .post-toc-depth-6 {
        padding-left: 36px;

        font-size: 6.5px;
    }


    /* ======================================================================
       Report modal
       ====================================================================== */

    #reportModal {
        padding:
            12px;
    }

    .blog-report-dialog {
        width: 100% !important;

        max-width: 360px;

        padding: 10px !important;

        border-radius: 10px !important;
    }

    .blog-report-dialog > .mb-3 {
        margin-bottom: 8px !important;

        font-size: 12px !important;
    }

    .blog-report-dialog select,
    .blog-report-dialog textarea {
        width: 100%;

        min-height: 38px;

        padding: 7px 8px !important;

        border: 1px solid #d1d5db;

        border-radius: 7px;

        font-size: 9px !important;
    }

    .blog-report-dialog textarea {
        min-height: 88px;
    }

    .blog-report-dialog .flex.justify-end {
        gap: 5px !important;
    }

    .blog-report-dialog button {
        min-width: 70px;

        min-height: 32px;

        padding: 5px 8px !important;

        border-radius: 7px;

        font-size: 8px !important;
    }


    /* ======================================================================
       Sensitive modal
       ====================================================================== */

    #sensitiveModal {
        padding:
            12px;
    }

    .blog-sensitive-dialog {
        width: 100% !important;

        max-width: 390px;

        border-radius: 10px;

        overflow: hidden;
    }

    .blog-sensitive-dialog > .border-b {
        padding: 9px !important;

        font-size: 11px !important;
    }

    .blog-sensitive-dialog > .p-4 {
        padding: 10px !important;

        font-size: 8.5px !important;

        line-height: 1.6 !important;
    }

    .blog-sensitive-dialog > .p-4 p {
        margin-bottom: 8px !important;
    }

    .blog-sensitive-dialog > .flex.items-center.justify-between {
        display: grid !important;

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

        gap: 8px;

        padding: 9px !important;
    }

    .blog-sensitive-dialog label {
        font-size: 7.5px !important;
    }

    .blog-sensitive-dialog > .flex.items-center.justify-between > div {
        display: grid;

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

        gap: 5px;

        width: 100%;
    }

    .blog-sensitive-dialog a,
    .blog-sensitive-dialog button {
        min-height: 32px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 5px 8px !important;

        font-size: 8px !important;

        text-decoration: none !important;
    }

}


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

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

    .blog-post-actions > .flex.flex-wrap {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .blog-post-share > .flex {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


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

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

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

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

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

        width: 100%;
    }

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

    .blog-post-author-box > .flex.flex-col > .flex.flex-wrap.items-center.gap-2.text-xs {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .blog-post-actions > .flex.flex-wrap {
        grid-template-columns:
            minmax(0,1fr);
    }

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

}