/* ==========================================================================
   皇御匠藝｜首頁：平板與手機版面、切版稿之外的細修（只在首頁載入，排在 ra-home.css 後面）
   ==========================================================================
   ra-home.css 由切版稿自動轉出，只有桌機版：數值是 1440 稿的 px，寫成 calc(var(--u) * N)，
   視窗變窄時整頁等比縮小，所以手機上看到的是縮小的桌機版。這份手寫，不要拿去覆蓋 ra-home.css：
     0. 桌機細修（品牌專欄卡片的 READ MORE 對齊卡片底部）
     1. 平板 ≤ 999.98px：絕對定位改回一般排版、字級改成可閱讀的固定大小、照片與深藍面板改上下排列
     2. 手機 ≤ 689.98px：在平板的基礎上改單欄
   斷點只用 Blocksy 的兩個。顏色字型一樣讀主題設定。
   ========================================================================== */

/* ── 0. 桌機細修 ────────────────────────────────────────────────────── */

/* 0-A 主視覺輪播（第六輪，Kevin：淡入淡出、4 秒換一張；換張的時間控制在 ra-home.js 第 5b 段）。
   三張照片疊在一起，目前那張（.is-active）淡入、其餘透明；沒有 JS 或關掉動效時只看得到第一張。
   切版稿的開場縮放（ra-home.css 的 .ra-motion.is-ready 那條）也只寫了 transform 的轉場，這裡把淡入淡出併進去 */
.ra-home .ra-hero__media .ra-hero__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ra-motion.is-ready .ra-home .ra-hero__media .ra-hero__img {
  transition: opacity 1.2s ease, transform 2600ms var(--ra-ease-soft);
}
.ra-home .ra-hero__media .ra-hero__img.is-active {
  opacity: 1;
}
/* 文字疊在照片左下：墊一層很淡的白色光暈，換到深一點的照片（地坪、倒影）時深藍字一樣清楚。
   原本那張左下本來就是白的，看不出差別；平板、手機在下面另有由下往上的白色漸層，會蓋過這一條 */
.ra-home .ra-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 70% at 18% 82%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* 0-0 中文標題只在逗號處換行：逗號前後各包一個 ra-nobr，片語本身不拆開（「不再／是問題」） */
.ra-home .ra-nobr {
  display: inline-block;
}

/* 0-1 品牌專欄卡片：標題兩行與三行的卡片並排時，「READ MORE」對齊在同一條線（卡片底部） */
.ra-home .ra-card a {
  display: flex;
  flex-direction: column;
}
.ra-home .ra-card__img {
  flex: 0 0 auto;
}
.ra-home .ra-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-bottom: calc(var(--u) * 24);
}
.ra-home .ra-card__title {
  margin-bottom: calc(var(--u) * 12.75);
}
.ra-home .ra-card__more {
  margin-top: auto;
}

/* 0-2 窄桌機的最小字級（10-22 RWD 檢查）。桌機版整頁跟著 --u 等比縮，1000px 時內文只剩 12.6px、按鈕與小標 10.5px。
   內文（ra-h4、服務說明）最小 14px、英文標籤與日期最小 13px，同時把字距收回、行高維持原稿的 px：
   每個字佔的寬度、每一行的高度都跟原稿一樣，絕對定位與不換行的句子位置完全不動，只是字變大、字距變小。
   按鈕與小標（15u）只有幾個字，最小 12px，寬度只多幾 px。約 1115px（內文）、1150px（按鈕）以上算出來就是原稿的數值 */
@media (min-width: 1000px) {
  .ra-home :is(.ra-h4, .ra-svc__desc) {
    font-size: max(14px, calc(var(--u) * 18));
    letter-spacing: calc(var(--u) * 20.7 - max(14px, calc(var(--u) * 18)));
    line-height: calc(var(--u) * 27.9);
  }
  .ra-home .ra-en {
    font-size: max(13px, calc(var(--u) * 18));
    letter-spacing: calc(var(--u) * 19.8 - max(13px, calc(var(--u) * 18)));
    line-height: calc(var(--u) * 31.5);
  }
  .ra-home :is(.ra-h5, .ra-btn, .ra-pill, .ra-hero__scroll) {
    font-size: max(12px, calc(var(--u) * 15));
  }
}

