@charset "UTF-8";
/* ============================================================
   首頁改版樣式（home.css）
   - 參考高雄站 index.css 的風格與架構重新撰寫
   - 主題色改為 #7c8793（灰藍色系），衍生色一律由主題色調配
   - 不指定 font-family，字體沿用網站既有設定
   - class 命名採用完整英文單字，避免縮寫
   - 本檔僅供首頁新版區塊使用，全部樣式以區塊 class 作用域隔離
   ============================================================ */

/* ---- 主題色變數：全檔統一由此取色，日後換色只需改這裡 ---- */
:root{
  --home-primary:#7c8793;        /* 主題色 */
  --home-primary-dark:#5f6a76;   /* 主題深色（hover、強調文字） */
  --home-primary-light:#a9b2bc;  /* 主題淺色（漸層搭配用） */
  --home-primary-soft:#eef1f4;   /* 主題極淺底色（圖示底、標籤底） */
  --home-card:#ffffff;           /* 卡片底色 */
  --home-border:#e3e7eb;         /* 卡片邊框色 */
  --home-heading:#20242a;        /* 標題文字色 */
  --home-text:#3c4148;           /* 內文文字色 */
  --home-text-muted:#6e7681;     /* 次要文字色 */
  --home-text-faint:#99a0a8;     /* 弱化文字色（瀏覽數、免責等） */
  --home-dark:#4d545b;           /* 深色區塊底色（由主題色加深調配） */
}

/* ============================================================
   全寬分隔線：跨出容器限制，達到滿版效果
   ============================================================ */
.home-divider{
  border:none;
  height:1px;
  background-color:#ccc;
  margin:40px 0;
  /* 核心：跨出父層寬度限制，讓線滿版 */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* ============================================================
   共用：區塊外框與標題
   - 各區塊統一 50px 上下留白
   - 標題置中、粗體、底部漸層飾條（span）
   ============================================================ */
.home-section{ background:transparent; padding:50px 20px; }
.home-container{ max-width:1180px; margin:0 auto; }

.section-head{ text-align:center; margin-bottom:60px; }
/* 標題採 inline-block：讓底下的裝飾線寬度貼齊標題文字，不會延伸過長 */
.section-title{
  display:inline-block;
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--home-heading);
}
.section-title a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--home-heading); text-decoration:none; transition:color .3s ease;
}
.section-title a:hover{ color:var(--home-primary); }
/* 標題底部漸層飾條 */
.section-title span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--home-primary),var(--home-primary-light));
}

