/* ===== 容器 ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    min-height: 100vh;
}
.section-inner { max-width: 1200px; margin: 0 auto; padding: 0; }

/* 模块之间增加间距 */
.section-inner + .section-inner {
    margin-top: 30px;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title .more {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-light);
    cursor: pointer;
    transition: 0.2s;
}
.section-title .more:hover { color: var(--primary); }

/* ============================================================== */
/* 面包屑导航 */
/* ============================================================== */
.breadcrumb {
    padding: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.breadcrumb a {
    color: var(--text-light);
    transition: color 0.2s;
}
.breadcrumb a:hover {
    color: var(--primary);
}
.breadcrumb .sep {
    color: #ccc;
    font-size: 12px;
    margin: 0 2px;
}
.breadcrumb .current {
    color: var(--text);
    font-weight: 500;
}

/* ============================================================== */
/* 第一部分：艺人信息 */
/* ============================================================== */
/* ===== 艺人信息 ===== */
.artist-header {
    display: flex;
    gap: 30px;
    padding: 20px 0 30px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 30px;
    align-items: flex-start;
}

.artist-poster {
    flex-shrink: 0;
    width: 180px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: #eee;
}
.artist-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 名字行：名字 + 关注复合组件 */
.artist-name-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.artist-name {
    font-size: 32px;
    font-weight: 800;
}

/* ===== 关注度 + 关注按钮 融合组件 ===== */
.follow-combo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    background: #f5f7fa;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid var(--border);
}

.combo-label {
    color: var(--text-light);
    font-weight: 400;
}

.combo-score {
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
}

.combo-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
}

.combo-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 2px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    line-height: 1.6;
}
.combo-btn:hover {
    background: #e84f20;
}
.combo-btn.following {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.combo-btn.following:hover {
    background: var(--primary-light);
}

/* ===== 统计信息 ===== */
.artist-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--text-light);
}

.stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

/* ===== 艺人简介（可展开） ===== */
.artist-bio-wrapper {
    width: 100%;
}

.artist-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-light);
    max-height: 48px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.artist-bio.open {
    max-height: 1000px;
}

.bio-toggle-btn {
    margin-top: 6px;
    display: none;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.bio-toggle-btn:hover {
    text-decoration: underline;
}
.bio-toggle-btn.show {
    display: inline-block;
}

/* ===== 手机端适配 ===== */
@media (max-width: 768px) {
    .artist-header {
        flex-direction: column;
        gap: 16px;
        padding: 10px 0 20px;
    }
    .artist-poster {
        width: 140px;
        align-self: center;
    }
    .artist-name-row {
        justify-content: center;
    }
    .artist-name {
        font-size: 26px;
        text-align: center;
    }
    .follow-combo {
        font-size: 12px;
        padding: 3px 10px 3px 6px;
    }
    .combo-score {
        font-size: 14px;
    }
    .combo-btn {
        font-size: 11px;
        padding: 1px 10px;
    }
    .artist-stats {
        justify-content: center;
    }
    .stat-item {
        align-items: center;
    }
    .artist-bio {
        font-size: 13px;
        text-align: center;
        max-height: 44px;
    }
    .bio-toggle-btn {
        display: block;
        margin: 6px auto 0;
    }
}

/* ===== 手机端适配 ===== */
@media (max-width: 768px) {
    .artist-header {
        flex-direction: column;
        gap: 16px;
        padding: 10px 0 20px;
    }
    .artist-poster {
        width: 140px;
        align-self: center;
    }
    .artist-name-row {
        justify-content: center;
    }
    .artist-name {
        font-size: 26px;
        text-align: center;
    }
    .follow-combo {
        font-size: 12px;
        padding: 3px 10px 3px 6px;
    }
    .combo-score {
        font-size: 14px;
    }
    .combo-btn {
        font-size: 11px;
        padding: 1px 10px;
    }
    .artist-stats {
        justify-content: center;
    }
    .stat-item {
        align-items: center;
    }
    .artist-bio {
        font-size: 13px;
        text-align: center;
        max-height: 44px;
    }
    .bio-toggle-btn {
        display: block;
        margin: 6px auto 0;
    }
}

/* ===== 第二部分：艺人巡演（带展开功能） ===== */
.tour-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* 巡演海报容器 */
.tour-poster {
    position: relative;
    width: 140px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e0e7ee 100%);
}

/* 图片正常显示时 */
.tour-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 图片加载失败或无 src 时显示占位内容 */
.tour-poster img:not([src]), 
.tour-poster img[src=""] {
    display: none;
}

.tour-info {
    flex: 1;
}

.tour-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.tour-stats {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 10px;
}
.tour-stats strong {
    color: var(--primary);
}

/* ===== 城市标签展开功能 ===== */
.tour-cities-wrapper {
    position: relative;
    margin-top: 6px;
}

.tour-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

