/*
===============================================================================
YUBEEN OPTICS — THERMAL RANGE HERO STYLESHEET
===============================================================================

样式版本：
v1.7.0

最后修改日期：
2026-08-04

本版核心目标：
1. 消除浏览器缩小时产生的大面积底部空白。
2. 使用透明Header安全区代替100svh。
3. 让第一屏高度始终由真实内容决定。
4. 保留桌面端产品浅弧设计。
5. 保留浅色产品卡片。
6. 保持平板和移动端稳定响应。

命名规则：
所有样式使用ybn-tr17-前缀，
避免与v1.1至v1.6样式发生冲突。
===============================================================================
*/


/*
===============================================================================
01. ROOT VARIABLES AND BASE STYLES
根节点变量与基础样式

最重要变量：
--ybn-tr17-header-clearance

用途：
避让透明覆盖式网站Header。

重要：
本根节点不再设置min-height: 100svh。
===============================================================================
*/

.ybn-tr17 {
  --ybn-tr17-header-clearance: 118px;

  --ybn-tr17-red: #ed2228;

  --ybn-tr17-page-bg: #07080b;
  --ybn-tr17-page-bg-soft: #0b0c10;

  --ybn-tr17-white: #f7f7f8;
  --ybn-tr17-muted: #a0a2aa;

  --ybn-tr17-card-top: #fdfcf9;
  --ybn-tr17-card-middle: #f2f1ed;
  --ybn-tr17-card-bottom: #e5e4df;

  --ybn-tr17-card-text: #15161a;
  --ybn-tr17-card-muted: #65676e;
  --ybn-tr17-card-line: rgba(21, 22, 26, 0.13);

  --ybn-tr17-container-width: 1540px;
  --ybn-tr17-card-radius: 24px;

  position: relative;
  isolation: isolate;

  width: 100%;

  /*
  v1.7.0关键修复：

  不设置100vh或100svh。
  Section高度完全由内部真实内容决定。
  */
  height: auto;
  min-height: 0;

  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;

  color: var(--ybn-tr17-white);

  background:
    linear-gradient(
      180deg,
      var(--ybn-tr17-page-bg-soft) 0%,
      var(--ybn-tr17-page-bg) 60%,
      #050609 100%
    );

  font-family: inherit;
}


/* 统一内部元素盒模型 */
.ybn-tr17 *,
.ybn-tr17 *::before,
.ybn-tr17 *::after {
  box-sizing: border-box;
}


/* 清除主题可能添加的链接样式 */
.ybn-tr17 a {
  color: inherit;
  text-decoration: none;
}


/*
===============================================================================
02. DECORATIVE BACKGROUND
装饰背景
===============================================================================
*/

.ybn-tr17-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  overflow: hidden;
  pointer-events: none;
}


/* 左右两侧红色柔光 */
.ybn-tr17-background__glow {
  position: absolute;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  opacity: 0.12;
  filter: blur(135px);
}


.ybn-tr17-background__glow--left {
  left: -440px;
  top: 22%;

  background: #aa151b;
}


.ybn-tr17-background__glow--right {
  right: -440px;
  bottom: -330px;

  background: #741016;
}


/* 极轻工程网格 */
.ybn-tr17-background__grid {
  position: absolute;
  inset: 0;

  opacity: 0.08;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    );

  background-size: 56px 56px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 20%,
      #000 90%,
      transparent
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 20%,
      #000 90%,
      transparent
    );
}


/*
===============================================================================
03. MAIN CONTENT CONTAINER
主要内容容器

顶部：
避让透明Header。

底部：
只保留固定响应式安全距离。

不再：
- 撑满视口高度
- 垂直居中
- 为剩余视口空间分配空白
===============================================================================
*/

.ybn-tr17-container {
  width:
    min(
      100%,
      var(--ybn-tr17-container-width)
    );

  margin-inline: auto;

  padding:
    var(--ybn-tr17-header-clearance)
    clamp(26px, 3.5vw, 54px)
    clamp(30px, 2.8vw, 43px);

  display: block;
}


