/* =============================================================
   wp-rusan — 首頁 光學產品線 Section
   Figma: 42:266 整區（1440×1098 at y:3063）
   桌機 1440 絕對定位完整對齊 Figma；1024 zoom；768 2 col；<768 1 col
   ============================================================= */

.rusan-home-products {
  /* Day 8.6 套 Banner 滿版邏輯：拔 max-width 1440，內元素用 left:60 / right:60 邊距 */
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--color-bg-primary);
  /* Figma 整區 mask 高度 1098px，加 chip 上緣突出 */
  height: 1098px;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  font-family: var(--font-en);
}

/* === 42:268 整區眼鏡背景（mask + 主圖）— Day 8.6 滿版 stretch === */
.rusan-home-products__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.rusan-home-products__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === 42:269 漸變 overlay — Day 6.5 v2 用 Anna 貼的 gradient pattern 反向
   做下方 fade to dark 讓主圖底部自然順接卡片區（避免硬切） === */
.rusan-home-products__overlay-grad {
  /* Day 8.6: 拔 1440 寫死，滿版 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 519px;
  background: linear-gradient(170deg, rgba(17, 17, 17, 0) 17.31%, #111 83.22%);
  z-index: 2;
  pointer-events: none;
}
.rusan-home-products__overlay-grad-disabled {
  position: absolute;
  left: 0;
  width: 1440px;
  height: 519px;
  /* bottom:2307 相對 4365 高度 → section 內 top = 1098 - 519 - (2307 - (1440 - 1098))? 簡化用 bottom 對齊 mask 區域底 */
  bottom: calc(1098px - 519px - 0px); /* 切 mask 底向上 519 */
  top: auto;
  background: linear-gradient(to bottom, rgba(12, 14, 24, 0) 0%, #0c0e18 44.316%);
  -webkit-mask-position: 0 -592px;
          mask-position: 0 -592px;
  -webkit-mask-size: 1440px 1098px;
          mask-size: 1440px 1098px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* === 42:270 上緣黑色漸變 — Day 6.5 Anna 反饋「黑色遮罩很不自然」先移除 === */
.rusan-home-products__overlay-top {
  display: none;
}
.rusan-home-products__overlay-top-disabled {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 300px;
  /* Figma 真值（Anna 確認 colors panel）：linear-gradient(170deg, #111 17.31%, transparent 83.22%) */
  background-image: linear-gradient(170deg, #111 17.31%, rgba(17, 17, 17, 0) 83.22%);
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 1440px 1098px;
          mask-size: 1440px 1098px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* === 42:323 chip「光學產品線」=== */
/* Figma 真值 top:60，剛好避開 sticky header (72)；改 0 會被 header 蓋住 */
.rusan-home-products__chip {
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
  align-items: stretch;
  -webkit-mask-position: 0 -60px;
          mask-position: 0 -60px;
  -webkit-mask-size: 1440px 1098px;
          mask-size: 1440px 1098px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 5;
}
.rusan-home-products__chip-body {
  background: var(--color-blue-deep);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 40px 40px 60px;
}
.rusan-home-products__chip-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rusan-home-products__chip-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--color-white);
  white-space: nowrap;
}
.rusan-home-products__chip-heading {
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl); /* 40 */
  line-height: var(--leading-tight);
  margin: 0;
}
.rusan-home-products__chip-subtitle {
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base); /* 18 */
}
.rusan-home-products__chip-subtitle p {
  margin: 0;
  line-height: var(--leading-relaxed);
}
.rusan-home-products__chip-corner {
  width: 60px;
  align-self: stretch;
  position: relative;
}
.rusan-home-products__chip-corner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* === 42:322 大字「the Products」=== */
/* Figma: top:3485 → section 內 422; left:60 */
.rusan-home-products__big-word {
  position: absolute;
  top: 422px;
  left: 60px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl); /* 60 */
  line-height: var(--leading-relaxed);
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-mask-position: -60px -422px;
          mask-position: -60px -422px;
  -webkit-mask-size: 1440px 1098px;
          mask-size: 1440px 1098px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 6;
}

