/* =============================================
   home-value section
   Figma 直抄：42:131 邊框 + 42:132 左眼鏡 mask + 42:136 大字 + 42:137 3 卡 + 42:159 chip
   設計稿基準：1440px desktop
   stage 高度：依 cards 660 + chip top 偏移 = 790px（含 chip 突出 60px）
   斷點：mobile <768 / tablet 768-1023 / desktop 1024-1439 / wide >=1440
   ============================================= */

.rusan-home-value {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
  color: var(--color-white);
  font-family: var(--font-zh);
  overflow: hidden;
}

/* === 桌機（>=1024） — Day 8.5 套 Banner 滿版邏輯：stage width:100% 內元素用 % 對齊 Figma 1440 比例
   1024-1439 由 page-home wrapper zoom 縮 + % 比例 → Figma 視覺一致
   ≥1440 zoom 1 + % 比例 → 滿版自然展開 === */
.rusan-home-value__stage {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  /* stage 高度：cards bottom (top 1314 + 660 + 80 cascading offset) - chip top 1104 = 950 */
  height: 950px;
}

/* 42:131 灰色裝飾邊框（Figma 1440 中 left:120 width:816 → 8.33% / 56.67%）
   Bug fix: Anna「灰色框位置不對」根因 partial 寫 calc(50%-192px)≈528 → 實際應 120 (差 408px) */
.rusan-home-value__decoframe {
  position: absolute;
  top: 150px;
  left: 8.33%;          /* 120/1440 */
  width: 56.67%;        /* 816/1440 */
  height: 780px;
  border: 20px solid var(--color-white-20);
  pointer-events: none;
}

/* 42:132 mask group — 整區左側裝飾 */
.rusan-home-value__mask-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rusan-home-value__mask {
  position: absolute;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.rusan-home-value__mask img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

/* 42:134 上層 png — opacity 0.9, mask size 735×750 */
/* Figma top 1020 → stage top 1020-1104=-84；left -380 */
.rusan-home-value__mask--top {
  width: 1322px;
  height: 882px;
  top: -84px;
  left: -380px;
  -webkit-mask-size: 735px 750px;
  mask-size: 735px 750px;
  -webkit-mask-position: 380px 144px;
  mask-position: 380px 144px;
}

.rusan-home-value__mask--top img {
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
}

/* 42:135 下層 png — Figma 真值 x:-50 y:918 (get_metadata 確認)
   Bug fix: Anna「主要圖的位置不對」根因 partial top:-50 → 實際 stage top = 918-1104 = -186 (差 136px) */
.rusan-home-value__mask--bottom {
  width: 785px;
  height: 1101px;
  top: -186px;
  left: -50px;
  -webkit-mask-size: 735px 750px;
  mask-size: 735px 750px;
  -webkit-mask-position: 50px 246px;
  mask-position: 50px 246px;
}

.rusan-home-value__mask--bottom img {
  object-fit: cover;
  object-position: bottom;
}

/* 42:159 chip — 核心價值 */
/* Figma top 1104 → stage top 0；left 0 */
.rusan-home-value__chip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  z-index: var(--z-content);
}

.rusan-home-value__chip-body {
  background: var(--color-blue-deep);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-12); /* 40 / pl 60 pr 40 */
}

.rusan-home-value__chip-title,
.rusan-home-value__chip-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6); /* 20 */
}

.rusan-home-value__chip-heading {
  font-family: var(--font-zh);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl); /* 40 */
  line-height: var(--leading-tight); /* 1.2 */
  color: var(--color-white);
  white-space: nowrap;
  margin: 0;
}

.rusan-home-value__chip-subtitle {
  font-family: var(--font-zh);
  font-weight: var(--weight-regular);
  font-size: var(--text-base); /* 18 */
  line-height: var(--leading-relaxed); /* 1.5 */
  color: var(--color-white);
  white-space: nowrap;
  margin: 0;
}

/* 42:165 切角 Vector 3 */
.rusan-home-value__chip-corner {
  position: relative;
  width: 60px;
  align-self: stretch;
  flex-shrink: 0;
}

.rusan-home-value__chip-corner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* 42:136 「the Value」大字（Figma 1440 中 left:615 → 42.71%） */
.rusan-home-value__display {
  position: absolute;
  top: 80px;
  left: 42.71%;         /* 615/1440 */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl); /* 60 */
  line-height: var(--leading-relaxed); /* 1.5 */
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  z-index: var(--z-content);
}

/* 42:137 cascading 3 卡 frame（Figma 1440 中 left:615 width:675 → 42.71% / 46.88%） */
.rusan-home-value__cards {
  position: absolute;
  top: 210px;
  left: 42.71%;         /* 615/1440 */
  width: 46.88%;        /* 675/1440 */
  height: 660px;
  z-index: var(--z-content);
}

.rusan-home-value__card {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10); /* 40 */
  width: 100%;            /* Day 8.5: cards 容器已 % 滿版，card 跟著拉滿 */
  height: 200px;
  padding: var(--spacing-12) var(--spacing-8); /* 60 / 30 */
  background-image: linear-gradient(106.504deg, rgb(0, 0, 0) 0%, rgb(51, 51, 51) 99.865%);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

/* cascading offset 維持 px（小偏移在大螢幕也夠明顯） */
.rusan-home-value__card--1 { top: 0;     left: 0; }
.rusan-home-value__card--2 { top: 230px; left: 40px; }
.rusan-home-value__card--3 { top: 460px; left: 80px; }