/* ── 1. 平板 ≤ 999.98px ─────────────────────────────────────────────── */

@media (max-width: 999.98px) {
  .ra-home {
    --u: .9px;   /* 剩下用 --u 的尺寸（圖示、線條、間距）以 0.9 倍計 */
    --ra-side: calc((100% - var(--theme-container-width, 90vw)) / 2);
  }
  .ra-home .ra-wrap {
    width: var(--theme-container-width, 90vw);
  }

  /* 字級：切版稿的數值在平板太小，改成固定字級 */
  .ra-home .ra-h2 { font-size: 26px; letter-spacing: .12em; }
  .ra-home .ra-h3 { font-size: 18px; }
  .ra-home .ra-h4 { font-size: 16px; letter-spacing: .08em; line-height: 1.85; }
  .ra-home .ra-h5 { font-size: 14px; }
  .ra-home .ra-en { font-size: 16px; }

  /* 按鈕：觸控要夠大（44px 點擊區） */
  .ra-home .ra-btn {
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-size: 15px;
  }
  .ra-home .ra-arrow { width: 20px; height: 7px; }
  .ra-home .ra-pill {
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-top-right-radius: 12px;
    font-size: 15px;
  }
  .ra-home .ra-pill img { width: 18px; }
  .ra-home .ra-pill--slate img { width: 14px; }

  /* 01 主視覺：文字疊在照片下半部，照片下緣加一層白色漸層讓深藍字看得清楚 */
  .ra-home .ra-hero { height: auto; }
  .ra-home .ra-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 42%, rgba(255, 255, 255, 0) 78%);
  }
  .ra-home .ra-hero__img { object-position: 64% 50%; }
  .ra-home .ra-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: min(88svh, 720px);
    padding: 150px 0 80px;
    box-sizing: border-box;
  }
  .ra-home :is(.ra-hero__tagline, .ra-hero__title, .ra-hero__artisan, .ra-hero__lead, .ra-hero__actions) {
    position: static;
  }
  .ra-home .ra-hero__title {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
  }
  .ra-home .ra-hero__royal { width: 278px; height: auto; }
  .ra-home .ra-hero__artisan { width: 381px; height: auto; max-width: 100%; }
  .ra-home .ra-hero__title .ra-mask img { height: auto; }
  .ra-home .ra-hero__lead { margin-top: 26px; white-space: normal; }
  .ra-home .ra-hero__actions { flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .ra-home .ra-hero__scroll,
  .ra-home .ra-hero__band { display: none; }

  /* 02 關於皇御：深藍面板蓋滿，文字與數據上下排 */
  .ra-home .ra-about { height: auto; }
  .ra-home .ra-about__shade { width: 100%; }
  .ra-home .ra-about__inner {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 88px 0;
  }
  .ra-home .ra-about__main { position: static; }
  .ra-home .ra-about__title,
  .ra-home .ra-about__body { white-space: normal; }
  .ra-home .ra-about__btn { margin-top: 36px; }
  .ra-home .ra-stats {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
  }
  .ra-home .ra-stat + .ra-stat { margin-top: 0; }
  .ra-home .ra-stat::before { top: 8px; height: 58px; }
  .ra-home .ra-stat__num { font-size: 36px; }
  .ra-home .ra-stat__unit { font-size: 28px; }
  /* 說明只在標點處換行：平板最窄（690～760px）三欄很窄，「並提供永久保修」原本會拆成「永／久保修」 */
  .ra-home .ra-stat__label { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }

  /* 03 服務項目：八項改兩欄（左 01～04、右 05～08，同桌機的閱讀順序），每項是「編號｜名稱＋說明｜箭頭」 */
  .ra-home .ra-svc { height: auto; }
  .ra-home .ra-svc__strip { display: none; }
  .ra-home .ra-svc__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 88px 0 56px;
  }
  /* 標籤保持 position: relative：上方那條金線（::before）是相對標籤定位，改成 static 會變成橫跨整個區塊 */
  .ra-home .ra-svc__label { position: relative; top: auto; }
  .ra-home .ra-svc__list {
    position: static;
    width: 100%;
    margin-top: 44px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    column-gap: 40px;
    row-gap: 18px;
  }
  .ra-home .ra-svc__item a {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 4px 0 12px;
  }
  .ra-home .ra-svc__item a::after,
  .ra-home .ra-svc__item a::before { left: 64px; top: auto; bottom: 0; }
  .ra-home .ra-svc__no {
    position: static;
    grid-row: 1 / 3;
    width: auto;
    font-size: 46px;
  }
  .ra-home :is(.ra-svc__name, .ra-svc__name--long) {
    position: static;
    font-size: 21px;
    letter-spacing: .12em;
    line-height: 1.4;
  }
  .ra-home .ra-svc__desc {
    position: static;
    grid-column: 2;
    font-size: 14px;
    letter-spacing: .1em;
    white-space: normal;
  }
  .ra-home .ra-svc__item .ra-arrow {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .ra-home .ra-svc__more { position: static; margin-top: 44px; }
  .ra-home .ra-svc__thumbs { position: static; height: auto; }
  .ra-home .ra-svc__thumbs li { aspect-ratio: 4 / 3; }
  .ra-home .ra-svc__drop--l { top: 56px; }
  .ra-home .ra-svc__drop--r { display: none; }   /* 改兩欄後會疊到第 08 項的箭頭 */

  /* 04 浸泡式防水工法：照片在上、深藍文字面板在下，文字靠左 */
  .ra-home .ra-sig { height: auto; background: var(--ra-navy); }
  .ra-home .ra-sig__media { position: relative; height: 52vw; max-height: 480px; }
  .ra-home .ra-sig__shade { display: none; }
  .ra-home .ra-sig__inner {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 64px 0 80px;
  }
  .ra-home .ra-sig__text {
    position: static;
    align-items: flex-start;
    text-align: left;
  }
  .ra-home :is(.ra-sig__tag, .ra-sig__label, .ra-sig__title, .ra-sig__btn) { margin-right: 0; }
  .ra-home .ra-sig__tag { gap: 10px; }
  .ra-home .ra-sig__label { margin-top: 8px; }
  .ra-home .ra-sig__title { margin-top: 24px; white-space: normal; }
  .ra-home .ra-sig__body { margin-top: 20px; }
  .ra-home .ra-sig__body span { white-space: normal; }
  .ra-home .ra-sig__btn { margin-top: 36px; }

  /* 05 客戶回饋：評分在上（數字＋星等），評價卡一次兩張，可左右滑 */
  .ra-home .ra-voice { height: auto; }
  .ra-home .ra-voice__inner { height: auto; padding: 88px 0 64px; }
  .ra-home .ra-voice .ra-label { position: relative; top: auto; left: auto; }
  .ra-home .ra-voice__title { position: static; }
  .ra-home .ra-voice__title { margin-top: 20px; white-space: normal; }
  .ra-home .ra-score {
    position: static;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: 22px;
    width: auto;
    margin-top: 32px;
    text-align: left;
  }
  .ra-home .ra-score__num { grid-row: 1 / 4; font-size: 72px; }
  .ra-home .ra-stars--lg { margin-top: 0; }
  .ra-home .ra-score__brand { margin-top: 8px; font-size: 13px; }
  .ra-home .ra-score__count { font-size: 14px; }
  .ra-home .ra-voice__carousel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 28px;
    padding-bottom: 64px;
  }
  .ra-home .ra-voice__viewport { height: auto; touch-action: pan-y; }
  .ra-home .ra-voice__track {
    gap: 16px;
    height: auto;
    transform: translateX(calc(var(--i, 0) * (100% + 16px) / -2 + var(--drag, 0px)));
  }
  .ra-home .ra-voice__card {
    display: flex;
    flex: 0 0 calc((100% - 16px) / 2);
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    height: auto;
    min-height: 200px;
    padding: 26px 24px 22px;
    box-sizing: border-box;
  }
  .ra-home .ra-voice__card blockquote { position: static; width: auto; }
  .ra-home .ra-voice__who { position: static; gap: 14px; }
  .ra-home .ra-voice__avatar { width: 38px; height: 38px; font-size: 16px; }
  .ra-home .ra-voice__next {
    top: auto;
    right: 0;
    bottom: 8px;
    left: auto;
    width: 38px;
    height: 38px;
  }
  .ra-home .ra-voice__next::after { inset: -3px; }
  .ra-home .ra-voice__next svg { width: 16px; }
  .ra-home .ra-voice__dots { top: auto; bottom: 26px; }
  .ra-home .ra-voice__dots button { width: 16px; height: 3px; }
  .ra-home .ra-voice__dots button[aria-selected="true"] { width: 40px; }

  /* 06 品牌專欄：卡片改橫式（圖左文右）單欄，三篇不會剩一張孤零零 */
  .ra-home .ra-news { height: auto; }
  .ra-home .ra-news__inner {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 72px 0 96px;
  }
  .ra-home :is(.ra-news__title, .ra-news__lead, .ra-news__list, .ra-news__more) { position: static; }
  .ra-home .ra-news .ra-label { position: relative; top: auto; left: auto; align-self: flex-start; }
  .ra-home .ra-news__title { margin-top: 20px; }
  .ra-home .ra-news__lead { margin-top: 8px; white-space: normal; }
  .ra-home .ra-news__list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 36px;
  }
  .ra-home .ra-card a { flex-direction: row; height: auto; }
  .ra-home .ra-card__img {
    flex: 0 0 38%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-right: 1px solid var(--ra-mist);
    border-bottom: 0;
  }
  .ra-home .ra-card__body {
    justify-content: center;
    padding: 22px 28px;
  }
  .ra-home .ra-card__date { font-size: 14px; }
  .ra-home .ra-card__title { margin-top: 4px; font-size: 18px; line-height: 1.6; }
  .ra-home .ra-card__more { margin-top: 0; font-size: 12px; }
  .ra-home .ra-news__more { align-self: center; margin-top: 44px; }

  /* 07 預約導引：深藍面板蓋滿整塊、內容置中 */
  .ra-home .ra-cta { height: auto; }
  .ra-home .ra-cta__shade { left: 0; }
  .ra-home .ra-cta__panel {
    position: relative;
    inset: auto;
    padding: 88px 5vw 96px;
  }
  .ra-home .ra-cta__crown { width: 30px; }
  .ra-home .ra-cta__title { margin-top: 12px; white-space: normal; }
  .ra-home .ra-cta__body { margin-top: 20px; white-space: normal; }
  .ra-home .ra-cta__actions { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
}

