/* --- style.css 最终全板块整合精修版 (资质与认证 2x2 定制版 + 按钮修复) --- */

/* 1. 变量定义 */
:root {
    --color-primary: #1C2833; 
    --color-secondary: #566573;
    --color-main-brand: #0A6847; 
    --color-accent: #DAA520;
    --color-gold: #b8860b;
    --color-bg-light: #F8F8F8;
    --color-bg-dark: #2A3542;
    --section-padding: 80px 0;
}

/* 2. 基础重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans JP", sans-serif;
    line-height: 1.6;
    font-size: 16px;
    color: var(--color-primary);
    background-color: white;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.section-padding {
    padding: var(--section-padding);
}

.section-alt-bg {
    background-color: var(--color-bg-light);
}

/* --- 核心位置与字号修正 --- */
h2, .section-title, .center-title {
    text-align: center !important;
    width: 100%;
    margin-bottom: 25px;
    font-size: 3rem !important; 
    font-weight: normal !important; 
}

.section-subtitle {
    text-align: center !important;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 50px;
    display: block;
    font-size: 1.5rem !important; 
    line-height: 1.8;
}

.section-header-center {
    text-align: center !important;
    width: 100%;
}

/* 3. 导航栏 */
.main-header {
    background-color: white;
    border-bottom: 1px solid #EEEEEE;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 90px;
    width: 98% !important; 
    max-width: 1800px !important; 
    margin: 0 auto !important;
}

.logo-wrapper {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    height: 100%;
}

.site-logo {
    height: 55px !important; 
    width: auto !important;
    display: block;
    object-fit: contain;
    margin-right: 15px;
}

.logo-text {
    font-size: 26px !important;
    font-weight: 800;
    color: var(--color-main-brand);
}

.main-nav {
    display: flex !important;
    gap: 15px !important; 
    flex: 1;
    justify-content: center;
}

.main-nav a {
    font-size: 19px !important; 
    font-weight: 700 !important;
    color: var(--color-primary);
    padding: 5px 10px !important; 
    transition: 0.3s;
    cursor: pointer;
}

.main-nav a:hover { color: var(--color-main-brand); }

/* 4. 英雄区块 (Hero Section) */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../img/general/hero_bg.jpg') no-repeat center center/cover !important;
    height: 60vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center; 
    justify-content: center;
    text-align: center; 
    color: white;
}

.hero-section h1 { 
    font-size: 3.5rem; 
    font-weight: normal !important; 
    margin-bottom: 20px; 
}
.hero-section p { font-size: 1.8rem; margin-bottom: 40px; }

/* 【按钮修复1：首页大按钮】 */
.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-gold);
    color: white !important;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.cta-button:hover {
    background-color: #966d09;
    transform: translateY(-3px);
}

/* 5. 核心权威与产品网格 */
.data-grid { display: flex; gap: 25px; margin-top: 20px; }

/* --- 【专业标准/资质认证】专属：2x2 排列并居中 --- */
.data-grid-spec {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important; 
    margin: 40px auto 0 auto !important;
}

.data-item { flex: 1; background: white; padding: 45px 20px; border: 1px solid #EEE; text-align: center; }
.data-number { font-size: 3.5rem; color: var(--color-main-brand); font-weight: 800; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 40px auto;
}

.product-card {
    background: #fff; 
    border: 1px solid #eee; 
    padding: 40px 30px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
}

/* --- 新增：图片容器统一高度与对齐逻辑 --- */
.product-image-wrapper {
    width: 100%;
    height: 300px; /* 统一设置图片区域高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.product-card img { 
    max-width: 100%; 
    max-height: 100%; /* 限制在容器高度内 */
    width: auto;
    height: auto;
    object-fit: contain; /* 确保不被剪切 */
}

/* 【按钮修复2：查看详情按钮】 */
.view-detail-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 35px;
    background-color: var(--color-main-brand); 
    color: #ffffff !important; 
    font-weight: 700;
    border-radius: 50px; /* 改为椭圆格式 */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.view-detail-btn:hover {
    background-color: var(--color-gold);
}

/* 6. 详情页样式 */
.product-detail-page { padding: 40px 0; background: #fff; }
.product-main-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 60px; 
    align-items: center; 
    margin-bottom: 80px;
}
.main-prod-img { width: 80% !important; max-width: 450px !important; height: auto; }
.entry-title { font-size: 3rem !important; font-weight: normal !important; color: var(--color-primary); text-align: left !important; }

/* 8. 语言切换 【按钮修复3：椭圆转换按钮】 */
.lang-switch {
    display: flex; align-items: center; gap: 2px;
    background-color: #eeeeee; border-radius: 50px; padding: 4px; margin-left: 20px;
}
.lang-btn {
    font-size: 13px; padding: 6px 18px; color: #666; cursor: pointer !important;
    border: none; background: none; border-radius: 50px; transition: 0.3s;
}
.lang-btn.active {
    background-color: #ffffff; color: var(--color-main-brand); font-weight: 800;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 9. 响应式适配 */
@media (max-width: 992px) {
    .data-grid-spec { grid-template-columns: 1fr !important; }
    .product-main-grid { grid-template-columns: 1fr; text-align: center; }
    h2, .section-title { font-size: 2.2rem !important; font-weight: normal !important; }
    .product-image-wrapper { height: 250px; } /* 移动端可稍微降低高度 */
}

/* --- 资质与认证版块 详情页跳转按钮 --- */
.btn-detail {
    display: inline-block;
    padding: 12px 35px;
    background-color: #4a6c5e; /* 美屋食品的深绿色调 */
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.btn-detail:hover {
    background-color: #365246; /* 悬停时稍微加深 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ============================================================
   关于我们 (about.html) 专用样式
   ============================================================ */

/* 详情页导航栏通用样式 */
.detail-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.back-link {
    text-decoration: none;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.back-link:hover {
    color: #cc0000; /* 悬停时变为企业红 */
}

.back-icon {
    font-size: 1.2rem;
}

   /* 头部横幅区 */
.about-hero {
    background: #fdfdfd; 
    padding: 120px 0 80px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.about-hero h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

/* 愿景版块 */
.vision-section {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
}

.vision-box {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* 发酵哲学图文版块 */
.philosophy-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.flex { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    gap: 60px; 
}

.text-content { flex: 1; }
.image-content { flex: 1; }

.image-content img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 80年传承时间轴样式 */
.timeline-section {
    padding: 100px 0;
}

.timeline {
    max-width: 800px;
    margin: 50px auto;
    border-left: 2px solid #cc0000; /* 企业红轴线 */
    padding-left: 40px;
    position: relative;
}

.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

/* 时间轴圆点 */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -49px; /* 精确对齐左侧轴线 */
    top: 5px;
    width: 16px;
    height: 16px;
    background: #cc0000;
    border: 3px solid #fff;
    border-radius: 50%;
}

.timeline-item .year {
    font-family: "Georgia", serif;
    font-weight: bold;
    font-size: 1.4rem;
    color: #cc0000;
    display: block;
    margin-bottom: 10px;
}

.timeline-item p {
    color: #666;
    line-height: 1.6;
}

/* 响应式调整：手机端取消左右并排 */
@media (max-width: 768px) {
    .flex { flex-direction: column; }
    .about-hero { padding: 80px 20px; }
}