/*
===============================================================================
04. CATEGORY HEADER
产品分类标题区
===============================================================================
*/

.ybn-tr17-header {
  position: relative;
  z-index: 4;

  max-width: 750px;

  margin-bottom:
    clamp(12px, 1.3vw, 19px);
}


/* Current Range / 4 Models */
.ybn-tr17-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;

  margin:
    0
    0
    10px;

  color: var(--ybn-tr17-red);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}


.ybn-tr17-eyebrow__line {
  width: 27px;
  height: 1px;

  background: currentColor;
}


.ybn-tr17-eyebrow__separator {
  color: rgba(255, 255, 255, 0.30);
}


/* 页面H1，固定两行 */
.ybn-tr17-heading {
  margin: 0;

  color: var(--ybn-tr17-white);

  font-size:
    clamp(42px, 3.85vw, 62px);

  font-weight: 700;
  line-height: 0.91;
  letter-spacing: -0.055em;
}


.ybn-tr17-heading > span {
  display: block;
}


/* H1下方页面说明 */
.ybn-tr17-introduction {
  max-width: 625px;

  margin:
    clamp(14px, 1.3vw, 18px)
    0
    0;

  color: var(--ybn-tr17-muted);

  font-size:
    clamp(13px, 0.95vw, 15px);

  line-height: 1.57;
}


/*
===============================================================================
05. PRODUCT ARC STAGE
产品浅弧舞台

底部只保留少量空间：
- 卡片阴影
- Hover上移
- 与下一屏的视觉分隔

不再为视口剩余高度预留空间。
===============================================================================
*/

.ybn-tr17-stage {
  position: relative;
  z-index: 3;

  width: 100%;

  padding-bottom: 8px;
}


/*
主红色弧线。

只用于连接四张产品卡片的视觉关系。
*/
.ybn-tr17-stage::before {
  content: "";

  position: absolute;
  z-index: 0;

  left: 5%;
  right: 5%;
  top: 37px;

  height: 122px;

  border-top:
    1px solid
    rgba(237, 34, 40, 0.20);

  border-radius:
    50% 50% 0 0 /
    100% 100% 0 0;

  pointer-events: none;
}


/* 第二条极弱辅助弧线 */
.ybn-tr17-stage::after {
  content: "";

  position: absolute;
  z-index: 0;

  left: 10%;
  right: 10%;
  top: 52px;

  height: 105px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.028);

  border-radius:
    50% 50% 0 0 /
    100% 100% 0 0;

  pointer-events: none;
}


/*
===============================================================================
06. PRODUCT GRID
产品网格
===============================================================================
*/

.ybn-tr17-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(22px, 1.9vw, 32px);

  align-items: start;

  width: 100%;
}


/*
===============================================================================
07. PRODUCT CARD WRAPPER
产品卡片外层

Wrapper负责：
1. 卡片真实下沉。
2. 初始旋转。
3. 初始缩放。

真实下沉通过padding-top实现，
因此会被CSS Grid计入实际高度。
===============================================================================
*/

.ybn-tr17-card {
  --ybn-tr17-drop: 0px;
  --ybn-tr17-rotate: 0deg;
  --ybn-tr17-scale: 1;

  min-width: 0;

  padding-top:
    var(--ybn-tr17-drop);

  transform:
    rotate(var(--ybn-tr17-rotate))
    scale(var(--ybn-tr17-scale));

  transform-origin:
    50% 100%;
}


/* 最左侧卡片 */
.ybn-tr17-card--outer-left {
  --ybn-tr17-drop: 44px;
  --ybn-tr17-rotate: -1.35deg;
  --ybn-tr17-scale: 0.95;
}


/* 左侧中心卡片 */
.ybn-tr17-card--inner-left {
  --ybn-tr17-drop: 0px;
  --ybn-tr17-rotate: -0.18deg;
  --ybn-tr17-scale: 1;
}


