/* 首頁閱讀舒適版：限定有開場文案的首頁，不改療程與知識內頁。 */
body:has(#about-clinic) {
  --home-title: 2.375rem;
  --home-card-title: 1.375rem;
  --home-body: 1.25rem;
  --home-support: 1.125rem;
  --home-body-leading: 1.8;
}

/* 保留原有中文字體與品牌色，讓文字層級由尺寸、字重和行高決定。 */
body:has(#about-clinic) .ux-button,
body:has(#about-clinic) #home-booking .ux-button { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
body:has(#about-clinic) .section-title h2,
body:has(#about-clinic) .faq-block .section-title h2 { font-size: var(--home-title); }
body:has(#about-clinic) .section-title p { font-size: 1rem; }
/* 元艾美各頁的中文標題與英文副標之間不放裝飾線。 */
/* 只移動理念卡的位置，圖示、標題、說明從第一幀就能閱讀。 */
@media (prefers-reduced-motion: no-preference) {
  .care-values > [data-arrival="waiting"] { translate: 0 8px; }
  .care-values > [data-arrival="shown"] {
    transition: translate 480ms ease-out;
    translate: 0 0;
  }
  @media (min-width: 768px) {
    .care-values > [data-arrival="shown"]:nth-child(2) { transition-delay: 80ms; }
    .care-values > [data-arrival="shown"]:nth-child(3) { transition-delay: 160ms; }
  }
}
/* 鍵盤選到療程卡時，沿用滑鼠移入時的箭頭回饋。 */
.treat-list .treat:focus-visible .treat-arrow { color: var(--brand-deep); }
@media (prefers-reduced-motion: no-preference) {
  .treat-list .treat:focus-visible .treat-arrow { transform: translate(3px, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .treat-list .treat:hover .treat-arrow { transform: translateY(-50%); }
}
body:has(#about-clinic) .intro p { max-width: 50rem; margin-inline: auto; }
body:has(#about-clinic) .need-copy b { font-size: var(--home-card-title); font-weight: 600; }
/* 同組卡片標題齊頭；取消平均分行，避免短行擠在文字欄左側。 */
body:has(#about-clinic) .need-copy { align-self: flex-start; }
body:has(#about-clinic) .need-copy p { font-size: var(--home-support); line-height: var(--home-body-leading); color: #425950; text-wrap: wrap; }
/* 診療卡片字級只在此套用；不同螢幕使用本檔的響應式變數，不再跨檔覆寫。 */
body:has(#about-clinic) .treat b { font-size: var(--home-card-title); font-weight: 600; line-height: 1.5; letter-spacing: .06em; color: var(--brand-deep); }
body:has(#about-clinic) .treat .treat-description { font-size: var(--home-support); line-height: var(--home-body-leading); color: #425950; text-wrap: balance; }
body:has(#about-clinic) .seo-copy h2 { font-size: 2.25rem; line-height: 1.45; }
body:has(#about-clinic) .seo-copy > p { max-width: 47.5rem; margin-inline: auto; font-size: var(--home-body); line-height: var(--home-body-leading); color: #425950; }
body:has(#about-clinic) .faq-block h3 { font-size: var(--home-card-title); font-weight: 500; line-height: 1.6; text-wrap: balance; }
body:has(#about-clinic) .faq-block article p { font-size: var(--home-support); line-height: var(--home-body-leading); color: #425950; }
/* 用底色與內框標出正在閱讀的問答，文字位置與卡片尺寸維持固定。 */
@media (hover: hover) and (pointer: fine) {
  #faq .faq article:hover {
    background-color: #e6f1e5;
    box-shadow: inset 0 0 0 1px #a8c6b0;
  }
  @media (prefers-reduced-motion: no-preference) {
    #faq .faq article {
      transition: background-color 220ms ease-out, box-shadow 220ms ease-out;
    }
  }
}
/* 評論是完整閱讀文字，採自然換行；不改既有短標與置中理念卡。 */
body:has(#about-clinic) .reviews-preview .review-body { font-size: var(--home-support); line-height: 1.75; color: #425950; text-wrap: wrap; }
body:has(#about-clinic) .reviews-preview .review-date { font-size: .8125rem; }
body:has(#about-clinic) .reviews-preview .review-expand { font-size: .9375rem; }
body:has(#about-clinic) #dental-journal .home-knowledge-link h3 { font-size: var(--home-card-title); }
body:has(#about-clinic) #dental-journal .home-knowledge-link p { font-size: var(--home-support); line-height: var(--home-body-leading); }
body:has(#about-clinic) #dental-journal .home-knowledge-read { font-size: 1.0625rem; font-weight: 500; }
body:has(#about-clinic) #home-booking h2 { font-size: 2rem; }
body:has(#about-clinic) #home-booking .ux-booking-description { font-size: var(--home-support); line-height: var(--home-body-leading); color: #425950; }

@media (min-width: 1101px) {
  /* 圖框隨三排卡片等高，直幅取景以右側牙模為主體。 */
  .home-treatment-figure {
    align-self: stretch;
    overflow: hidden;
    border-radius: 10px;
    --home-treatment-position: 94% center;
  }
  /* 照片一直填滿圖框；露出三分之一後只放鬆取景，不移動外框。 */
  @media (prefers-reduced-motion: no-preference) {
    .home-treatment-figure .photo-block { transform-origin: 75% center; }
    .home-treatment-figure[data-reveal="waiting"] .photo-block {
      transform: scale(1.035);
    }
    .home-treatment-figure[data-reveal="opening"] .photo-block {
      transform: scale(1);
      transition: transform 1400ms ease-out;
    }
  }
  /* 桌機作為本版主要審稿尺寸：放大標題層級，並替 18px 卡片說明增加實際欄寬。 */
  body:has(#about-clinic) { --home-title: 2.5rem; --home-card-title: 1.5rem; }
  body:has(#about-clinic) .intro p { font-size: 1.625rem; line-height: 1.95; }
  body:has(#about-clinic) .treat-flow { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
}

@media (max-width: 767px) {
  body:has(#about-clinic) { --home-title: 2rem; --home-card-title: 1.25rem; --home-body: 1.125rem; --home-support: 1.0625rem; }
  body:has(#about-clinic) .intro p { font-size: 1.125rem; line-height: 1.85; letter-spacing: .01em; }
  body:has(#about-clinic) .intro-word { white-space: nowrap; }
  body:has(#about-clinic) .treat { padding: 22px 20px; }
  body:has(#about-clinic) .treat .treat-heading { padding-inline: 18px; }
  body:has(#about-clinic) .treat b { letter-spacing: .04em; }
  /* 手機省略情境照；保留 figure 上的置中滑動提示，平板與桌機仍顯示原圖。 */
  body:has(#about-clinic) .home-treatment-figure .photo-block { display: none; }
  /* 手機診療卡片橫向排列；保留一小段下一張作為可滑動提示。 */
  body:has(#about-clinic) .home-treatment-figure::after {
    content: '左右滑動查看更多 →';
    display: block;
    margin: 0;
    text-align: center;
    color: #52776c;
    font-size: 15px;
    letter-spacing: .04em;
  }
  body:has(#about-clinic) .treat-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 20px;
    scrollbar-width: thin;
    min-width: 0;
  }
  body:has(#about-clinic) .treat-list .treat {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  body:has(#about-clinic) .faq-block article { padding: 22px 20px; }
  body:has(#about-clinic) .faq-block article p { margin-left: 38px; }
  body:has(#about-clinic) .reviews-preview .review-body { font-size: 1rem; }
  body:has(#about-clinic) .reviews-preview .review-date { font-size: .75rem; }
  body:has(#about-clinic) #home-booking h2 { font-size: 1.875rem; }
  body:has(#about-clinic) #home-booking .ux-button { font-size: 1rem; min-height: 48px; }
}

@media (max-width: 359px) {
  /* 窄手機仍保留快捷鈕安全距離，以自然換行呈現完整短句。 */
  body:has(#about-clinic) #about-clinic { padding-inline: 56px; }
  body:has(#about-clinic) #about-clinic p { text-wrap: balance; }
  body:has(#about-clinic) .care-values p { text-wrap: balance; }
}