/* 万合玺悦：一级栏目 → 二级栏目 → 详情页 */

.level-hint{
    margin-top:.18vw;
    font-size:.72vw;
    color:var(--muted,#8a6372);
}

.secondary-grid{
    align-content:start;
}

.secondary-item{
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.secondary-item:hover{
    transform:translateY(-3px);
    border-color:var(--primary-light,#ffd6e4);
    box-shadow:0 10px 28px rgba(232,111,155,.15);
}

.secondary-item:active{
    transform:scale(.985);
}

.secondary-item .media-thumb{
    cursor:pointer;
}

.secondary-summary{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.view-detail{
    margin-top:.65vw;
    color:var(--primary-dark,#b94d78);
    font-size:.78vw;
    font-weight:700;
    text-align:right;
}

.empty-section{
    grid-column:1 / -1;
    min-height:48vh;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed var(--border,#f3c6d6);
    border-radius:1vw;
    background:rgba(255,255,255,.72);
    color:var(--muted,#8a6372);
    font-size:1.05vw;
}

.detail-view{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,48%) minmax(0,52%);
    gap:1.1vw;
    overflow:hidden;
}

.detail-view.no-media{
    grid-template-columns:1fr;
}

.detail-media{
    width:100%;
    height:100%;
    min-height:0;
    position:relative;
    overflow:hidden;
    padding:0;
    border:1px solid var(--border,#f3c6d6);
    border-radius:1.2vw;
    background:#000;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(232,111,155,.11);
}

.detail-media img,
.detail-media video{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:#000;
}

.detail-play-mask{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:5vw;
    height:5vw;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:.18vw;
    background:rgba(0,0,0,.48);
    color:#fff;
    font-size:2vw;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    pointer-events:none;
}

.detail-media-tip{
    position:absolute;
    right:1vw;
    bottom:1vw;
    padding:.5vw .85vw;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    color:var(--primary-dark,#b94d78);
    font-size:.68vw;
    pointer-events:none;
}

.detail-copy{
    min-height:0;
    overflow:auto;
    padding:1.6vw 1.8vw;
    border:1px solid var(--border,#f3c6d6);
    border-radius:1.2vw;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 28px rgba(232,111,155,.09);
}

.detail-copy h1{
    color:var(--primary-dark,#b94d78);
    font-size:2vw;
    line-height:1.3;
    margin-bottom:.65vw;
}

.detail-copy h2{
    color:#9c6b7e;
    font-size:1.05vw;
    line-height:1.55;
    font-weight:600;
    margin-bottom:1.05vw;
}

.detail-text{
    color:var(--deep,#4a2636);
    font-size:1vw;
    line-height:1.9;
    white-space:pre-wrap;
    word-break:break-word;
}

@media(max-width:900px){
    .level-hint{
        font-size:14px;
    }

    .view-detail{
        font-size:15px;
    }

    .empty-section{
        min-height:260px;
        font-size:16px;
    }

    .detail-view{
        display:flex;
        flex-direction:column;
        overflow:visible;
    }

    .detail-media{
        height:340px;
        flex:none;
    }

    .detail-copy{
        overflow:visible;
        padding:22px;
    }

    .detail-copy h1{
        font-size:30px;
    }

    .detail-copy h2{
        font-size:18px;
    }

    .detail-text{
        font-size:17px;
    }

    .detail-play-mask{
        width:70px;
        height:70px;
        font-size:28px;
    }

    .detail-media-tip{
        right:12px;
        bottom:12px;
        padding:8px 14px;
        font-size:14px;
    }
}