/* ---- 共用：主題色圓角按鈕（閱讀更多／瀏覽更多） ---- */
.section-button{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px;
  background:var(--home-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.section-button::after{ content:"\2192"; transition:transform .3s ease; } /* 右箭頭符號 */
.section-button:hover{
  background:var(--home-primary-dark); transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(124,135,147,.65);
}
.section-button:hover::after{ transform:translateX(4px); }

/* ---- 共用區塊響應式 ---- */
@media (max-width:960px){
  .section-head{ margin-bottom:48px; }
  .section-title,
  .section-title a{ font-size:2.1rem; }
}
@media (max-width:560px){
  .home-section{ padding:30px 18px; }
  .section-head{ margin-bottom:36px; }
  .section-title,
  .section-title a{ font-size:1.75rem; }
  .section-button{ margin-top:40px; }
}
@media (prefers-reduced-motion:reduce){
  .section-button,.section-title a{ transition:none; }
  .section-button:hover{ transform:none; }
}

/* ============================================================
   M型禿植髮專區（baldness-）
   - 左：主圖（4:3 圓角、hover 微放大）；右：導引按鈕串
   - 按鈕：圓形圖示＋文字＋右箭頭，hover 右移並轉主題色
   - 架構參考高雄站 M 型禿區塊，配色沿用主題變數
   ============================================================ */
.baldness-layout{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:stretch; gap:40px;
}
.baldness-photo{ flex:1 1 60%; min-width:0; }
.baldness-list{ flex:1 1 40%; min-width:0; display:flex; }

/* 左圖：以 4:3 比例呈現，圖面填滿裁切 */
.baldness-photo{
  position:relative;
  border-radius:20px; overflow:hidden; line-height:0;
  background:var(--home-primary-soft);
  box-shadow:0 24px 50px -28px rgba(124,135,147,.45);
  aspect-ratio:4 / 3;
  transition:box-shadow .4s ease;
}
.baldness-photo img{
  width:100%; height:100%; max-width:100%; display:block; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.baldness-photo:hover{ box-shadow:0 30px 60px -26px rgba(124,135,147,.55); }
.baldness-photo:hover img{ transform:scale(1.06); }

/* 右側按鈕串：等高平分 */
.baldness-nav{
  flex:1; width:100%;
  display:flex; flex-direction:column; gap:14px;
}
.baldness-link{
  flex:1 1 0; min-height:0;
  display:flex; align-items:center; gap:15px; padding:14px 20px;
  background:var(--home-card); border:1px solid var(--home-border); border-radius:16px;
  text-decoration:none; color:var(--home-heading);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.baldness-link:hover{
  transform:translateX(6px); border-color:var(--home-primary); background:var(--home-primary-soft);
  box-shadow:0 18px 38px -20px rgba(124,135,147,.5);
}

/* 圓形圖示 */
.baldness-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--home-primary-soft); color:var(--home-primary-dark);
  font-size:1.05rem; transition:background .3s ease, color .3s ease, transform .3s ease;
}
.baldness-link:hover .baldness-icon{ background:var(--home-primary); color:#fff; transform:scale(1.06); }

/* 按鈕文字 */
.baldness-label{
  flex:1; font-size:1.12rem; font-weight:700; letter-spacing:.01em; line-height:1.4;
  transition:color .3s ease;
}
.baldness-link:hover .baldness-label{ color:var(--home-primary-dark); }

/* 右側箭頭 */
.baldness-arrow{
  flex:0 0 auto; color:var(--home-text-faint); font-size:1.4rem; line-height:1;
  transition:color .3s ease, transform .3s ease;
}
.baldness-link:hover .baldness-arrow{ color:var(--home-primary); transform:translateX(4px); }

/* ---- 響應式 ---- */
@media (max-width:1100px){
  /* 螢幕不足時改上下堆疊：圖在上、按鈕在下 */
  .baldness-layout{ flex-direction:column; align-items:stretch; gap:28px; }
  .baldness-photo{ flex:none; width:100%; }
  .baldness-list{ flex:none; }
  .baldness-link{ flex:0 0 auto; min-height:0; padding:16px 22px; }
}
@media (max-width:560px){
  .baldness-nav{ gap:12px; }
  .baldness-link{ padding:14px 16px; gap:13px; }
  .baldness-label{ font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .baldness-photo,.baldness-photo img,.baldness-link,.baldness-icon,.baldness-arrow{ transition:none; }
  .baldness-link:hover{ transform:none; }
  .baldness-link:hover .baldness-icon{ transform:none; }
  .baldness-link:hover .baldness-arrow{ transform:none; }
  .baldness-photo:hover img{ transform:none; }
}

/* ============================================================
   植髮服務區塊（service-）
   - 卡片格狀排列：圖片滿版、內文、了解更多連結
   ============================================================ */
.service-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px;
}
.service-item{ display:flex; float:none; width:auto; margin:0; min-width:0; }

.service-card{
  display:flex; flex-direction:column; width:100%;
  background:var(--home-card); border:1px solid var(--home-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(124,135,147,.45);
}
/* 圖片：滿版等比縮放，hover 微放大 */
.service-photo{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--home-primary-soft); }
.service-photo img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-photo img{ transform:scale(1.06); }

.service-body{ display:flex; flex-direction:column; gap:12px; padding:26px 26px 28px; flex:1; }
.service-title a{
  font-size:1.18rem; font-weight:700; line-height:1.5;
  color:var(--home-heading); text-decoration:none; letter-spacing:.01em;
  transition:color .3s ease;
}
.service-card:hover .service-title a{ color:var(--home-primary); }
.service-text{ font-size:.95rem; line-height:1.8; color:var(--home-text-muted); flex:1; }
.service-text p{ margin:0; }
.service-link{ margin-top:4px; }
.service-link a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.95rem; font-weight:700; letter-spacing:.02em;
  color:var(--home-primary-dark); text-decoration:none;
}
.service-link a::after{ content:"\2192"; transition:transform .3s ease; }
.service-card:hover .service-link a::after{ transform:translateX(5px); }

@media (max-width:960px){
  .service-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
}
@media (max-width:560px){
  .service-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .service-card,.service-photo img,.service-link a::after{ transition:none; }
  .service-card:hover{ transform:none; }
  .service-card:hover .service-photo img{ transform:none; }
}

/* ============================================================
   全台照護區塊（aftercare-）
   - 主視覺地圖依裝置切換（電腦版／手機版各一張）
   - 四張編號卡片：右上角大型流水編號、頂部滑入飾條
   ============================================================ */

/* 標題副標文字：覆蓋 .section-title span 的裝飾線樣式，還原為一般文字 */
.section-title .aftercare-subtitle{
  display:block; width:auto; height:auto; margin:10px 0 0;
  border-radius:0; background:none;
  font-size:1.1rem; font-weight:700; letter-spacing:.04em;
  color:var(--home-text-muted);
}

/* ---- 主視覺圖：標題下方、卡片上方（電腦與手機各一張圖切換） ---- */
.aftercare-hero{
  width:100%; max-width:1180px;
  margin:0 auto 40px;
}
.aftercare-hero img{
  width:100%; height:auto; display:block;
  border-radius:20px;
}
/* 裝置對應顯示：預設（768px 以上）只出現電腦版圖，767px 以下只出現手機版圖
   加 !important 確保不被其他樣式覆蓋（比照高雄站作法） */
.aftercare-hero-mobile{ display:none !important; }
@media (max-width:767px){
  .aftercare-hero-desktop{ display:none !important; }
  .aftercare-hero-mobile{ display:block !important; }
}

.aftercare-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  counter-reset:aftercare;
}
.aftercare-card{
  counter-increment:aftercare;
  position:relative; overflow:hidden;
  background:var(--home-card); border:1px solid var(--home-border);
  border-radius:20px; padding:36px 28px 32px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
/* 頂部飾條：hover 時由左往右展開 */
.aftercare-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--home-primary),var(--home-primary-light));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s ease;
}
/* 右上角大型流水編號（01、02…），僅作淡色背景裝飾；字體樣式與高雄版一致 */
.aftercare-card::after{
  content:counter(aftercare,decimal-leading-zero);
  position:absolute; top:-12px; right:10px;
  font-size:6rem; font-weight:800; font-style:italic; line-height:1;
  color:var(--home-primary); opacity:.07; pointer-events:none;font-family: Arial;
}
.aftercare-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 22px 48px -20px rgba(124,135,147,.45);
}
.aftercare-card:hover::before{ transform:scaleX(1); }

