/* ==========================================================================
   Yes Music Pty Ltd - Custom Styles
   ========================================================================== */

/* --- 1. 配色全面覆盖 (清理 data-theme 限定以修复 Pico.css 覆盖问题) --- */
:root:not([data-theme="dark"]),
[data-theme="light"],
:root {
    /* 基础文本和背景 */
    --pico-color: #3a3a3a;
    --pico-background-color: #fdfaf6; /* 暖象牙白背景 */
    
    /* --- 现代卡片风格重置 --- */
    --pico-card-background-color: transparent; /* 默认透明，融入背景 */
    --pico-card-box-shadow: none; /* 移除默认死板的阴影 */
    --pico-card-border-color: rgba(106, 74, 155, 0.15); /* 极淡的紫色边框 */
    --pico-card-sectioning-background-color: transparent; /* 移除卡片头部/底部的自带灰色块 */

    /* --- 勃艮第紫罗兰 主题色 (来自手风琴) --- */
    --pico-primary: #6A4A9B; 
    --pico-primary-background: #6A4A9B; /* 按钮背景 */
    --pico-primary-border: #6A4A9B;     /* 按钮边框 */
    --pico-primary-underline: rgba(106, 74, 155, 0.5); /* 链接下划线 */
    
    /* 悬停状态 (Hover) - 更深的紫色 */
    --pico-primary-hover: #563C82; 
    --pico-primary-hover-background: #563C82;
    --pico-primary-hover-border: #563C82;
    --pico-primary-hover-underline: #563C82;

    /* 按钮或高亮上的反色文本 */
    --pico-primary-inverse: #ffffff;  
    --pico-form-element-focus-color: #6A4A9B;
}

/* 专门给品牌名称上色的 class */
.brand-text {
    color: var(--pico-primary);
    font-weight: 800;
}

/* --- 2. 布局与组件微调 --- */
html { 
    scroll-behavior: smooth; 
}

section { 
    scroll-margin-top: 5rem; 
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Hero 区域 */
#hero {
    min-height: 40vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: transparent; 
    padding: 4rem 2rem;
}

#hero h1 { 
    font-size: 3.5rem; 
    margin-bottom: 0.5rem; 
}

#hero h2 { 
    font-size: 1.5rem; 
    color: var(--pico-muted-color); 
    font-weight: normal; 
}

/* ==========================================================================
   Ribbon / Mission 区域 (包含 Logo 的左右分栏与垂直居中)
   ========================================================================== */
#mission-ribbon {
    background-color: #ffffff; 
    border-top: 1px solid var(--pico-muted-border-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding: 4rem 0; /* 增加上下的呼吸感 */
}

/* 手机端：默认上下堆叠排布 */
.mission-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mission-logo {
    width: 60px; 
    height: auto;
    /* margin 简写：上 0，左右 auto(居中)，下 0.75rem */
    margin: 0 auto 0.75rem auto; 
    display: block; 
}

/* 让手机端的标题也跟着 Logo 一起居中，更好看 */
.mission-title {
    text-align: center;
}

.mission-title h3 {
    margin-bottom: 0;
    color: var(--pico-primary); 
    line-height: 1.3;
}

/* 右侧正文段落样式 */
.mission-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--pico-color);
    margin-bottom: 1.5rem;
}

/* 移除最后一段的多余底部空白 */
.mission-content p:last-child {
    margin-bottom: 0; 
}

/* 桌面端：开启左右分栏比例，并强制垂直居中对齐 */
@media (min-width: 992px) {
    .mission-grid {
        flex-direction: row;      
        align-items: center;      
        gap: 5rem;                
    }
    
    .mission-title {
        flex: 1; 
        text-align: left; /* 🌟 电脑端：标题恢复左对齐 */
    }

    .mission-title .mission-logo {
        margin-left: 0;   /* 🌟 电脑端：Logo 恢复左对齐 */
    }
    
    .mission-content {
        flex: 2; 
    }
}

/* 导航栏固定 (毛玻璃效果) */
header.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: rgba(253, 250, 246, 0.95); 
    backdrop-filter: blur(8px); 
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* --- 3. #about 区域自定义布局 (适配 4:5 竖长照片) --- */

/* 移动端 (手机)：默认上下堆叠，文本居中 */
.about-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.about-text {
    flex: 1;
    text-align: center;
}