/* ── 2. 手機 ≤ 689.98px ─────────────────────────────────────────────── */

@media (max-width: 689.98px) {
  .ra-home { --u: .8px; }

  .ra-home .ra-h2 { font-size: 23px; letter-spacing: .1em; line-height: 1.5; }
  .ra-home .ra-h3 { font-size: 16px; }
  .ra-home .ra-h4 { font-size: 15px; letter-spacing: .05em; line-height: 1.85; }
  .ra-home .ra-h5 { font-size: 13px; }
  .ra-home .ra-en { font-size: 14px; }
  .ra-home .ra-label { gap: 14px; }
  .ra-home .ra-btn { height: 44px; }

  /* 01 主視覺：滿版高度，按鈕兩顆並排撐滿。
     兩顆一樣寬，但不能比字窄：375px 以下「LINE 預約場勘 →」放不進一半寬，字會超出按鈕（360px 超出 4px、320px 超出 13px）；
     改成 flex，一樣平分寬度、最窄到字的寬度，兩顆並排放不下時自動上下排 */
  .ra-home .ra-hero__img { object-position: 74% 50%; }   /* 直式畫面讓師傅入鏡 */
  .ra-home .ra-hero__inner {
    min-height: min(100svh, 760px);
    padding: 120px 0 56px;
  }
  .ra-home .ra-hero__title { gap: 14px; }
  .ra-home .ra-hero__royal { width: 220px; }
  .ra-home .ra-hero__artisan { width: 301px; }
  .ra-home .ra-hero__lead { margin-top: 22px; }
  .ra-home .ra-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 26px;
  }
  .ra-home .ra-hero__actions .ra-btn { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 10px; }

  /* 02 關於皇御：內文不再照桌機的斷行，數據改直排 */
  .ra-home .ra-about__inner { padding: 64px 0 72px; }
  .ra-home .ra-about__body br { display: none; }
  .ra-home .ra-stats { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }
  .ra-home .ra-stat__num { font-size: 32px; }
  .ra-home .ra-stat__unit { font-size: 25px; }

  /* 03 服務項目：單欄 01～08 */
  .ra-home .ra-svc__inner { padding: 64px 0 44px; }
  .ra-home .ra-svc__list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 14px;
    margin-top: 32px;
  }
  .ra-home .ra-svc__item a { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .ra-home .ra-svc__item a::after,
  .ra-home .ra-svc__item a::before { left: 56px; }
  .ra-home .ra-svc__no { font-size: 38px; }
  .ra-home :is(.ra-svc__name, .ra-svc__name--long) { font-size: 19px; letter-spacing: .1em; }
  .ra-home .ra-svc__more { margin-top: 36px; }
  .ra-home .ra-svc__drop { display: none; }
  .ra-home .ra-svc__thumbs { gap: 4px; }

  /* 04 浸泡式防水工法 */
  .ra-home .ra-sig__media { height: 62vw; }
  .ra-home .ra-sig__inner { padding: 48px 0 64px; }
  .ra-home .ra-sig__tag { flex-wrap: wrap; white-space: normal; }

  /* 05 客戶回饋：一次一張，露出下一張的一角提示可以滑 */
  .ra-home .ra-voice__inner { padding: 64px 0 52px; }
  .ra-home .ra-score { column-gap: 18px; margin-top: 28px; }
  .ra-home .ra-score__num { font-size: 60px; }
  .ra-home .ra-voice__track {
    gap: 12px;
    transform: translateX(calc(var(--i, 0) * (86% + 12px) * -1 + var(--drag, 0px)));
  }
  .ra-home .ra-voice__card {
    flex-basis: 86%;
    min-height: 190px;
    padding: 22px 20px 20px;
  }

  /* 06 品牌專欄：圖小一點，標題最多三行 */
  .ra-home .ra-news__inner { padding: 56px 0 72px; }
  .ra-home .ra-news__list { gap: 14px; margin-top: 28px; }
  .ra-home .ra-card__img { flex-basis: 36%; aspect-ratio: 1; }
  .ra-home .ra-card__body { padding: 14px 16px; }
  .ra-home .ra-card__date { font-size: 13px; }
  .ra-home .ra-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
  }
  .ra-home .ra-news__more { margin-top: 36px; }

  /* 07 預約導引：按鈕直排、撐滿 */
  .ra-home .ra-cta__panel { padding: 64px 5vw 72px; }
  .ra-home .ra-cta__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 320px;
  }
  .ra-home .ra-cta__actions .ra-pill { justify-content: center; }
}