/* 手写的修补样式，所有页面最后加载。
   放两类东西：旧站本来就有的版式毛病；公共页头页脚下的页面（商店、购物车、404）要补的样式。
   导入器生成的 assets/css/<站>/ 不要手改，改不动的才写到这里。每条写明修的是什么。 */

/* ── 关于页首屏（旧站就有）──
   产品图原来按 min(62vw, 820px) 的宽度贴在 80% 的位置：屏幕一宽，图右边就空出一条浅色底，
   图的下沿又压在首屏底部那行小字上。改成：图贴右边，是一个和首屏等高的方块，下沿正好落在那行小字的分隔线上。 */
@media (min-width: 901px) {
  .about-hero {
    --ss-hero-strip: 60px;   /* 底部那行小字连同分隔线的高度：22 + 21 + 16 + 1 */
    --ss-hero-photo: calc(max(680px, min(84svh, 860px)) - var(--ss-hero-strip));
  }
  .about-hero::before {
    inset: 0 0 var(--ss-hero-strip) auto;
    width: min(var(--ss-hero-photo), 64vw);
    background-position: 72% center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
  }
  .about-hero .hero-index { line-height: 21px; }
}

/* ── 动态页首屏（旧站就有）──
   背景是一张带字的活动海报，只盖了一层半透明的浅绿，海报上的字和标题叠在一起。
   改成：海报虚化后只当底色用，文字压在上面。 */
/* 科普栏目页的首屏也是 header.hero，所以用动态页才有的 .hero-panel 认页面 */
header.hero:has(.hero-panel) { position: relative; overflow: hidden; isolation: isolate; background: #F1F8F4; }
header.hero:has(.hero-panel)::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -40px;
  background: url("../img/news-cover-001-shenzhen-exhibition.jpg") center / cover no-repeat;
  filter: blur(28px) saturate(1.1);
}
header.hero:has(.hero-panel)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(120deg, rgba(216, 243, 220, 0.86), rgba(248, 255, 248, 0.72));
}

/* ── 动态页：没有封面图的大卡（搬迁造成）──
   天猫榜单那条的封面图按口径不对外，导入时去掉了；大卡还按「左图右文」两栏排，文字被挤在左边窄栏里。 */
.update-card.featured:not(:has(> .update-cover)) { display: block; }
.update-card.featured:not(:has(> .update-cover)) .update-body { max-width: 860px; }

/* ── 首页研究卡（搬迁造成）──
   原来三张卡排三栏，按口径撤掉一张后剩两张靠左、右边空一栏。两张时改成居中的两栏。 */
@media (min-width: 901px) {
  .research-grid:has(> .research-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 手机菜单的链接（英文站旧站就有）──
   英文站首页的样式里没有 .mobile-menu a 这一条，菜单是浏览器默认的蓝色下划线链接。照中文站的写法补上。 */
.mobile-menu a {
  color: var(--green-mid);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.mobile-menu a:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .mobile-menu a { min-height: 46px; display: flex; align-items: center; }
}

/* ── 公共页头页脚下的页面（商店、购物车、404）──
   内容很少时页脚会浮在屏幕中间，下面露出一截空白。给正文一个最小高度。 */
.ss-generic { min-height: calc(100vh - 420px); min-height: calc(100svh - 420px); }
@media (max-width: 900px) {
  .ss-generic { padding-top: 96px; }
}

/* ── 科普栏目页首屏（旧站就有）──
   首屏的文字和右边的栏目卡片贴着屏幕两边排，下面各段却是 1180px 的版心；宽屏上首屏和正文对不齐。
   让首屏内容也收在版心里，背景照旧铺满。 */
@media (min-width: 1280px) {
  header.hero:has(.science-map) {
    padding-left: max(48px, calc((100% - 1180px) / 2));
    padding-right: max(48px, calc((100% - 1180px) / 2));
  }
}

/* ── FAQ 页首屏（旧站就有）──
   同上：首屏文字按 6vw 贴左，正文是 1180px 的版心，宽屏上左边线对不齐。 */
main:has(> .content .faq-list) > .hero {
  padding-left: max(6vw, calc((100% - 1180px) / 2));
  padding-right: max(6vw, calc((100% - 1180px) / 2));
}