/*
 * 扶輪社務通｜公開形象首頁樣式（靜態測試原型）
 *
 * 正式版本：web/frontend/src/assets/css/public-home.css（PublicHomeView.vue 引入）。
 * 這份是同步過去的靜態版，架構、數值跟正式版一致，差別只在正式版用 Vue
 * :src 綁定圖片、這份用一般 <img src>。之後正式版再改動態/版面，記得
 * 回頭同步這份，或者反過來（見 GitHub issue #10 的重構記錄）。
 *
 * 命名規則：所有 class 都是 .rh-* 開頭，且全部規則都包在 .rh-root 這個外層
 * class 底下，避免跟未來搬進 web/ 專案時跟既有 style.css（例如 .dot、.qr
 * 這類通用命名）互相蓋到。
 *
 * 架構：單一 DOM，mobile-first 撰寫（不加 media query 的規則＝手機版版型），
 * 底部一個 @media (min-width:768px) 區塊蓋掉桌面版所需的差異（Grid 版面、
 * 絕對定位改百分比／視窗寬度換算、選單換皮等）——取代最早版本兩組獨立
 * DOM 樹（.pc-layout／.m-layout）用 display:none 互相切換的做法。
 */

.rh-root {
  --rh-c-navy: #1D2E62;
  --rh-c-blue: #2C58A5;
  --rh-c-black: #000000;
  --rh-c-white: #FFFFFF;
  --rh-font-en: 'Poppins', 'Noto Sans TC', sans-serif;
  --rh-font-tc: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --rh-delay-app: 0ms;
  --rh-delay-footer: 0ms;

  position: relative;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: hidden;
  background: #fff;
  font-family: var(--rh-font-tc);
  color: var(--rh-c-navy);
}
.rh-root, .rh-root * { box-sizing: border-box; }
.rh-root a { text-decoration: none; color: inherit; }

/* ────────────────────────────────────────────
   共用：進場動畫 class
   ──────────────────────────────────────────── */
.rh-root .rh-fx-fade {
  opacity: 0;
  transition: opacity .9s ease;
}
.rh-root .rh-fx-fade.is-in { opacity: 1; }

.rh-root .rh-fx-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,.84,.44,1);
}
.rh-root .rh-fx-up.is-in { opacity: 1; transform: translateY(0); }

/* 跟 .rh-fx-up 一樣，但起始位移幅度更大（桌面版手機圖用），結束座標一致 */
.rh-root .rh-fx-up-lg {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,.84,.44,1);
}
.rh-root .rh-fx-up-lg.is-in { opacity: 1; transform: translateY(0); }

/* ────────────────────────────────────────────
   背景：counter-scroll（不用 position:fixed，避免 iOS Safari
   網址列收合時的重繪瑕疵，見底部 <script> 的 onScroll）
   ──────────────────────────────────────────── */
.rh-root .rh-bg-wrap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.rh-root .rh-bg {
  display: block;
  position: absolute;
  left: -51.74%;
  top: 0;
  width: 206%;
  height: 100%;
  aspect-ratio: 2199 / 3197;
  object-fit: cover;
  object-position: top;
  max-width: none;
}

/* ────────────────────────────────────────────
   選單：漢堡按鈕 + 側邊抽屜（手機版視覺）＋ 桌面橫排連結，
   單一 markup，桌面用 media query 整個換皮（見底部區塊）
   ──────────────────────────────────────────── */
.rh-root .rh-hamburger {
  position: absolute;
  right: 24px;
  top: 30px;
  z-index: 6;
  width: 26px;
  height: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.rh-root .rh-hamburger .rh-bar {
  display: block;
  height: 2px;
  background: var(--rh-c-navy);
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease, width .25s ease;
}
.rh-root .rh-hamburger .rh-bar--top { width: 100%; }
.rh-root .rh-hamburger .rh-bar--bottom { width: 49%; }
.rh-root .rh-hamburger.is-open .rh-bar--top { width: 100%; transform: translateY(6px) rotate(45deg); }
.rh-root .rh-hamburger.is-open .rh-bar--bottom { width: 100%; transform: translateY(-6px) rotate(-45deg); }

.rh-root .rh-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29,46,98,.25);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.rh-root .rh-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.rh-root .rh-nav {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  z-index: 6;
  width: 55%;
  background: #eeeced;
  box-shadow: 0 0 25px rgba(0,0,0,.25);
  padding: 139px 30px 0;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.rh-root .rh-nav.is-open { transform: translateX(0); }
.rh-root .rh-nav a { display: block; font-size: 17px; color: var(--rh-c-navy); }
.rh-root .rh-nav a:first-of-type {
  display: inline-block;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rh-c-navy);
  margin-bottom: 36px;
}

/* X 圖示放大但變細，粗細跟漢堡選單線條（2px）一致 */
.rh-root .rh-menu-close {
  position: absolute;
  right: 22px;
  top: 24px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.rh-root .rh-menu-close::before, .rh-root .rh-menu-close::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 26px;
  height: 2px;
  background: var(--rh-c-navy);
}
.rh-root .rh-menu-close::before { transform: rotate(45deg); }
.rh-root .rh-menu-close::after { transform: rotate(-45deg); }