.aftercare-icon{
  position:relative; z-index:1;
  width:74px; height:74px; border-radius:20px;
  background:var(--home-primary-soft);
  display:grid; place-items:center;
  margin-bottom:22px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.aftercare-card:hover .aftercare-icon{
  transform:scale(1.06);
  box-shadow:0 10px 22px -10px rgba(124,135,147,.5);
}
.aftercare-icon img{ width:38px; height:38px; display:block; }

.aftercare-title{
  position:relative; z-index:1;
  margin:0 0 12px;
  font-size:1.18rem; font-weight:700; line-height:1.5;
  letter-spacing:.01em; color:var(--home-heading);
}
.aftercare-text{
  position:relative; z-index:1;
  margin:0;
  font-size:.95rem; line-height:1.85;
  color:var(--home-text-muted); letter-spacing:.01em;
}

@media (max-width:960px){
  .aftercare-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .aftercare-grid{ grid-template-columns:1fr; gap:18px; }
  .aftercare-card{ padding:30px 24px 28px; }
  .aftercare-card::after{ font-size:5rem; }
}
@media (prefers-reduced-motion:reduce){
  .aftercare-card,.aftercare-icon,.aftercare-card::before{ transition:none; }
  .aftercare-card:hover{ transform:none; }
}

/* ============================================================
   診所特色圖示（feature-）
   - 已併入「關於品牌」深色區塊底部（深色配色覆蓋見 about- 段落）
   - 圖示置中排列，數量不固定，自動換行
   ============================================================ */
.feature-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px 10px;
}
.feature-item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; float:none; width:auto; margin:0;
}
.feature-icon{
  width:100px; height:100px; border-radius:18px;
  background:var(--home-primary-soft);
  display:grid; place-items:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.feature-item:hover .feature-icon{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 12px 24px -12px rgba(124,135,147,.5);
}
.feature-icon img{ width:60px; height:60px; display:block; }
.feature-text{ margin:0; color:var(--home-text); font-size:15px; line-height:1.7; }
.feature-text strong,
.feature-text b{
  display:block; margin:0 0 6px;
  font-size:16px; font-weight:700; color:var(--home-heading); letter-spacing:.01em;
}

@media (max-width:560px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); gap:26px 5px; }
  .feature-icon{ width:80px; height:80px; }
  .feature-icon img{ width:45px; height:45px; }
  .feature-text{ font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce){
  .feature-icon{ transition:none; }
  .feature-item:hover .feature-icon{ transform:none; }
}