.rusan-home-value__card-icon {
  position: relative;
  flex-shrink: 0;
  width: var(--icon-lg); /* 80 */
  height: var(--icon-lg);
}

.rusan-home-value__card-icon-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rusan-home-value__card-icon-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rusan-home-value__card-content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6); /* 20 */
}

.rusan-home-value__card-heading {
  font-family: var(--font-zh);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl); /* 24 */
  line-height: 1.3;
  color: var(--color-white);
  width: 100%;
  margin: 0;
}

.rusan-home-value__card-text {
  font-family: var(--font-zh);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm); /* 16 */
  line-height: var(--leading-relaxed); /* 1.5 */
  color: var(--color-white-80);
  width: 100%;
  margin: 0;
}

/* === Day 8.5: 桌機 1024-1439 不再單獨寫 stage 寬 — 用 base rule width:100% + zoom 縮放 === */

/* === 平板 768-1023 — reflow（chip 在上 / 大字 / 卡片 stack） === */
@media (max-width: 1023px) and (min-width: 768px) {
  .rusan-home-value {
    padding: var(--spacing-16) var(--page-padding-tablet) var(--spacing-16); /* 80 32 80 */
  }

  .rusan-home-value__stage {
    width: 100%;
    max-width: 768px;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-10); /* 40 */
  }

  /* 邊框縮小一圈做為背景框 */
  .rusan-home-value__decoframe {
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 100%);
    height: calc(100% - 240px);
    border-width: 12px;
  }

  /* mask 縮小 */
  .rusan-home-value__mask--top {
    width: 800px;
    height: 600px;
    top: -40px;
    left: -300px;
    -webkit-mask-size: 500px 500px;
    mask-size: 500px 500px;
    -webkit-mask-position: 300px 100px;
    mask-position: 300px 100px;
  }

  .rusan-home-value__mask--bottom {
    width: 500px;
    height: 700px;
    top: 200px;
    left: -40px;
    -webkit-mask-size: 500px 500px;
    mask-size: 500px 500px;
    -webkit-mask-position: 40px 150px;
    mask-position: 40px 150px;
  }

  /* chip 改為相對排版 */
  .rusan-home-value__chip {
    position: relative;
    align-self: flex-start;
  }

  .rusan-home-value__chip-body {
    padding: var(--spacing-8) var(--spacing-10) var(--spacing-8) var(--spacing-10); /* 30 40 */
  }

  .rusan-home-value__chip-heading { font-size: var(--text-2xl); /* 30 */ }
  .rusan-home-value__chip-subtitle { font-size: var(--text-sm); /* 16 */ }
  .rusan-home-value__chip-corner { width: 40px; }

  /* 大字 */
  .rusan-home-value__display {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-end;
    font-size: var(--text-4xl); /* 48 */
  }

  /* cards reflow — 改為垂直 stack，cascading offset 縮為 20 */
  .rusan-home-value__cards {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6); /* 20 */
  }

  .rusan-home-value__card,
  .rusan-home-value__card--1,
  .rusan-home-value__card--2,
  .rusan-home-value__card--3 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 600px;
    height: auto;
    min-height: 180px;
    padding: var(--spacing-10) var(--spacing-8); /* 40 30 */
  }

  .rusan-home-value__card--2 { align-self: center; }
  .rusan-home-value__card--3 { align-self: flex-end; }
}

/* === 手機 <768 — reflow（左側裝飾隱藏） === */
@media (max-width: 767px) {
  .rusan-home-value {
    padding: var(--spacing-12) var(--page-padding-mobile) var(--spacing-12); /* 60 16 60 */
  }

  .rusan-home-value__stage {
    width: 100%;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-8); /* 30 */
  }

  /* 左側裝飾 hide */
  .rusan-home-value__decoframe,
  .rusan-home-value__mask-group {
    display: none;
  }

  /* chip 改為相對排版 */
  .rusan-home-value__chip {
    position: relative;
    align-self: flex-start;
  }

  .rusan-home-value__chip-body {
    padding: var(--spacing-7) var(--spacing-8) var(--spacing-7) var(--spacing-8); /* 24 30 */
  }

  .rusan-home-value__chip-heading {
    font-size: var(--text-2xl); /* 30 */
    white-space: normal;
  }

  .rusan-home-value__chip-subtitle {
    font-size: var(--text-xs); /* 14 */
    white-space: normal;
  }

  .rusan-home-value__chip-corner { width: 30px; }

  /* 大字 */
  .rusan-home-value__display {
    position: relative;
    top: auto;
    left: auto;
    font-size: var(--text-3xl); /* 40 */
    align-self: center;
  }

  /* cards 全寬 stack，無 cascading */
  .rusan-home-value__cards {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5); /* 16 */
  }

  .rusan-home-value__card,
  .rusan-home-value__card--1,
  .rusan-home-value__card--2,
  .rusan-home-value__card--3 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: var(--spacing-8) var(--spacing-6); /* 30 20 */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-5); /* 16 */
  }

  .rusan-home-value__card-icon {
    width: 56px;
    height: 56px;
  }

  .rusan-home-value__card-content {
    align-items: flex-start;
    gap: var(--spacing-3); /* 12 */
  }

  .rusan-home-value__card-heading { font-size: var(--text-lg); /* 20 */ }
  .rusan-home-value__card-text { font-size: var(--text-xs); /* 14 */ }
}