/* =============================================================
   home-reviews.css — 首頁 Reviews Section
   Day 6 Lux 重做（Figma 1:1 直抄）
   來源 node-ids: 42:385 整區
     42:387 / 42:388 / 42:389 / 42:390 (mask group)
     42:391 Container
       42:392 Component → 42:393 Content → 42:394 Column → 42:395 Content
         42:396 Stars / 42:402 Quote / 42:403 Avatar
       42:425 Slider Dots / 42:428 / 42:429 Arrows
     42:430 REVIEWS 大字
   參考：vite-prototype index.html 行 716-797
   斷點：mobile <768 / tablet 768-1023 / desktop 1024-1439 / wide 1440+
   桌機 1024-1439 由 page-home wrapper 的 zoom 機制縮放
   ============================================================= */

/* ===== 桌機基準（Figma 1440 / 高 542） ===== */
.rusan-home-reviews {
  position: relative;
  width: 100%;
  height: 542px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-primary);
  color: var(--color-white);
}

/* ============================================================
   42:387 mask 主底（glasses-with-slightly-rounded-frame 1）
   aspect 4096/2732 / left -25.28% / right -2.22% / top -28
   mask-position 364px 28px
   ============================================================ */
/* Day 8.11 Anna：拔 1440 mask 寫死，圖直接滿版 cover（跟 Hero 邏輯一致） */
.rusan-home-reviews__mask-a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  pointer-events: none;
  z-index: var(--z-base);
}
.rusan-home-reviews__mask-a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

/* ============================================================
   42:388 mask 中圖（front-view-optical-sunglasses）
   aspect 4000/2896 / left -35.69% / right -24.79% / top -196
   mask-position 514px 196px
   ============================================================ */
.rusan-home-reviews__mask-b {
  position: absolute;
  left: -35.69%;
  right: -24.79%;
  top: -196px;
  aspect-ratio: 4000 / 2896;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 514px 196px;
          mask-position: 514px 196px;
  -webkit-mask-size: 1440px 542px;
          mask-size: 1440px 542px;
  pointer-events: none;
  z-index: var(--z-base);
}
.rusan-home-reviews__mask-b img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================================
   42:389 mask 翻轉圖（verdian-chua）
   aspect 4096/2305 / left -7.01% / right -20.83% / top -184
   container-type:size + -scale-x-100（水平翻轉）
   mask-position 101px 184px
   ============================================================ */
.rusan-home-reviews__mask-c-wrap {
  position: absolute;
  left: -7.01%;
  right: -20.83%;
  top: -184px;
  aspect-ratio: 4096 / 2305;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  pointer-events: none;
  z-index: var(--z-base);
}
.rusan-home-reviews__mask-c-flip {
  flex: none;
  width: 100cqw;
  height: 100cqh;
  transform: scaleX(-1);
}
.rusan-home-reviews__mask-c {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 101px 184px;
          mask-position: 101px 184px;
  -webkit-mask-size: 1440px 542px;
          mask-size: 1440px 542px;
}
.rusan-home-reviews__mask-c img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================================
   42:390 黑色 60% overlay（mask）
   ============================================================ */
.rusan-home-reviews__overlay {
  /* Day 8.11 Anna：遮罩整個移除 */
  display: none;
}

/* ============================================================
   42:391 Container — 中央內容區
   bottom 14.78% / top 38.75% / left 25% / right 25%
   mask-position -360px -210px
   ============================================================ */
.rusan-home-reviews__container {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 38.75%;
  bottom: 14.78%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: -360px -210px;
          mask-position: -360px -210px;
  -webkit-mask-size: 1440px 542px;
          mask-size: 1440px 542px;
  z-index: var(--z-overlay);
}

/* 42:392 Component — 垂直 stack gap 40 */
.rusan-home-reviews__component {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10);     /* 40px */
}

/* 42:393 Content — 水平 row */
.rusan-home-reviews__content-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 42:394 Column */
.rusan-home-reviews__column {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* 42:395 Content（垂直 gap 20 / max-w 768） */
.rusan-home-reviews__content {
  position: relative;
  width: 100%;
  max-width: var(--max-width-lg);   /* 768 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);            /* 20 */
  overflow: hidden;
}

/* 42:396 Stars — w 116 / h 18.889 */
.rusan-home-reviews__stars {
  position: relative;
  width: 116px;
  height: 18.889px;
  flex-shrink: 0;
}
.rusan-home-reviews__stars img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* 42:402 Quote — Roboto Medium 18 / line 1.8 / w 600 / center */
.rusan-home-reviews__quote {
  position: relative;
  width: 600px;
  font-family: var(--font-en);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);   /* 18 */
  text-align: center;
  color: var(--color-white);
  flex-shrink: 0;
}
.rusan-home-reviews__quote p {
  margin: 0;
  line-height: 1.8;
}

