/* ================================================================
   12 套模板 · 配图 / 地图 差异化布局
   配合 data-img + img-empty + html[data-template]
   ================================================================ */

/* ── 通用：有图 / 无图 过渡 ── */
[data-img].has-image img {
  transition: transform .45s ease, opacity .35s ease;
}
[data-img].has-image:hover img {
  transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════
   1 · classic-iris 鸢尾旗舰 — Stripe 双栏 Bento
   ═══════════════════════════════════════════════════════════════ */
html[data-template="classic-iris"] .hero-visual-bg {
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(91, 115, 183, .18);
}
html[data-template="classic-iris"] .stats-visual.has-image {
  border: 1px solid var(--ln);
  box-shadow: 0 12px 40px rgba(91, 115, 183, .12);
}
html[data-template="classic-iris"] .process-visual.has-image {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}
html[data-template="classic-iris"] .cta-visual-wrap.has-image { opacity: .22; }
html[data-template="classic-iris"] .map-container {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(91, 115, 183, .14);
}

/* ═══════════════════════════════════════════════════════════════
   2 · midnight-slate 午夜深空 — Linear 影院 + 地图置顶
   ═══════════════════════════════════════════════════════════════ */
html[data-template="midnight-slate"] .hero-stats-dock {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
html[data-template="midnight-slate"] .hero-stats-dock .stats-visual--hero-dock {
  max-width: 100%;
  aspect-ratio: 21/9;
  border-radius: 16px;
  opacity: .85;
  border: 1px solid rgba(255, 255, 255, .08);
}
html[data-template="midnight-slate"] .stats-with-visual--no-img .stats-grid,
html[data-template="midnight-slate"] .hero-stats-dock .stats-grid {
  grid-template-columns: repeat(4, 1fr);
}
html[data-template="midnight-slate"] .process-visual.has-image {
  max-width: none;
  border-radius: 0;
  margin-inline: calc(-1 * var(--pad, 24px));
  aspect-ratio: 21/9;
  opacity: .55;
}
html[data-template="midnight-slate"] .cta-visual-wrap { display: none !important; }
html[data-template="midnight-slate"] .service-card.has-image,
html[data-template="midnight-slate"] .service-card:has(.service-card-thumb.has-image) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 20px;
  align-items: start;
}
html[data-template="midnight-slate"] .service-card-thumb.has-image {
  grid-row: 1 / span 4;
  width: 88px;
  min-height: 88px;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 12px;
  align-self: center;
}
html[data-template="midnight-slate"] .service-card-thumb.has-image + .service-icon { display: none; }
html[data-template="midnight-slate"] .section:has(.contact-layout) > .container {
  display: flex;
  flex-direction: column;
}
html[data-template="midnight-slate"] .section:has(.contact-layout) .map-section {
  order: -1;
  margin: 0 0 40px;
}
html[data-template="midnight-slate"] .map-container {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(12px);
}
html[data-template="midnight-slate"] #baiduMapWrap { min-height: 360px; }
html[data-template="midnight-slate"] .page-hero-split--no-img,
html[data-template="midnight-slate"] .page-hero-split {
  grid-template-columns: 1fr;
  text-align: center;
}
html[data-template="midnight-slate"] .page-hero-visual.has-image {
  order: 1;
  max-height: 240px;
  margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   3 · forest-jade 翡翠有机 — Notion 顶图 Banner
   ═══════════════════════════════════════════════════════════════ */
html[data-template="forest-jade"] .hero-shell {
  display: flex;
  flex-direction: column;
}
html[data-template="forest-jade"] .hero-visual:not([data-hero-hidden]) {
  width: 100%;
  max-width: none;
  margin-bottom: 28px;
}
html[data-template="forest-jade"] .hero-visual-bg.has-image {
  position: relative;
  inset: auto;
  aspect-ratio: 21/9;
  border-radius: 16px;
  opacity: 1;
}
html[data-template="forest-jade"] .hero-float-zone { display: none; }
html[data-template="forest-jade"] .stats-with-visual.has-image,
html[data-template="forest-jade"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr;
}
html[data-template="forest-jade"] .stats-visual.has-image {
  max-width: none;
  aspect-ratio: 21/9;
  border-radius: 16px;
}
html[data-template="forest-jade"] .page-hero-split:has(.page-hero-visual.has-image) {
  grid-template-columns: 1fr;
}
html[data-template="forest-jade"] .page-hero-visual.has-image {
  order: -1;
  max-height: none;
  aspect-ratio: 21/9;
}
html[data-template="forest-jade"] .service-card--geo .service-card-thumb.has-image {
  aspect-ratio: 21/9;
  min-height: 180px;
}
html[data-template="forest-jade"] .map-section .map-container {
  border-radius: 16px;
  border: 1px solid var(--ln);
}

/* ═══════════════════════════════════════════════════════════════
   4 · sunset-amber 琥珀杂志 — 刊头通栏 + 侧图
   ═══════════════════════════════════════════════════════════════ */
html[data-template="sunset-amber"] .hero-shell { direction: rtl; }
html[data-template="sunset-amber"] .hero-shell > * { direction: ltr; }
html[data-template="sunset-amber"] .hero-visual-bg.has-image {
  border-radius: 4px 4px 0 0;
  border-bottom: 4px solid var(--g);
}
html[data-template="sunset-amber"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr;
}
html[data-template="sunset-amber"] .stats-visual.has-image {
  max-width: none;
  aspect-ratio: 21/9;
  border-radius: 0;
  border-left: 4px solid var(--g);
}
html[data-template="sunset-amber"] .process-visual.has-image {
  border-radius: 0;
  border: 1px solid var(--ln);
}
html[data-template="sunset-amber"] .page-hero-visual.has-image {
  aspect-ratio: 3/4;
  max-height: 360px;
}
html[data-template="sunset-amber"] .service-card-thumb.has-image {
  aspect-ratio: 4/5;
  min-height: 160px;
}
html[data-template="sunset-amber"] .map-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border-radius: 0;
  border: 1px solid var(--ln);
}
html[data-template="sunset-amber"] .map-bar {
  border-right: 1px solid var(--ln);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 768px) {
  html[data-template="sunset-amber"] .map-container { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   5 · royal-violet 皇家高定 — 极简文字，小图点缀
   ═══════════════════════════════════════════════════════════════ */
html[data-template="royal-violet"] .stats-visual.has-image {
  max-width: 200px;
  aspect-ratio: 4/3;
  opacity: .9;
}
html[data-template="royal-violet"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr auto;
  gap: 32px;
}
html[data-template="royal-violet"] .process-visual.has-image {
  max-width: 480px;
  opacity: .88;
}
html[data-template="royal-violet"] .service-card-thumb.has-image {
  display: none;
}
html[data-template="royal-violet"] .service-detail-visual.has-image {
  max-width: 420px;
  margin-inline: auto;
}
html[data-template="royal-violet"] .cta-visual-wrap { display: none !important; }
html[data-template="royal-violet"] .map-container {
  max-width: 720px;
  margin-inline: auto;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   6 · ocean-teal 海洋 SaaS — 仪表盘面板
   ═══════════════════════════════════════════════════════════════ */
html[data-template="ocean-teal"] .hero-visual-bg.has-image {
  border-radius: 12px;
  border: 1px solid var(--ln);
  opacity: 1;
}
html[data-template="ocean-teal"] .layout-hero-panel--dashboard {
  padding: 16px;
  background: var(--d2);
  border-radius: 12px;
  border: 1px solid var(--ln);
}
html[data-template="ocean-teal"] .stats-visual.has-image {
  border-radius: 12px;
  border: 1px solid var(--ln);
  background: var(--d1);
  aspect-ratio: 16/10;
}
html[data-template="ocean-teal"] .process-visual.has-image {
  border-radius: 12px;
  border: 1px solid var(--ln);
  padding: 8px;
  background: var(--d2);
}
html[data-template="ocean-teal"] .service-card-thumb.has-image {
  aspect-ratio: 16/10;
  border-bottom: 1px solid var(--ln);
}
html[data-template="ocean-teal"] .service-detail-visual.has-image {
  border: 1px solid var(--ln);
  border-radius: 12px;
}
html[data-template="ocean-teal"] .map-container {
  border-radius: 12px;
  border: 1px solid var(--ln);
  overflow: hidden;
}
html[data-template="ocean-teal"] .map-bar {
  background: var(--d2);
  border-bottom: 1px solid var(--ln);
}

/* ═══════════════════════════════════════════════════════════════
   7 · rose-blush 玫瑰轻奢 — 居中柔圆
   ═══════════════════════════════════════════════════════════════ */
html[data-template="rose-blush"] .hero-shell {
  text-align: center;
}
html[data-template="rose-blush"] .hero-visual:not([data-hero-hidden]) {
  max-width: 560px;
  margin: 28px auto 0;
}
html[data-template="rose-blush"] .hero-visual-bg.has-image {
  position: relative;
  inset: auto;
  border-radius: 999px 999px 24px 24px;
  aspect-ratio: 4/3;
  opacity: 1;
}
html[data-template="rose-blush"] .hero-float-zone { display: none; }
html[data-template="rose-blush"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr;
  text-align: center;
}
html[data-template="rose-blush"] .stats-visual.has-image {
  max-width: 320px;
  border-radius: 50%;
  aspect-ratio: 1;
  margin-bottom: 24px;
}
html[data-template="rose-blush"] .process-visual.has-image {
  border-radius: 24px;
  max-width: 640px;
}
html[data-template="rose-blush"] .cta-visual-wrap.has-image {
  opacity: .35;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}
html[data-template="rose-blush"] .service-card-thumb.has-image {
  border-radius: 20px 20px 0 0;
}
html[data-template="rose-blush"] .contact-office-visual.has-image {
  border-radius: 20px;
}
html[data-template="rose-blush"] .map-container {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--ln);
}

/* ═══════════════════════════════════════════════════════════════
   8 · ink-minimal 墨色瑞士 — 全宽硬边框
   ═══════════════════════════════════════════════════════════════ */
html[data-template="ink-minimal"] .hero-visual-bg.has-image {
  position: relative;
  inset: auto;
  width: 100%;
  border-radius: 0;
  border: 2px solid var(--t1);
  aspect-ratio: 21/9;
  opacity: 1;
  margin-top: 32px;
}
html[data-template="ink-minimal"] .hero-float-zone { display: none; }
html[data-template="ink-minimal"] .stats-visual.has-image,
html[data-template="ink-minimal"] .process-visual.has-image,
html[data-template="ink-minimal"] .page-hero-visual.has-image,
html[data-template="ink-minimal"] .service-detail-visual.has-image {
  border-radius: 0;
  border: 2px solid var(--t1);
}
html[data-template="ink-minimal"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr;
}
html[data-template="ink-minimal"] .stats-visual.has-image {
  max-width: none;
  aspect-ratio: 21/9;
}
html[data-template="ink-minimal"] .service-card-thumb.has-image {
  margin: -24px -24px 20px;
  border-radius: 0;
  border-bottom: 2px solid var(--t1);
}
html[data-template="ink-minimal"] .map-container {
  border-radius: 0;
  border: 2px solid var(--t1);
}
html[data-template="ink-minimal"] .cta-visual-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   9 · crimson-bold 赤红权威 — 色带通栏
   ═══════════════════════════════════════════════════════════════ */
html[data-template="crimson-bold"] .stats-with-visual:has(.stats-visual.has-image) {
  grid-template-columns: 1fr;
}
html[data-template="crimson-bold"] .stats-visual.has-image {
  max-width: none;
  aspect-ratio: 21/9;
  border-radius: 0;
  margin-inline: calc(-1 * var(--pad, 24px));
}
html[data-template="crimson-bold"] .process-visual.has-image {
  border-radius: 0;
  max-width: none;
}
html[data-template="crimson-bold"] .cta-visual-wrap { display: none !important; }
html[data-template="crimson-bold"] .map-section .map-container {
  border-radius: 0;
}
html[data-template="crimson-bold"] .map-bar {
  background: var(--g);
  color: var(--on-g, #fff);
}
html[data-template="crimson-bold"] .map-bar-link { color: inherit; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════
   10 · mint-spring 薄荷创意 — Figma 硬阴影
   ═══════════════════════════════════════════════════════════════ */
html[data-template="mint-spring"] .stats-visual.has-image {
  transform: rotate(-2deg);
  box-shadow: 6px 6px 0 var(--g);
  border: 2px solid var(--t1);
  border-radius: 12px;
}
html[data-template="mint-spring"] .process-visual.has-image {
  transform: rotate(1deg);
  box-shadow: 8px 8px 0 var(--g);
  border: 2px solid var(--t1);
  border-radius: 12px;
}
html[data-template="mint-spring"] .service-card-thumb.has-image {
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--g);
  border: 2px solid var(--ln);
}
html[data-template="mint-spring"] .service-detail-visual.has-image {
  box-shadow: 6px 6px 0 var(--g);
  border: 2px solid var(--ln);
}
html[data-template="mint-spring"] .contact-office-visual.has-image {
  box-shadow: 6px 6px 0 var(--g);
  border: 2px solid var(--ln);
}
html[data-template="mint-spring"] .map-container {
  box-shadow: 8px 8px 0 var(--g);
  border: 2px solid var(--ln);
  border-radius: 12px;
  overflow: hidden;
}
html[data-template="mint-spring"] .cta-visual-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   11 · calligraphy 墨韵文创 — 画框 / 侧栏
   ═══════════════════════════════════════════════════════════════ */
html[data-template="calligraphy"] .page-hero-split {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
html[data-template="calligraphy"] .page-hero-visual.has-image {
  order: -1;
  max-height: none;
  aspect-ratio: 16/10;
  border: 8px solid var(--d2);
  outline: 1px solid var(--ln);
  border-radius: 2px;
}
html[data-template="calligraphy"] .about-intro-visual .img-slot.has-image {
  border: 12px solid var(--d2);
  outline: 1px solid var(--ln);
  border-radius: 2px;
  min-height: 400px;
}
html[data-template="calligraphy"] .stats-visual.has-image {
  border: 8px solid var(--d2);
  outline: 1px solid var(--ln);
  border-radius: 2px;
}
html[data-template="calligraphy"] .process-visual.has-image {
  border: 6px solid var(--d2);
  outline: 1px solid var(--ln);
  border-radius: 2px;
}
html[data-template="calligraphy"] .layout-timeline-section .process-visual.has-image {
  margin-bottom: 48px;
}
html[data-template="calligraphy"] .map-container {
  border: 8px solid var(--d2);
  outline: 1px solid var(--ln);
  border-radius: 2px;
  overflow: hidden;
}
html[data-template="calligraphy"] .cta-visual-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   12 · neon-cyber 霓虹赛博 — 终端 HUD
   ═══════════════════════════════════════════════════════════════ */
html[data-template="neon-cyber"] .hero-visual-bg.has-image {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--g) 60%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--g) 25%, transparent);
  opacity: 1;
}
html[data-template="neon-cyber"] .stats-visual.has-image {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--g) 50%, transparent);
  aspect-ratio: 16/10;
  max-width: 100%;
}
html[data-template="neon-cyber"] .process-visual.has-image {
  border: 1px solid color-mix(in srgb, var(--g) 40%, transparent);
  border-radius: 4px;
  position: relative;
}
html[data-template="neon-cyber"] .process-visual.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .04) 2px,
    rgba(0, 0, 0, .04) 4px
  );
  pointer-events: none;
}
html[data-template="neon-cyber"] .service-card-thumb.has-image {
  border-radius: 4px;
  border: 1px solid var(--ln);
}
html[data-template="neon-cyber"] .service-detail-visual.has-image {
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  border-radius: 4px;
}
html[data-template="neon-cyber"] .page-hero-visual.has-image {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--g) 50%, transparent);
}
html[data-template="neon-cyber"] .map-container {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--g) 55%, transparent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--g) 15%, transparent);
}
html[data-template="neon-cyber"] .cta-visual-wrap.has-image {
  opacity: .4;
  filter: saturate(1.2);
}

