/**
 * 群英 — 首頁新增模組樣式
 *
 * 1) .chic-rail：通用橫向滑動元件（原生 CSS scroll-snap，無輪播套件）。
 *    刻意不以 body.home 收斂，之後醫師團隊／療程項目等區塊可直接沿用。
 *    變體以 .chic-rail--{name} 表示，只需覆寫 --rail-per-lg / -md / -sm 三個變數。
 * 2) .clinic-card：院所卡（任務 8，用於 .locations 深色區塊）。
 * 3) .chic-video：影音卡（任務 11，封面＋播放鍵 facade，點擊後才載入 iframe）。
 *
 * 色彩沿用 home-premium.css 的 :root token，並附上 fallback 以免載入順序意外。
 */

/* ===================================================================
 * 通用滑動元件 .chic-rail
 * =================================================================== */
.chic-rail {
  --rail-gap: 18px;
  --rail-per: var(--rail-per-lg, 3.2);
  --rail-radius: 18px;
  --rail-btn-bg: rgba(255, 255, 255, .82);
  --rail-btn-fg: var(--brand, #6f2a28);
  --rail-btn-border: var(--line, rgba(87, 65, 55, .18));
  --rail-focus: var(--brand, #6f2a28);
  position: relative;
}

/* 左右鍵置於內容右上，與 section-head 的編輯感對齊 */
.chic-rail__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.chic-rail__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--rail-btn-fg);
  background: var(--rail-btn-bg);
  border: 1px solid var(--rail-btn-border);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--ease, all .6s cubic-bezier(.16, 1, .3, 1));
}

.chic-rail__btn:hover:not([disabled]) {
  color: #fff;
  background: var(--brand, #6f2a28);
  border-color: var(--brand, #6f2a28);
}

.chic-rail__btn[disabled] {
  opacity: .3;
  cursor: default;
}

.chic-rail__btn:focus-visible {
  outline: 2px solid var(--rail-focus);
  outline-offset: 3px;
}

/* 內容不足以捲動時由 JS 加上 .is-static，隱藏無作用的左右鍵 */
.chic-rail.is-static .chic-rail__nav { display: none; }

.chic-rail__viewport {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* overflow-x:auto 依規範會把 overflow-y 由 visible 強制成 hidden，卡片 hover 上浮
     與外陰影會被裁掉。改用上下 padding 留出繪製空間（捲動容器裁切邊界是 padding box），
     再以等量負 margin 把區塊視覺位置補回原處。只動 block 方向，不影響 scroll-snap。 */
  padding: 14px 0 40px;
  margin: -14px 0 -40px;
  /* 隱藏原生 scrollbar，但保留觸控與鍵盤捲動 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chic-rail__viewport::-webkit-scrollbar { display: none; }

.chic-rail__viewport:focus-visible {
  outline: 2px solid var(--rail-focus);
  outline-offset: 6px;
  border-radius: var(--rail-radius);
}

.chic-rail__item {
  flex: 0 0 calc((100% - var(--rail-gap) * (var(--rail-per) - 1)) / var(--rail-per));
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 1100px) {
  .chic-rail { --rail-per: var(--rail-per-md, 2.2); --rail-gap: 14px; }
}

@media (max-width: 680px) {
  .chic-rail { --rail-per: var(--rail-per-sm, 1.15); }
  .chic-rail__btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .chic-rail__viewport { scroll-behavior: auto; }
  .chic-rail__btn,
  .clinic-card,
  .clinic-card__image,
  .chic-video__poster { transition: none; }
}

/* 深色區塊上的左右鍵 */
.chic-rail--on-dark,
body.home .locations .chic-rail,
body.home .team .chic-rail,
body.home .video-section .chic-rail {
  --rail-btn-bg: rgba(255, 255, 255, .1);
  --rail-btn-fg: #fff;
  --rail-btn-border: rgba(255, 255, 255, .28);
  --rail-focus: var(--clay, #d9b9aa);
}

/* 變體：每屏可見張數（桌機 / 平板 / 手機） */
.chic-rail--clinic { --rail-per-lg: 3.2; --rail-per-md: 2.2; --rail-per-sm: 1.15; }
.chic-rail--video-short { --rail-per-lg: 6.2; --rail-per-md: 3.6; --rail-per-sm: 2.2; }
.chic-rail--video-wide { --rail-per-lg: 2.2; --rail-per-md: 1.6; --rail-per-sm: 1.05; }
.chic-rail--treatment { --rail-per-lg: 4.2; --rail-per-md: 2.4; --rail-per-sm: 1.2; }
.chic-rail--doctor { --rail-per-lg: 5.2; --rail-per-md: 3.2; --rail-per-sm: 1.35; }
.chic-rail--case { --rail-per-lg: 4.2; --rail-per-md: 2.6; --rail-per-sm: 1.2; }

/* ===================================================================
 * 任務 8：院所卡 .clinic-card（置於 .locations 深色區塊）
 * =================================================================== */
body.home .locations .chic-rail { margin-top: 4px; }

.clinic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  transition: var(--ease, all .6s cubic-bezier(.16, 1, .3, 1));
}

.clinic-card:hover,
.clinic-card:focus-within {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .4);
}

.clinic-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* 尚未上傳院所照片時的暖調底，避免空白破格 */
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(216, 185, 170, .34), transparent 62%),
    linear-gradient(140deg, rgba(74, 28, 27, .9), rgba(111, 42, 40, .78));
}

