/* ============================================================
   微略官网 CMS · 前台补充样式 front-extra.css
   ============================================================
   tokens.css / app.css 是原型的原文件，一律不动 —— 这里只放两件事：
     1. 原型里没有的「后台可替换图片」：占位块被真实图片接替时的统一尺寸；
     2. 原型里没有的分页器（原型内容少，不需要翻页）。
   目的是让「静态原型 → 数据驱动」这一步不产生任何额外视觉偏差：
   有图时用图片，没图时仍是原来的虚线占位块。
   ============================================================ */

/* ---- 占位块 → 真实图片：尺寸与圆角对齐 .media-placeholder ----
   配图统一做轻调色：轻度降饱和 + 微提对比。图片保持彩色，但
   收敛到与版面一致的克制感——饱和度过高的照片（尤其 AI 生图）
   直出会显得「跳」，像贴上去的补丁；统一调色后任何来源的图都
   融进同一套色彩氛围。 */
.media-fill{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  object-fit:cover;
  display:block;
  background:var(--ink-100);
  filter:saturate(.78) contrast(1.04);
}
/* 首屏与案例幅面不同，沿用各自占位块的宽高比 */
.hero-slide__media .media-fill{aspect-ratio:4/3;}
.case-slide__media .media-fill{aspect-ratio:4/3;}

/* ---- 设计化封面：无真实配图时的降级（helpers 的 media_brand_html） ----
   以前是灰底虚线「占位框」，看着像没做完；现在是品牌化排版封面：
   行业渐变底 + 左上类型标签 + 底部标题 + 右上角标。
   后台补传真实封面后，视图走 <img> 分支，这里的样式自动不再出现。 */