/* ── 子页服务详情：图文列互换 ── */
html[data-template="sunset-amber"] .service-detail-inner:nth-child(even) .service-detail-visual.has-image,
html[data-template="forest-jade"] .service-detail-inner .service-detail-visual.has-image {
  border-radius: 16px;
  overflow: hidden;
}

/* ── 联系页 · 办公图位置 ── */
html[data-template="ocean-teal"] .contact-office-visual.has-image {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
}
html[data-template="crimson-bold"] .contact-office-visual.has-image {
  border-radius: 0;
}
html[data-template="midnight-slate"] .contact-office-visual.has-image {
  aspect-ratio: 16/9;
  border-radius: 12px;
  opacity: .92;
}

/* ── 无图时布局干净退化为纯文案 ── */
html[data-template] .stats-with-visual--no-img,
html[data-template] .page-hero-split--no-img,
html[data-template] .about-intro--no-visual {
  gap: clamp(20px, 4vw, 40px);
}

/* ── 移动端统一降级 ── */
@media (max-width: 768px) {
  html[data-template="midnight-slate"] .service-card:has(.service-card-thumb.has-image) {
    grid-template-columns: 1fr;
  }
  html[data-template="midnight-slate"] .service-card-thumb.has-image {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 16/9;
  }
  html[data-template="sunset-amber"] .map-container { grid-template-columns: 1fr; }
  html[data-template="rose-blush"] .stats-visual.has-image { border-radius: 24px; }
  html[data-template="mint-spring"] .stats-visual.has-image,
  html[data-template="mint-spring"] .process-visual.has-image {
    transform: none;
  }
}