/* 右侧中心卡片 */
.ybn-tr17-card--inner-right {
  --ybn-tr17-drop: 0px;
  --ybn-tr17-rotate: 0.18deg;
  --ybn-tr17-scale: 1;
}


/* 最右侧卡片 */
.ybn-tr17-card--outer-right {
  --ybn-tr17-drop: 44px;
  --ybn-tr17-rotate: 1.35deg;
  --ybn-tr17-scale: 0.95;
}


/*
===============================================================================
08. PRODUCT CARD LINK
产品卡片主体
===============================================================================
*/

.ybn-tr17-card__link {
  position: relative;

  width: 100%;

  /*
  使用响应式固定范围控制卡片高度。
  不依赖视口高度。
  */
  height:
    clamp(290px, 20vw, 335px);

  display: flex;
  flex-direction: column;

  padding:
    clamp(16px, 1.25vw, 21px);

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius:
    var(--ybn-tr17-card-radius);

  color:
    var(--ybn-tr17-card-text);

  background:
    radial-gradient(
      circle at 50% 43%,
      #ffffff 0%,
      var(--ybn-tr17-card-top) 27%,
      var(--ybn-tr17-card-middle) 63%,
      var(--ybn-tr17-card-bottom) 100%
    );

  box-shadow:
    0 23px 47px
      rgba(0, 0, 0, 0.27),
    inset 0 1px 0
      rgba(255, 255, 255, 0.93);

  transition:
    transform 240ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}


/* 卡片表面高光扫过效果 */
.ybn-tr17-card__link::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  opacity: 0;

  background:
    linear-gradient(
      112deg,
      transparent 18%,
      rgba(255, 255, 255, 0.65) 47%,
      transparent 74%
    );

  transform:
    translateX(-85%);

  pointer-events: none;

  transition:
    transform 720ms ease,
    opacity 240ms ease;
}


/*
Hover只向上移动卡片主体。

不改变：
- Wrapper旋转
- Wrapper缩放
- Wrapper真实下沉距离
*/
.ybn-tr17-card__link:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(237, 34, 40, 0.52);

  box-shadow:
    0 30px 65px
      rgba(0, 0, 0, 0.35),
    0 0 0 1px
      rgba(237, 34, 40, 0.10),
    inset 0 1px 0
      rgba(255, 255, 255, 0.96);
}


.ybn-tr17-card__link:hover::before {
  opacity: 0.53;

  transform:
    translateX(88%);
}


/* 键盘聚焦状态 */
.ybn-tr17-card__link:focus-visible {
  outline:
    3px solid
    var(--ybn-tr17-red);

  outline-offset: 5px;
}


/*
===============================================================================
09. CARD TOP AREA
产品编号和箭头
===============================================================================
*/

.ybn-tr17-card__top {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


.ybn-tr17-card__number {
  color:
    rgba(21, 22, 26, 0.49);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
}


.ybn-tr17-card__arrow {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(21, 22, 26, 0.15);

  border-radius: 50%;

  color:
    var(--ybn-tr17-card-text);

  background:
    rgba(255, 255, 255, 0.47);

  font-size: 13px;

  transition:
    color 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    transform 200ms ease;
}


.ybn-tr17-card__link:hover
.ybn-tr17-card__arrow {
  color: #ffffff;

  border-color:
    var(--ybn-tr17-red);

  background:
    var(--ybn-tr17-red);

  transform:
    rotate(45deg);
}


/*
===============================================================================
10. PRODUCT VISUAL AREA
产品图片区域
===============================================================================
*/

.ybn-tr17-card__visual {
  position: relative;
  z-index: 2;

  flex: 1;
  min-height: 0;

  display: grid;
  place-items: center;

  padding:
    clamp(8px, 0.9vw, 14px)
    0
    clamp(6px, 0.7vw, 11px);

  transform:
    translateY(-10px);
}


/* 产品图后方柔和红色光晕 */
.ybn-tr17-card__halo {
  position: absolute;

  width: 73%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(237, 34, 40, 0.10) 0%,
      rgba(237, 34, 40, 0.034) 46%,
      transparent 72%
    );

  filter: blur(8px);

  transform:
    scaleX(1.28);

  pointer-events: none;

  transition:
    transform 350ms ease;
}