.media-brand{
  position:relative;
  width:100%;aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-4);
  color:var(--white);
}
.media-brand::before{
  /* 细斜纹纹理：给渐变加一点「材质」，避免大面积纯色发闷 */
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);
  pointer-events:none;
}
.media-brand__tag{
  position:absolute;top:var(--sp-3);left:var(--sp-3);
  padding:3px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  font-size:var(--fs-xs);letter-spacing:1px;
  backdrop-filter:blur(2px);
}
.media-brand__mark{
  position:absolute;top:var(--sp-3);right:var(--sp-3);
  font-size:var(--fs-xs);letter-spacing:2px;
  color:rgba(255,255,255,.55);
}
.media-brand__title{
  position:relative;
  font-size:clamp(15px,1.6vw,20px);
  line-height:var(--lh-module);
  font-weight:var(--fw-bold);
  text-shadow:0 1px 8px rgba(0,0,0,.25);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 五套品牌靛紫渐变（取自 --brand-indigo / --indigo-700/900 色系）：
   按标题散列错开，相邻卡片深浅不同调但同属品牌色系 */
.media-brand--v1{background:linear-gradient(135deg,#2F1F5C 0%,#5a4390 100%);}
.media-brand--v2{background:linear-gradient(135deg,#251848 0%,#4a3878 100%);}
.media-brand--v3{background:linear-gradient(135deg,#171B4A 0%,#3d4480 100%);}
.media-brand--v4{background:linear-gradient(135deg,#3B2A70 0%,#6a55a0 100%);}
.media-brand--v5{background:linear-gradient(135deg,#2a2050 0%,#503d85 100%);}
/* 幅面对齐各自的占位块：资讯卡 16:10，案例轮播 4:3 */
.news-card__media .media-brand{aspect-ratio:16/10;border-radius:0;}
.case-slide__media .media-brand{aspect-ratio:4/3;}

/* ---- 案例列表封面卡：上图下文（有封面时替代 logo 文字卡） ---- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
}
@media (max-width:860px){.case-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.case-grid{grid-template-columns:1fr;}}
.case-card{
  display:flex;flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.case-card .media-fill{aspect-ratio:16/10;border-radius:0;}
.case-card__name{
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--ink-900);
  line-height:var(--lh-module);
}

/* ---- 页脚二维码：占位块换成真实图片 ---- */
.qr-image{
  width:120px;
  height:120px;
  margin-top:var(--sp-3);
  border-radius:var(--radius);
  object-fit:cover;
  display:block;
  background:var(--indigo-700);
}

/* ---- 分页器 ---- */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-top:var(--sp-6);
}
.pager__info{font-size:var(--fs-sm);color:var(--text-muted);}
.pager__info b{color:var(--text-primary);}
.pager__list{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pager__gap{padding:0 4px;color:var(--text-muted);}
.pager__item{
  min-width:36px;
  height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--text-secondary);
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:border-color var(--transition-fast),color var(--transition-fast);
}
.pager__item:hover{border-color:var(--brand-indigo);color:var(--brand-indigo);}
.pager__item.is-current{
  background:var(--brand-indigo);
  border-color:var(--brand-indigo);
  color:var(--white);
  font-weight:var(--fw-semibold);
}
.pager__item.is-disabled{opacity:.45;pointer-events:none;}

/* ---- 富文本正文（后台编辑器产出），沿用原型排版尺度 ---- */
.c-imagetext__body ul{margin:0;padding-left:1.1em;}
.c-imagetext__body ul li{margin:6px 0;}

/* ---- 首屏：全幅铺开 + 科技感氛围背景 ----
   轮播不留边距、无圆角；暗调主视觉铺满整幅当背景，
   点阵网格 + 品牌渐变叠加出科技感，文字垂直居中。 */
.c-carousel--hero{padding:0;}
.c-carousel--hero .c-carousel__arrow{margin:0 18px;}
.hero-slide{
  position:relative;
  display:block;
  border-radius:0;
  overflow:hidden;
  background:var(--brand-indigo);
}
.hero-slide__inner{
  display:flex;
  align-items:center;
  height:100%;
}
/* 首屏去背景图：纯文字排版 + 氛围底（点阵/光晕），图位保留但隐藏便于随时恢复 */
.hero-slide__media{display:none;}
/* 氛围底：深紫渐变 + 右上金晕 + 右下紫晕 + 点阵网格（椭圆淡出），替代图片 */
.hero-slide{
  background:
    radial-gradient(1100px 560px at 82% 20%, rgba(244,192,70,.10), transparent 62%),
    radial-gradient(900px 520px at 70% 90%, rgba(90,67,144,.45), transparent 66%),
    linear-gradient(135deg,var(--brand-indigo) 0%,var(--indigo-900) 100%);
}
.hero-slide::before{
  content:'';position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 62% 85% at 74% 45%, #000 28%, transparent 76%);
  mask-image:radial-gradient(ellipse 62% 85% at 74% 45%, #000 28%, transparent 76%);
  pointer-events:none;
}
.hero-slide::after{content:none;}
/* 纯文字排版：大标题主导，金色装饰线引入，层级拉开 */
.hero-slide__text{
  position:relative;z-index:2;
  grid-column:auto;
  max-width:min(760px,68%);
  padding:var(--sp-7) 0;
}
.hero-slide__tag{
  display:inline-flex;align-items:center;gap:12px;
  font-size:var(--fs-sm);letter-spacing:4px;
  color:var(--brand-gold);
}
.hero-slide__tag::before{content:'';width:44px;height:2px;background:var(--brand-gold);}
.hero-slide__title{
  margin:var(--sp-4) 0 0;
  font-size:clamp(42px,5.4vw,80px);
  line-height:1.16;
  font-weight:var(--fw-bold);
  letter-spacing:.01em;
  color:var(--white);
}
.hero-slide__sub{
  margin:var(--sp-5) 0 0;
  max-width:34em;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.8;
  color:rgba(255,255,255,.72);
}
.hero-slide__cta{margin-top:var(--sp-6);}
@media (max-width:860px){
  .hero-slide__text{max-width:100%;}
  .hero-slide__title{font-size:clamp(34px,9vw,44px);}
  .hero-slide::before{display:none;}
}
/* 首屏箭头改浮层定位：不再占 grid 两侧列，主视觉才能真正铺满全宽 */
.c-carousel--hero .c-carousel__arrow{
  position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  margin:0;
}
.c-carousel--hero .c-carousel__arrow.is-prev{left:18px;}
.c-carousel--hero .c-carousel__arrow.is-next{right:18px;}
/* 轮播亚像素缝修复：位移取整误差会让相邻 slide 的边缘像素漏进视口
   （表现为文字区左侧一条 1px 浅色竖缝），左右各裁 1px 不可见区域即可 */
.c-carousel__viewport{clip-path:inset(0 1px);}