.clinic-card__media img,
.clinic-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.clinic-card:hover .clinic-card__image { transform: scale(1.045); }

.clinic-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
}

.clinic-card__region {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  color: var(--clay, #d9b9aa);
  font-family: var(--display, Georgia, serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
}

.clinic-card__name {
  margin: 2px 0 0;
  color: #fff;
  font-family: var(--soft, var(--serif, Georgia, serif));
  font-size: clamp(20px, 1.6vw, 25px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.32;
}

.clinic-card__name a { color: inherit; text-decoration: none; }

/* 標題連結延展為整張卡片的點擊區（電話／地圖連結以 z-index 置於其上） */
.clinic-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.clinic-card__address,
.clinic-card__hours {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.7;
}

.clinic-card__hours { font-size: 14px; color: rgba(255, 255, 255, .6); }

.clinic-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.clinic-card__phone {
  color: #fff;
  font-family: var(--display, Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}

.clinic-card__phone:hover { color: var(--clay, #d9b9aa); }

.clinic-card__map,
.clinic-card__line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--ease, all .6s cubic-bezier(.16, 1, .3, 1));
}

.clinic-card__map:hover,
.clinic-card__line:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .5);
}

.clinic-card a:focus-visible {
  outline: 2px solid var(--clay, #d9b9aa);
  outline-offset: 3px;
}

/* ===================================================================
 * 任務 11：影音區塊
 * =================================================================== */

/* 短影音：延續 paper 底，卡片輕盈 */
body.home .shorts-section { background: transparent; }

/* 寬影音：暖調深色帶，與上方最新消息拉出節奏 */
body.home .video-section {
  color: #fff;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(168, 108, 101, .28), transparent 60%),
    linear-gradient(140deg, #4a1c1b 0%, #6f2a28 52%, #55211f 100%);
}

body.home .video-section .section-head h2,
body.home .video-section .section-head h2.elementor-heading-title { color: #fff; }

body.home .video-section .section-head p,
body.home .video-section .kicker,
body.home .video-section .kicker .elementor-heading-title { color: rgba(255, 255, 255, .72); }

.chic-video-heading {
  margin: 0 0 24px;
  font-family: var(--soft, var(--serif, Georgia, serif));
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.32;
}

.chic-video {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chic-video__frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--brand-deep, #4a1c1b);
  box-shadow: 0 18px 46px rgba(32, 24, 22, .16);
}

.chic-video--short .chic-video__frame { aspect-ratio: 9 / 16; }
.chic-video--wide .chic-video__frame { aspect-ratio: 16 / 9; }

/* 以 __frame 作前綴把特異性抬到 0-2-0，否則會輸給 Elementor 的
   `.elementor img { height: auto }`（0-1-1），封面就只剩自身比例的一條，
   9:16 直式框下會露出大片底色。 */
.chic-video__frame .chic-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}

.chic-video:hover .chic-video__poster { transform: scale(1.04); }

.chic-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.chic-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(32, 24, 22, 0) 34%, rgba(32, 24, 22, .5));
  border: 0;
  cursor: pointer;
  transition: var(--ease, all .6s cubic-bezier(.16, 1, .3, 1));
}

.chic-video__play svg {
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  padding: 12px;
  width: 62px;
  height: 62px;
  transition: var(--ease, all .6s cubic-bezier(.16, 1, .3, 1));
}

.chic-video__play:hover svg {
  background: var(--brand, #6f2a28);
  transform: scale(1.06);
}

.chic-video__play:focus-visible {
  outline: 2px solid var(--clay, #d9b9aa);
  outline-offset: -4px;
}

/* 短影音一屏 6.2 張，卡片本身即觸控目標（.chic-video__play 為 inset:0），
   圖示縮小後仍遠大於 44×44 的最小觸控尺寸。 */
.chic-video--short .chic-video__play svg { width: 52px; height: 52px; padding: 10px; }

.chic-video__body { padding: 16px 4px 0; }

.chic-video--short .chic-video__body { padding: 12px 2px 0; }

.chic-video__title {
  margin: 0;
  font-family: var(--soft, var(--serif, Georgia, serif));
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.4;
}

.chic-video__subtitle {
  margin: 6px 0 0;
  color: var(--muted, #7b6f68);
  font-size: 14px;
  line-height: 1.6;
}

body.home .video-section .chic-video__subtitle { color: rgba(255, 255, 255, .68); }

/* 卡片變窄後標題一律收在 2 行，避免各卡高度不齊 */
.chic-video--short .chic-video__title {
  font-size: clamp(14px, 1vw, 16px);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

.chic-video--short .chic-video__subtitle { margin-top: 4px; font-size: 12.5px; }

@media (max-width: 680px) {
  .chic-video__play svg { width: 54px; height: 54px; }
  .chic-video--short .chic-video__play svg { width: 46px; height: 46px; padding: 9px; }
  /* 最窄斷點一屏 2.2 張，副標已無可讀空間，隱藏後只留標題 */
  .chic-video--short .chic-video__subtitle { display: none; }
}