/* ────────────────────────────────────────────
   版面：手機版一般文件流直排，桌面版改 Grid（見底部區塊）
   ──────────────────────────────────────────── */
.rh-root .rh-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}

.rh-root .rh-hero { padding-top: 108px; }

.rh-root .rh-logo-3521 {
  display: block;
  width: 199px;
  height: auto;
  object-fit: contain;
}

.rh-root .rh-title {
  margin: 18px 0 0;
  font-weight: 700;
  line-height: 1.1;
}
.rh-root .rh-title--en { font-family: var(--rh-font-en); font-size: 40px; }
.rh-root .rh-title--tc { font-family: var(--rh-font-tc); font-size: 40px; margin-top: 4px; }

.rh-root .rh-tagline {
  margin: 14px 0 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--rh-c-blue);
}

.rh-root .rh-divider {
  margin: 20px 0 0;
  width: 100%;
  height: 1px;
  background: var(--rh-c-navy);
  opacity: .35;
}
/* .rh-divider 本身寫死 opacity:.35（線條本來就設計成半透明），跟 .rh-fx-fade
   的 opacity:0 撞在一起、優先權一樣時後寫的會贏，導致線條「淡入」時其實一開始
   就有 0.35 的透明度，沒有真的隱藏。用更明確的組合選擇器蓋掉：淡入前完全透明，
   淡入後才是設計要的 .35 */
.rh-root .rh-divider.rh-fx-fade { opacity: 0; }
.rh-root .rh-divider.rh-fx-fade.is-in { opacity: .35; }

.rh-root .rh-features {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

/* ────────────────────────────────────────────
   手機圖＋輪播＋dot：真正巢狀在 .rh-phone-frame 底下，
   carousel/dots 座標相對這個 frame 用百分比定位（不是頁面 px），
   frame 自己的外層尺寸才依斷點不同，換內容/改版型不會牽動彼此
   ──────────────────────────────────────────── */
.rh-root .rh-phone-group {
  position: relative;
  margin: 60px -32px 0;
  overflow: visible;
}
.rh-root .rh-phone-frame {
  position: relative;
  margin-left: 14%;
  width: 165%;
  aspect-ratio: 582 / 586;
}
.rh-root .rh-phone-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}
/* 軌道式輪播：圖片橫向並排（含結尾複製第一張做無縫循環），切換時整條軌道橫移，
   新圖從右邊滑進來，取代原本的 opacity 淡入淡出 */
.rh-root .rh-carousel {
  position: absolute;
  left: 7.73%;
  top: 4.95%;
  width: 28.35%;
  height: 52.56%;
  overflow: hidden;
  z-index: 2;
}
.rh-root .rh-carousel-track {
  display: flex;
  width: 400%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.rh-root .rh-carousel .rh-slide {
  position: relative;
  flex: none;
  width: 25%;
  height: 100%;
  overflow: hidden;
}
.rh-root .rh-carousel .rh-slide img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  /* 統一用「同一個寬度縮放比例、從頂端裁切」，不要每張圖各自拉伸到不同高度，
     不然像 1.0首頁尚未報名／1.0首頁我己報名 這種上半部畫面完全相同的圖，
     會因為各自縮放比例不同，橫移切換時上面的 banner 對不齊、看起來在跳動。
     放大 2% 蓋掉容器寬高換算時可能出現的次像素縫隙。 */
  transform: scale(1.02);
  transform-origin: top center;
}

.rh-root .rh-dots {
  position: absolute;
  left: 19.27%;
  top: 59.21%;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.rh-root .rh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, transform .25s ease;
}
.rh-root .rh-dot.is-active { background: var(--rh-c-blue); transform: scale(1.15); }

/* ────────────────────────────────────────────
   App 下載按鈕列：桌面/手機共用同一份 rh-store-btn／rh-qr 尺寸，
   只有外層容器（rh-app-row／rh-app-item）的排列方向依斷點不同
   ──────────────────────────────────────────── */