.ybn-tr17-card__link:hover
.ybn-tr17-card__halo {
  transform:
    scaleX(1.39)
    scaleY(1.07);
}


/* 透明产品图片 */
.ybn-tr17-card__image {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 420px;
  max-height:
    clamp(158px, 12.5vw, 192px);

  object-fit: contain;
  object-position: center;

  pointer-events: none;

  filter:
    brightness(1.11)
    contrast(0.98)
    saturate(0.92)
    drop-shadow(
      0 17px 15px
      rgba(0, 0, 0, 0.22)
    );

  transform:
    scale(1.01);

  transition:
    transform
      350ms
      cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 300ms ease;
}


.ybn-tr17-card__link:hover
.ybn-tr17-card__image {
  transform:
    scale(1.065);

  filter:
    brightness(1.14)
    contrast(1)
    saturate(0.94)
    drop-shadow(
      0 21px 19px
      rgba(0, 0, 0, 0.25)
    );
}


/*
===============================================================================
11. CARD BOTTOM AREA
产品型号与入口
===============================================================================
*/

.ybn-tr17-card__bottom {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 13px;

  padding-top:
    clamp(11px, 0.9vw, 15px);

  border-top:
    1px solid
    var(--ybn-tr17-card-line);
}


.ybn-tr17-card__name {
  margin: 0;

  color:
    var(--ybn-tr17-card-text);

  font-size:
    clamp(21px, 1.55vw, 28px);

  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
}


.ybn-tr17-card__action {
  flex: 0 0 auto;

  padding-bottom: 2px;

  color:
    var(--ybn-tr17-card-muted);

  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  transition:
    color 200ms ease;
}


.ybn-tr17-card__link:hover
.ybn-tr17-card__action {
  color:
    var(--ybn-tr17-red);
}


/*
===============================================================================
12. EXTRA-WIDE OR ZOOMED-OUT VIEWPORT
超宽屏或浏览器缩小状态

当CSS视口宽度非常大时：
- 内容最大宽度仍限制在1540px。
- Section高度仍由内容决定。
- 不会按照超大视口高度继续向下撑开。
===============================================================================
*/

@media (min-width: 1700px) {

  .ybn-tr17-container {
    /*
    超宽视口中稍微缩短底部Padding，
    让下一屏更快进入可视区域。
    */
    padding-bottom: 28px;
  }


  .ybn-tr17-stage {
    padding-bottom: 5px;
  }

}


/*
===============================================================================
13. MEDIUM DESKTOP
中等桌面和浏览器缩放适配
===============================================================================
*/

@media (max-width: 1320px) {

  .ybn-tr17 {
    --ybn-tr17-header-clearance: 112px;
  }


  .ybn-tr17-container {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 36px;
  }


  .ybn-tr17-card--outer-left,
  .ybn-tr17-card--outer-right {
    --ybn-tr17-drop: 36px;
  }


  .ybn-tr17-card__link {
    height: 285px;

    padding: 16px;
  }


  .ybn-tr17-card__image {
    max-height: 158px;
  }


  .ybn-tr17-card__name {
    font-size: 22px;
  }

}


/*
===============================================================================
14. TABLET AND HIGH BROWSER ZOOM
平板与高浏览器缩放

低于1160px后：
1. 产品区改为2列2行。
2. 隐藏弧形线。
3. 删除卡片下沉、旋转和缩放。
4. 第一屏继续按真实内容高度排列。
===============================================================================
*/

