/* =========================================
   Cenco Music - 新学院风配色样式表
   ========================================= */

/* --- 1. 全局变量与重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
}

:root {
    /* --- 核心配色 (New Palette) --- */
    --primary-color: #f0d32d; /* 亮黄：高亮、强调 */
    --accent-color: #ab3a2c;  /* 砖红：渐变、热情元素 */
    --secondary-blue: #4a71c0; /* 中蓝：辅助文字、次要元素 */
    
    /* --- 背景色体系 --- */
    --dark-bg: #f1f2ed;       /* 主背景：米白 */
    --section-bg: #ffffff;    /* 板块背景：纯白 */
    --footer-bg: #314290;     /* 页脚背景：深蓝 */
    
    /* --- 文字颜色 --- */
    --text-color: #314290;    /* 正文：深蓝 (高对比度) */
    --light-text: #4a71c0;    /* 次要文字：中蓝 */
    
    /* --- 辅助 --- */
    --shadow-color: rgba(49, 66, 144, 0.1); /* 深蓝色的投影 */
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 2. 导航栏 (深蓝底色) --- */
.navbar {
    background: rgba(49, 66, 144, 0.95); /* 深蓝半透明 */
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-menu { display: flex; list-style: none; align-items: center; }

.nav-link {
    color: #f1f2ed; /* 导航文字米白 */
    text-decoration: none;
    padding: 0 20px;
    transition: 0.3s;
    font-weight: 500;
}

.nav-link:hover { color: var(--primary-color); /* 悬停变亮黄 */ }

/* 汉堡菜单 */
.menu-toggle { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #fff; transition: 0.3s; }

/* --- 3. Hero Section (主视觉 - 背景轮播版) --- */
.hero-section {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    position: relative; /* 作为定位基准 */
    overflow: hidden;   /* 确保轮播图不溢出 */
}

/* --- 新增：背景轮播容器 --- */
.hero-bg-slider {
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 放在最底层 */
}

/* --- 新增：单张背景幻灯片 --- */
.bg-slide {
    position: absolute; /* 让所有图片重叠在一起 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ✅ 移动端适配核心：cover 确保图片始终填满屏幕 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 动画核心：默认透明 */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* 淡入淡出效果 */
    z-index: 1;
}

/* --- 新增：激活状态的幻灯片 --- */
.bg-slide.active {
    opacity: 1; /* 显示当前图片 */
    z-index: 2;
}

/* --- 原有内容区域 (必须加 z-index) --- */
.hero-content {
    position: relative;
    z-index: 10; /* ⚠️ 关键：确保文字在轮播图上面 */
}

/* --- 以下保持你原有的文字和按钮样式不变 --- */

.hero-content h1 {
    font-size: 40pt;
    font-weight: 100;
    margin-bottom: 20px;
    color: #ffffff;
}

.main-btn {
    padding: 15px 40px;
    /* 按钮渐变：砖红 -> 亮黄 */
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(171, 58, 44, 0.4);
}

.main-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(240, 211, 45, 0.5); /* 悬停光晕 */
}


/* --- 4. 关于我们 (About Section) --- */
.about-section {
    padding: 80px 0;
    background-color: #ffffff; /* 米白背景 */
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.highlight-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color); /* 砖红高亮，突出重点 */
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color); /* 深蓝字 */
    margin-bottom: 20px;
}

/* --- 5. 精彩亮点 (Events) --- */
.features-section { 
    padding: 80px 0; 
    background-color: var(--section-bg); /* 纯白背景 */
}
.section-title { 
    text-align: center; 
    font-size: 2.5rem; 
    margin-bottom: 60px; 
    color: var(--text-color); 
}

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

.card {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
    /* 浅色投影 */
    box-shadow: 0 5px 15px var(--shadow-color);
    border: 1px solid #eee;
}

.card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(49, 66, 144, 0.15);
    border-bottom: 4px solid var(--primary-color);
}
.card-icon { font-size: 3rem; margin-bottom: 20px; }

/* --- 6. 联系表单 (Contact) --- */
.contact-section { 
    padding: 80px 0; 
    background-color: var(--dark-bg); /* 米白 */
}

.contact-wrapper {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-group { margin-bottom: 20px; }

.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    color: var(--text-color); 
    font-weight: bold; 
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #ddd;
    background: #fdfdfd;
    color: #333;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: var(--primary-color); /* 聚焦变亮黄 */
    background: #fff;
    box-shadow: 0 0 10px rgba(240, 211, 45, 0.3);
}
.submit-btn { width: 100%; margin-top: 10px; }

/* --- 7. 页脚 (Footer) --- */
footer {
    padding: 60px 0 40px;
    background: var(--footer-bg); /* 深蓝 */
    color: var(--dark-bg); /* 米白文字 */
    text-align: center;
}

.social-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #8da4d0; /* 浅蓝图标文字 */
    transition: transform 0.3s ease;
}

.social-item:hover { transform: translateY(-5px); }

.social-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.05);
}