/* 肖像照片区域 - 核心：应用 4:5 比例 */
.about-image-wrapper {
    /* --- 核心修改 --- */
    width: 100%; /* 宽度撑满移动端父容器 */
    max-width: 280px; /* 在移动端不要太大 */
    aspect-ratio: 4 / 5; /* 自动根据宽度计算高度 */
    /* ---------------- */
    overflow: hidden; 
    margin: 0 auto; /* 在手机上居中 */
    border-radius: 8px; /* 给容器加上圆角 */
}

#about h3 + p {
    margin-top: -0.5rem;   /* 使用负边距将头衔垂直向上拉，粘靠在名字下面 */
    font-size: 0.95rem;     /* 保持 muted 的视觉层级 */
    color: var(--pico-secondary); /* 保持 muted 的颜色 */
}

.about-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片完美填充容器不变形 */
}

/* --- 个人简介中的 Qualifications 列表优化 --- */
#about h4 {
    margin-top: 2rem; /* 给 Qualifications 标题上方留出呼吸感 */
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-transform: uppercase; /* 大写字母能增加学术和专业的庄重感 */
    letter-spacing: 0.05em; /* 稍微拉开字间距 */
    color: var(--pico-secondary); /* 用次要颜色（比如优雅的灰蓝色）显得更低调 */
}

#about dt {
    font-weight: 700;
    margin-top: 0;
    color: var(--pico-primary); /* 学位名称使用紫罗兰品牌色 */
    line-height: 1.4;
}

#about dd {
    margin-bottom: 1.25rem; /* 每个学历之间拉开清晰的间距 */
    margin-left: 0;
    color: var(--pico-muted-color); /* 毕业院校使用灰色，突出层次 */
    font-size: 0.95rem; /* 院校字号稍微小一点 */
}

#about dd:last-child {
    margin-bottom: 0; /* 最后一个去掉底部多余空白 */
}

/* --- 4. 现代卡片悬停动效 (仅限 Services 区域) --- */
article {
    border-radius: 16px; /* 保证所有 article (包括个人简介) 都有统一的现代圆角 */
}

/* 只给 Services 里的卡片加上过渡动画属性 */
#services article {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 仅当鼠标悬停在 Services 卡片上时的效果：上浮、变白、发光 */
#services article:hover {
    transform: translateY(-6px); 
    background-color: #ffffff; 
    box-shadow: 0 12px 30px rgba(106, 74, 155, 0.12);
    border-color: transparent; /* 悬停时隐藏边框，让阴影接管边缘 */
}

/* --- 5. 修复卡片标题偏上的细节 --- */
#services article header h3 {
    margin-bottom: 0; /* 移除标题默认的底部空白，让它完美居中并贴近分割线 */
}

/* 桌面端 (电脑)：左右并排，不平分 */
@media (min-width: 992px) {
    .about-container {
        flex-direction: row; /* 并排 */
        align-items: flex-start; /* 文本顶部对齐，不要垂直居中 */
    }
    
    .about-text {
        flex: 2; /* 文本占 2 份宽度 */
        text-align: left; /* 文本左对齐 */
    }
    
    .about-image-wrapper {
        flex: 1; /* 图片占 1 份宽度 */
        max-width: none; /* 让它在电脑端可以使用其分配到的宽度 */
        margin: 0; /* 移除居中 */
    }
}

/* --- 6. Footer 专属极简对勾列表 (强制清除 Pico 默认符号) --- */
.footer-features {
    list-style: none !important; /* 强制取消 ul 的列表样式 */
    padding: 0;
    margin: 0;
}

.footer-features li {
    list-style-type: none !important; /* 🌟 核心：直接强制关掉 li 上的 square/disc 符号 */
    position: relative;
    padding-left: 1.5rem; /* 给左侧对勾预留出足够的空间 */
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    line-height: 1.4;
    text-align: left; /* 确保文字在手机端也保持左对齐，不随卡片居中 */
}

.footer-features li:last-child {
    margin-bottom: 0;
}

/* 绘制紫罗兰色的对勾 */
.footer-features li::before {
    content: "✓"; 
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pico-primary); 
    font-weight: 800;
}

/* 默认在手机端隐藏 */
.hide-mobile {
    display: none;
}

/* 在电脑端（宽度大于 768px）显示出来 */
@media (min-width: 768px) {
    .hide-mobile {
        display: inline;
    }
}

/* --- 8. 修复手机端 Contact 区域信息块太挤的问题 --- */
@media (max-width: 768px) {
    #contact .grid > div:first-child {
        margin-bottom: 2rem; /* 在手机端，给上面的“常规问询”块下方增加宽裕的留白 */
    }
}