/* ============================================================
   關於品牌區塊（about-）—— 深色底
   - 底色由主題色加深調配（--home-dark），全寬滿版
   - 左：品牌形象圖（圓角、陰影）；右：介紹文字
   - 中：診所特色圖示（自特色區塊合併進來，無獨立標題）
   - 下：各地診所導引膠囊連結
   ============================================================ */
.about-section{ background:var(--home-dark); }

/* 深色底上的標題改為白字，漸層飾條沿用主題色 */
.about-section .section-title{ color:#fff; }

.about-layout{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:60px; align-items:center;
}
.about-photo{
  position:relative; overflow:hidden;
}
.about-photo img{
  width:100%; height:auto; display:block;
  transition:transform .6s ease;
}
.about-photo:hover img{ transform:scale(1.04); }

.about-content{
  font-size:1rem; line-height:1.95;
  color:#e8ebee; letter-spacing:.01em; text-align:justify;
}
.about-content strong{ color:#ffd989; }

/* ---- 合併進來的診所特色：深色底配色調整 ---- */
/* 電腦版固定 6 欄 × 1 列 */
.about-section .feature-grid{ margin-top:60px; grid-template-columns:repeat(6,1fr); }
.about-section .feature-text{ color:#e8ebee; }
.about-section .feature-text strong,
.about-section .feature-text b{ color:#fff; }
.about-section .feature-item:hover .feature-icon{
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
}

/* 品牌介紹頁導引按鈕：沿用 .section-button 膠囊造型，
   但底色是深色，配色反轉——白底深字最醒目，hover 轉主題淺色 */
.about-section .section-button{
  background:#fff; color:var(--home-dark);
}
.about-section .section-button:hover{
  background:#ffd989;
  opacity:1!important;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);
}

@media (max-width:960px){
  .about-layout{ grid-template-columns:1fr; gap:40px; }
  /* 平板改 3 欄 × 2 列 */
  .about-section .feature-grid{ margin-top:48px; grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .about-layout{ gap:28px; }
  /* 手機改 2 欄 × 3 列 */
  .about-section .feature-grid{ margin-top:36px; grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .about-photo img{ transition:none; }
  .about-photo:hover img{ transform:none; }
}

/* ============================================================
   AI 植髮模擬 Banner（simulation-）
   - 深色漸層卡片（由主題深色調配），左文右圖
   - 四張特點小卡：半透明白底、hover 上浮並亮起主題淺色邊框
   - CTA 按鈕採跳色設計（暖金橘漸層），在灰藍色系中形成視覺焦點
   ============================================================ */
.simulation-banner{
  max-width:1180px; margin:0 auto;
  background:linear-gradient(135deg,#3f464d 0%,var(--home-primary-dark) 100%);
  border-radius:20px;
  padding:50px;
  color:#fff;
  display:flex; align-items:center; gap:40px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.45);
}

/* ---- 左：文字內容 ---- */
.simulation-content{ flex:1.2; min-width:0; }

.simulation-title{
  margin:0 0 12px;
  font-size:2.1rem; font-weight:800; line-height:1.35;
  letter-spacing:.03em; color:#fff;
}
.simulation-subtitle{
  margin:0 0 32px;
  font-size:1.08rem; line-height:1.7;
  color:#cfd6dd; letter-spacing:.01em;
}

/* ---- 四張特點小卡 ---- */
.simulation-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  margin-bottom:32px;
}
.simulation-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:18px 20px;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.simulation-item:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.09);
  border-color:var(--home-primary-light);
}
/* hashtag 特點標題：暖金色＋加大字級，在深色卡片上凸顯（與 CTA 跳色呼應） */
.simulation-hashtag{
  display:inline-block; margin-bottom:10px;
  font-size:1.15rem; font-weight:800; letter-spacing:.03em;
  color:#ffd989;
}
.simulation-text{
  margin:0;
  font-size:.9rem; line-height:1.7; color:#e2e7ec;
}

/* ---- CTA 按鈕：暖金色跳色、深字提高對比，hover 轉暖橘變色 ----
   箭頭以 ::after 呈現，hover 右移（與「了解ihair風華御髮」按鈕一致） */
.simulation-button{
  display:inline-flex; align-items:center; gap:8px;
  background-color:#ffd989;
  color:#3c4148;
  font-size:16px; font-weight:700; letter-spacing:.02em;
  padding:15px 32px; border-radius:999px;
  text-decoration:none;
  transition:background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.simulation-button::after{ content:"\2192"; transition:transform .3s ease; } /* 右箭頭符號 */
.simulation-button:hover{
  opacity:1!important;
  background-color:#ffcc60;
  transform:translateY(-2px);
  color:#3c4148;
}
.simulation-button:hover::after{ transform:translateX(4px); }

/* ---- 免責說明：小字弱化 ---- */
.simulation-disclaimer{
  margin:16px 0 0;
  font-size:.72rem; line-height:1.7;
  color:rgba(255,255,255,.45);
}

/* ---- 右：App 操作示意圖 ---- */
.simulation-photo{ flex:.8; min-width:0; line-height:0; }
.simulation-photo img{
  width:100%; height:auto; display:block;
  border-radius:16px;
}

/* ---- 響應式 ---- */
@media (max-width:960px){
  .simulation-banner{ flex-direction:column; padding:36px 24px; gap:32px; }
  .simulation-photo{ width:100%; max-width:420px; margin:0 auto; }
  .simulation-title{ font-size:1.75rem; }
  .simulation-button{  display:flex; width:fit-content; margin-left:auto; margin-right:auto;}
}
@media (max-width:560px){
  .simulation-banner{ padding:30px 18px; }
  .simulation-grid{ grid-template-columns:1fr; gap:14px; }
  .simulation-title{ font-size:1.5rem; }
  .simulation-subtitle{ font-size:1rem; margin-bottom:26px; }
  .simulation-button{ font-size:1rem; padding:14px 26px; }
}
@media (prefers-reduced-motion:reduce){
  .simulation-item,.simulation-button{ transition:none; }
  .simulation-item:hover,.simulation-button:hover{ transform:none; }
}

/* ============================================================
   全台診所區塊（clinic-）
   - 電腦版：卡片格狀；手機版：左右輪播
   - 卡片含地址（點擊導航）、營業時間與兩顆行動按鈕
   ============================================================ */
.clinic-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px;
}
.clinic-grid > li{ display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0; padding:0; }

.clinic-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--home-card); border:1px solid var(--home-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.clinic-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(124,135,147,.45);
}
.clinic-photo{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--home-primary-soft); }
.clinic-photo img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.clinic-card:hover .clinic-photo img{ transform:scale(1.06); }

