/* 側欄初始狀態與點擊後狀態共用相同寬度。 */
:is(#case-list, #case-list-overseas) button {
  width: 225px;
  max-width: 100%;
  min-height: 43px;
}

:is(#case-list, #case-list-overseas) button[aria-current="true"] {
  width: 258px;
  min-height: 46px;
}

:is(#case-list, #case-list-overseas) button:not([aria-current="true"]) {
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0;
}

.case-supply {
  display: flex;
  flex-wrap: wrap;
}
.case-supply > span {
  flex: 0 0 auto;
  max-width: 100%;
}

/* 1920px 桌面版：側欄未選中字級與英文副標題。 */
@media (min-width: 1536px) {
  :is(#case-list, #case-list-overseas) button:not([aria-current="true"]) {
    font-size: 20px;
  }

  .case-content h3 > span[lang="en"] {
    font-size: 16px;
  }
}

/* 桌面內文與副標題：行高 100%、字距 0，字級由各斷點調整。 */
@media (min-width: 1024px) {
  .case-content p,
  .case-content ul {
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.1;
  }
  .case-content h3 {
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
  }
}

/* 平板與手機：案例選單在內容上方水平捲動。 */
@media (max-width: 1023px) {
  .case-page-background { background-image: none; }
  .case-page-background nav[aria-label="麵包屑"] { font-size: 14px; }
  .case-page-background .section-title { font-size: 24px; }

  .case-page-background [data-case-panel] > h2 { font-size: 18px; }
  .case-page-background [data-case-panel] > h2 + p { font-size: 14px; }
  .case-content h3 { font-size: 16.2px; }
  .case-content p,
  .case-content ul {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .case-content section > div { padding-left: 20px; }
  .case-content section > ul {
    padding-left: 40px;
    list-style-position: outside;
  }

  .case-page-background .case-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 1246px;
    padding: 24px 24px 80px;
    border-radius: 25px;
    /* 以背景畫出 8px 線段／8px 間隔的 2px 頂部虛線。 
    border-top: 2px solid transparent;*/
    background-color: #fff;
    /*background-image: repeating-linear-gradient(to right, #a7ccdf 0 8px, transparent 8px 16px);*/
    background-size: 100% 2px;
    background-position: center top;
    background-origin: border-box;
    background-repeat: no-repeat;
  }

  /* 24px 卡片內距 + 標題三角形 10px + 間距 8px。 */
  .case-page-background [role="tablist"] { padding-left: 42px; }

  .case-page-background .case-tab[aria-selected="true"] {
    width: 100px;
    height: 44px;
    font-size: 20px;
  }
  .case-page-background .case-tab[aria-selected="false"] {
    width: 72px;
    height: 36px;
    font-size: 18px;
  }

  .case-page-background .case-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  :is(#case-list, #case-list-overseas) {
    min-width: 0;
    margin-left: 18px;
    max-width: calc(100% - 18px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  :is(#case-list, #case-list-overseas)::-webkit-scrollbar { display: none; }
  :is(#case-list, #case-list-overseas) ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
  }
  :is(#case-list, #case-list-overseas) li { flex: 0 0 auto; }
  :is(#case-list, #case-list-overseas) button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 64px;
    max-width: none;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 2px solid #7e8d9a;
    border-radius: 10px;
    background: #fff;
    color: #7e8d9a;
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  :is(#case-list, #case-list-overseas) button[aria-current="true"] {
    width: auto;
    min-width: 60px;
    min-height: 36px;
    border: 0;
    background: #103251;
    color: #fff;
  }

  .case-page-background .case-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 375px 手機版：單欄內文、置中副標題與直向照片。 */
@media (max-width: 767px) {
  .case-page-background {
    padding-left: 20px;
    padding-right: 20px;
    background-image: none;
  }
  .case-page-background > div {
    padding-top: 32px;
    padding-bottom: 260px;
  }
  .case-page-background .case-panel {
    min-height: 0;
    padding: 24px 24px 80px;
    border-radius: 25px;
  }
  .case-page-background [role="tablist"] {
    padding-left: 24px;
    gap: 12px;
  }
  .case-page-background .case-layout { gap: 16px; }
  :is(#case-list, #case-list-overseas) {
    margin-left: 0;
    max-width: 100%;
  }
  :is(#case-list, #case-list-overseas) ul { padding: 0; }
  .case-page-background [data-case-panel] > h2 {
    padding-top: 8px;
    line-height: 1.3;
  }
  .case-page-background [data-case-panel] > h2 > [aria-hidden="true"] { display: none; }
  .case-page-background [data-case-panel] > h2 + p {
    padding-left: 0;
    padding-top: 0;
    margin-top: 4px;
    line-height: 1.4;
  }
  .case-content {
    margin-top: 24px;
    gap: 48px;
  }
  .case-content h3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.3em;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }
  .case-content h3 > span {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .case-content section > div { padding-left: 0; }
  .case-content section > ul { padding-left: 22px; }
  .case-content p,
  .case-content ul {
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  /* 照片直排、最寬 287（375 版的寬度）並置中，避免 767 附近撐到近 680 寬。 */
  .case-page-background .case-gallery {
    grid-template-columns: minmax(0, 287px);
    justify-content: center;
    gap: 20px;
    margin-top: -24px;
  }
}

/* 1024px 版：縮減容器與欄間距。照片沿用 3 張橫排（Figma 1024 為直排，但圖會放大到約 644 寬，與相鄰寬度落差太大）。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .case-page-background {
    background-image: url("../img/Group 51-1.png"), url("../img/image 14-1.png");
    background-position: right 89px top 169px, left bottom;
  }
  .case-page-background .case-panel {
    padding-left: 30px;
    padding-right: 30px;
  }
  .case-page-background .case-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 20px;
  }
  :is(#case-list, #case-list-overseas) button {
    width: 200px;
  }
  :is(#case-list, #case-list-overseas) button[aria-current="true"] { width: 220px; }
  .case-content p,
  .case-content ul {
    font-size: 14.4px;
  }
  .case-content h3 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.35em;
    width: fit-content;
    max-width: calc(100% - 20px);
    font-size: 16.2px;
    font-weight: 700;
  }
  /* 語言段落不縮小，寬度不足時從中英交接處換行。 */
  .case-content h3 > span {
    flex: 0 0 auto;
    max-width: 100%;
  }
  /* 換行後以較長的語言段落決定底色寬度。 */
  .case-content h3.case-heading-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
}

/* 1024 至 1535px 共用頁首字級，避免中間斷點回到大桌面預設值。 */
@media (min-width: 1024px) and (max-width: 1535px) {
  .case-page-background nav[aria-label="麵包屑"] { font-size: 14.4px; }
  .case-page-background .section-title { font-size: 28.8px; }
}

/* 1440px 桌面版；1920px 與其他裝置的字級維持原設定。 */
@media (min-width: 1280px) and (max-width: 1535px) {
  .case-page-background .section-title::before {
    width: 8px;
    height: 28px;
    border-radius: 15px;
  }

  .case-page-background .case-tab[aria-selected="true"] { font-size: 25.2px; }
  .case-page-background .case-tab[aria-selected="false"] { font-size: 21.6px; }
  :is(#case-list, #case-list-overseas) button { font-size: 18px; }
  :is(#case-list, #case-list-overseas) button[aria-current="true"] { font-size: 21.6px; }

  .case-page-background [data-case-panel] > h2 { font-size: 21.6px; }
  .case-page-background [data-case-panel] > h2 + p { font-size: 14.4px; }
  .case-content p,
  .case-content ul { font-size: 15.84px; }
}

/* 舊站案例內容：圖、圖表說明、水質表（2026-09-23 從 InternationalCase_*.aspx 轉入） */
.case-content .case-caption {
  text-align: center;
  font-weight: 700;
  color: #333333;
}
.case-content .case-table-wrap { overflow-x: auto; }
.case-content .case-table {
  margin: 0 auto;
  min-width: 60%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
}
.case-content .case-table th,
.case-content .case-table td {
  border: 1px solid #D6E0ED;
  padding: 6px 12px;
  text-align: center;
}
.case-content .case-table th { background: #EDF7FF; font-weight: 700; }

/* 案例照片：內文最下方最多 3 張，4:3 同尺寸，點擊開啟燈箱。 */
.case-photo {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.case-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

/* 燈箱：Figma「再生水_首頁_案例分享」— 遮罩 #000 50%、圖寬 1132、白框 2px、圓角 9。 */
.case-lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.case-lightbox::backdrop { background: rgba(0, 0, 0, 0.5); }
html:has(.case-lightbox[open]) { overflow: hidden; }
.case-lightbox img {
  display: block;
  max-width: min(1132px, calc(100vw - 80px));
  max-height: calc(100vh - 80px);
  border: 2px solid #fff;
  border-radius: 9px;
}
/* 關閉鈕：Ellipse 21（43.43、#971212、白框 3px 置中）壓在圖片右上角；兩條 8.46×26.44 白條轉 ±45°。 */
.case-lightbox-close {
  position: absolute;
  top: -19.5px;
  right: -18.93px;
  width: 46.43px;
  height: 46.43px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #971212;
  cursor: pointer;
}
.case-lightbox-close::before,
.case-lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.46px;
  height: 26.44px;
  border-radius: 5px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.case-lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 圖片說明排列在放大圖片下方，長說明可捲動。 */
.case-lightbox-note {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
  max-height: 25vh;
  overflow: auto;
  margin: 12px 0 0;
  padding: 6px 10px;
  border: 1px solid #d5dce2;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #103251;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.case-lightbox-note[hidden] { display: none; }
.case-lightbox:has(.case-lightbox-note:not([hidden])) img {
  max-height: calc(75vh - 92px);
}

/* 2026.10.05純榛：縮圖筆記移至照片外側上方，滑鼠移入才顯示，不改動照片排列及尺寸。 */
.case-photo { position: relative; }
/* 2026.10.05純榛：筆記框提供喇叭控制，保持滑鼠及鍵盤可移至朗讀按鈕。 */
.case-photo-item { position: relative; }
.case-note-speak {
  float: right;
  margin: 0 0 4px 8px;
  padding: 3px 6px;
  border: 1px solid #d5dce2;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
.case-note-speak:focus-visible { outline: 2px solid #0861B7; }
.case-photo-note {
  display: none;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 180px;
  overflow: auto;
  padding: 6px 8px;
  border: 1px solid #d5dce2;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #103251;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.case-photo-item:hover .case-photo-note,
.case-photo-item:focus-within .case-photo-note { display: block; }