/* =============================================== */
/* ==========  产品展示页 (Product Page) 样式 ========== */
/* =============================================== */

/* --- 导航栏高亮当前页 --- */
/* 注意：这个样式也可以放在 index.css 中，因为它可能适用于所有页面。
   但放在这里也可以，因为它目前只在 product.html 中使用。*/
.nav-links a.active {
    color: #007aff; /* 您可以换成您的主题高亮色 */
    font-weight: bold;
}

/* --- 新的通用页面 Hero 区域 --- */
.page-hero {
    width: 100%;
    height: 450px; /* 根据需要调整高度 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.page-hero-content h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* 给文字添加阴影以增强可读性 */
}

.page-hero-content p {
    font-size: 1.2rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* --- 通用章节标题 --- */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
    font-family: 'Microsoft JhengHei';
}

/* --- 成品展示区域 --- */
/* --- 成品展示区域 --- */
.product-showcase {
    padding: 80px 20px;
    background-color: #fff;
}

.showcase-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 图片之间的间距 */
    flex-wrap: wrap; /* 在小屏幕上换行 */
}

/* * ↓↓↓ 这是新增的核心样式 ↓↓↓ 
 */

/* 1. 让 showcase-item 成为定位的容器 */
.showcase-item {
    flex-shrink: 0; /* 防止图片被压缩 */
    position: relative; /* <<< 新增：为内部绝对定位的图片提供基准 */
    /* 您可能需要根据图片尺寸明确指定容器大小 */
    width: 280px;  /* 示例宽度，请根据您的图片调整 */
    height: 560px; /* 示例高度，请根据您的图片调整 */
}

/* 2. 让内部的两张图片重叠在一起 */
.showcase-item .img-default,
.showcase-item .img-hover {
    position: absolute;  /* <<< 新增：绝对定位，使其重叠 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease-in-out, transform 0.3s ease; /* <<< 修改：添加 opacity 过渡效果 */
}

/* 3. 默认隐藏悬停时的图片 (让它透明) */
.showcase-item .img-hover {
    opacity: 0;
}

/* 4. 当鼠标悬停在 .showcase-item 上时，显示悬停图片，并添加放大效果 */
.showcase-item:hover .img-hover {
    opacity: 1; /* 显示彩色图片 */
    transform: scale(1.05); /* 稍微放大 */
}

/* 5. （可选）当鼠标悬停时，也可以让默认图片稍微变化，增加层次感 */
.showcase-item:hover .img-default {
    transform: scale(1.05); /* 跟着一起放大 */
}

/* * ↑↑↑ 新增的核心样式结束 ↑↑↑ 
 */


/* 您原来的 img:hover 样式可以移除了，因为它已被新逻辑替代 */
/*
.showcase-item img:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
*/

/* --- 客户评论区域 --- */
.testimonials {
    padding: 80px 20px;
    background-color: #f9f9f9; /* 淡灰色背景 */
}

.testimonials-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 让卡片等高 */
    gap: 30px;
    flex-wrap: wrap;
    font-family: 'Microsoft JhengHei'
}

.testimonial-card {
    background-color: #fff;
    border: 3px solid #000000;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    width: 300px;
    /* 修改：为所有变化的属性添加平滑过渡效果 */
    transition: all 0.3s ease-in-out; 
}

/* 将 .highlighted 的样式应用到 :hover 状态 */
.testimonial-card:hover {
    background-color: #1d5187; /* 深蓝色背景 */
    color: #fff;               /* 白色文字 */
    border-color: #1d5187;      /* 同色边框 */
    transform: scale(1.05) translateY(-5px); /* 放大并上移 */
    cursor: pointer; /* 鼠标变为手型，提示可交互 */
}

/* ... */

.testimonial-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* 修改：为边框颜色也添加过渡 */
    
    /* 新增：为下划线预留空间并设置基础样式 */
    display: inline-block; /* 确保 padding 和 border 正确应用 */
    padding-bottom: 8px; /* 在文字和下划线之间创建一些间距 */
    border-bottom: 2px solid transparent; /* 关键：默认状态下边框是透明的 */
}

/* ... */

/* 当卡片被 hover 时，确保内部文字颜色也跟着变 */
.testimonial-card:hover h3 {
    color: #fff;
    border-bottom-color: #fff; /* 修改：在 hover 时显示白色的下划线 */
}

/* ... */

.testimonial-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    transition: color 0.3s ease-in-out; /* 为文字颜色变化添加过渡 */
}

/* 当卡片被 hover 时，确保内部文字颜色也跟着变 */
.testimonial-card:hover h3,
.testimonial-card:hover p {
    color: #fff;
}


/* 原来的 .highlighted 规则可以被安全地移除了，因为现在由 :hover 控制 */
/*
.testimonial-card.highlighted { ... }
.testimonial-card.highlighted h3,
.testimonial-card.highlighted p { ... }
*/