/* =========================================================
   首页样式
   banner 轮播 / 图标导航 / 双卡片 / 三列新闻 / 宣传视频
   ========================================================= */

/* 页面背景基调（Webplus3 发布会把 body class 改写为 wp-main-page，两个都挂上） */
.page-home, .wp-main-page { background: #F5FBFE; }
/* 首页页脚：整体上移叠加到视频区背景上（参照设计稿），
   顶部渐变改透明，让视频区背景从卡片上方及两侧透出 */
.page-home .site-footer,
.wp-main-page .site-footer {
  --footer-top: transparent;
  position: relative;
  z-index: 3;
  margin-top: -170px;
}

/* ---------------- 1. Banner 轮播（Swiper） ---------------- */
.banner { position: relative; overflow: hidden; background: #0C8BC5; }
/* 切换节奏沿用原缓动曲线（Swiper 通过该变量接管 wrapper 的 timing-function） */
.banner-swiper { --swiper-wrapper-transition-timing-function: cubic-bezier(.33, .8, .35, 1); }
/* 通栏满屏大图（参照设计稿）：每张整图铺满视口宽度，左右不露邻图，
   Swiper loop 实现首尾无缝无限循环 */
.banner-slide {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
}
.banner-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 860;
  max-height: 88vh;
  object-fit: cover;
}
/* 当前片缓慢推近（Ken Burns），静止画面也有呼吸感 */
.banner-slide.swiper-slide-active img { animation: kenBurns 8s ease-out both; }
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
/* 单图模式：全宽静止展示，隐藏左右箭头 */
.banner.single .banner-arrow { display: none; }

.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 25, 40, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr), transform var(--tr);
}
.banner-arrow:hover { background: rgba(15, 25, 40, .5); }
.banner-arrow svg { width: 26px; height: 26px; }
.banner-prev { left: 46px; }
.banner-next { right: 46px; }
.banner-prev:hover { transform: translateY(-50%) scale(1.08); }
.banner-next:hover { transform: translateY(-50%) scale(1.08); }

/* ---------------- 2. 图标导航卡（压住 banner 底部） ---------------- */
.quick-nav {
  position: relative;
  z-index: 6;
  margin-top: -92px;
}
.quick-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(25, 80, 140, .10);
  padding: 46px 26px 40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.quick-item { text-align: center; }
.quick-item img {
  width: 112px;
  max-width: 68%;
  transition: transform .4s cubic-bezier(.25, .7, .35, 1);
}
.quick-item:hover img { transform: translateY(-8px) scale(1.06); }
.quick-item span {
  display: block;
  margin-top: 16px;
  font-size: 20px;
  color: var(--c-text);
  font-weight: 500;
}

/* 打开页面时六个功能模块依次入场：从下方浮起并淡入，带轻微回弹。
   纯 CSS 随首屏渲染自动播放，不依赖 JS 与滚动；无 JS 或减弱动态环境直接显示 */
