/* duanju-style.css */
/* 全局重置 */
.duanju-module * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* 卡片列表容器 */
.duanju-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* 卡片主体样式 */
.duanju-card {
    text-decoration: none;
    width: calc(50% - 9px); /* 手机端2列，适配gap */
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 10px; /* 整体圆角，更精致 */
    overflow: hidden;
}

/* 长按悬浮效果：增强阴影，更有层次感 */
.duanju-card.long-press-hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* 图片容器 */
.duanju-img-box {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

/* 卡片图片 */
.duanju-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* 卡片hover时图片轻微缩放，增强交互感 */
.duanju-card:hover .duanju-img {
    transform: scale(1.03);
}

/* 简介容器：优化背景和内边距 */
.duanju-desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    padding-top: 38px; /* 预留提示位置 */
    background-color: rgba(15, 23, 42, 0.9); /* 深靛蓝底，更显质感 */
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* 移动端流畅滚动 */
    scrollbar-width: thin;
    pointer-events: auto;
}

/* 跳转提示：优化样式，更醒目但不突兀 */
.desc-tip {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 10px;
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    z-index: 1;
    pointer-events: none; /* 不干扰滑动 */
}

/* 简介标题：统一“简介”大标题，优化样式 */
.desc-heading {
    font-size: 18px;
    font-weight: 600;
    color: #38bdf8; /* 亮蓝色，突出标题 */
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 下划线分隔，更清晰 */
}

/* 简介内容：优化行高和颜色，提升可读性 */
.desc-content {
    font-size: 14px;
    line-height: 1.6;
    color: #e0e7ff; /* 淡紫色文字，比纯白更柔和 */
}

/* 卡片标题：加粗+颜色，增强视觉焦点 */
.duanju-title {
    padding: 12px 15px;
    background-color: #fff;
    color: #1e293b; /* 深灰色，更稳重 */
    font-size: 16px;
    font-weight: 600; /* 加粗标题 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer; /* 提示可点击 */
    transition: background-color 0.2s ease;
}
/* 标题hover效果 */
.duanju-title:hover {
    background-color: #f8fafc;
}

/* 美化滚动条：更精致 */
.duanju-desc::-webkit-scrollbar {
    width: 5px;
}
.duanju-desc::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.duanju-desc::-webkit-scrollbar-thumb {
    background: #38bdf8; /* 与简介标题同色，视觉统一 */
    border-radius: 3px;
}
.duanju-desc::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}

/* 响应式适配 */
@media (min-width: 768px) {
    .duanju-card { width: calc(33.333% - 12px); } /* 平板3列 */
}
@media (min-width: 1024px) {
    .duanju-card { width: calc(25% - 13.5px); } /* 电脑4列 */
    /* 电脑端hover显示简介 + 卡片悬浮 */
    .duanju-img-box:hover .duanju-desc {
        display: block;
    }
    .duanju-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
}

/* 暗黑模式适配：样式统一协调 */
body.io-black-mode .duanju-title {
    background-color: #1e293b;
    color: #f8fafc;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
body.io-black-mode .duanju-title:hover {
    background-color: #2d3748;
}
body.io-black-mode .duanju-desc {
    background-color: rgba(10, 14, 23, 0.95);
}
body.io-black-mode .desc-tip {
    background-color: rgba(255, 255, 255, 0.15);
}
body.io-black-mode .desc-heading {
    color: #7dd3fc;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
body.io-black-mode .desc-content {
    color: #cbd5e1;
}
body.io-black-mode .duanju-card.long-press-hover,
body.io-black-mode .duanju-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
body.io-black-mode .duanju-desc::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}