/**
 * Mislens Blog - Topic Hub / Blog Hub Shared Styles
 *
 * 文件位置：
 * /wp-content/themes/mislens-theme-v2/modules/blog/blog-hub.css
 *
 * 当前阶段：
 * Phase 3 — Category / Topic Hub
 *
 * 本版修复：
 * - 普通文章卡片无 Featured Image 时自动切换单栏
 * - Topic Grid 无图卡片不再保留空图片区
 * - Start Here / Featured Card 无图时自动切换完整文字卡
 */


/* ==========================================================================
   1. PAGE BASE
   ========================================================================== */

body.mislens-blog-topic-hub {
    background: #ffffff;
}

.mislens-topic-hub {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #1f2937;
}

.mislens-topic-container {
    width: min(
        calc(100% - 48px),
        1180px
    );

    margin: 0 auto;
}


/* ==========================================================================
   2. TOPIC HERO
   ========================================================================== */

.mislens-topic-hero {
    padding:
        54px
        0
        58px;

    border-bottom:
        1px solid #eceff3;

    background:
        #ffffff;
}

.mislens-topic-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin:
        0
        0
        34px;

    color:
        #7c8490;

    font-size: 13px;
    line-height: 1.5;
}

.mislens-topic-breadcrumb a {
    color:
        #606873;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.mislens-topic-breadcrumb a:hover,
.mislens-topic-breadcrumb a:focus-visible {
    color:
        #15191f;
}

.mislens-topic-hero__eyebrow {
    display: block;

    margin-bottom: 11px;

    color:
        #8a9199;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.mislens-topic-hero__title {
    max-width:
        880px;

    margin: 0;

    color:
        #111418;

    font-size:
        clamp(
            42px,
            4.2vw,
            60px
        );

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -0.035em;
}

.mislens-topic-hero__description {
    max-width:
        760px;

    margin:
        24px
        0
        0;

    color:
        #616a75;

    font-size:
        18px;
    line-height:
        1.75;
}


/* ==========================================================================
   3. SHARED SECTION HEADING
   ========================================================================== */

.mislens-topic-section-heading {
    max-width:
        760px;

    margin-bottom:
        30px;
}

.mislens-topic-section-heading__eyebrow,
.mislens-topic-commercial__eyebrow,
.mislens-topic-inquiry__eyebrow {
    display: block;

    margin-bottom:
        8px;

    color:
        #8a9199;

    font-size:
        11px;
    line-height:
        1.2;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.mislens-topic-section-heading h2 {
    margin:
        0;

    color:
        #111418;

    font-size:
        clamp(
            30px,
            3vw,
            40px
        );

    line-height:
        1.18;

    letter-spacing:
        -0.03em;
}

.mislens-topic-section-heading p {
    margin:
        14px
        0
        0;

    color:
        #68717b;

    font-size:
        16px;
    line-height:
        1.7;
}


/* ==========================================================================
   4. START HERE SECTION
   ========================================================================== */

.mislens-topic-start {
    padding:
        68px
        0
        74px;

    background:
        #f7f8f9;
}


/* ==========================================================================
   5. ARTICLE CARD BASE
   ========================================================================== */

.mislens-topic-card {
    overflow: hidden;

    display: grid;

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

    min-height:
        220px;

    border:
        1px solid #e1e5e9;

    border-radius:
        12px;

    background:
        #ffffff;
}

.mislens-topic-card__image-link {
    display: block;

    min-width: 0;

    overflow: hidden;

    background:
        #f1f3f5;
}

.mislens-topic-card__image {
    display: block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 220ms ease;
}

.mislens-topic-card:hover
.mislens-topic-card__image {
    transform:
        scale(1.02);
}

.mislens-topic-card__body {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        24px
        26px;
}

.mislens-topic-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        #89919b;

    font-size:
        11px;
    line-height:
        1.3;

    font-weight:
        600;
}

.mislens-topic-card__meta > span {
    display: inline-flex;
    align-items: center;

    min-height:
        24px;

    padding:
        4px
        8px;

    border:
        1px solid #e1e5e9;

    border-radius:
        999px;

    background:
        #ffffff;
}

.mislens-topic-card__start {
    border-color:
        #cfd4da !important;

    background:
        #f4f5f6 !important;

    color:
        #353c45 !important;

    letter-spacing:
        0.06em;
}

.mislens-topic-card__title {
    margin:
        0
        0
        12px;

    font-size:
        23px;

    line-height:
        1.35;

    letter-spacing:
        -0.025em;
}

.mislens-topic-card__title a {
    color:
        #15191f;

    text-decoration:
        none;

    transition:
        color 160ms ease;
}

.mislens-topic-card__title a:hover,
.mislens-topic-card__title a:focus-visible {
    color:
        #3c444d;
}

.mislens-topic-card__excerpt {
    margin:
        0
        0
        20px;

    color:
        #69727d;

    font-size:
        14px;

    line-height:
        1.7;
}

.mislens-topic-card__link {
    display: inline-flex;
    align-items: center;

    gap:
        8px;

    margin-top:
        auto;

    color:
        #20262d;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;
}

.mislens-topic-card__link:hover,
.mislens-topic-card__link:focus-visible {
    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/* ==========================================================================
   6. CARD WITHOUT FEATURED IMAGE
   ========================================================================== */

.mislens-topic-card--no-image {
    grid-template-columns:
        minmax(0, 1fr);
}

.mislens-topic-card--no-image
.mislens-topic-card__body {
    width: 100%;
}


/* ==========================================================================
   7. START HERE FEATURED CARD
   ========================================================================== */

.mislens-topic-card--featured {
    grid-template-columns:
        minmax(0, 48%)
        minmax(0, 52%);

    min-height:
        380px;

    border-color:
        #d3d8de;

    box-shadow:
        0 16px 44px
        rgba(17, 20, 24, 0.055);
}

.mislens-topic-card--featured
.mislens-topic-card__body {
    justify-content: center;

    padding:
        38px
        42px;
}

.mislens-topic-card--featured
.mislens-topic-card__title {
    margin-bottom:
        16px;

    font-size:
        clamp(
            28px,
            2.5vw,
            38px
        );

    line-height:
        1.2;
}

.mislens-topic-card--featured
.mislens-topic-card__excerpt {
    max-width:
        520px;

    margin-bottom:
        24px;

    font-size:
        15px;

    line-height:
        1.75;
}


/**
 * Featured / Start Here 无图
 */

.mislens-topic-card--featured.mislens-topic-card--no-image {
    grid-template-columns:
        minmax(0, 1fr);

    min-height: 0;
}

.mislens-topic-card--featured.mislens-topic-card--no-image
.mislens-topic-card__body {
    width: 100%;

    max-width: 820px;

    padding:
        36px
        40px;
}


/* ==========================================================================
   8. DECISION CONTENT SECTION
   ========================================================================== */

.mislens-topic-decisions {
    padding:
        76px
        0
        84px;

    background:
        #ffffff;
}

.mislens-topic-grid {
    display: grid;

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

    gap:
        18px;
}


/**
 * 普通 Decision Card
 */

.mislens-topic-grid
.mislens-topic-card {
    grid-template-columns:
        160px
        minmax(0, 1fr);

    min-height:
        190px;
}

.mislens-topic-grid
.mislens-topic-card__body {
    padding:
        21px
        22px;
}

.mislens-topic-grid
.mislens-topic-card__title {
    font-size:
        19px;
}

.mislens-topic-grid
.mislens-topic-card__excerpt {
    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;
}


/**
 * Topic Grid 无图卡片
 */

.mislens-topic-grid
.mislens-topic-card--no-image {
    grid-template-columns:
        minmax(0, 1fr);
}

.mislens-topic-grid
.mislens-topic-card--no-image
.mislens-topic-card__body {
    width: 100%;
}


/* ==========================================================================
   9. EMPTY STATE
   ========================================================================== */

.mislens-topic-empty {
    grid-column:
        1 / -1;

    padding:
        32px;

    border:
        1px solid #e3e6e9;

    border-radius:
        10px;

    background:
        #fafafa;
}

.mislens-topic-empty p {
    margin:
        0;

    color:
        #747c86;

    font-size:
        14px;

    line-height:
        1.6;
}


/* ==========================================================================
   10. PAGINATION
   ========================================================================== */

.mislens-topic-pagination {
    margin-top:
        42px;
}

.mislens-topic-pagination ul {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.mislens-topic-pagination li {
    margin:
        0;
}

.mislens-topic-pagination a,
.mislens-topic-pagination span {
    display: inline-flex;

    min-width:
        38px;

    min-height:
        38px;

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

    padding:
        8px
        12px;

    border:
        1px solid #dde1e5;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #4b535d;

    font-size:
        13px;

    line-height:
        1;

    text-decoration:
        none;
}

.mislens-topic-pagination .current {
    border-color:
        #171b20;

    background:
        #171b20;

    color:
        #ffffff;
}


/* ==========================================================================
   11. SHARED BUTTON
   ========================================================================== */

.mislens-topic-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        10px;

    min-height:
        46px;

    padding:
        12px
        20px;

    border:
        1px solid transparent;

    border-radius:
        8px;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.mislens-topic-button:hover {
    transform:
        translateY(-1px);
}

.mislens-topic-button--primary,
.mislens-topic-button--inquiry {
    background:
        #161a20;

    color:
        #ffffff;
}

.mislens-topic-button--primary:hover,
.mislens-topic-button--primary:focus-visible,
.mislens-topic-button--inquiry:hover,
.mislens-topic-button--inquiry:focus-visible {
    background:
        #292f36;

    color:
        #ffffff;
}


/* ==========================================================================
   12. COMMERCIAL BRIDGE
   ========================================================================== */

.mislens-topic-commercial {
    padding:
        0
        0
        80px;

    background:
        #ffffff;
}

.mislens-topic-commercial__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        40px;

    padding:
        34px
        36px;

    border:
        1px solid #dde1e5;

    border-radius:
        12px;

    background:
        #f7f8f9;
}

.mislens-topic-commercial__content {
    max-width:
        700px;
}

.mislens-topic-commercial h2 {
    margin:
        0
        0
        10px;

    color:
        #111418;

    font-size:
        clamp(
            26px,
            2.5vw,
            34px
        );

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}

.mislens-topic-commercial p {
    margin:
        0;

    color:
        #68717b;

    font-size:
        15px;

    line-height:
        1.7;
}


/* ==========================================================================
   13. FINAL INQUIRY CTA
   ========================================================================== */

.mislens-topic-inquiry {
    padding:
        70px
        0;

    border-top:
        1px solid #e4e7ea;

    background:
        #f5f6f7;
}

.mislens-topic-inquiry__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        42px;
}

.mislens-topic-inquiry__content {
    max-width:
        720px;
}

.mislens-topic-inquiry h2 {
    margin:
        0
        0
        12px;

    color:
        #111418;

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );

    line-height:
        1.2;

    letter-spacing:
        -0.03em;
}

.mislens-topic-inquiry p {
    margin:
        0;

    color:
        #666f7a;

    font-size:
        16px;

    line-height:
        1.7;
}


/* ==========================================================================
   14. TABLET
   ========================================================================== */

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

    .mislens-topic-container {
        width:
            min(
                calc(100% - 40px),
                960px
            );
    }

    .mislens-topic-card--featured {
        grid-template-columns:
            minmax(0, 45%)
            minmax(0, 55%);
    }

    .mislens-topic-card--featured.mislens-topic-card--no-image {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .mislens-topic-card--featured
    .mislens-topic-card__body {
        padding:
            30px;
    }

    .mislens-topic-grid {
        grid-template-columns:
            1fr;
    }

    .mislens-topic-grid
    .mislens-topic-card {
        grid-template-columns:
            190px
            minmax(0, 1fr);
    }

    .mislens-topic-grid
    .mislens-topic-card--no-image {
        grid-template-columns:
            minmax(0, 1fr);
    }
}


/* ==========================================================================
   15. MOBILE
   ========================================================================== */

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

    .mislens-topic-container {
        width:
            calc(100% - 32px);
    }


    /* Hero */

    .mislens-topic-hero {
        padding:
            32px
            0
            38px;
    }

    .mislens-topic-breadcrumb {
        margin-bottom:
            24px;

        font-size:
            12px;
    }

    .mislens-topic-hero__title {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );

        line-height:
            1.1;
    }

    .mislens-topic-hero__description {
        margin-top:
            18px;

        font-size:
            16px;

        line-height:
            1.7;
    }


    /* Shared Heading */

    .mislens-topic-section-heading {
        margin-bottom:
            22px;
    }

    .mislens-topic-section-heading h2 {
        font-size:
            29px;
    }


    /* Start */

    .mislens-topic-start {
        padding:
            48px
            0
            52px;
    }

    .mislens-topic-card--featured {
        display: block;

        min-height:
            0;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__image-link {
        aspect-ratio:
            16 / 10;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__image {
        height:
            100%;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__body {
        padding:
            24px;
    }

    .mislens-topic-card--featured.mislens-topic-card--no-image
    .mislens-topic-card__body {
        max-width:
            none;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__title {
        font-size:
            26px;
    }


    /* Decisions */

    .mislens-topic-decisions {
        padding:
            52px
            0
            60px;
    }

    .mislens-topic-grid {
        grid-template-columns:
            1fr;
    }

    .mislens-topic-grid
    .mislens-topic-card {
        display: block;

        min-height:
            0;
    }

    .mislens-topic-grid
    .mislens-topic-card__image-link {
        aspect-ratio:
            16 / 9;
    }

    .mislens-topic-grid
    .mislens-topic-card__image {
        height:
            100%;
    }

    .mislens-topic-grid
    .mislens-topic-card__body {
        padding:
            20px;
    }


    /* Pagination */

    .mislens-topic-pagination {
        margin-top:
            32px;
    }


    /* Commercial */

    .mislens-topic-commercial {
        padding-bottom:
            60px;
    }

    .mislens-topic-commercial__inner {
        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            24px;
    }

    .mislens-topic-commercial
    .mislens-topic-button {
        width:
            100%;
    }


    /* Inquiry */

    .mislens-topic-inquiry {
        padding:
            54px
            0;
    }

    .mislens-topic-inquiry__inner {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            24px;
    }

    .mislens-topic-inquiry h2 {
        font-size:
            30px;
    }

    .mislens-topic-inquiry
    .mislens-topic-button {
        width:
            100%;
    }
}


/* ==========================================================================
   16. SMALL MOBILE
   ========================================================================== */

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

    .mislens-topic-container {
        width:
            calc(100% - 28px);
    }

    .mislens-topic-hero__title {
        font-size:
            31px;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__body,
    .mislens-topic-grid
    .mislens-topic-card__body {
        padding:
            18px;
    }

    .mislens-topic-card--featured
    .mislens-topic-card__title {
        font-size:
            24px;
    }

    .mislens-topic-grid
    .mislens-topic-card__title {
        font-size:
            18px;
    }

    .mislens-topic-commercial__inner {
        padding:
            20px;
    }
}

/* ==========================================================================
   17. BLOG HUB — BUSINESS DECISION TOPICS
   ========================================================================== */

/**
 * 只作用于 /blog/ Blog Hub。
 * 不影响 Category / Topic Hub。
 */

body.mislens-blog-hub-page
.mislens-blog-hub-topics {
    display: grid;

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

    gap: 16px;
}


/* Topic Card */

body.mislens-blog-hub-page
.mislens-blog-hub-topic {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 220px;

    padding:
        28px
        30px;

    border:
        1px solid #e0e4e8;

    border-radius: 10px;

    background: #ffffff;

    color: #15191f;

    text-decoration: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


body.mislens-blog-hub-page
.mislens-blog-hub-topic:hover,
body.mislens-blog-hub-page
.mislens-blog-hub-topic:focus-visible {
    border-color: #c8cdd3;

    box-shadow:
        0 10px 28px
        rgba(17, 20, 24, 0.055);

    transform: translateY(-2px);

    color: #15191f;
}


/* Small Label */

body.mislens-blog-hub-page
.mislens-blog-hub-topic__label {
    display: block;

    margin-bottom: 14px;

    color: #9299a2;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* Topic Title */

body.mislens-blog-hub-page
.mislens-blog-hub-topic__title {
    margin:
        0
        0
        12px;

    color: #15191f;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.025em;
}


/* Category Description */

body.mislens-blog-hub-page
.mislens-blog-hub-topic__description {
    max-width: 470px;

    margin:
        0
        0
        22px;

    color: #69727d;

    font-size: 14px;
    line-height: 1.7;
}


/* Bottom Action */

body.mislens-blog-hub-page
.mislens-blog-hub-topic__link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: #222830;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 700;
}


/* ==========================================================================
   18. BLOG HUB TOPICS — TABLET
   ========================================================================== */

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

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic {
        min-height: 200px;

        padding:
            24px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic__title {
        font-size: 22px;
    }
}


/* ==========================================================================
   19. BLOG HUB TOPICS — MOBILE
   ========================================================================== */

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

    body.mislens-blog-hub-page
    .mislens-blog-hub-topics {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic {
        min-height: 0;

        padding:
            22px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic__label {
        margin-bottom: 10px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic__title {
        margin-bottom: 10px;

        font-size: 21px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic__description {
        margin-bottom: 18px;

        font-size: 14px;
    }
}


/* ==========================================================================
   20. BLOG HUB TOPICS — SMALL MOBILE
   ========================================================================== */

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

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic {
        padding:
            19px;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-topic__title {
        font-size: 20px;
    }
}

/* ==========================================================================
   TOPIC HUB — DECISION PATH
   ========================================================================== */

body.mislens-blog-topic-hub
.mislens-topic-path {
    padding:
        72px
        0
        78px;

    border-top:
        1px solid #eceff3;

    background:
        #ffffff;
}


body.mislens-blog-topic-hub
.mislens-topic-path__list {
    position: relative;

    display: flex;
    flex-direction: column;

    max-width: 920px;

    margin: 0;

    padding: 0;
}


/* ==========================================================================
   PATH ITEM
   ========================================================================== */

body.mislens-blog-topic-hub
.mislens-topic-path__item {
    position: relative;

    display: grid;

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

    align-items: start;

    gap: 18px;

    min-height: 118px;

    padding:
        22px
        0;

    border-bottom:
        1px solid #e5e8eb;

    color: #1d2329;

    text-decoration: none;

    transition:
        border-color 160ms ease;
}


body.mislens-blog-topic-hub
.mislens-topic-path__item:first-child {
    border-top:
        1px solid #e5e8eb;
}


body.mislens-blog-topic-hub
.mislens-topic-path__item:hover,
body.mislens-blog-topic-hub
.mislens-topic-path__item:focus-visible {
    border-color: #c7cdd3;

    color: #111418;
}


/* ==========================================================================
   STEP NUMBER
   ========================================================================== */

body.mislens-blog-topic-hub
.mislens-topic-path__number {
    display: inline-flex;

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

    width: 38px;
    height: 38px;

    margin-top: 2px;

    border:
        1px solid #d6dbe0;

    border-radius: 50%;

    background:
        #ffffff;

    color:
        #747c86;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.05em;
}


/**
 * Vertical connector.
 *
 * 最后一项不继续向下延伸。
 */

body.mislens-blog-topic-hub
.mislens-topic-path__item:not(:last-child)
.mislens-topic-path__number::after {
    content: "";

    position: absolute;

    top: 60px;
    left: 18px;

    width: 1px;
    height:
        calc(100% - 38px);

    background:
        #dfe3e7;
}


/* ==========================================================================
   PATH CONTENT
   ========================================================================== */

body.mislens-blog-topic-hub
.mislens-topic-path__content {
    min-width: 0;
}


body.mislens-blog-topic-hub
.mislens-topic-path__title {
    margin:
        0
        0
        8px;

    color:
        #171b20;

    font-size: 21px;
    line-height: 1.35;

    font-weight: 700;

    letter-spacing:
        -0.02em;
}


body.mislens-blog-topic-hub
.mislens-topic-path__excerpt {
    max-width: 720px;

    margin: 0;

    color:
        #6b737d;

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================================
   ARROW
   ========================================================================== */

body.mislens-blog-topic-hub
.mislens-topic-path__arrow {
    display: inline-flex;

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

    min-height: 38px;

    color:
        #8a929b;

    font-size: 18px;

    transition:
        transform 160ms ease,
        color 160ms ease;
}


body.mislens-blog-topic-hub
.mislens-topic-path__item:hover
.mislens-topic-path__arrow,
body.mislens-blog-topic-hub
.mislens-topic-path__item:focus-visible
.mislens-topic-path__arrow {
    color:
        #171b20;

    transform:
        translateX(3px);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

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

    body.mislens-blog-topic-hub
    .mislens-topic-path {
        padding:
            60px
            0
            66px;
    }

    body.mislens-blog-topic-hub
    .mislens-topic-path__list {
        max-width: 100%;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

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

    body.mislens-blog-topic-hub
    .mislens-topic-path {
        padding:
            50px
            0
            56px;
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__item {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            22px;

        gap: 12px;

        min-height: 0;

        padding:
            18px
            0;
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__number {
        width: 32px;
        height: 32px;

        font-size: 10px;
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__item:not(:last-child)
    .mislens-topic-path__number::after {
        top: 52px;
        left: 15px;

        height:
            calc(100% - 30px);
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__title {
        margin-bottom: 6px;

        font-size: 18px;
        line-height: 1.4;
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__excerpt {
        display: -webkit-box;

        overflow: hidden;

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

        font-size: 13px;
        line-height: 1.6;
    }


    body.mislens-blog-topic-hub
    .mislens-topic-path__arrow {
        min-height: 32px;

        font-size: 16px;
    }
}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

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

    body.mislens-blog-topic-hub
    .mislens-topic-path__item {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            18px;

        gap: 10px;
    }

    body.mislens-blog-topic-hub
    .mislens-topic-path__title {
        font-size: 17px;
    }
}

/* ==========================================================================
   20. BLOG HUB — START HERE GRID
   ========================================================================== */

/**
 * Blog Hub 的 Start Here 现在最多展示 6 篇，
 * 每个真实 Topic 最多 1 篇。
 */

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 18px;
}

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid
.mislens-topic-card {
    grid-template-columns:
        160px
        minmax(0, 1fr);
    min-height: 190px;
}

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid
.mislens-topic-card__body {
    padding: 21px 22px;
}

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid
.mislens-topic-card__title {
    font-size: 19px;
}

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid
.mislens-topic-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body.mislens-blog-hub-page
.mislens-blog-hub-start-grid
.mislens-topic-card--no-image {
    grid-template-columns:
        minmax(0, 1fr);
}

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

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid {
        grid-template-columns: 1fr;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card {
        grid-template-columns:
            190px
            minmax(0, 1fr);
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card--no-image {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

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

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card {
        display: block;
        min-height: 0;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card__image-link {
        aspect-ratio: 16 / 9;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card__image {
        height: 100%;
    }

    body.mislens-blog-hub-page
    .mislens-blog-hub-start-grid
    .mislens-topic-card__body {
        padding: 20px;
    }
}