/* ===================================================================
   marketing.css — AI 全域营销方案（四个模块 · 四种版式）
   1) 顶部 Banner 排版（铺满结构在 base.css）
   2) 模块通用：区块、标题、正文、链接（深浅两种配色）
   3) 版式 A · 全屏背景图 + 文字遮罩    —— AI品宣与搜索优化
   4) 版式 B · 斜切异形分割              —— 腾讯定向投放
   5) 版式 C · 图片横向轮播              —— 短视频矩阵营销
   6) 版式 D · 居中堆叠 + 多图拼贴       —— 出海营销
   7) 底部联系条
   8) 响应式（移动端统一回落为单列，图片不裁切）
   依赖 base.css 的设计变量与通用全屏 Banner
   =================================================================== */

/* ===================================================================
   1. 顶部 Banner 排版
   =================================================================== */
/* 结构（100svh 铺满、居中、页头偏移）由 base.css 提供，这里只写本页背景与文字 */
/* Hero 照片已移到 HTML 的 <picture>（横版 Pexels 6476255 / 竖版 mkt-hero-m.jpg），
   裁切与焦点样式统一在 base.css 的 .page-hero-img */

/* 左实右透的斜向白色渐变：压白保证文字可读，右侧留出画面 */
.page-hero-mask {
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.80) 30%,
      rgba(255,255,255,.34) 62%,
      rgba(255,255,255,.10) 100%);
}

.page-hero-title {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.6px;
  color: var(--c-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.page-hero-sub {
  margin-top: 20px;
  max-width: 640px;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--c-ink-soft);
}
.page-hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ===================================================================
   2. 模块通用（四种版式共用，保证配色 / 间距 / 字体统一）
   =================================================================== */
.mkt { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }

.mkt-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: var(--c-ink);
}
.mkt-title::after {
  content: "";
  display: block;
  width: 48px; height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: var(--c-accent);
}
.mkt-lead {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--c-accent-dk);
}
.mkt-text {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 2;
  color: var(--c-text);
}
.mkt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-accent-dk);
  transition: gap var(--tr), color var(--tr);
}
.mkt-link svg { width: 18px; height: 18px; }
.mkt-link:hover { gap: 14px; color: var(--c-accent); }

/* 深底模块上的文字反白 */
.mkt--dark .mkt-title { color: #fff; }
.mkt--dark .mkt-lead  { color: #7FE3D4; }
.mkt--dark .mkt-text  { color: rgba(255,255,255,.82); }
.mkt--dark .mkt-link  { color: #7FE3D4; }
.mkt--dark .mkt-link:hover { color: #fff; }

/* 图片统一：桌面按容器裁切对齐，移动端（见响应式）自动高度、不裁切 */
.mkt-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--c-bg-tint);
}

/* ===================================================================
   3. 版式 A · 全屏背景图 + 文字遮罩（AI品宣与搜索优化）
   =================================================================== */
.mkt--cover {
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(520px, 74vh, 760px);
}
.mkt-cover-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/mkt/mkt-brand.jpg") center center / cover no-repeat;
  background-color: #0F2C26;
}
/* 左深右浅的斜向遮罩：保证文字可读，右侧留出画面 */
.mkt-cover-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 120% at 8% 40%, rgba(9,38,32,.62) 0%, transparent 60%),
    linear-gradient(100deg,
      rgba(11,42,36,.94) 0%,
      rgba(11,42,36,.78) 38%,
      rgba(11,42,36,.34) 72%,
      rgba(11,42,36,.12) 100%);
}
.mkt-cover-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 104px 0;
}
/* 半透明玻璃卡片承载文案 */
.mkt-cover-card {
  max-width: 620px;
  padding: 40px 44px 44px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}
.mkt-cover-card .mkt-text { color: rgba(255,255,255,.86); }

/* ===================================================================
   4. 版式 B · 斜切异形分割（腾讯定向投放）
   =================================================================== */
.mkt--slant {
  overflow: hidden;
  background:
    radial-gradient(80% 130% at 78% 22%, rgba(18,165,148,.26) 0%, transparent 62%),
    linear-gradient(100deg, #0F2C26 0%, var(--c-ink) 100%);
}
.mkt-slant-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: stretch;
  min-height: 620px;
}
/* 图片撑满左半，右边缘斜切进深色底 */
.mkt-slant-media {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.mkt-slant-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-bg-tint);
}
/* 斜切边上的一道主题色亮线，强化分割感 */
.mkt-slant-media::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--c-accent) 0%, rgba(18,165,148,0) 100%);
  transform: skewX(-9.6deg);
  transform-origin: top right;
}
.mkt-slant-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
  padding: 104px 60px 104px 72px;
}

/* ===================================================================
   5. 版式 C · 图片横向轮播（短视频矩阵营销）
   =================================================================== */
