/* style.css - 宽屏铺满版 */

/* === 基本重置 === */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Microsoft Yahei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  background: #f4f7f7;
  color: #23373a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
}

/* 全局变量 */
:root{
  --wrap-padding: 40px;
  --site-max: 1600px;           /* 宽屏 */
  --card-bg: #ffffff;
  --muted: #6f8b8e;
  --primary: #0b8cd6;
  --shadow: 0 8px 22px rgba(27,40,45,0.08);
  --round: 14px;
}

/* 内容居中容器（主要用于正文区） */
.section-wrapper {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--wrap-padding);
}

/* === 头部导航 === */
header {
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(20,30,35,0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}
header .inner {
  width: 100%;              /* 铺满 */
  max-width: none;          /* 不限制宽度 */
  padding: 16px 40px;       /* 左右留白 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO 部分 */
header .logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #172626;
  white-space: nowrap;
}
header .logo img {
  height: 50px;
  margin-right: 10px;
}

/* 菜单 - 字体变大 */
header nav {
  display: flex;
  gap: 36px; /* 菜单间距 */
  align-items: center;
  margin-left: auto; /* 把导航推到右侧 */
}
header nav a {
  text-decoration: none;
  color: #2b4446;
  padding: 12px 20px;  /* 增加内边距 */
  border-radius: 24px;
  font-weight: 600;
  font-size: 20px;     /* 字体变大 */
  transition: all .18s ease;
  white-space: nowrap;
}
header nav a:hover {
  background: rgba(11,140,214,0.08);
  color: var(--primary);
  transform: translateY(-1px);
}

/* === Banner === */
.banner {
  margin-top: 20px;
}
.banner img {
  display:block;
  width: 100%;      /* 铺满宽度 */
  border-radius: 0; /* 取消圆角，更大气 */
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* 标题样式 */
.section-title {
  text-align: center;
  font-size: 32px;
  margin: 40px 0 20px;
  font-weight: 700;
  color: #223a3e;
  letter-spacing: 1px;
}

/* === 卡片区 === */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;          /* 占满宽度 */
  max-width: none;      /* 去掉宽度限制 */
  margin: 0 0 50px;     /* 去掉左右 auto 居中 */
  padding: 0;           /* 去掉左右 padding */
}

.card {
  background: var(--card-bg);
  border-radius: var(--round);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  border: 1px solid rgba(30,50,52,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(20,40,45,0.12);
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display:block;
}
.card .card-body {
  padding: 20px 18px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 卡片标题 - 字体变大并居中 */
.card h3 {
  margin: 8px 0 10px;
  font-size: 24px;      /* 字体变大 */
  color: #133235;
  text-align: center;   /* 确保居中 */
  width: 100%;          /* 确保居中 */
}

/* 广告词 - 分两行居中 */
.card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;      /* 字体稍大 */
  line-height: 1.6;     /* 增加行高 */
  padding: 0 8px;
  text-align: center;   /* 居中 */
  min-height: 3.2em;    /* 确保两行高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre-line; /* 允许换行 */
}

.card .btns {
  display:flex;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid rgba(30,50,52,0.04);
  background: linear-gradient(180deg, rgba(240,249,250,0.65), rgba(255,255,255,0.6));
}
.card .btns a {
  display:inline-block;
  padding: 10px 16px;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
  background: var(--primary);
  border-radius: 24px;
  font-weight: 600;
  transition: transform .12s ease, opacity .12s ease;
}
.card .btns a:hover {
  transform: translateY(-3px);
  opacity: 0.95;
}

/* === 地图区域 === */
.map-section {
  margin: 50px 0 80px;
  text-align: center;
}
.map-section img {
  width: 100%;      /* 铺满 */
  border-radius: 0; /* 取消圆角 */
  box-shadow: var(--shadow);
  display:block;
  margin: 0 auto;
}

/* === 页脚 === */
footer {
  width: 100%;
  background: #111519;
  color: #dbecee;
  padding: 24px var(--wrap-padding);
  text-align: center;
  font-size: 15px;
}
footer .inner {
  max-width: var(--site-max);
  margin: 0 auto;
}

/* === 响应式 === */
@media (max-width: 1200px) {
  :root { --wrap-padding: 30px; --site-max: 1200px; }
}
@media (max-width: 900px) {
  :root { --wrap-padding: 20px; }
  header .inner { padding: 12px var(--wrap-padding); }
  .section-title { font-size: 26px; margin-top: 30px; }
  .card { min-height: 300px; }
  /* 移动端导航字体调整 */
  header nav a {
    font-size: 16px;
    padding: 10px 16px;
  }
}
@media (max-width: 620px) {
  header nav { gap: 10px; }
  .cards { gap: 16px; grid-template-columns: 1fr; padding: 0 12px; }
  .card img { height: 180px; }
  .map-section img { width: 100%; }
  .section-wrapper { padding: 0 12px; }
  /* 移动端卡片文字调整 */
  .card h3 { font-size: 20px; }
  .card p { font-size: 14px; }
}

/* 小细节 */
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }