/* ============================================================
 * 首页头版与列表
 * home.css
 * ============================================================ */

.home-discuss{
    margin: 0 0 1.4rem
}

.home-discuss-head{
    margin: 0 0 .8rem;
    padding: 0 0 .7rem;
    border-bottom: 2px solid var(--navy);
}

.home-discuss-module{
    margin: 0;
    padding: .9rem 1.4rem .95rem;
    border: 1px solid rgba(17, 50, 74, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(17, 50, 74, .06)
}

.home-discuss-title{
    margin: 0;
    color: var(--ink);
    font: 650 1.45rem/1.15 var(--serif)
}

.headline-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .9fr);
    gap: 1.1rem 2rem;
    padding: 0;
    background: transparent;
    align-items: start;
    border-radius: 0
}

/* 暂无主议题时占满整行 */
.headline-grid.is-solo{
    grid-template-columns: minmax(0, 1fr)
}

.headline-grid.is-solo .home-hero{
    padding-right: 0;
    border-right: 0;
    border-bottom: 0
}

.home-hero{
    min-height: 100%;
    margin: 0;
    padding: .1rem .2rem 0 0;
    border: 0;
    background: transparent;
    border-right: 0
}

.home-hero h2{
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 0;
    font: 600 1.9rem/1.35 var(--serif);
    color: var(--navy)
}

.home-hero .hero-rank{
    flex: 0 0 auto;
    color: var(--red);
    font: 600 1.9rem/1.35 var(--serif);
    letter-spacing: .02em;
    white-space: nowrap
}

.home-hero .hero-cta-arrow{
    display: block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em
}

.home-hero .hero-core{
    margin: .55rem 0 0
}

/* PC：标题最多两行省略；议题背景固定高度，轮播切换不跳动 */
@media (min-width: 901px){.home-hero h2 a,
.home-hero h2 navigator{
        min-width: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden
    }

    /* 拉伸左列至整行高，三段式锚定才能分布到顶/中/底 */
    .headline-grid{
        align-items: stretch
    }

    /* 三段式锚定：标题固定顶部、摘要弹性占据中部、统计与「加入讨论」固定底部（同行两端对齐） */
    .home-hero{
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .home-hero .hero-core{
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        margin: .45rem 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .home-hero .hero-foot{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem
    }

    .home-hero .hero-foot .hero-stats{
        margin: 0
    }

    /* 两栏分隔线：上下留空，不顶天立地 */
    .home-topic-list{
        position: relative
    }

    .home-topic-list::before{
        content: "";
        position: absolute;
        left: -1.1rem;
        top: .75rem;
        bottom: .75rem;
        width: 1px;
        background: #E9EDEF
    }
}

.home-hero .hero-core[hidden]{
    display: none
}

.home-hero .hero-core-questions{
    margin: 0;
    padding: 0;
    color: #5d6870;
    font: .92rem/1.65 var(--sans);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word
}

.home-hero h2 a,
.home-hero h2 navigator{
    color: inherit;
    text-decoration: none
}

.home-hero h2 a:hover,
.home-hero h2 navigator:hover{
    color: var(--red)
}

.home-hero .hero-stats{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .15rem;
    margin: .75rem 0 0;
    color: #8a949c;
    font: 500 .86rem/1.4 var(--sans)
}

.home-hero .hero-stats .stat-item{
    display: inline;
    white-space: nowrap
}

.home-hero .hero-stats .stat-unit,
.home-hero .hero-stats .stat-sep{
    font: .86rem/1.2 var(--sans);
    color: #8a949c
}

.home-hero .hero-stats .stat-sep{
    margin: 0 0.2rem;
    font: 800 .82rem/1.2 var(--sans);
}

.home-hero .hero-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.7rem;
    margin: 1.2rem 0 0;
    padding: .7rem 1.45rem;
    border: 0;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    font: 750 .95rem/1 var(--sans);
    text-decoration: none;
    transition: background-color .16s ease
}

.home-hero .hero-cta:hover,
.home-hero .hero-cta:focus-visible{
    background: var(--red-dark);
    outline: none
}

/* PC：加入讨论改为文字 + 箭头（须置于上方按钮基础规则之后以保证覆盖） */
@media (min-width: 901px){.home-hero .hero-cta{
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--red);
        font: 650 .95rem/1.4 var(--sans);
        transition: color .16s ease
    }

    .home-hero .hero-cta .hero-cta-arrow{
        transition: transform .16s ease
    }

    .home-hero .hero-cta:hover,
.home-hero .hero-cta:focus-visible{
        background: transparent;
        color: var(--red-dark);
        outline: none
    }

    .home-hero .hero-cta:hover .hero-cta-arrow{
        transform: translateX(2px)
    }
}