.clinic-body{ display:flex; flex-direction:column; gap:12px; padding:22px 24px 24px; flex:1; }
.clinic-title a{
  font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em;
  color:var(--home-heading); text-decoration:none; transition:color .3s ease;
}
.clinic-card:hover .clinic-title a{ color:var(--home-primary); }

/* 地址與營業時間列 */
.clinic-place{ display:flex; flex-direction:column; gap:8px; flex:1; }
.clinic-row{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.9rem; line-height:1.7; color:var(--home-text-muted);
}
.clinic-row i{ margin-top:5px; color:var(--home-primary); }
.clinic-row a{ color:var(--home-text-muted); text-decoration:none; transition:color .3s ease; }
.clinic-row a:hover{ color:var(--home-primary-dark); }

/* 行動按鈕：主色實心（查看診所）＋外框（Google 聯繫） */
.clinic-button,
.clinic-google{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  font-size:.95rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.clinic-button{
  background:var(--home-primary); color:#fff;
}
.clinic-button:hover{
  background:var(--home-primary-dark);
  box-shadow:0 12px 24px -12px rgba(124,135,147,.6);
}
.clinic-google{
  background:transparent; color:var(--home-primary-dark);
  border:1px solid var(--home-primary);
}
/* Google 商家預約按鈕 hover：由線框轉為填滿 */
.clinic-google:hover{
  background:var(--home-primary); color:#fff;
  border-color:var(--home-primary);
  box-shadow:0 12px 24px -12px rgba(124,135,147,.6);
}

@media (max-width:960px){
  .clinic-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
/* 手機版不輪播：卡片單欄直排 */
@media (max-width:560px){
  .clinic-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .clinic-card,.clinic-photo img,.clinic-button,.clinic-google{ transition:none; }
  .clinic-card:hover{ transform:none; }
  .clinic-card:hover .clinic-photo img{ transform:none; }
}

/* ============================================================
   植髮文章區塊（article-）
   - 最新文章與熱門文章共用同一組樣式
   - 卡片含日期、標題、摘要、免責說明、標籤與瀏覽數
   ============================================================ */
.article-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px;
}
.article-grid > li{ display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0; padding:0; }

.article-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--home-card); border:1px solid var(--home-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.article-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(124,135,147,.45);
}
.article-photo{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--home-primary-soft); }
.article-photo img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.article-card:hover .article-photo img{ transform:scale(1.06); }