/* 42:403 Avatar — 水平 gap 20 / center */
.rusan-home-reviews__avatar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-6);    /* 20 */
  flex-shrink: 0;
}

/* 42:404 Placeholder Logo — w 120 / h 48 */
.rusan-home-reviews__avatar-logo {
  position: relative;
  width: 120px;
  height: 48px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Bug fix: Anna 反饋「logo 質感很奇怪」 — 客戶 logo 沒上傳時顯示中性灰字方塊 placeholder */
.rusan-home-reviews__avatar-logo-placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Day 8.11 Anna：W Webflow logo 放滿外層容器（拔 134.98×22.5 寫死，inner 改 inset:0） */
.rusan-home-reviews__avatar-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rusan-home-reviews__avatar-logo-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* 42:405 Divider — 旋轉 90 度做垂直線 */
.rusan-home-reviews__avatar-divider-wrap {
  display: flex;
  height: 61px;
  width: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.rusan-home-reviews__avatar-divider-rotate {
  flex: none;
  transform: rotate(90deg);
}
.rusan-home-reviews__avatar-divider {
  position: relative;
  width: 61px;
  height: 0;
}
.rusan-home-reviews__avatar-divider img {
  /* Day 8.11 Anna：白色矩形塊根因 — img 沒設 height，SVG viewBox 61×1 預設變 61×150 一片淡白；補 height 1px 收回細線 */
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 1px;
  max-width: none;
}

/* 42:406 Avatar Content — 垂直 stack 文字 */
.rusan-home-reviews__avatar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--leading-relaxed);  /* 1.5 */
  color: var(--color-white);
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}

/* 42:407 Author 姓名 — Roboto SemiBold 16 */
.rusan-home-reviews__avatar-name {
  margin: 0;
  font-family: var(--font-en);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);   /* 16 */
}

/* 42:408 Author 職稱 — Roboto Regular 14 */
.rusan-home-reviews__avatar-role {
  margin: 0;
  font-family: var(--font-en);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);   /* 14 */
}

/* ============================================================
   42:425 Slider Dots — 水平 gap 9 / padding 10 / center
   ============================================================ */
.rusan-home-reviews__dots {
  position: relative;
  width: 100%;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}
.rusan-home-reviews__dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.rusan-home-reviews__dot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ============================================================
   42:428 / 42:429 Slider Arrows — 圓形邊框按鈕，48 size，top:98.67
   左右絕對定位於 Component
   ============================================================ */
.rusan-home-reviews__arrow {
  position: absolute;
  top: 98.67px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--color-white);
  border-radius: 50px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rusan-home-reviews__arrow:hover {
  background: var(--color-white);
  color: var(--color-bg-primary);
}
.rusan-home-reviews__arrow--prev {
  left: 0;
}
.rusan-home-reviews__arrow--next {
  right: 0;
}
.rusan-home-reviews__arrow-icon {
  position: relative;
  display: inline-block;
  width: var(--icon-sm);    /* 24 */
  height: var(--icon-sm);
  flex-shrink: 0;
  overflow: hidden;
}
/* Day 6.4 同 Tech：svg width="100%" 覆蓋 CSS → 改固定 px = viewBox 真值
   Vector.svg viewBox 15.97×15.62 / Vector1.svg viewBox 15.96×15.62 → 都 ~16×15.6 */
