/* =========================================
       1. 基础视觉系统
       ========================================= */
:root {
    --primary-green: #3D7D56;
    --primary-blue: #1A3A59;
    --accent-gold: #D4AF37;
    --text-main: #2C3E50;
    --text-sub: #606F7B;
    --bg-light: #FAFAFA;
    --font-serif: "Georgia", "Times New Roman", "Songti SC", serif;
    --shadow-soft: 0 15px 30px rgba(0,0,0,0.05);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
body { background-color: var(--bg-light); color: var(--text-main); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
/* =========================================
      3. 页面主要内容区域 (Content Styles)
      ========================================= */
.page-wrapper { padding-top: 70px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }

/* Hero Section */
.expo-hero {
    background: linear-gradient(rgba(15, 32, 53, 0.8), rgba(26, 58, 89, 0.8));
    background-size: cover; background-position: center;
    height: 500px; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.hero-tag { border: 1px solid var(--accent-gold); color: var(--accent-gold); padding: 6px 20px; border-radius: 30px; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 25px; text-transform: uppercase; }
.hero-title { font-family: var(--font-serif); font-size: 3.5rem; margin-bottom: 20px; font-weight: bold; text-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.hero-sub { font-size: 1.2rem; max-width: 700px; opacity: 0.9; font-weight: 300; line-height: 1.6; }

/* 1. 旗舰展会 (Featured Event - 2026置顶) */
.featured-section { padding: 80px 20px 60px; background: white; }
.featured-card {
    display: flex; background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft);
    border: 1px solid #eee; transition: 0.3s; position: relative; max-width: 1200px; margin: 0 auto; min-height: 500px;
}
.featured-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); }

.feat-img {
    width: 55%; position: relative;
    /* 使用上海国家会展中心的图片或医疗展相关图 */
    background: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=2670&auto=format&fit=crop') center/cover;
}
.feat-badge {
    position: absolute; top: 30px; left: 30px; background: var(--accent-gold); color: white;
    padding: 8px 20px; text-align: center; border-radius: 4px; font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); font-size: 0.9rem; letter-spacing: 1px;
}

.feat-content { width: 45%; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.feat-date { color: var(--primary-green); font-weight: bold; font-size: 1.2rem; margin-bottom: 15px; display: block; }
.feat-title { font-family: var(--font-serif); font-size: 2.2rem; color: var(--primary-blue); margin-bottom: 25px; line-height: 1.3; font-weight:bold; }
.feat-desc { font-size: 1.05rem; color: var(--text-sub); margin-bottom: 40px; line-height: 1.8; }

.info-grid { display: grid;gap: 30px; margin-bottom: 50px; border-top: 1px dashed #eee; padding-top: 30px; }
.info-item span { display: block; font-size: 0.85rem; color: #999; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
.info-item strong { display: block; font-size: 1.1rem; color: #333; font-weight: bold; }

.btn-register {
    display: inline-block; background: var(--primary-blue); color: white; padding: 15px 40px;
    border-radius: 30px; font-weight: bold; transition: 0.3s; text-align: center; width: fit-content;
    text-decoration: none; font-size: 1rem;
}
.btn-register:hover { background: #2c3e50; box-shadow: 0 10px 20px rgba(26,58,89,0.2); transform: translateY(-2px); }

/* 2. 近期全球展会 (Global Calendar - 2026) */
.list-section { padding: 60px 20px 100px; background: #FAFBFC; border-top: 1px solid #eee; }
.section-header { margin-bottom: 50px; text-align: center; }
.list-title { font-family: var(--font-serif); font-size: 2.2rem; color: var(--text-main); margin-bottom: 10px; }
.list-subtitle { color: #666; font-size: 1rem; letter-spacing: 1px; }

.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }

.event-card {
    background: white; border-radius: 12px; overflow: hidden; transition: 0.3s;
    border: 1px solid #eee; display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--accent-gold); }

.event-top { height: 180px; background-color: #eee; position: relative; background-size: cover; background-position: center; }
.event-cat {
    position: absolute; bottom: 0; left: 0; background: rgba(26, 58, 89, 0.9); color: white;
    padding: 6px 15px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase;
}

.event-body { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.event-date-row { display: flex; align-items: center; margin-bottom: 15px; gap: 10px; }
.date-icon {
    width: 50px; height: 50px; background: rgba(61, 125, 86, 0.1); color: var(--primary-green);
    border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: bold; line-height: 1;
}
.date-month { font-size: 0.7rem;}
.date-day { font-size: 1.3rem; }

.event-title { font-size: 1.2rem; font-weight: bold; color: var(--text-main); margin-bottom: 10px; line-height: 1.4; }
.event-loc { font-size: 0.9rem; color: #666; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
.event-link { margin-top: auto; color: var(--accent-gold); font-size: 0.9rem; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }

/* 3. 合作通道 (CTA) */
.cta-section { padding: 100px 20px; background: white; text-align: center; border-top: 1px solid #eee; }
.cta-box { max-width: 800px; margin: 0 auto; }
.cta-title { font-family: var(--font-serif); font-size: 2.2rem; color: var(--primary-blue); margin-bottom: 20px; }
.cta-desc { color: var(--text-sub); font-size: 1.1rem; margin-bottom: 40px; line-height: 1.8; }
.btn-outline-dark {
    border: 2px solid var(--primary-blue); color: var(--primary-blue); padding: 12px 35px;
    border-radius: 30px; font-weight: bold; text-decoration: none; display: inline-block; transition: 0.3s;
}
.btn-outline-dark:hover { background: var(--primary-blue); color: white; }

/* Responsive */
@media (max-width: 1024px) {
    .featured-card { flex-direction: column; }
    .feat-img, .feat-content { width: 100%; }
    .feat-img { height: 300px; min-height: auto; }
    .event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hero-title { font-size: 1.5rem; }
    .list-title {  font-size: 1.5rem; }
    .cta-title {  font-size: 1.5rem; }
    .feat-title { font-size: 1.2rem; }
    .event-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .hamburger { display: flex; }
}