/* ==================================================== */
/* 网站完整样式表 v3 (最终修复版)                       */
/* ==================================================== */

/* --- 全局样式 --- */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #ffffff;
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* 当移动菜单激活时，禁止页面滚动 */
body.no-scroll {
    overflow: hidden;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5%;
}

/* --- 1. 顶部图片轮播 --- */
.image-slideshow {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background-color: #f0f0f0;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.slide.active { opacity: 1; }
.google-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: #4285F4;
    font-weight: bold;
    z-index: 10;
}

/* --- 2. 导航栏 --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), #ffffff 80%);
    border-bottom: 1px solid #eee;
    font-family: 'Montserrat', sans-serif;
}
.logo img { max-height: 50px; display: block; }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.nav-links li { display: flex; align-items: center; padding: 0 15px; height: 100%; }
.nav-links a { text-decoration: none; color: #333; font-size: 0.85em; letter-spacing: 0.5px; transition: opacity 0.3s ease; white-space: nowrap; }
.nav-links a:hover { opacity: 0.7; }
.dropdown { position: relative; height: 100%; }
.dropdown-content { display: block; opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #ffffff; min-width: 200px; box-shadow: 0px 8px 25px 0px rgba(0,0,0,0.1); border-radius: 8px; z-index: 1000; list-style: none; padding: 15px 0; margin-top: 10px; transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease; }
.dropdown-content a { color: black; padding: 10px 25px; text-decoration: none; display: block; }
.dropdown-content a:hover { opacity: 1; }
.dropdown:hover .dropdown-content { opacity: 1; visibility: visible; margin-top: 0; }

/* 汉堡包按钮样式 */
.hamburger { display: none; position: relative; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; z-index: 2000; }
.hamburger .bar { display: block; width: 100%; height: 3px; background-color: #333; margin: 5px auto; transition: all 0.3s ease-in-out; }
.hamburger.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-active .bar:nth-child(2) { opacity: 0; }
.hamburger.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 移动版导航菜单样式 */
.mobile-nav { position: fixed; top: 0; left: 100%; width: 100%; height: 100%; background-color: #ffffff; z-index: 1500; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform 0.4s ease-in-out; }
.mobile-nav.is-active { transform: translateX(-100%); }
.mobile-nav a { display: block; width: 100%; text-align: center; padding: 20px 0; font-size: 1.5em; color: #333; text-decoration: none; }

/* --- 3. 专辑展示区 --- */
.hero-section { background-color: #ffffff; text-align: center; padding: 40px 20px 0; position: relative; overflow: hidden; }
.hero-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hero-eyebrow { font-size: 1.2em; font-weight: bold; color: #3D6D34; margin: 0; }
.hero-headline { font-size: 3.5em; font-weight: bold; color: #1d1d1f; margin: 10px 0; letter-spacing: -1px; }
.hero-subhead { font-size: 1.2em; color: #555; line-height: 1.6; max-width: 450px; margin: 0 auto 25px auto; }
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.button { display: inline-block; text-decoration: none; font-size: 1em; font-weight: bold; padding: 12px 28px; border-radius: 30px; transition: all 0.3s ease; }
.button-filled { background-color: #3D6D34; color: #ffffff; border: 2px solid #3D6D34; }
.button-filled:hover { background-color: #2c5225; border-color: #2c5225; }
.button-outline { background-color: transparent; color: #3D6D34; border: 2px solid #3D6D34; }
.button-outline:hover { background-color: #3D6D34; color: #ffffff; }
.hero-image-wrapper {
    width: 100%;
    max-width: 450px;
    margin: -240px auto 0 auto;
    position: relative;
    z-index: 1;
}
.hero-image-wrapper img { width: 100%; height: auto; display: block; border-radius: 8px; transform: translateY(calc(100% - (100% / 2.5))); }

/* --- 4. 特色板块 --- */
.feature-section { min-height: 70vh; padding: 60px 5%; background-size: cover; background-position: center; display: flex; align-items: center; }
#artist-section { background-image: url('images/artist-bg.jpg'); justify-content: flex-end; }
#about-section { background-image: url('images/about-bg.jpg'); justify-content: flex-start; }
.text-card { background-color: rgba(29, 29, 31, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f5f5f7; padding: 40px; border-radius: 18px; max-width: 450px; }
.text-card h3 { color: #fff; font-size: 1.1em; margin: 0 0 5px 0; padding-bottom: 10px; border-bottom: 1px solid #555; display: inline-block; }
.text-card h2 { color: #fff; font-size: 2em; font-weight: 700; margin: 15px 0; }
.text-card p { font-size: 1em; line-height: 1.6; color: #ccc; }
.button-card { display: inline-block; background-color: #3D6D34; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 30px; font-weight: bold; margin-top: 20px; border: 2px solid #3D6D34; transition: background-color 0.3s ease, color 0.3s ease; }
.button-card:hover { background-color: transparent; color: #3D6D34; }

/* --- 5. 滚动动效 --- */
.fade-in-section { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

/* --- 6. 页脚 --- */
footer { background-color: #000000; color: #f1f1f1; padding: 60px 0 30px 0; font-size: 0.9em; }
.footer-columns { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; }
.footer-column { width: 22%; min-width: 200px; padding: 0 15px; margin-bottom: 30px; }
.footer-logo { max-width: 150px; margin-bottom: 20px; }
.social-icons a { display: inline-block; margin-right: 15px; }
.social-icons svg { width: 20px; height: 20px; fill: #ffffff; transition: fill 0.3s ease; }
.social-icons a:hover svg { fill: #cccccc; }
.footer-column h3 { color: #ffffff; font-size: 1.1em; margin-bottom: 20px; font-weight: bold; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 10px; }
.footer-column a { color: #f1f1f1; text-decoration: none; transition: color 0.3s ease; }
.footer-column a:hover { color: #ffffff; text-decoration: underline; }
.footer-column p { margin: 0 0 10px 0; line-height: 1.6; }
.footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid #444; color: #888; }
.footer-bottom p { margin: 5px 0; font-size: 0.8em; letter-spacing: 0.5px; }

/* --- 7. 商店页面样式 --- */
.store-page { padding-top: 60px; padding-bottom: 60px; }
.store-header { text-align: left; margin-bottom: 50px; padding: 80px 40px; border-radius: 18px; overflow: hidden; position: relative; background-image: url('images/store-header-bg.jpg'); background-size: cover; background-position: center; }
.store-header h1 { font-size: 3em; margin: 0; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }
.store-header p { font-size: 1.1em; color: #f0f0f0; margin-top: 10px; text-shadow: 1px 1px 6px rgba(0,0,0,0.6); }
.store-category { margin-bottom: 60px; }
.store-category h2 { font-size: 1.8em; font-weight: 700; color: #1d1d1f; margin-bottom: 25px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; }
.product-card { text-decoration: none; color: #1d1d1f; background-color: #f9f9f9; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; padding: 0; cursor: pointer; text-align: left; }
.product-card:focus, .product-card:focus-visible { outline: none; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.product-image img { width: 100%; height: auto; display: block; }
.product-info { padding: 15px; }
.product-info h3 { font-size: 1.1em; font-weight: 700; margin: 0 0 5px 0; }
.product-info p { font-size: 0.9em; color: #666; margin: 0 0 10px 0; }
.product-info .price { font-size: 1em; font-weight: 700; color: #1d1d1f; margin-top: 10px; }

/* --- 8. Sonic 页面样式 --- */
.sonic-page { padding-top: 60px; padding-bottom: 60px; }
.sonic-hero { text-align: left; margin-bottom: 50px; padding: 80px 40px; border-radius: 18px; overflow: hidden; position: relative; background-image: url('images/sonic-header-bg.jpg'); background-size: cover; background-position: center; }
.sonic-hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)); }
.sonic-hero > *{ position: relative; z-index: 1; }
.sonic-hero h1{ font-size: 3em; margin: 0; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }
.sonic-hero p{ font-size: 1.1em; color: #f0f0f0; margin-top: 10px; text-shadow: 1px 1px 6px rgba(0,0,0,0.6); }
.sonic-feature{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-bottom: 70px; }
.sonic-title { font-size: clamp(50px, 10vw, 60px); font-weight: 800; background: linear-gradient(90deg, #3D6D34, #93f9b9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sonic-sub{ margin-top: 12px; color: #555; font-size: 1.05rem; line-height: 1.7; }
.player-card{ background: linear-gradient(180deg, #0b0f12, #11151a); border-radius: 18px; color: #eaeaea; padding: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.12); border: 1px solid rgba(0,0,0,.06); position: relative; }
.player-cover{ width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 28px rgba(0,0,0,.35); margin-bottom: 16px; }
.player-cover img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.player-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.player-meta .title{ font-weight:700; font-size:1rem; color:#fff; margin:0; }
.player-meta .artist{ font-size:.9rem; color:#b9c0c7; margin:2px 0 0 0; }
.player-meta .pill{ margin-left:auto; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:.75rem; color:#dfe6ec; }
.player-progress{ margin-top: 10px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.player-progress .bar{ width: 30%; height:100%; background: linear-gradient(90deg, #3D6D34, #4A8441); }
.player-foot{ margin-top: 10px; display:flex; align-items:center; justify-content:space-between; color:#9aa4ad; font-size:.8rem; }
.player-foot .dot{ width:6px;height:6px;border-radius:50%;background:#4A8441;box-shadow:0 0 10px #3D6D34; margin-right:8px;display:inline-block; }
.sonic-story{ display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: center; }
.story-card{ background:#f7f7f7; border:1px solid #eee; border-radius:16px; padding:28px; }
.story-card h3{ margin:0 0 10px 0; font-size:1.2rem; color:#1d1d1f; }
.story-card p{ margin:0; color:#555; line-height:1.8; }
.story-visual{ border-radius:16px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.08); }
.story-visual img{ width:100%; height:auto; display:block; }

/* --- 9. 子页面导航模块 --- */
.sub-nav-section {
    padding: 60px 0;
}

.section-title {
    font-size: 1.8em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 25px 0;
    text-align: left;
}

.sub-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 桌面版三列布局 */
    gap: 25px; /* 卡片之间的间距 */
}

.sub-nav-card {
    display: flex;
    align-items: flex-end; /* 文字置于底部 */
    text-decoration: none;
    color: #ffffff;
    padding: 25px;
    height: 250px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sub-nav-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 背景图遮罩，让文字更清晰 */
.sub-nav-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
}

.card-content {
    position: relative;
    z-index: 2;
}

.card-content h3 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
}

/* 为每个卡片设置背景图 */
#card-music { background-image: url('images/sonic-music-bg.jpg'); }
#card-artists { background-image: url('images/sonic-artists-bg.jpg'); }
#card-venue { background-image: url('images/sonic-venue-bg.jpg'); }


/* --- 10. Immersive 页面样式 --- */
/* Immersive Hero */
.immersive-hero {
    background-image: url("images/immersive-header-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#immersive-grid {
    /* 在桌面版强制两列布局 */
    grid-template-columns: 1fr 1fr;
}

/* 为新的探索卡片设置背景图 */
#card-creation { background-image: url('images/immersive-creation-bg.jpg'); }
#card-spirituality { background-image: url('images/immersive-spirituality-bg.jpg'); }
#card-course { background-image: url('images/immersive-course-bg.jpg'); }

/* Project 板块样式 */
.project-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 60px 0;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.project-eyebrow {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    margin: 0 0 10px 0;
}

.project-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 20px 0;
}

.project-text p {
    font-size: 1em;
    line-height: 1.7;
    color: #666;
}



/* ==================================================== */
/* 9. 响应式设计 (手机和平板适配) - 最终修复版           */
/* ==================================================== */
@media (max-width: 992px) {
    .nav-links { display: none; }
    .hamburger { display: block; }
    .feature-section { justify-content: center !important; text-align: center; }
    .text-card { margin: 0 auto; }
    .footer-column { width: 45%; min-width: unset; }
    .sonic-feature, .sonic-story { grid-template-columns: 1fr; }
    .player-card{ order: 2; }
    .sonic-title, .sonic-sub{ text-align:left; }
}

/* --- 手机样式 (屏幕宽度小于 767px) --- */
@media (max-width: 767px) {
    .image-slideshow {
        height: 150px; /* 缩小轮播图高度 */
    }
    
    .logo img {
        max-height: 40px; /* 缩小Logo */
    }

 .hero-section {
    padding: 30px 25px 220px; /* 缩小顶部内边距，并增加底部内边距来容纳图片 */
    overflow: hidden; 
}
    .hero-headline {
        font-size: 2.1em; /* 缩小大标题 */
    }
    
    .hero-eyebrow {
        font-size: 1em;
    }

    .hero-subhead {
        font-size: 1em; /* 缩小副标题 */
        line-height: 1.5;
    }
    
    .button {
        font-size: 0.9em;
        padding: 10px 22px; /* 缩小按钮 */
    }

 .hero-image-wrapper {
    max-width: 90%;
    margin-top: -350px; /* 调整负外边距，让图片位置更精确 */
    transform: none;
}
    
    .hero-image-wrapper img {
        /* 恢复图片向上位移的效果，只露出约三分之一 */
        transform: translateY(calc(100% - (100% / 50))); 
    }

    .feature-section {
        padding: 30px 5%;
        min-height: auto;
        /* 移除负边距，解决内容重叠问题 */
        margin-top: 0; 
    }
    
    /* 移除为解决重叠而设的额外边距 */
    #artist-section {
        padding-top: 30px;
    }

    .text-card {
        padding: 25px;
        max-width: 100%;
    }

    .text-card h2 {
        font-size: 1.5em; /* 缩小卡片标题 */
    }
    
    .text-card p {
        font-size: 0.9em;
    }

    .footer-column {
        width: 100%;
        padding: 0;
    }

     /* --- 商店页面手机版样式 (核心修改) --- */
    .store-header {
        padding: 30px 20px;
    }

    .store-header h1 {
        font-size: 2em;
    }
    
    .store-category {
        margin-bottom: 40px;
    }

    .store-category h2 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }
    
    .product-grid {
        /* 核心代码：强制两列布局，并减小间距 */
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .product-info {
        padding: 12px;
    }
    
    .product-info h3 {
        font-size: 0.9em;
    }
    
    .product-info p {
        font-size: 0.8em;
    }

    /* --- Sonic 页面手机版样式 --- */
    .sonic-hero { 
        padding: 40px 20px; 
    }
    .sonic-hero h1 { 
        font-size: 2em; 
    }
    .sonic-title { 
        font-size: 2.2em; 
    }
    .sonic-feature, .sonic-story {
        grid-template-columns: 1fr;
    }
    
    .sub-nav-grid {
        grid-template-columns: 1fr; /* Sonic子导航在手机上变为单列 */
    }
}
#immersive-grid {
    grid-template-columns: 1fr; /* 在手机上变为单列 */
}
.project-section {
    grid-template-columns: 1fr; /* 在手机上将左右布局改为上下堆叠 */
    gap: 30px;
}
.project-title {
    font-size: 2em;
}

/* ==================================================== */
/* 11. 艺术家简介页面样式 (大背景图版)                  */
/* ==================================================== */

/* --- 1. 顶部全屏背景 --- */
.profile-hero {
    width: 100%;
    height: 75vh; /* 区域高度为视窗高度的75% */
    min-height: 500px;
    
    /* *** 在这里替换为您自己的照片路径 *** */
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('images/jingkun-lin-profile.jpg');
    
    background-size: cover;
    
    /* --- 修改这里来调整图片位置 --- */
    background-position: center 30%; 
    
    background-repeat: no-repeat;
}

/* 修改：让文字在背景区域内垂直居中 */
.profile-hero .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-hero .profile-info {
    color: #ffffff;
    text-align: left; /* 修改：强制文字左对齐 */
}

.profile-name {
    font-size: 4em;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5); /* 文字阴影，使其更清晰 */
}

.profile-title {
    font-size: 2em;
    font-weight: 600;
    margin: 10px 0 0 0;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

/* --- 2. 下方简介内容 --- */
.profile-content {
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 980px; /* 限制内容宽度，提升阅读体验 */
    margin-left: auto; 
    margin-right: auto;
}

.profile-bio {
    column-count: 2;
    column-gap: 50px;
}

.profile-bio p {
    font-size: 1.1em;
    line-height: 1.75;
    color: #333;
    margin: 0 0 1.5em 0;
    break-inside: avoid;
}

/* --- 艺术家简介页面响应式设计 --- */
@media (max-width: 767px) {
    .profile-hero {
        height: 60vh; /* 手机上缩小高度 */
        min-height: 400px;
    }

    .profile-name {
        font-size: 2.8em;
    }

    .profile-title {
        font-size: 1.5em;
    }
    
    .profile-content {
        padding-left: 5%; /* 手机上增加左右边距 */
        padding-right: 5%;
    }

    .profile-bio {
        column-count: 1; /* 手机上变为单栏 */
    }
}

/* ==================================================== */
/* 12. 音乐家页面样式 (Musicians Page)                  */
/* ==================================================== */

.musicians-page {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Musicians 页面的 Hero 区域设置独特的背景图 */
.musicians-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/musicians-header-bg.jpg');
    background-size: cover;
    background-position: center;
}

.artist-grid-section {
    padding-top: 30px;
}

.artist-grid {
    display: grid;
    /* 响应式网格布局：自动填充，每列最小300px，最大1fr */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.artist-card {
    text-decoration: none;
    color: #1d1d1f;
    background-color: #f9f9f9;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block; /* 确保 <a> 标签表现为块级元素 */
}

.artist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.artist-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1; /* 强制图片为1:1的正方形 */
    object-fit: cover;   /* 保证图片不变形，裁剪多余部分 */
}

.artist-info {
    padding: 25px;
}

.artist-name {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.artist-title {
    font-size: 1em;
    color: #666;
    margin: 0 0 15px 0;
}

.artist-excerpt {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
/* ==================================================== */
/* 13. 音乐页面样式 (Music Page)                        */
/* ==================================================== */

/* 为 Music 页面的 Hero 区域设置独特的背景图 */
.music-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/music-header-bg.jpg');
    background-size: cover;
    background-position: center;
}

.music-track-list {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 70px; /* 曲目之间的垂直间距 */
}
/* ==================================================== */
/* 14. Apple Music 风格板块样式 (v2 - 平滑滚动版)       */
/* ==================================================== */

.apple-style-music {
    padding: 60px 0;
}

/* --- 1. 艺术家介绍大图 --- */
.artist-feature-header {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 40px;
}

.artist-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-name-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 30px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 5em;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    text-align: right;
}


/* --- 2. 音乐平台链接 --- */
.music-platforms {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 60px;
}

.music-platforms p {
    margin: 0;
    font-size: 0.9em;
    color: #888;
}

.music-platforms a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: 0.9em;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.music-platforms a:hover {
    background-color: #f0f0f0;
}

.platform-logo {
    width: 22px;
    height: 22px;
}

/* --- 3. 专辑无限滚动横幅 --- */
.album-carousel-section {
    width: 100%;
}

.album-carousel-section .section-title {
    padding: 0 5%; 
    margin-bottom: 20px;
}

.album-carousel {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.carousel-track {
    display: flex;
    width: calc((250px + 30px) * 12); 
    animation: scroll 40s linear infinite;
}

/* 移除了会导致跳跃的 :hover 规则，现在由 JavaScript 控制 */

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-1 * (250px + 30px) * 6));
    }
}

.album-item {
    flex-shrink: 0;
    width: 250px;
    margin-right: 30px;
    text-decoration: none;
}

.album-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.album-item:hover .album-cover {
    transform: scale(1.03);
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-title {
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    text-align: left;
}

.album-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.album-item:hover .album-overlay {
    opacity: 1;
    visibility: visible;
}

.listen-now-btn {
    color: #fff;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
    border: 1px solid rgba(255,255,255,0.3);
}

/* --- 响应式调整 --- */
@media (max-width: 767px) {
    .artist-name-overlay {
        font-size: 2.5em;
        padding: 20px;
    }
}


/* ==================================================== */
/* 16. 场地页面样式 (Venue Page)                        */
/* ==================================================== */

.venue-page {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Venue 页面的 Hero 区域设置独特的背景图 */
.venue-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/venue-header-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* --- 海报滚动展示区 --- */
.poster-display-section {
    padding: 60px 0;
}

.events-title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.events-title-block h2 {
    font-size: 1.2em;
    font-weight: 600;
    color: #888;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.events-title-block h3 {
    font-size: 3em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 5px 0 0 0;
}

.poster-carousel {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.carousel-track-left,
.carousel-track-right {
    display: flex;
    width: fit-content;
}

.carousel-track-left {
    animation: scroll-left 50s linear infinite;
}

.carousel-track-right {
    animation: scroll-right 50s linear infinite;
}

/* 移除了会导致跳跃的 :hover 规则，现在由 JavaScript 控制 */

@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * (350px + 20px) * 4)); }
}

@keyframes scroll-right {
    from { transform: translateX(calc(-1 * (350px + 20px) * 4)); }
    to { transform: translateX(0); }
}

.poster-item {
    flex-shrink: 0;
    width: 350px;
    margin: 0 10px;
}

.poster-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* --- Venue 页面响应式设计 --- */
@media (max-width: 767px) {
    .events-title-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .events-title-block h3 {
        font-size: 2.2em;
    }

    /* 调整海报尺寸和动画距离 */
    @keyframes scroll-left {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-1 * (220px + 20px) * 4)); }
    }

    @keyframes scroll-right {
        from { transform: translateX(calc(-1 * (220px + 20px) * 4)); }
        to { transform: translateX(0); }
    }

    .poster-item {
        width: 220px;
    }
}
/* ==================================================== */
/* 17. 关于我们页面样式 (About Page)                    */
/* ==================================================== */

.about-page {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 About 页面的 Hero 区域设置独特的背景图 */
.about-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/about-header-bg.jpg');
    background-size: cover;
    background-position: center;
}

.about-section {
    padding: 40px 0;
    border-bottom: 1px solid #e5e5e5;
}

.about-section:last-child {
    border-bottom: none;
}

.about-intro-text {
    column-count: 2;
    column-gap: 50px;
}

.about-intro-text p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
    margin: 0 0 1.5em 0;
    break-inside: avoid;
}

.about-intro-text p:first-child {
    font-size: 1.3em;
    font-weight: 600;
    color: #1d1d1f;
}

.section-title-about {
    font-size: 2em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 20px 0;
}

.contact-section p,
.support-section p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    max-width: 700px; /* 限制文本宽度以提高可读性 */
}

.contact-details {
    margin-top: 25px;
}

.contact-details a {
    color: #3D6D34;
    text-decoration: none;
    font-weight: 600;
}

.contact-details a:hover {
    text-decoration: underline;
}



/* --- About 页面响应式设计 --- */
@media (max-width: 767px) {
    .about-intro-text {
        column-count: 1; /* 手机上变为单栏 */
    }
}
/* ==================================================== */
/* 18. 视觉页面样式 (Visual Page)                       */
/* ==================================================== */

.visual-page {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Visual 页面的 Hero 区域设置独特的背景图 */
.visual-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/visual-header-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* 为 Visual 页面的三个子导航卡片设置背景图 */
#card-visual-artist { 
    /* *** 替换为 Artist 卡片的背景图 *** */
    background-image: url('images/visual-artist.jpg'); 
}
#card-visual-gallery { 
    /* *** 替换为 Gallery 卡片的背景图 *** */
    background-image: url('images/visual-gallery.jpg'); 
}
#card-visual-event { 
    /* *** 替换为 Event 卡片的背景图 *** */
    background-image: url('images/visual-event.jpg'); 
}

/* --- 新艺术家介绍板块 --- */
.new-artist-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 60px 0;
}

.new-artist-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.new-artist-text .button {
    margin-top: 20px;
}

/* --- Visual 页面响应式设计 --- */
@media (max-width: 767px) {
    .new-artist-feature {
        grid-template-columns: 1fr; /* 手机上变为单列堆叠 */
        gap: 30px;
    }
}
/* ==================================================== */
/* 19. 艺术家子页面样式 (Artist Sub-page)               */
/* ==================================================== */

/* 为 Artist 页面的 Hero 区域设置独特的背景图 */
.artist-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/artist-header-bg.jpg');
    background-size: cover;
    background-position: center;
}
/* ==================================================== */
/* 20. Shixian Shao 个人简介页面特定样式              */
/* ==================================================== */

.profile-hero-shixian {
    /* *** 在这里替换为 Shixian Shao 的背景图片路径 *** */
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('images/artist-shixian-card.jpg');
}
/* ==================================================== */
/* 21. 设计页面样式 (Design Page)                       */
/* ==================================================== */

.design-page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 5%;
}

/* 为 Design 页面的 Hero 区域设置独特的背景图 */
.design-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/design-header-bg.jpg');
    background-size: cover;
    background-position: center;
    
    /* 与其他页面统一的样式 */
    text-align: left;
    margin-bottom: 50px;
    padding: 80px 40px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

/* 添加深色遮罩以保证文字清晰度 */
.design-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

/* 确保内容在遮罩上方 */
.design-hero > * {
    position: relative;
    z-index: 1;
}

/* 统一标题文字样式 */
.design-hero h1 {
    font-size: 3em;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* 统一副标题文字样式 */
.design-hero p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin-top: 10px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

.design-projects-section {
    padding: 60px 0;
}

/* 复用 music 页面的艺术家介绍大图样式 */
.design-projects-section .artist-feature-header {
    margin-bottom: 50px; /* 与下方项目网格的间距 */
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列布局 */
    gap: 40px; /* 两列之间的间距 */
}

.project-card {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid #e5e5e5;
}

.project-card h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 15px 0;
}

.project-card p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #555;
    margin: 0 0 25px 0;
}

.project-card .button {
    display: inline-block;
}

/* --- Design 页面响应式设计 --- */
@media (max-width: 767px) {
    .projects-grid {
        grid-template-columns: 1fr; /* 手机上变为单列堆叠 */
        gap: 25px;
    }
}
/* ==================================================== */
/* 22. 活动页面样式 (Event Page)                        */
/* ==================================================== */

.event-page.container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Event 页面的 Hero 区域设置独特的背景图 */
.event-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/event-header-bg.jpg');
    background-size: cover;
    background-position: center;
    
    /* 与其他页面统一的样式 */
    margin-bottom: 50px; /* 移除顶部和左右的 auto margin */
    padding: 80px 40px;
    border-radius: 18px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.event-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

.event-hero > * {
    position: relative;
    z-index: 1;
}

.event-hero h1 {
    font-size: 3em;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.event-hero p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin-top: 10px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

.coming-soon-section {
    text-align: center;
    padding: 100px 20px;
}

.coming-soon-section h2 {
    font-size: 2.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 15px 0;
}

.coming-soon-section p {
    font-size: 1.2em;
    color: #555;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}
/* ==================================================== */
/* 23. 课程页面样式 (Course Page)                       */
/* ==================================================== */

.course-page.container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Course 页面的 Hero 区域设置独特的背景图 */
.course-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/immersive-course-bg.jpg');
    background-size: cover;
    background-position: center;
    
    /* 与其他页面统一的样式 */
    margin-bottom: 50px;
    padding: 80px 40px;
    border-radius: 18px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.course-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

.course-hero > * {
    position: relative;
    z-index: 1;
}

.course-hero h1 {
    font-size: 3em;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.course-hero p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin-top: 10px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* Coming Soon 板块的样式已在 Event 页面中定义，可直接复用 */
/* ==================================================== */
/* 24. 创作页面样式 (Creation Page)                     */
/* ==================================================== */

.creation-page.container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Creation 页面的 Hero 区域设置独特的背景图 */
.creation-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/immersive-creation-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* --- Podcast 频道板块 --- */
.podcast-section {
    padding: 60px 0;
}

.podcast-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
    background-color: #f5f5f7;
    border-radius: 24px;
    padding: 40px;
}

.podcast-artwork img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.podcast-channel {
    font-size: 1em;
    font-weight: 600;
    color: #888;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.podcast-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
}

.podcast-episode {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin: 15px 0;
}

.podcast-description {
    font-size: 1em;
    line-height: 1.7;
    color: #555;
    margin: 0 0 25px 0;
}

.podcast-platforms {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.platform-button {
    display: inline-block;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 2px solid;
}

.apple-podcast {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.apple-podcast:hover {
    background-color: #333;
    border-color: #333;
}

.spotify-podcast {
    background-color: #1DB954;
    color: #fff;
    border-color: #1DB954;
}
.spotify-podcast:hover {
    background-color: #1ed760;
    border-color: #1ed760;
}

/* --- Blog 讨论区板块 --- */
.blog-section {
    padding: 60px 0;
    border-top: 1px solid #e5e5e5;
}

.blog-section .coming-soon-section {
    padding: 40px 0; /* 调整内边距以适应新布局 */
}

/* --- Creation 页面响应式设计 --- */
@media (max-width: 767px) {
    .podcast-card {
        grid-template-columns: 1fr; /* 手机上变为单列堆叠 */
        gap: 30px;
        padding: 25px;
        text-align: center;
    }

    .podcast-artwork {
        max-width: 250px;
        margin: 0 auto;
    }

    .podcast-title {
        font-size: 2em;
    }

    .podcast-platforms {
        justify-content: center;
    }
}
/* ==================================================== */
/* 25. 灵性页面样式 (Spirituality Page)                 */
/* ==================================================== */

/* 为 Spirituality 页面的三个子导航卡片设置背景图 */
#card-predict { 
    /* *** 在这里替换为 Predict 卡片的背景图 *** */
    background-image: url('images/spirituality-predict-bg.jpg'); 
}
#card-healing { 
    /* *** 在这里替换为 Healing 卡片的背景图 *** */
    background-image: url('images/spirituality-healing-bg.jpg'); 
}
#card-self-improvement { 
    /* *** 在这里替换为 Self-improvement 卡片的背景图 *** */
    background-image: url('images/spirituality-self-bg.jpg'); 
}
/* ==================================================== */
/* 26. 预测页面样式 (Predict Page)                      */
/* ==================================================== */

.predict-page-body {
    background-color: #f0f0f0;
}

.predict-page-body .container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --- 主内容框 --- */
.content-box {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

.page-header {
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.page-header h1 { font-size: 2.5em; margin: 0; color: #1d1d1f; }
.page-header p { font-size: 1.1em; color: #555; margin-top: 10px; }

/* --- 塔罗牌模块样式 --- */
.tarot-controls {
    text-align: center;
    margin-bottom: 25px;
}
.tarot-controls button {
    background-color: #3D6D34;
    color: #ffffff;
    border: 2px solid #3D6D34;
    padding: 12px 28px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    margin: 0 10px;
}
.tarot-controls button:hover {
    background-color: #2c5225;
    border-color: #2c5225;
}
#reset-btn {
    background-color: transparent;
    color: #3D6D34;
}
#reset-btn:hover {
    background-color: #3D6D34;
    color: #ffffff;
}

.card-table {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
}

.card-spread-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.card-spread-container::-webkit-scrollbar { height: 8px; }
.card-spread-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.card-spread-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.card-spread-container::-webkit-scrollbar-thumb:hover { background: #aaa; }

.card-spread-inner {
    display: flex;
    align-items: flex-end;
    padding: 0 40px;
    height: 100%;
}

/* --- 卡牌样式 --- */
.tarot-card {
    width: 100px;
    height: 171px;
    position: relative;
    flex-shrink: 0;
    margin-left: -70px;
    cursor: grab;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    user-select: none;
}
.tarot-card:first-child { margin-left: 0; }
.tarot-card.in-spread:hover {
    transform: translateY(-20px);
    z-index: 1000 !important;
}
.tarot-card.placed { position: absolute; margin-left: 0; }
.tarot-card.dragging {
    cursor: grabbing;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    z-index: 3000 !important;
    transition: none;
}
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.tarot-card.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}
.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.card-face--back { background-color: #333; }
.card-face--front { transform: rotateY(180deg); }
/* ==================================================== */
/* 27. 疗愈页面样式 (Healing Page)                      */
/* ==================================================== */

.healing-page.container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Healing 页面的 Hero 区域设置独特的背景图 */
.healing-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/spirituality-healing-bg.jpg');
    background-size: cover;
    background-position: center;
    
    /* 与其他页面统一的样式 */
    margin-bottom: 50px;
    padding: 80px 40px;
    border-radius: 18px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.healing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

.healing-hero > * {
    position: relative;
    z-index: 1;
}

.healing-hero h1 {
    font-size: 3em;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.healing-hero p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin-top: 10px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* Coming Soon 板块的样式已在 Event/Course 页面中定义，可直接复用 */
/* ==================================================== */
/* 28. 自我提升页面样式 (Self-improvement Page)         */
/* ==================================================== */

.self-improvement-page.container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 为 Self-improvement 页面的 Hero 区域设置独特的背景图 */
.self-improvement-hero {
    /* *** 在这里替换为您想要的背景图片路径 *** */
    background-image: url('images/spirituality-self-bg.jpg');
    background-size: cover;
    background-position: center;
    
    /* 与其他页面统一的样式 */
    margin-bottom: 50px;
    padding: 80px 40px;
    border-radius: 18px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.self-improvement-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

.self-improvement-hero > * {
    position: relative;
    z-index: 1;
}

.self-improvement-hero h1 {
    font-size: 3em;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.self-improvement-hero p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin-top: 10px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* Coming Soon 板块的样式已在之前页面中定义，可直接复用 */