/* 仅在折叠状态下限制高度 & 显示遮罩 */
.tour-cities-wrapper.has-more .tour-cities {
    max-height: 68px;           /* 约等于2行 + 露出一截 */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.tour-cities-wrapper.has-more .tour-cities::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 24px;
    background: linear-gradient(to bottom, transparent, #f5f7fa);
    pointer-events: none;
}

/* 展开状态 */
.tour-cities-wrapper.has-more .tour-cities.expanded {
    max-height: 1000px;
}
.tour-cities-wrapper.has-more .tour-cities.expanded::after {
    display: none;
}

/* ===== 城市标签 ===== */
.tour-city-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    background: #fff;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid var(--border);
    color: var(--text);
    line-height: 1.3;
    transition: all 0.2s;
    min-width: 80px;
}
.tour-city-tag:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.tour-city-tag .city-name {
    font-weight: 600;
    font-size: 14px;
}
.tour-city-tag .city-date {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 400;
    margin-top: 2px;
}

/* ===== 展开/收起按钮 ===== */
.tour-toggle-btn {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--primary);
    border-radius: 14px;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.tour-toggle-btn:hover {
    background: var(--primary);
    color: #fff;
}
.tour-toggle-btn .icon {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 12px;
    margin-right: 2px;
}
.tour-toggle-btn.expanded .icon {
    transform: rotate(180deg);
}
.tour-cities-wrapper.has-more .tour-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ============================================================== */
/* 第三部分：相关演出 */
/* ============================================================== */
.event-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.event-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: 0.2s;
    cursor: pointer;
}
.event-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.event-card .card-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #eee;
    position: relative;
}
.event-card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.event-card .card-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 95, 43, 0.9);
    color: #fff;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
}
.event-card .card-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-card .card-title {
    font-size: 13px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.event-card .card-meta {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.event-card .card-meta span { white-space: nowrap; }
.event-card .card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 4px;
}
.event-card .card-price small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
}

/* ============================================================== */
/* 第四部分：艺人资讯 */
/* ============================================================== */
.news-list { display: flex; flex-direction: column; }
.news-item {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: 0.2s;
}
.news-item:hover {
    background: var(--bg);
    padding-left: 12px;
    border-radius: 6px;
}
.news-item .news-time {
    width: 80px;
    flex-shrink: 0;
    color: var(--text-light);
    font-size: 13px;
}
.news-item .news-title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item .news-arrow {
    color: var(--text-light);
    font-size: 14px;
    margin-left: 8px;
}

/* ============================================================== */
/* 第五部分：为你推荐（横向滚动） */
/* ============================================================== */
.recommend-scroll {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    padding-bottom: 4px;
    overflow: visible; /* 只有移动端才允许溢出滚动 */
}
.recommend-scroll .event-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    transition: 0.2s;
    cursor: pointer;
}
.recommend-scroll .event-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.recommend-scroll .event-card .card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}
.recommend-scroll .event-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recommend-scroll .event-card .card-info {
    padding: 10px 12px;
    text-align: center;
}
.recommend-scroll .event-card .card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================== */
/* 两栏布局（PC 端） */
/* ============================================================== */
.page-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.main-content { flex: 1; min-width: 0; }

/* ============================================================== */
/* 手机端底部下载按钮 & 底部安全距离 */
/* ============================================================== */
.mobile-download-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(255, 95, 43, 0.3);
    border-radius: 30px;
    overflow: hidden;
}
.btn-download-mobile {
    display: block;
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: 0.2s;
}
.btn-download-mobile:hover { background: #e84f20; }

/* ============================================================== */
/* 响应式适配 */
/* ============================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .event-grid { grid-template-columns: repeat(4, 1fr); }
    .recommend-scroll {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}

@media (max-width: 768px) {
    /* 增加底部安全距离，避免固定按钮遮挡内容 */
    body {
        padding-bottom: 90px;
    }

    /* 增加模块间距 */
    .section-inner + .section-inner {
        margin-top: 24px;
    }

    .event-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .event-card .card-info { padding: 8px; }
    .event-card .card-title { font-size: 12px; }
    .event-card .card-price { font-size: 14px; }

    /* 侧边栏隐藏 */
    .sidebar-aside { display: none; }

    /* 手机端底部按钮显示 */
    .mobile-download-btn { display: block; }

    .artist-header {
        flex-direction: column;
        gap: 16px;
        padding: 10px 0 20px;
    }
    .artist-poster { width: 140px; align-self: center; }
    .artist-name { font-size: 26px; text-align: center; }
    .artist-meta { justify-content: center; text-align: center; }
    .artist-actions { justify-content: center; }
    .artist-bio {
        font-size: 13px;
        text-align: center;
        max-height: 44px;      /* 手机端稍微小一点 */
    }
    .bio-toggle-btn {
        display: block;
        margin: 6px auto 0;
    }
    .tour-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tour-poster { width: 100px; }
    .tour-cities { justify-content: center; }

    .section-title { font-size: 18px; }

    .recommend-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .recommend-scroll .event-card {
        flex: 0 0 130px;
        scroll-snap-align: start;
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        background: #fff;
        transition: 0.2s;
    }
    .recommend-scroll .event-card:hover {
        transform: none; /* 手机端取消悬浮效果，防止误触 */
    }
    .recommend-scroll .event-card .card-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #eee;
    }
    .recommend-scroll .event-card .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .recommend-scroll .event-card .card-info {
        padding: 8px 10px;
        text-align: center;
    }
    .recommend-scroll .event-card .card-title {
        font-size: 13px;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .event-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .event-card .card-title { font-size: 12px; }
    .artist-name { font-size: 22px; }
    .tour-poster { width: 80px; }
    .tour-name { font-size: 16px; }
    .section-title { font-size: 18px; }
}