.social-item p { font-size: 0.9rem; margin: 0; color: #f1f2ed; }
.social-item:hover p { color: var(--primary-color); }

.company-info {
    font-size: 0.9rem;
    line-height: 1.8;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    max-width: 600px;
    margin: 0 auto;
}

.company-name { color: #fff; font-weight: 500; margin-bottom: 10px; }

.icp-info a {
    color: #8da4d0;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.85rem;
}
.icp-info a:hover { color: var(--primary-color); text-decoration: underline; }

/* --- 8. 响应式适配 --- */
@media (max-width: 768px) {
    .menu-toggle { 
		display: block; 
		z-index: 9999 !important;
	}
    
    .nav-menu {
        z-index: 9999 !important;
		position: fixed; 
        left: -100%; 
        top: 80px; 
        flex-direction: column;
        background-color: var(--footer-bg); /* 手机菜单使用深蓝 */
        width: 100%; 
        height: calc(100vh - 80px);
        transition: 0.4s; 
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    .nav-menu.active { left: 0; }
    .nav-menu li { margin: 25px 0; }
    
    .hero-content h1 { font-size: 2.5rem; }
    .contact-wrapper { padding: 20px; }
    
    .social-group { gap: 15px; }
    .social-item img { width: 70px; height: 70px; }
    .social-item p { font-size: 0.8rem; }
}

/* =========================================
   新增：通用图文排版与子页面样式
   ========================================= */

/* --- 1. 子页面 Banner --- */
.page-banner {
    height: 50vh; /* 比首页 Hero 矮一些 */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* 避开导航栏 */
}

/* 遮罩层，保证文字清晰 */
.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 使用品牌深蓝的半透明遮罩 */
    background: rgba(49, 66, 144, 0.6); 
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.banner-content h1 {
    font-size: 40pt;
    margin-bottom: 15px;
    color: #ffffff;
}

/* --- 2. 图文交替布局 (Zig-Zag) --- */
.content-section {
    padding: 100px 0;
    background-color: var(--dark-bg); /* 默认米白 */
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* 图片和文字的间距 */
    margin-bottom: 100px; /* 每一行之间的间距 */
}

/* 最后一个元素去掉底部间距 */
.info-row:last-child { margin-bottom: 0; }

/* 反转布局：右图左文 */
.info-row.reverse {
    flex-direction: row-reverse;
}

.info-img {
    flex: 1;
    position: relative;
}

.info-img img {
    width: 100%;
    max-width: 600px;
    border-radius: 15px;
    /* 品牌风格投影 */
    box-shadow: 20px 20px 0px var(--primary-color); 
    transition: transform 0.3s ease;
    display: block;
}

.info-row:hover .info-img img {
    transform: translate(-5px, -5px);
    box-shadow: 25px 25px 0px var(--accent-color); /* 悬停变红阴影 */
}

.info-text {
    flex: 1;
}

.info-text h3 {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.info-text .subtitle {
    font-size: 1.1rem;
    color: var(--accent-color); /* 砖红副标题 */
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-text p {
    font-size: 1.05rem;
    color: #555; /* 使用稍微深一点的灰色便于阅读 */
    margin-bottom: 25px;
    line-height: 1.8;
}

/* 文字链接样式 */
.text-link {
    color: var(--secondary-blue);
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
}

.text-link:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
    .info-row, .info-row.reverse {
        flex-direction: column; /* 手机上全部垂直排列 */
        gap: 30px;
        margin-bottom: 60px;
        text-align: center;
    }

    .info-img img {
        max-width: 100%;
        box-shadow: 10px 10px 0px var(--primary-color);
    }
    
    .banner-content h1 { font-size: 2.5rem; }
}

/* =========================================
   个人名片页 (Profile Card)
   ========================================= */

.profile-container {
    min-height: 100vh;
    padding: 120px 20px 60px; /* 上方留出导航栏空间 */
    background-color: var(--dark-bg); /* 米白背景 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.profile-card {
    width: 100%;
    max-width: 400px; /* 限制宽度，像手机屏幕 */
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(49, 66, 144, 0.15); /* 深蓝投影 */
    text-align: center;
    position: relative;
    border: 1px solid #eee;
}

/* 顶部彩色背景 */
.profile-header {
    height: 150px;
    background: linear-gradient(135deg, var(--footer-bg), var(--secondary-blue));
    position: relative;
    margin-bottom: 60px; /* 给头像留空间 */
}

/* 头像容器 */
.profile-avatar-wrapper {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    position: absolute;
    bottom: -60px; /* 下沉一半 */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.profile-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f1f2ed;
}

/* 内容区域 */
.profile-body {
    padding: 0 30px 30px;
}

.profile-name {
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.profile-role {
    font-size: 1rem;
    color: var(--accent-color); /* 砖红职位 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-divider {
    width: 40px;
    height: 4px;
    background-color: var(--primary-color); /* 亮黄分割线 */
    margin: 20px auto;
    border-radius: 2px;
}

.profile-bio {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 按钮组 */
.profile-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.email-btn {
    background-color: var(--dark-bg);
    color: var(--text-color);
    border: 1px solid #ddd;
}

.email-btn:hover {
    background-color: #e1e2dd;
}

.share-btn {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    color: #fff;
    box-shadow: 0 5px 15px rgba(171, 58, 44, 0.3);
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(171, 58, 44, 0.4);
}

.profile-footer {
    padding: 20px;
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

.profile-footer img {
    opacity: 0.6;
    filter: grayscale(100%); /* 灰色logo */
}

/* =========================================
   新增：演员评价轮播 (Carousel) - 大图版
   ========================================= */

.testimonial-section {
    background-color: #2a3b80; 
    padding: 80px 0;
    overflow: hidden;
}

/* 视口：限制一次只看一张 */
.carousel-viewport {
    max-width: 900px; /* 限制整体宽度，更精致 */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px; /* 给导航点留位置 */
}

/* 轨道：横向排列所有卡片 */
.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 顺滑的缓动效果 */
    width: 100%;
}

/* 单张幻灯片容器 */
.carousel-slide {
    min-width: 100%; /* 确保一张卡片占满视口宽度 */
    padding: 10px;   /* 增加一点内边距防止投影被切 */
    box-sizing: border-box;
}

/* 卡片内部布局 (左图右文) */
.slide-content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    display: flex; /* Flex布局 */
    align-items: center;
    overflow: hidden;
    height: 300px; /* 固定高度，显得整齐 */
}

/* 左侧：大图区域 */
.slide-img {
    width: 40%; /* 图片占左边40% */
    height: 100%;
    flex-shrink: 0;
}

.slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满且不变形 */
    display: block;
}

/* 右侧：文字区域 */
.slide-text {
    width: 60%;
    padding: 40px;
    position: relative;
    text-align: left;
}

.quote-icon {
    font-size: 5rem;
    color: var(--primary-color);
    font-family: serif;
    line-height: 1;
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 20px;
}

.slide-text p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.slide-author h4 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.slide-author span {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
}

/* 底部导航点 */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background-color: var(--primary-color); /* 激活变为亮黄 */
    transform: scale(1.2);
}

/* 响应式适配 (手机端变为上图下文) */
@media (max-width: 768px) {
    .slide-content {
        flex-direction: column;
        height: auto;
    }
    .slide-img {
        width: 100%;
        height: 200px; /* 手机上图片高度 */
    }
    .slide-text {
        width: 100%;
        padding: 30px 20px;
    }
    .quote-icon { font-size: 4rem; top: 10px; left: 10px; }
}

/* =========================================
   新增：重磅预告专栏 (Upcoming Section)
   ========================================= */

.upcoming-section {
    padding: 100px 0;
    /* 使用纯白背景，与上下的米白/浅色区分开，突出重点 */
    background-color: #ffffff; 
    overflow: hidden; /* 防止倾斜的图片撑开页面 */
}

.upcoming-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px; /* 图文间距 */
}

/* --- 左侧视觉图 (海报/书籍效果) --- */
.upcoming-visual {
    flex: 1;
    position: relative;
    padding: 20px; /* 给投影留位置 */
}

.upcoming-visual img {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    border: 2px solid #000; /* 黑色描边，增加插画感 */
    /* 核心效果：亮黄色实心投影 + 轻微旋转 */
    box-shadow: 20px 20px 0px var(--primary-color); 
    transform: rotate(-3deg); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性动画 */
    display: block;
    margin: 0 auto;
}

/* 悬停特效：图片回正，投影变红 */
.upcoming-visual:hover img {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 25px 25px 0px var(--accent-color);
    border-color: var(--text-color);
}

/* "COMING SOON" 贴纸 */
.visual-badge {
    position: absolute;
    top: 0;
    right: 20px;
    background: var(--accent-color);
    color: #fff;
    padding: 8px 15px;
    font-weight: 900;
    font-size: 0.9rem;
    transform: rotate(5deg);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    z-index: 2;
}

/* --- 右侧文字内容 --- */
.upcoming-content {
    flex: 1;
}

.upcoming-content .tag {
    display: inline-block;
    background: rgba(74, 113, 192, 0.1); /* 浅蓝底 */
    color: var(--secondary-blue);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.upcoming-content h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-color);
    font-weight: 900;
}

.highlight-desc {
    font-size: 1.2rem;
    color: var(--accent-color); /* 砖红强调色 */
    font-weight: 700;
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
}

.description {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 35px;
}

.action-buttons {
    display: flex;
    align-items: center;
}

/* --- 响应式适配 (手机端) --- */
@media (max-width: 992px) {
    .upcoming-wrapper {
        flex-direction: column; /* 上下排列 */
        gap: 50px;
        text-align: center;
    }

    .upcoming-visual img {
        max-width: 100%;
        transform: rotate(0); /* 手机上不旋转，节省空间 */
        box-shadow: 15px 15px 0px var(--primary-color);
    }
    
    .visual-badge {
        right: 10%; /* 调整贴纸位置 */
    }

    .highlight-desc {
        border-left: none; /* 手机上去掉左边框 */
        border-bottom: 3px solid var(--primary-color); /* 改为下划线 */
        padding-left: 0;
        padding-bottom: 10px;
        display: inline-block;
    }

    .action-buttons {
        flex-direction: column;
        gap: 20px;
    }
    
    .text-link { margin-left: 0 !important; }
}