/* 產品與服務：沿用甲版的明亮展台、立體圖示及按鈕。 */
main h1,main h2,main h3,main p,main li{text-wrap:balance}
.page-hero__lead,.products-service p{overflow-wrap:break-word}
.sec-head>p>span,.products-card p span,.products-method p span,.products-service__heading p span{display:inline-block}

/* 麵包屑「首頁」：七頁共用同一顆淡色立體按鈕（.btn--ghost），高度 44px。 */
.breadcrumb a.btn{height:44px;padding:2px 16px 0;font-size:16px}
.breadcrumb a.btn:hover{text-decoration:none}

/* 產品大類：用 8 欄格線每張跨 2 欄，最後一排靠左、欄線上下對齊。 */
.products-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
.products-grid>.products-card{grid-column:span 2}
.products-card{padding:22px 16px 26px;background:var(--tint);gap:0;scroll-margin-top:150px}
.products-card::before{height:4px;background:linear-gradient(90deg,transparent,var(--sky-2),transparent)}
.products-card:hover{border-color:var(--brand);box-shadow:var(--depth-3)}
.products-card>.stand:last-child{margin-top:0}
.products-card .stand{width:100%;padding:0}
/* 照片的祖先不建立堆疊層；白底直接融進淡藍展台。
   每張照片的 --w／--l／--b 由照片實際物件範圍換算：物件高度一致＝照片框高的 90%（寬扁的吊扇、水冷機與控制箱以框寬 92% 為限）、
   物件底緣全部落在同一條線（展台頂面中心），水平以物件中心置中。 */
.products-card .stand__photo{width:min(88%,300px);height:auto;min-height:0;aspect-ratio:1.2;margin-bottom:calc(6px - 8.28%)}
.products-card .stand__photo>img{position:absolute;left:var(--l,6%);bottom:var(--b,0%);width:var(--w,88%);max-width:none;height:auto;max-height:none;margin:0}
.products-card .stand__base{width:92%;max-width:360px}
.products-card .stand figcaption{margin-top:24px}
.products-card h3{line-height:1.4}
.products-card p{margin-top:10px;font-size:var(--fs-body);font-weight:400;line-height:1.65}
/* 一句說明固定拆成兩行（兩個短句各一行），同一排每張卡的行數一樣；寬螢幕卡片夠寬再併成一行。 */
.products-card p span{display:block}

/* 三種做法：三張卡用子格線共用列高，標題列、說明、設備標籤、按鈕在同一條線。
   預設（桌機一般寬度與手機）：圖示＋標題一列，說明與標籤跨滿卡寬，按鈕在卡底。 */