html.js .quick-item {
  animation: quickIn .65s cubic-bezier(.25, .9, .35, 1.18) both .12s;
}
html.js .quick-item:nth-child(2) { animation-delay: .25s; }
html.js .quick-item:nth-child(3) { animation-delay: .38s; }
html.js .quick-item:nth-child(4) { animation-delay: .51s; }
html.js .quick-item:nth-child(5) { animation-delay: .64s; }
html.js .quick-item:nth-child(6) { animation-delay: .77s; }
@keyframes quickIn {
  from { opacity: 0; transform: translateY(44px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .quick-item { animation: none; }
  .banner-slide.swiper-slide-active img { animation: none; }
}

/* ---------------- 3+4. 波浪过渡背景区（双卡片 + 三列新闻） ---------------- */
/* section-news-bg.png 铺在该容器中部：奶油色波浪压在双卡片下缘与两区之间的空隙，
   向下过渡为浅蓝一直垫到新闻栏底部（参照设计稿） */
.mid-zone {
  background:
    url("../img/section-news-bg.png") center 175px / 250% auto no-repeat,
    linear-gradient(180deg, #F5FBFE 0%, #EFF6FC 45%, #E6F1FA 75%, #E6F1FA 100%);
}
/* 间距按设计稿：图标卡→双卡 81px、双卡→新闻卡 71px */
.duo-section { padding: 80px 0 36px; }
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
/* 窗口内容包裹 div 布局透明化，使卡片仍为网格直接子项 */
.duo-grid > div { display: contents; }
.duo-card {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(30, 90, 150, .10);
  transition: transform .45s cubic-bezier(.25, .7, .35, 1), box-shadow .45s;
}
.duo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(30, 90, 150, .18);
}
.duo-card > img { display: block; width: 100%; }

/* 橙色卡片上的叠加元素：二维码 + 两个按钮 */
.duo-ov {
  position: absolute;
  left: 5.6%;
  right: 4.4%;
  bottom: 6.4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ov-qr { width: 19.5%; text-align: center; }
.ov-qr img {
  width: 100%;
  border-radius: 8%;
  box-shadow: 0 6px 18px rgba(150, 70, 20, .22);
  transition: transform .4s;
}
.ov-qr:hover img { transform: scale(1.05); }
.ov-qr p {
  margin-top: 7px;
  font-size: clamp(11px, 1.15vw, 16px);
  line-height: 1.45;
  color: #A4622B;
}
.ov-btns {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 24px);
}
.ov-btn {
  display: flex;
  align-items: center;
  height: clamp(38px, 4.6vw, 64px);
  padding: 0 clamp(12px, 1.6vw, 24px) 0 clamp(7px, .9vw, 13px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(180, 105, 35, .20);
  transition: transform .3s, box-shadow .3s;
}
.ov-btn:hover {
  transform: translateX(6px);
  box-shadow: 0 10px 26px rgba(180, 105, 35, .3);
}
.ov-btn img { width: clamp(26px, 3.2vw, 45px); flex: none; }
.ov-btn b {
  flex: 1;
  text-align: center;
  font-size: clamp(13px, 1.45vw, 20px);
  font-weight: 600;
  color: #4A3A28;
}
.ov-btn .chev { flex: none; width: clamp(10px, 1.1vw, 15px); color: #E8842B; }

/* ---------------- 4. 三列新闻 ---------------- */
/* 底部 90px + 视频区 72px = 162px，对应设计稿新闻卡底→视频标题间距 */
.news-section {
  padding: 36px 0 36px;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.news-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 56px 20px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(30, 90, 150, .08);
}
.news-head {
  position: relative;
  flex: none;
}
.news-head img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
/* 左上角补色：标题图自带的圆弧半径随列宽等比缩放（单列布局时最大 ~79px），
   会超出卡片固定圆角的范围而露出白底；在图片下层垫一块与色带同色的角块
   （13%×41% 恰好覆盖圆弧区）填满缝隙，外缘由卡片圆角裁剪，任何宽度不再露白 */
.news-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 13%;
  height: 41%;
}
.news-col:nth-child(1) .news-head::before { background: #FFEBC9; }
.news-col:nth-child(2) .news-head::before { background: #CEEAFE; }
.news-col:nth-child(3) .news-head::before { background: #C3F3FF; }
.news-more {
  position: absolute;
  z-index: 2;
  right: 26px;
  /* 标题图中的文字垂直中心约在图片高度 38% 处（三张图实测），按钮对齐该线 */
  top: 38%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: var(--tr);
}
.news-more:hover { background: #fff; }
.news-col:nth-child(1) .news-more { color: #E8842B; }
.news-col:nth-child(2) .news-more,
.news-col:nth-child(3) .news-more { color: #1E7BC8; }

/* 标题图自身底部约 22.5% 高度为透明留白（色带只画到 77.5% 处），加上列表内边距后
   色带到首条新闻的可见间距约 46px，远大于条目间距 26px；负外边距按列宽等比上提列表
   （图片随列宽缩放，百分比可保证各断点比例一致），使可见间距收窄到与条目节奏接近 */
/* CMS 输出的窗口包裹层 .wp-window 不参与卡片 flex 拉伸，display:contents 让
   .news-list 直接成为 .news-col 的 flex 子项（静态原型无此包裹层，互不影响） */
.news-col > .wp-window { display: contents; }
.wp-window .more { display: none; }
.news-list {
  margin-top: -4.9%;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-list li {
  flex: 1;
  padding: 13px 26px 12px;
  border-radius: 10px;
  border-bottom: 1px solid #E4EEF6;
  transition: border-color .3s ease, background .3s ease, padding-left .3s cubic-bezier(.25, .7, .35, 1);
  position: relative;
}
.news-list li:last-child { border-bottom: 0; }
.news-list time {
  display: block;
  font-size: 14px;
  color: #A6A6A6;
  margin-bottom: 6px;
  transition: color var(--tr);
}
.news-list .t {
  display: block;
  font-size: 17px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tr);
}
/* {标题} 由 CMS 输出完整 <a>（行内不能再包一层 a，避免嵌套锚点）；伪元素铺满整行保持整行可点。
   列表 flex 填满卡片、li 等分拉伸：各卡条数不同（如 6/7 条）时底部依然对齐 */
.news-list .t a { color: inherit; text-decoration: none; }
.news-list .t a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
/* 悬停：整行浅蓝底 + 标题/日期变蓝 + 轻微缩进，行下方分隔线同步隐去避免双线 */
.news-list li:hover { border-bottom-color: transparent; background: #DFF3FC; padding-left: 33px; }
.news-list li:hover .t,
.news-list li:hover time { color: #1E6FC0; }

/* ---------------- 5. 宣传视频 ---------------- */
/* 底部 160px 中约 116px 被上移的页脚叠住，其余为封面→页脚卡片的背景间隙 */
.video-section {
  background: url("../img/section-video-bg.jpg") center / cover no-repeat;
  padding: 20px 0 160px;
  overflow: hidden;
}
.video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -5px;
}
.video-title {
  font-size: clamp(24px, 1.9vw, 34px);
  font-weight: 700;
  color: #0F5E9C;
  letter-spacing: 3px;
}
.video-more {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #1E7BC8;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(30, 110, 170, .14);
  transition: var(--tr);
}
.video-more:hover { background: #fff; transform: translateY(-2px); }

.video-carousel { position: relative; }
/* 两侧缩略片要露出容器之外，放开 Swiper 默认的 overflow:hidden；
   切换节奏沿用原缓动曲线（接管 wrapper 的 timing-function） */
.vc-swiper {
  overflow: visible;
  --swiper-wrapper-transition-timing-function: cubic-bezier(.33, .8, .35, 1);
}
.vc-swiper .swiper-wrapper { align-items: center; }
/* 卡片式层叠（无 3D 倾转）：当前片全尺寸居最上层，
   两侧片缩小并水平压到当前片下方（中间的图压住左右两张图）。
   卡片间距由 Swiper spaceBetween 提供（≤768px 为 10px，其余 18px） */
.vc-slide {
  --side-scale: .6;
  --side-shift-x: 262px;   /* 两侧片向中间平移量：左片右移、右片左移 */
  position: relative;
  flex: 0 0 63%;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .75s cubic-bezier(.33, .8, .35, 1), opacity .75s, filter .75s, box-shadow .75s;
  transform: scale(var(--side-scale));
  opacity: .55;
  filter: saturate(.75) brightness(1.12);
  z-index: 1;
}
.vc-slide.swiper-slide-prev {
  transform: translateX(var(--side-shift-x)) scale(var(--side-scale));
}
.vc-slide.swiper-slide-next {
  transform: translateX(calc(-1 * var(--side-shift-x))) scale(var(--side-scale));
}
.vc-slide.swiper-slide-active {
  transform: none;
  opacity: 1;
  filter: none;
  z-index: 2;
  box-shadow: 0 26px 60px rgba(15, 60, 110, .35);
}
.vc-slide > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(56px, 6.5vw, 92px);
  border: 0;
  background: none;
  border-radius: 50%;
  transition: transform .3s, opacity .45s;
  /* 仅当前居中卡片显示播放图标，左右两侧隐藏 */
  opacity: 0;
}
.vc-slide.swiper-slide-active .vc-play { opacity: 1; }
.vc-play::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  animation: playPulse 2s ease-out infinite;
  z-index: -1;
}
.vc-play img { display: block; width: 100%; }
.vc-slide.swiper-slide-active .vc-play:hover { transform: translate(-50%, -50%) scale(1.1); }
@keyframes playPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}

.vc-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.4vw, 36px);
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: clamp(15px, 1.5vw, 27px);
  letter-spacing: 5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.vc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 22px rgba(30, 90, 150, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
}
.vc-arrow svg { width: 17px; height: 17px; }
.vc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.vc-prev { left: 14px; }
.vc-next { right: 14px; }

/* =========================================================
   首页响应式
   ========================================================= */
@media (max-width: 1200px) {
  .quick-nav { margin-top: -70px; }
  .quick-card { padding: 34px 18px 30px; }
  .quick-item img { width: 92px; }
  .quick-item span { font-size: 17px; margin-top: 10px; }
  .banner-arrow { width: 52px; height: 52px; }
  .banner-prev { left: 20px; }
  .banner-next { right: 20px; }
  .duo-grid { gap: 26px; }
  .duo-section { padding: 56px 0 40px; }
  .news-grid { gap: 26px; }
}

@media (max-width: 992px) {
  .quick-nav { margin-top: -54px; }
  .quick-card {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 0;
    padding: 30px 12px 26px;
    border-radius: 16px;
  }
  .duo-grid { grid-template-columns: 1fr; gap: 28px; }
  .news-section { padding: 24px 0 24px; }
  .news-grid { grid-template-columns: 1fr; gap: 30px; max-width: 640px; margin: 0 auto; }
  .video-section { padding: 20px 0 140px; }
  .page-home .site-footer,
  .wp-main-page .site-footer { margin-top: -150px; }
  .video-head { margin-bottom: 10px; }
  .vc-slide { flex-basis: 80%; }
  .vc-arrow { width: 40px; height: 40px; }
  .vc-prev { left: 6px; }
  .vc-next { right: 6px; }
}

@media (max-width: 768px) {
  /* 满屏大图在窄屏按宽度等比会太扁，改用视口高度主导（宽度仍铺满、居中裁剪） */
  .banner-slide img { aspect-ratio: auto; height: 60vw; min-height: 240px; max-height: 64vh; }
  .banner-arrow { width: 40px; height: 40px; }
  .banner-arrow svg { width: 18px; height: 18px; }
  .banner-prev { left: 10px; }
  .banner-next { right: 10px; }

  .quick-nav { margin-top: -40px; }
  .quick-card { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
  .quick-item img { width: 64px; }
  .quick-item span { font-size: 14px; margin-top: 6px; }

  .duo-section { padding: 32px 0 24px; }
  .duo-card { border-radius: 14px; }
  .ov-btns { gap: 9px; }
  .ov-qr p { margin-top: 4px; }

  .news-section { padding: 0px 0 24px; }
  .news-grid { gap: 20px; }
  .news-more { right: 14px; height: 32px; padding: 0 13px; font-size: 12px; letter-spacing: 0; }
  .news-list { padding: 4px 0 10px; }
  .news-list li { padding: 10px 16px 9px; }
  .news-list time { font-size: 12px; margin-bottom: 3px; }
  .news-list .t { font-size: 15px; }

  .video-section { padding: 10px 0 128px; }
  .page-home .site-footer,
  .wp-main-page .site-footer { margin-top: -140px; }
  .video-head { margin-bottom: 20px; }
  .video-more { height: 34px; padding: 0 16px; font-size: 13px; }
  .vc-slide { flex-basis: 82%; --side-scale: .86; --side-shift-x: 110px; }
  .vc-arrow { width: 34px; height: 34px; }
  .vc-arrow svg { width: 14px; height: 14px; }
  .vc-caption { letter-spacing: 3px; }
}

@media (max-width: 480px) {
  .ov-qr { width: 21%; }
  .ov-qr p { font-size: 10px; white-space: nowrap; margin: 4px -26% 0; }
  .ov-btns { width: 56%; }
  .ov-btn { padding: 0 9px 0 6px; gap: 4px; }
  .ov-btn img { width: 24px; }
  .ov-btn b { font-size: 12px; white-space: nowrap; }
}