.home-topic-list{
    min-width: 0
}

.home-topic-list[hidden]{
    display: none
}

.home-topic-list-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box
}

.home-topic-list-head{
    margin: 0 0 .3rem
}

.home-topic-list-kicker{
    display: inline-block;
    color: var(--red);
    font: 750 .82rem/1.2 var(--sans);
    letter-spacing: .08em
}

.home-topic-list-items{
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
    flex: 1 1 auto
}

.home-topic-list-items > li + li{
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid #EEF1F3
}

.home-topic-list-item{
    appearance: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    width: 100%;
    margin: 0;
    padding: .7rem .8rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease
}

.home-topic-list-item-main{
    min-width: 0;
    flex: 1 1 auto
}

.home-topic-list-item h3{
    margin: 0;
    color: var(--ink);
    font: 650 0.88rem/1.4 var(--sans);
    transition: color .18s ease
}

/* 首页潮声侧栏：抬升 + 细描边 + 标题转红 */
@media (hover: hover) and (pointer: fine){.home-topic-list-item:hover,
.home-topic-list-item:focus-visible{
        background: #fff;
        border-color: rgba(180, 56, 47, .16);
        box-shadow: 0 8px 20px rgba(17, 50, 74, .07);
        transform: translateY(-1px);
        outline: none
    }

    .home-topic-list-item:hover h3,
.home-topic-list-item:focus-visible h3{
        color: var(--red)
    }

    .home-topic-list-item.is-active:hover,
.home-topic-list-item.is-active:focus-visible{
        background: #FBF1F0;
        border-color: #E7C7C3
    }
}

@media (prefers-reduced-motion: reduce){.home-topic-list-item,
.home-topic-list-item h3{
        transition: none
    }

    .home-topic-list-item:hover,
.home-topic-list-item:focus-visible{
        transform: none
    }
}

.home-topic-list-meta{
    margin: .3rem 0 0;
    color: #8a949c;
    font: .78rem/1.4 var(--sans)
}

.home-topic-list-rank{
    flex: 0 0 auto;
    margin-top: .15rem;
    color: #C9CFD4;
    font: 750 .8rem/1.4 var(--sans);
    letter-spacing: .04em;
    white-space: nowrap
}

.home-topic-list-item.is-active{
    background: #FBF1F0;
    border-color: #E7C7C3
}

.home-topic-list-item.is-active .home-topic-list-rank{
    color: var(--red)
}

.home-latest-module{
    margin-top: 0;
    padding: .9rem 0 .95rem;
    border-radius: 10px;
    background: #fff;
}

.home-latest-module > .home-latest-head{
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 0 .8rem;
    border-bottom: 2px solid var(--navy);
}

.home-latest-module > .home-latest-head h2{
    margin: 0;
    font: 650 1.55rem/1.15 var(--serif);
    color: var(--ink)
}

.home-latest-sentinel{
    height: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
    pointer-events: none
}

.article-header .kicker{
    color: var(--ink)
}

.trend-block .home-latest-head{
    margin-bottom: .7rem
}

.topic-discuss-item .topic-discuss-remove,
.topic-discuss-reply .topic-discuss-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #8a949c;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease
}

.topic-discuss-item .topic-discuss-remove:hover,
.topic-discuss-item .topic-discuss-remove:focus-visible,
.topic-discuss-reply .topic-discuss-remove:hover,
.topic-discuss-reply .topic-discuss-remove:focus-visible{
    color: var(--red);
    background: rgba(180, 56, 47, .08);
    outline: none
}

.topic-discuss-dialog .dialog-inner{
    display: grid;
    gap: 0;
    padding: 0
}

.topic-discuss-dialog .dialog-close{
    float: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    min-height: 0;
    margin: -.15rem -.2rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.topic-discuss-dialog .dialog-close:hover,
.topic-discuss-dialog .dialog-close:focus-visible{
    color: var(--red);
    background: rgba(180, 56, 47, .08);
    outline: none
}

.home-latest-list-wrap .list-empty + .home-latest-list:empty{
    display: none;
}

.home-latest-sentinel{
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.home-hero .hero-cta{
    text-decoration: none;
}

.home-hero h2 a{
    color: inherit;
    text-decoration: none;
}

.home-hero h2 a:hover,
.home-hero h2 a:focus-visible{
    color: var(--red, #b4382f);
}