@media (max-width: 1160px) {

  .ybn-tr17 {
    --ybn-tr17-header-clearance: 108px;
  }


  .ybn-tr17-stage::before,
  .ybn-tr17-stage::after {
    display: none;
  }


  .ybn-tr17-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px;
  }


  .ybn-tr17-card,
  .ybn-tr17-card--outer-left,
  .ybn-tr17-card--inner-left,
  .ybn-tr17-card--inner-right,
  .ybn-tr17-card--outer-right {
    --ybn-tr17-drop: 0px;
    --ybn-tr17-rotate: 0deg;
    --ybn-tr17-scale: 1;

    padding-top: 0;

    transform: none;
  }


  .ybn-tr17-card__link {
    height: 330px;
  }


  .ybn-tr17-card__visual {
    transform:
      translateY(-7px);
  }


  .ybn-tr17-card__image {
    max-height: 205px;
  }


  .ybn-tr17-stage {
    padding-bottom: 4px;
  }

}


/*
===============================================================================
15. MOBILE
移动端

低于767px：
1. 调整透明Header安全距离。
2. 产品网格改为横向Scroll Snap。
3. Section仍然按真实内容高度排列。
===============================================================================
*/

@media (max-width: 767px) {

  .ybn-tr17 {
    --ybn-tr17-header-clearance: 92px;
  }


  .ybn-tr17-container {
    padding:
      var(--ybn-tr17-header-clearance)
      0
      30px;
  }


  .ybn-tr17-header {
    width: 100%;

    margin-bottom: 20px;

    padding-inline: 18px;
  }


  .ybn-tr17-eyebrow {
    margin-bottom: 9px;

    font-size: 8px;
  }


  .ybn-tr17-heading {
    font-size:
      clamp(38px, 11.5vw, 52px);

    line-height: 0.92;
  }


  .ybn-tr17-introduction {
    max-width: 510px;

    margin-top: 14px;

    font-size: 13px;
  }


  .ybn-tr17-stage {
    padding-bottom: 0;
  }


  /*
  手机端横向产品浏览。
  */
  .ybn-tr17-grid {
    display: grid;

    grid-template-columns: none;

    grid-auto-flow: column;

    grid-auto-columns:
      min(84vw, 350px);

    gap: 15px;

    overflow-x: auto;
    overflow-y: visible;

    padding:
      0
      8vw
      18px;

    scroll-snap-type:
      x mandatory;

    scroll-padding-inline:
      8vw;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }


  .ybn-tr17-grid::-webkit-scrollbar {
    display: none;
  }


  .ybn-tr17-card,
  .ybn-tr17-card--outer-left,
  .ybn-tr17-card--inner-left,
  .ybn-tr17-card--inner-right,
  .ybn-tr17-card--outer-right {
    --ybn-tr17-drop: 0px;
    --ybn-tr17-rotate: 0deg;
    --ybn-tr17-scale: 1;

    padding-top: 0;

    transform: none;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


  .ybn-tr17-card__link {
    height: 340px;

    border-radius: 22px;
  }


  .ybn-tr17-card__visual {
    transform:
      translateY(-7px);
  }


  .ybn-tr17-card__image {
    max-height: 200px;
  }


  .ybn-tr17-card__name {
    font-size: 27px;
  }

}


/*
===============================================================================
16. SMALL MOBILE
小尺寸手机
===============================================================================
*/

@media (max-width: 430px) {

  .ybn-tr17 {
    --ybn-tr17-header-clearance: 86px;
  }


  .ybn-tr17-heading {
    font-size:
      clamp(37px, 11.5vw, 48px);
  }


  .ybn-tr17-grid {
    grid-auto-columns:
      min(86vw, 340px);

    padding-left: 7vw;
    padding-right: 7vw;

    scroll-padding-inline: 7vw;
  }


  .ybn-tr17-card__link {
    height: 330px;

    padding: 18px;
  }


  .ybn-tr17-card__image {
    max-height: 188px;
  }

}


/*
===============================================================================
17. REDUCED MOTION
减少动态效果无障碍支持
===============================================================================
*/

@media (prefers-reduced-motion: reduce) {

  .ybn-tr17-card__link,
  .ybn-tr17-card__link::before,
  .ybn-tr17-card__image,
  .ybn-tr17-card__halo,
  .ybn-tr17-card__arrow {
    transition-duration:
      1ms !important;
  }

}