.rusan-home-reviews__arrow-icon img {
  position: absolute;
  display: block;
  width: 15.97px;
  height: 15.62px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
/* hover 時 icon 反白（用 filter） */
.rusan-home-reviews__arrow:hover .rusan-home-reviews__arrow-icon img {
  filter: invert(1);
}

/* Bug fix: Anna 反饋「圖片有錯」根因之一 — partial 把 mask 套到 container/overlay/display
   把 stars/引文/author 都剪掉看不到。mask 應只用在 mask-a/b/c 三張背景圖。 */
.rusan-home-reviews__container,
.rusan-home-reviews__overlay,
.rusan-home-reviews__display {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* ============================================================
   42:430 REVIEWS 大字 — Oswald DemiBold 60 / center / uppercase
   原 Figma inset 14.76% 42.78% 68.63% 42.78% (寬 208px) 會裁切實際 ~276px 文字。
   改用 left:50% + translateX(-50%) + width:auto 自動撐開，
   mask-position 改用 center 對齊背景圖中心（垂直位移 -80px 不變）。
   ============================================================ */
.rusan-home-reviews__display {
  /* Day 8.11 Anna：拔 mask-image（partial inline 還在）— reviews 已不用 mask */
  position: absolute;
  top: 14.76%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  margin: 0;
  padding: 0 8px;            /* 留邊避免極窄字型仍裁 */
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-style: normal;
  font-size: var(--text-5xl);   /* 60 */
  line-height: var(--leading-relaxed);  /* 1.5 */
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  z-index: var(--z-overlay);
}

/* container 也拔 partial inline mask（Banner 邏輯一致）*/
.rusan-home-reviews__container {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* =============================================================
   ===== Tablet 768-1023（reflow） =====
   ============================================================= */
@media (max-width: 1023px) {
  .rusan-home-reviews {
    height: auto;
    min-height: 480px;
    padding: var(--spacing-12) var(--page-padding-tablet);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* 背景 mask 用 viewport 比例縮放：強制 mask-size 100% */
  .rusan-home-reviews__mask-a,
  .rusan-home-reviews__mask-b,
  .rusan-home-reviews__mask-c-wrap,
  .rusan-home-reviews__overlay,
  .rusan-home-reviews__container,
  .rusan-home-reviews__display {
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-position: center;
            mask-position: center;
  }

  /* container reflow 為靜態置中 */
  .rusan-home-reviews__container {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: var(--max-width-lg);
    margin-top: var(--spacing-16);  /* 給 REVIEWS 大字留位 */
    align-items: center;
  }

  /* Day 8.11 Anna：mobile reviews 內容水平置中（所有 column flex 容器 + 文字） */
  .rusan-home-reviews__component,
  .rusan-home-reviews__content-row,
  .rusan-home-reviews__column,
  .rusan-home-reviews__content,
  .rusan-home-reviews__avatar-text {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .rusan-home-reviews__quote {
    width: 100%;
    max-width: var(--max-width-md);
    text-align: center;
  }
  .rusan-home-reviews__quote p {
    text-align: center;
  }

  /* REVIEWS 大字置中於頂（Day 8.11: 加 order:-1 把 DOM 後置的 display 拉到 flex 最前
     + 蓋桌機 base left:50% / transform:translateX(-50%)，避免 relative 下 translateX 把字推左）*/
  .rusan-home-reviews__display {
    position: relative;
    inset: auto;
    left: auto;
    transform: none;
    order: -1;
    margin: 0 auto var(--spacing-8);
    font-size: var(--text-4xl);   /* 48 */
  }

  /* arrows top 固定 → 改貼齊 quote 區段中央 */
  .rusan-home-reviews__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* =============================================================
   ===== Mobile <768（reflow + 隱藏 arrows） =====
   ============================================================= */
@media (max-width: 767px) {
  .rusan-home-reviews {
    min-height: 420px;
    padding: var(--spacing-10) var(--page-padding-mobile);
  }

  .rusan-home-reviews__display {
    font-size: var(--text-3xl);   /* 40 */
    margin-bottom: var(--spacing-6);
  }

  .rusan-home-reviews__quote {
    font-size: var(--text-sm);    /* 16 */
  }

  .rusan-home-reviews__quote p {
    line-height: 1.7;
  }

  .rusan-home-reviews__avatar {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  /* 直立排版時，divider 旋轉回水平（佔 0 高） */
  .rusan-home-reviews__avatar-divider-rotate {
    transform: rotate(0deg);
  }
  .rusan-home-reviews__avatar-divider-wrap {
    height: 0;
    width: 61px;
  }

  .rusan-home-reviews__avatar-text {
    align-items: center;
    text-align: center;
  }

  /* mobile 隱藏 arrows（只留 dots 操作） */
  .rusan-home-reviews__arrow {
    display: none;
  }
}

/* =============================================================
   ===== Wide 1440+（保持 Figma 原寸 542 高） =====
   ============================================================= */
@media (min-width: 1440px) {
  .rusan-home-reviews {
    height: 542px;
  }
}

/* 修 reveal 動畫 transform 蓋掉 translateX(-50%) → 桌機字跑去右邊 */
@media (min-width: 769px) {
  .rusan-home-reviews__display[data-reveal] {
    transform: translate(-50%, 36px) scale(0.96);
  }
  .rusan-home-reviews__display[data-reveal].is-visible {
    transform: translate(-50%, 0) scale(1);
  }
}