/* === Rows（兩排卡片）=== */
/* row 1: top:3595 → 532; left:60; w:645  */
/* row 2: top:3655 → 592; left:735; w:645 */
.rusan-home-products__row {
  /* Day 8.6: row 寬度自適應，60 邊距 + 中線 30 gap（Banner 邏輯）*/
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 7;
  /* Bug fix: Anna 反饋「圖片跑掉」根因 — partial inline mask-image 把整 row（含卡片內圖）剪成眼鏡剪影；
     mask 應該只用在 42:268 整區背景圖，不該套到 row/chip/big-word */
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.rusan-home-products__row--left {
  top: 532px;
  left: 60px;
  right: calc(50% + 15px);   /* 中線右側 +15 = gap 30 一半 */
}
.rusan-home-products__row--right {
  top: 592px;
  left: calc(50% + 15px);    /* 中線右側 +15 對稱 */
  right: 60px;
}

/* Bug fix: 同上，chip 跟 big-word 不該被 mask
   Day 6.5 Anna 反饋「overlay 太深」根因 — overlay-top/grad 也不該拔 mask（Figma 設計就用 mask 限定眼鏡形狀範圍）
   恢復 overlay 的 mask，只拔 chip/big-word 的 mask */
.rusan-home-products__chip,
.rusan-home-products__big-word {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* === Card === */
.rusan-home-products__card {
  width: 100%;
  background: var(--color-black);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 30px;
  overflow: hidden;
}
.rusan-home-products__card-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

/* === Icon mask group（卡內 150×149） === */
.rusan-home-products__icon-wrap {
  position: relative;
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  line-height: 0;
  flex-shrink: 0;
}
.rusan-home-products__icon {
  position: relative;
  -webkit-mask-size: 150px 149px;
          mask-size: 150px 149px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.rusan-home-products__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  max-width: none;
}
/* 第 0 卡（安全眼鏡）h:177 w:237 mask -44 -16 */
.rusan-home-products__icon--0 {
  grid-column: 1; grid-row: 1;
  width: 237px; height: 177px;
  margin-left: -44px; margin-top: -16px;
  -webkit-mask-position: 44px 16px;
          mask-position: 44px 16px;
}
/* 第 1 卡 h:177.452 w:237 mask -47 -14.226 */
.rusan-home-products__icon--1 {
  grid-column: 1; grid-row: 1;
  width: 237px; height: 177.452px;
  margin-left: -47px; margin-top: -14.23px;
  -webkit-mask-position: 47px 14.226px;
          mask-position: 47px 14.226px;
}
/* 第 2 卡 h:149 w:199 mask -28 0 */
.rusan-home-products__icon--2 {
  grid-column: 1; grid-row: 1;
  width: 199px; height: 149px;
  margin-left: -28px; margin-top: 0;
  -webkit-mask-position: 28px 0;
          mask-position: 28px 0;
}
/* 第 3 卡 主圖 h:149 w:199 mask -28 0 */
.rusan-home-products__icon--3 {
  grid-column: 1; grid-row: 1;
  width: 199px; height: 149px;
  margin-left: -28px; margin-top: 0;
  -webkit-mask-position: 28px 0;
          mask-position: 28px 0;
}
/* 第 3 卡 ABL alt 圖 h:229 w:183 mask 0 42 */
.rusan-home-products__icon--alt {
  grid-column: 1; grid-row: 1;
  width: 183px; height: 229px;
  margin-left: 0; margin-top: -42px;
  -webkit-mask-position: 0 42px;
          mask-position: 0 42px;
}

/* === Card body / content === */
.rusan-home-products__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  align-self: stretch;
}
.rusan-home-products__content-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.rusan-home-products__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.rusan-home-products__card-heading {
  margin: 0;
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl); /* 24 */
  line-height: var(--leading-normal);
  color: var(--color-white);
  width: 100%;
}
.rusan-home-products__card-text {
  margin: 0;
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm); /* 16 */
  line-height: var(--leading-relaxed);
  color: var(--color-white-80);
  width: 100%;
}

/* === Actions / Button === */
.rusan-home-products__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.rusan-home-products__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.rusan-home-products__btn:hover {
  opacity: 0.8;
}
.rusan-home-products__btn-label {
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-blue-medium);
  white-space: nowrap;
}
.rusan-home-products__chevron {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  overflow: hidden;
}
/* Day 6.5 Anna 反饋「安全眼鏡系列探索右邊箭頭壞了」— svg width="100%" 覆蓋 inset → render 成 default size 變形
   修：固定 px size = Vector2.svg viewBox 6.7×11.62 + 居中 */
.rusan-home-products__chevron img {
  position: absolute;
  display: block;
  width: 6.7px;
  height: 11.62px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}