.mkt--reel { background: #fff; }
.mkt-reel-inner { padding: 118px 0; }
.mkt-reel-head { max-width: 760px; }

/* 横向滚动 + 吸附，纯 CSS，无需 JS */
.mkt-reel {
  display: flex;
  gap: 20px;
  margin-top: 46px;
  padding-bottom: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) var(--c-line-soft);
}
.mkt-reel::-webkit-scrollbar { height: 8px; }
.mkt-reel::-webkit-scrollbar-track { background: var(--c-line-soft); border-radius: 8px; }
.mkt-reel::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 8px; }

.reel-item {
  /* 一行恰好 4 张（3 个 20px 间距），严丝合缝铺满整行；图片按原始 16:10 展示不裁切 */
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-tint);
  box-shadow: var(--sh-md);
  transition: transform var(--tr), box-shadow var(--tr);
}
.reel-item:hover { transform: translateY(-6px); box-shadow: var(--sh-lg, var(--sh-md)); }
.reel-item img {
  display: block;
  width: 100%;
  height: auto; /* 抵消 HTML height 属性的展示暗示，否则 aspect-ratio 失效、图片变形 */
  aspect-ratio: 3 / 4; /* 与素材 800×1067 竖版一致，零裁切零变形 */
  object-fit: cover;
  background: var(--c-bg-tint);
}

/* ===================================================================
   6. 版式 D · 居中堆叠 + 多图拼贴（出海营销）
   =================================================================== */
/* overflow: hidden —— 兜住拼贴衬底向外探出的部分，避免产生横向滚动条 */
.mkt--collage {
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #F1F8F6 100%);
}
.mkt-collage-inner { padding: 118px 0 132px; }
.mkt-collage-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
/* 居中文案时，标题下的主题色短线也要居中 */
.mkt-collage-head .mkt-title::after {
  margin-left: auto;
  margin-right: auto;
}

.mkt-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: clamp(360px, 40vw, 520px);
  margin-top: 56px;
}
/* 拼贴下方错位的浅色衬底，做出层次 */
.mkt-collage::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  z-index: 0;
  border-radius: var(--radius-lg);
  background: rgba(18,165,148,.12);
}
.col-item {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-tint);
  box-shadow: var(--sh-md);
}
.col-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-bg-tint);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.col-item:hover img { transform: scale(1.05); }
.col-item--lead { grid-row: span 2; }

/* ===================================================================
   7. 底部联系条
   =================================================================== */
.band {
  padding: 72px 0;
  background:
    radial-gradient(90% 140% at 12% 20%, rgba(18,165,148,.26) 0%, transparent 62%),
    linear-gradient(100deg, #0F2C26 0%, var(--c-ink) 100%);
}
.band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.band-text h2 { font-size: 28px; color: #fff; }
.band-text p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,.72);
}
.band-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===================================================================
   8. 响应式
   =================================================================== */
@media (max-width: 1080px) {
  /* 版式 B：斜切回落为上下两栏 */
  .mkt-slant-grid { grid-template-columns: 1fr; min-height: 0; }
  .mkt-slant-media { clip-path: none; }
  .mkt-slant-media img { height: auto; aspect-ratio: 16 / 10; }
  .mkt-slant-media::after { display: none; }
  .mkt-slant-copy { padding: 64px 0 88px; }

  /* 版式 C / D：内边距收紧 */
  .mkt-reel-inner { padding: 92px 0; }
  .reel-item { flex: 0 0 calc((100% - 20px) / 2); } /* 平板一行 2 张，仍可横滑 */
  .mkt-collage-inner { padding: 92px 0 104px; }
  .mkt-collage { height: clamp(320px, 52vw, 440px); }

  /* 版式 A：卡片留白收紧 */
  .mkt-cover-inner { padding: 84px 0; }
  .mkt-cover-card { padding: 32px 30px 34px; }
}

@media (max-width: 900px) {
  .page-hero-sub { font-size: 15.5px; }
  .mkt-lead { font-size: 18px; }
  .mkt-text { font-size: 15.5px; line-height: 1.95; }
  .mkt-cover-card { max-width: 560px; }
  .band-text h2 { font-size: 24px; }
}

/* 移动端：所有版式统一单列，图片按原始比例自然呈现（不裁切、不变形） */
@media (max-width: 640px) {
  .mkt--cover { min-height: 0; }
  .mkt-cover-inner { padding: 64px 0; }
  .mkt-cover-card {
    max-width: 100%;
    padding: 26px 20px 28px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11,42,36,.72);
  }

  .mkt-slant-copy { padding: 44px 0 64px; }
  .mkt-slant-media img { aspect-ratio: auto; height: auto; }

  .mkt-reel-inner { padding: 72px 0; }
  .mkt-reel { gap: 14px; margin-top: 34px; }
  .reel-item { flex: 0 0 78%; }
  .reel-item img { aspect-ratio: auto; height: auto; }

  .mkt-collage-inner { padding: 72px 0 84px; }
  .mkt-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 16px;
    margin-top: 40px;
  }
  .mkt-collage::before { display: none; }
  .col-item--lead { grid-row: auto; }
  .col-item img { height: auto; aspect-ratio: auto; }
}

@media (max-width: 520px) {
  .mkt-title { font-size: 26px; }
  .mkt-lead { font-size: 17px; }
}