.article-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }
.article-body > a{ color:inherit; text-decoration:none; }

/* 發佈日期 */
.article-date{
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--home-primary-dark);
}
.article-date i{ margin-right:5px; color:var(--home-text-faint); }

.article-title{
  margin:0; font-size:1.18rem; font-weight:700; line-height:1.5;
  letter-spacing:.01em; color:var(--home-heading); transition:color .3s ease;
}
.article-card:hover .article-title{ color:var(--home-primary); }

/* 摘要：最多三行，超出以省略號截斷 */
.article-text{
  font-size:.95rem; line-height:1.8; color:var(--home-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 免責說明 */
.article-disclaimer{ margin:2px 0 0; font-size:.78rem; line-height:1.6; color:var(--home-text-faint); }

/* 標籤／瀏覽數／分享數 */
.article-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.article-meta i{ font-size:.85em; }
.article-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--home-primary-soft); color:var(--home-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease, color .3s ease;
}
.article-tag i:before{ color:var(--home-primary-dark); }
.article-tag:hover{ background:var(--home-primary); color:#fff; }
.article-tag:hover i:before{ color:#fff; transition:background .3s ease, color .3s ease; }
.article-views,
.article-shares{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--home-text-faint); }

/* 閱讀更多文字連結 */
.article-body .article-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.92rem; font-weight:700; letter-spacing:.02em;
  color:var(--home-primary-dark); text-decoration:none;
}
.article-body .article-more::after{ content:"\2192"; transition:transform .3s ease; }
.article-card:hover .article-body .article-more::after{ transform:translateX(5px); }

@media (max-width:960px){
  .article-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:560px){
  .article-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .article-card,.article-photo img,.article-body .article-more::after{ transition:none; }
  .article-card:hover{ transform:none; }
  .article-card:hover .article-photo img{ transform:none; }
}

/* ============================================================
   植髮影片區塊（video-）
   - 影片以 16:9 比例容器呈現，保留 .youtube-player 供 JS 初始化
   ============================================================ */
.video-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px;
}
.video-grid > li{ display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0; padding:0; }

.video-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--home-card); border:1px solid var(--home-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.video-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(124,135,147,.45);
}

/* 影片容器：固定 16:9，內層鋪滿 */
.video-media{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; line-height:0; background:#000;
}
.video-media .youtube-player{ position:absolute; inset:0; width:100%; height:100%; }
.video-media .youtube-player iframe,
.video-media .youtube-player img,
.video-media > iframe,
.video-media > img{
  position:absolute; inset:0; width:100%; height:100%; display:block; border:0; object-fit:cover;
}

.video-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }

/* 標題：intro.css 有同名 .video-title 舊樣式（固定高度＋截斷），此處以區塊作用域覆蓋還原 */
.video-section .video-title{
  margin:0; height:auto; overflow:visible;
  font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em;
  color:var(--home-heading);
}
.video-section .video-text{
  margin:0; font-size:.95rem; line-height:1.8; color:var(--home-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.video-section .video-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.video-section .video-meta i{ font-size:.85em; }
.video-section .video-meta i:before{ color:var(--home-primary-dark); }
.video-section .video-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--home-primary-soft); color:var(--home-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease, color .3s ease;
}
.video-section .video-tag:hover{ background:var(--home-primary); color:#fff; }
.video-section .video-tag:hover i:before{ color:#fff; transition:background .3s ease, color .3s ease; }

@media (max-width:960px){
  .video-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:560px){
  .video-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .video-card{ transition:none; }
  .video-card:hover{ transform:none; }
}

/* ============================================================
   聯絡表單區塊（contact-section）
   - 表單本體結構與欄位由共用視圖 contact_form.html 提供，完全不修改
   - 以下皆以 .contact-section 作用域覆蓋 form.css 的舊樣式，
     只影響首頁表單外觀，聯絡我們頁（/contact）維持原樣
   ============================================================ */
.contact-section .home-container{ max-width:1180px; }

/* ---- 表單整體：限制閱讀寬度並置中 ---- */
.contact-section .formContainer{ max-width:960px; margin:0 auto; }

/* ---- 必填提示：淺底圓角提示框 ---- */
.contact-section .formTabHint{
  background:var(--home-primary-soft);
  border-radius:12px;
  padding:12px 18px;
  text-align:center;
  margin-bottom:24px;
  color:#c96a5e; /* 警示文字保留暖色調但柔化 */
}
.contact-section .formTabHint p{ margin:0; }

/* ---- 表單卡片：白底、圓角、柔和陰影 ---- */
.contact-section .formmain{
  background:var(--home-card);
  border:1px solid var(--home-border);
  border-radius:20px;
  overflow:hidden; /* 讓標題色帶跟著圓角 */
  margin-bottom:28px;
  box-shadow:0 14px 34px -24px rgba(124,135,147,.35);
}

/* ---- 卡片標題帶：主題色漸層 ---- */
.contact-section .formmaintl{
  background:linear-gradient(90deg,var(--home-primary),var(--home-primary-light));
  padding:14px 0;
  letter-spacing:.08em;
}

/* ---- 卡片內距 ---- */
.contact-section .formmainbody{ padding:26px 24px 18px; }

/* ---- 小標題：主題深色增加層次 ---- */
.contact-section .formTl{ color:var(--home-primary-dark); }

/* ---- 輸入框／下拉／多行輸入：淺灰藍底、圓角、focus 光暈 ---- */
.contact-section .formGpinp,
.contact-section .formGpC select,
.contact-section .formGpC textarea{
  background-color:#f6f8fa;
  border:1px solid var(--home-border);
  border-radius:12px;
  font-size:14px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.contact-section .formGpinp:focus,
.contact-section .formGpC select:focus,
.contact-section .formGpC textarea:focus{
  outline:none;
  border-color:var(--home-primary);
  box-shadow:0 0 0 3px rgba(124,135,147,.18);
}

/* ---- 下拉選單：關閉原生外觀，自繪灰色箭頭 ---- */
.contact-section .formGpC select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}

/* ---- 勾選框／單選鈕：勾選色貼齊主題 ---- */
.contact-section input[type="checkbox"],
.contact-section input[type="radio"]{
  accent-color:var(--home-primary);
}

/* ---- 「其他」欄位的底線輸入：底線色貼齊主題 ---- */
.contact-section .formcheckGpRt input{
  border-bottom-color:var(--home-primary-light);
}

/* ---- 上傳照片：左端膠囊按鈕＋右端圓角路徑列 ---- */
.contact-section .formupload input[type="button"]{
  border-radius:999px 0 0 999px;
  transition:background .3s ease;
}
.contact-section .formupload input[type="button"]:hover{
  background:var(--home-primary-dark);
}
.contact-section #uploadPath{
  background:#f6f8fa;
  border:1px solid var(--home-border);
  border-left:none;
  border-radius:0 999px 999px 0;
}

/* ---- 送出按鈕：比照 .section-button 的膠囊樣式 ---- */
.contact-section .formGpBtn{
  border-radius:999px;
  height:48px;
  line-height:48px;
  width:180px;
  margin-top:24px;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.contact-section .formGpBtn:hover{
  background:var(--home-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(124,135,147,.65);
}

/* ---- 響應式與動態偏好 ---- */
@media (max-width:767px){
  .contact-section .formmainbody{ padding:20px 14px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .contact-section .formGpinp,
  .contact-section .formGpC select,
  .contact-section .formGpC textarea,
  .contact-section .formGpBtn,
  .contact-section .formupload input[type="button"]{ transition:none; }
  .contact-section .formGpBtn:hover{ transform:none; }
}