/* =============================================================
   RWD
   ============================================================= */

/* Day 8.6: ≥1440 不再寫 max-width 1440；1024-1439 由 page-home.php zoom JS 統一縮放（拔 transform:scale 避免重複縮）*/

/* Tablet 768–1023：解絕對定位，2 cols flow */
@media (max-width: 1023px) {
  .rusan-home-products {
    height: auto;
    padding: 0 0 80px 0;
    transform: none;
    width: 100%;
    max-width: 100%;
  }
  .rusan-home-products__bg,
  .rusan-home-products__overlay-grad,
  .rusan-home-products__overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .rusan-home-products__bg {
    height: 100%;
  }
  .rusan-home-products__bg img { object-fit: cover; opacity: 0.25; }
  .rusan-home-products__overlay-grad {
    background: linear-gradient(to bottom, rgba(12,14,24,0) 0%, #0c0e18 60%);
  }
  .rusan-home-products__overlay-top {
    height: 200px;
    background-image: linear-gradient(180deg, rgb(17,17,17) 0%, rgba(17,17,17,0) 100%);
  }

  .rusan-home-products__chip {
    position: relative;
    top: auto;
    left: auto;
    -webkit-mask-image: none;
            mask-image: none;
    margin: 60px 0 40px 0;
  }
  .rusan-home-products__chip-body {
    padding: 32px 32px 32px 32px;
  }
  .rusan-home-products__chip-content {
    white-space: normal;
  }

  .rusan-home-products__big-word {
    position: relative;
    top: auto;
    left: auto;
    padding: 0 32px;
    -webkit-mask-image: none;
            mask-image: none;
    font-size: 48px;
    margin-bottom: 32px;
  }

  .rusan-home-products__row {
    position: relative;
    top: auto;
    left: auto;
    right: auto;          /* Day 8.7: 蓋桌機 base right:calc(50%+15px) 防 mobile 寬度被拘 */
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 32px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .rusan-home-products__row--right {
    margin-top: 20px;
  }
  .rusan-home-products__card {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    padding: 0;
  }

  /* === Day 8.8 Anna：tablet 卡片改「左圖右文」row layout，拔藍底 === */
  .rusan-home-products__card-inner {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  .rusan-home-products__icon-wrap {
    position: relative;
    width: 140px;
    height: 120px;
    background: transparent;     /* 拔藍底 */
    overflow: hidden;
    flex-shrink: 0;
  }
  /* 取消桌機 grid + transform，icon 自然填滿 */
  .rusan-home-products__icon,
  .rusan-home-products__icon--0,
  .rusan-home-products__icon--1,
  .rusan-home-products__icon--2,
  .rusan-home-products__icon--3,
  .rusan-home-products__icon--alt {
    position: absolute;
    inset: 0;
    transform: none;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .rusan-home-products__icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* 文字 + CTA 區塊（圖右側）padding */
  .rusan-home-products__body {
    padding: 16px 20px 16px 0;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
}

/* Mobile <768：1 col（沿用上圖下文 column） */
@media (max-width: 767px) {
  .rusan-home-products__chip-body {
    padding: 24px 20px;
  }
  .rusan-home-products__chip-heading {
    font-size: 28px;
  }
  .rusan-home-products__chip-subtitle {
    font-size: 16px;
  }
  .rusan-home-products__big-word {
    font-size: 36px;
    padding: 0 16px;
  }
  .rusan-home-products__row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 0 16px;
  }
  .rusan-home-products__row--right {
    margin-top: 16px;
  }
  .rusan-home-products__card {
    flex: 1 1 100%;
    padding: 0;
  }
  /* Day 8.8 mobile 也是左圖右文，圖再縮小 */
  .rusan-home-products__card-inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .rusan-home-products__icon-wrap {
    width: 100px;
    height: 90px;
    background: transparent;
    transform: none;
    flex-shrink: 0;
  }
  .rusan-home-products__icon,
  .rusan-home-products__icon--0,
  .rusan-home-products__icon--1,
  .rusan-home-products__icon--2,
  .rusan-home-products__icon--3,
  .rusan-home-products__icon--alt {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  /* 文字區：圖右側 padding */
  .rusan-home-products__body {
    padding: 12px 16px 12px 0;
    gap: 10px;
  }
  .rusan-home-products__card-heading {
    font-size: 20px;
  }
  .rusan-home-products__card-text {
    font-size: 14px;
  }
}