.products-methods{grid-template-columns:repeat(3,minmax(0,1fr))}
.products-method{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:16px;padding:28px 24px}
.products-method__body{display:contents}
.products-method__icon{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-bottom:5px solid var(--brand-d);border-radius:22px;background:linear-gradient(145deg,var(--brand-2),var(--brand));box-shadow:var(--depth-1),0 14px 24px -14px rgba(2,103,185,.6)}
.products-method__icon svg{width:44px;height:44px;fill:none;stroke:var(--white);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.products-method__fill{fill:rgba(255,255,255,.28)}
.products-method--2 .products-method__icon{border-bottom-color:#1487bd;background:linear-gradient(145deg,#74d2f7,#22a7e0)}
.products-method--3 .products-method__icon{border-bottom-color:var(--amber-d);background:linear-gradient(145deg,#ffd27b,var(--amber))}
.products-method--2::before{background:linear-gradient(90deg,var(--sky),var(--sky-2))}
.products-method--3::before{background:linear-gradient(90deg,var(--amber),#ffd27b)}
.products-method h3{grid-column:2;grid-row:1;align-self:center;line-height:1.35}
.products-method__body>p{grid-column:1 / -1;grid-row:2;align-self:start}
.products-method__body>.chip-row{grid-column:1 / -1;grid-row:3;align-self:start;gap:8px}
.products-method__body .chip{padding:6px 14px}
.products-method>.products-method__link{grid-column:1 / -1;grid-row:4;justify-self:start;align-self:end;margin:0;height:56px;box-sizing:border-box}

/* 工程服務：兩張大卡用子格線共用列高，說明、服務項目、按鈕三列左右切齊。 */
.products-services{grid-template-columns:repeat(2,minmax(0,1fr))}
.products-service{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:24px;padding:32px}
.products-service__heading{grid-row:1;display:flex;align-items:flex-start;gap:24px}
.products-service__heading>div{min-width:0}
.products-service__heading p{margin-top:14px}
.products-service .icon3d{width:96px;height:96px;border-bottom:4px solid var(--line)}
.products-service__items{grid-row:2;align-self:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px}
.products-service__items .chip--link{width:100%;height:56px;padding-inline:12px;border-radius:14px;font-size:17px;white-space:nowrap;box-sizing:border-box}
.products-service>.btn{grid-row:3;justify-self:start;align-self:end;height:56px;margin:0;box-sizing:border-box}

@media(max-width:1199px){
  .products-method{padding:26px 20px;column-gap:16px}
  .products-method__icon{width:64px;height:64px;border-radius:18px}
  .products-service{padding:28px 24px}
  .products-service__heading{gap:18px}
  .products-service .icon3d{width:80px;height:80px}

}
@media(max-width:900px){
  .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 單欄時卡片很寬：圖示｜名稱說明標籤｜按鈕 三段橫排，不留右半邊空白。 */
  .products-methods{grid-template-columns:1fr}
  .products-method{grid-row:span 3;grid-template-columns:auto minmax(0,1fr) auto;column-gap:24px;row-gap:12px;align-items:center}
  .products-method__icon{grid-row:1 / -1;width:80px;height:80px;border-radius:22px}
  .products-method h3{grid-column:2;grid-row:1}
  .products-method__body>p{grid-column:2;grid-row:2}
  .products-method__body>.chip-row{grid-column:2;grid-row:3}
  .products-method>.products-method__link{grid-column:3;grid-row:1 / -1;align-self:center}
  .products-services{grid-template-columns:1fr}

}
@media(max-width:600px){
  .products-grid{gap:14px}
  .products-card{padding:18px 9px 22px;scroll-margin-top:180px}
  .products-card .stand__photo{width:92%;margin-bottom:calc(3px - 9.4%)}
  .products-card .stand__base{width:94%;aspect-ratio:100/20}
  .products-card .stand__base::before{bottom:6px}
  .products-card .stand figcaption{margin-top:20px}
  .products-card h3{font-size:19px}
  .products-card p{font-size:16px;line-height:1.7}
      /* 手機回到「圖示＋名稱一列、說明標籤在下、按鈕滿寬」。 */
  .products-method{grid-row:span 4;grid-template-columns:auto minmax(0,1fr);padding:24px 20px;column-gap:16px;row-gap:14px}
  .products-method__icon{grid-row:1;width:60px;height:60px;border-radius:18px}
  .products-method__icon svg{width:38px;height:38px}
  .products-method__body>p,.products-method__body>.chip-row{grid-column:1 / -1}
  .products-method__body .chip{font-size:15px;padding-inline:10px}
  .products-method>.products-method__link{grid-column:1 / -1;grid-row:4;width:100%;height:52px}
  .products-service{padding:26px 22px;row-gap:20px}
  .products-service__heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
  .products-service__heading>div{display:contents}
  .products-service__heading p{grid-column:1 / -1;margin-top:0}
  .products-service .icon3d{width:72px;height:72px;border-radius:20px}
  .products-service__items{grid-template-columns:1fr;gap:10px}
  .products-service__items .chip--link,.products-service>.btn{height:52px;width:100%}

}
@media(min-width:1921px){
  .products-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .products-card{padding:24px 18px 30px}
  .products-card p span{display:inline-block}
  /* 寬螢幕卡片寬：圖示｜名稱說明標籤｜按鈕 三段橫排，三張卡的每一列仍共用列高。 */
  /* 1921 時卡寬只有 2560 的四分之三：圖示、內距、間距、標籤字隨視窗寬度縮放，標籤才不會擠成兩行。 */
  .products-method{grid-row:span 3;grid-template-columns:auto minmax(0,1fr) auto;padding:clamp(24px,1.33vw,34px);column-gap:clamp(18px,1.1vw,28px);row-gap:12px;align-items:center}
  .products-method__icon{grid-row:1 / -1;width:clamp(72px,3.75vw,96px);height:clamp(72px,3.75vw,96px);border-radius:clamp(22px,1vw,26px)}
  .products-method__icon svg{width:56%;height:56%}
  .products-method h3{grid-column:2;grid-row:1}
  .products-method__body>p{grid-column:2;grid-row:2}
  .products-method__body>.chip-row{grid-column:2;grid-row:3}
  .products-method__body .chip{font-size:clamp(16px,.7vw,18px)}
  .products-method>.products-method__link{grid-column:3;grid-row:1 / -1;align-self:center}
  .products-service{padding:40px;row-gap:28px}
  .products-service .icon3d{width:112px;height:112px}
  .products-service__items .chip--link{font-size:19px}

}

/* 細分尺寸（2026-10-02 老闆：「所有呎吋都要適合，不能只設定手機、平板、電腦」）：中間尺寸改排法、手機上落單的最後一張置中 */
@media(min-width:601px) and (max-width:959px){
  .products-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .products-grid>.products-card:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
}
@media(min-width:720px) and (max-width:959px){
  .products-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .products-grid>*{grid-column:span 2}
  .products-grid>:last-child:nth-child(odd){grid-column:2 / span 2}
}
@media(min-width:960px) and (max-width:1920px){
  .products-grid>.products-card:nth-child(4n+1):nth-last-child(3){grid-column:2 / span 2}
}
@media(min-width:1921px){
  .products-grid>.products-card:nth-child(6n+1):nth-last-child(5){grid-column:2 / span 2}
}