.rh-root .rh-app-row {
  margin-top: -170px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rh-root .rh-app-item { display: flex; align-items: center; gap: 16px; }

.rh-root .rh-store-btn {
  width: 156px;
  height: 52px;
  background: var(--rh-c-black);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  flex: none;
}
.rh-root .rh-store-btn img.rh-glyph { width: 27px; height: 31px; object-fit: contain; }
.rh-root .rh-store-btn--apple img.rh-glyph { width: 26px; }
.rh-root .rh-store-btn .rh-txt { color: var(--rh-c-white); line-height: 1.25; white-space: nowrap; }
.rh-root .rh-store-btn--apple .rh-txt-small { font-size: 12px; display: block; white-space: nowrap; }
.rh-root .rh-store-btn--apple .rh-txt-big { font-size: 20px; font-weight: 600; display: block; white-space: nowrap; }
.rh-root .rh-store-btn--google .rh-txt-small { font-size: 12px; letter-spacing: .5px; display: block; text-transform: uppercase; }
.rh-root .rh-store-btn--google img.rh-wordmark { width: 96px; height: 20px; margin-top: 3px; transform: scaleY(-1); }
.rh-root .rh-qr { width: 52px; height: 52px; flex: none; }

/* ────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────── */
.rh-root .rh-footer {
  margin-top: 26px;
  padding-bottom: 38px;
  font-size: 15px;
  line-height: 1.5;
}
.rh-root .rh-logo-tri {
  margin-top: 8px;
  width: 230px;
  height: auto;
  display: block;
}

/* app-row／footer 進場延遲：手機維持 0（IntersectionObserver 一觸發就淡入，
   跟現行行為一致），桌面在下方 media query 蓋成跟原本 setTimeout 時序相同的值 */
.rh-root .rh-app-row { transition-delay: var(--rh-delay-app); }
.rh-root .rh-footer { transition-delay: var(--rh-delay-footer); }

/* ════════════════════════════════════════════
   桌面（≥768px）：CSS Grid 版面、選單換皮、
   手機圖／輪播座標換算、進場延遲節奏
   ════════════════════════════════════════════ */
@media (min-width: 768px) {
  .rh-root {
    --rh-delay-app: 1800ms;
    --rh-delay-footer: 2050ms;
    max-width: none;
    margin: 0;
  }

  .rh-root .rh-bg { position: static; width: 100%; height: 100%; aspect-ratio: auto; object-position: center; }

  /* 選單換皮：抽屜 → 桌面橫排連結，漢堡/遮罩/關閉鈕整組隱藏、不可互動 */
  .rh-root .rh-nav {
    position: absolute;
    right: 49px;
    top: 24px;
    bottom: auto;
    z-index: 4;
    width: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    gap: 32px;
    transform: none;
    transition: none;
  }
  .rh-root .rh-nav a { font-size: 16px; }
  .rh-root .rh-nav a:first-of-type {
    display: inline;
    color: var(--rh-c-black);
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
  }
  .rh-root .rh-nav a:not(:first-of-type) { color: var(--rh-c-black); font-weight: 400; }
  .rh-root .rh-hamburger,
  .rh-root .rh-menu-overlay,
  .rh-root .rh-menu-close {
    display: none;
  }

  /* 版面：Grid 兩欄，左欄文字內容、右欄手機圖（刻意允許溢出欄位，見下方
     .rh-phone-frame 說明），gap1/gap2 是沒有指定元素的空白列，讓
     hero+app-row 這組整體垂直置中、footer 貼底，不用 JS 量測高度 */
  .rh-root .rh-page {
    display: grid;
    grid-template-columns: minmax(0, 512px) 1fr;
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas:
      "gap1   phone"
      "hero   phone"
      "app    phone"
      "gap2   phone"
      "footer phone";
    column-gap: 40px;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
  }
  .rh-root .rh-hero        { grid-area: hero; padding-top: 0; min-width: 0; }
  .rh-root .rh-app-row     { grid-area: app; margin-top: 40px; flex-direction: row; align-items: center; gap: 15px; min-width: 0; }
  .rh-root .rh-app-item    { gap: 15px; }
  .rh-root .rh-footer      {
    grid-area: footer;
    align-self: end;
    margin-top: 0;
    padding-bottom: 61px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
  }
  .rh-root .rh-footer-text { white-space: nowrap; margin: 0; }
  .rh-root .rh-logo-tri { margin-top: 0; width: 193px; height: 43px; object-fit: contain; }

  .rh-root .rh-logo-3521 { width: 259px; height: 54px; }
  .rh-root .rh-title { max-width: 512px; line-height: 1; margin: 0; }
  .rh-root .rh-title--en { font-size: 64px; margin-top: 28px; }
  .rh-root .rh-title--tc { font-size: 64px; margin-top: 18px; }
  .rh-root .rh-tagline { max-width: 512px; font-size: 32px; margin: 26px 0 0; }
  .rh-root .rh-divider { max-width: 639px; margin: 26px 0 0; }
  .rh-root .rh-features { max-width: 656px; font-size: 20px; margin: 25px 0 0; }

  /* 手機圖＋輪播＋dot：phone-frame 刻意比欄位寬（原始設計 831px 是相對
     1200px 內容框 ≈69.25% 反推來的，用 vw 換算讓 768-1199px 這段跟著視窗
     寬度平滑縮放，≥1200px 時封頂在原始 831px），phone-group 要
     overflow:visible 才不會被自己的 grid 欄位夾住 */
  .rh-root .rh-phone-group {
    grid-area: phone;
    align-self: end;
    justify-self: start;
    overflow: visible;
    margin: 0;
    min-width: 0;
    width: 0;
  }
  .rh-root .rh-phone-frame {
    margin-left: 0;
    width: min(69.25vw, 831px);
    aspect-ratio: 831 / 837;
  }
  .rh-root .rh-carousel { left: 7.70%; top: 5.14%; width: 28.40%; height: 52.45%; }
  .rh-root .rh-dots { left: 19.25%; top: 59.26%; }
  .rh-root .rh-dot { width: 9px; height: 9px; }
}