/* 遠端控制・智能監控方案頁（remote-monitoring）專屬樣式：只用 assets/base.css 的變數，不寫色碼 */

/* 共用格線：同一列卡片等高 */
.rm-grid{display:grid;gap:var(--gap);align-items:stretch;margin:0;padding:0;list-style:none}
.rm-benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.rm-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.rm-benefit h3,.rm-device h3{font-size:var(--fs-h3);line-height:1.4}

/* 四大好處：圖示＋標題＋一句說明（內容由上往下排，不把說明推到卡底） */
.rm-benefit{gap:clamp(10px,.8vw,16px)}
.rm-benefit>:last-child{margin-top:0}
.rm-benefit__icon{width:clamp(72px,4.6vw,108px);height:auto;aspect-ratio:1;margin-bottom:clamp(2px,.4vw,8px);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--depth-1)}

/* 三種設備：白底照片框＋規格列表＋底部看產品鈕（各卡的鈕切齊卡底） */
.rm-device{gap:clamp(14px,1.1vw,22px)}
.rm-device h3{word-break:keep-all;overflow-wrap:anywhere}
.rm-device__photo{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:clamp(10px,1vw,20px);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.rm-device__photo img{width:100%;height:100%;object-fit:contain}
.rm-specs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.rm-specs li{position:relative;padding-left:28px;color:var(--ink-2);line-height:1.6}
.rm-specs li::before{content:"";position:absolute;left:0;top:calc(.8em - 9px);width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,var(--brand-2),var(--brand))}
.rm-specs li::after{content:"";position:absolute;left:6.5px;top:calc(.8em - 5.5px);width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rm-device>.rm-device__btn{align-self:stretch;width:100%}
/* 本頁按鈕：量過字形實際位置（共用 .btn 上內距 3px 會讓字偏下 1.5px），上內距改 1.5px 讓字上下置中 */
.rm-device__btn,.rm-flow__btn{padding-top:1.5px}

/* 可搭配的設備：等寬立體膠囊，6 個剛好排滿（寬 6 欄／中 3 欄／手機 2 欄，不落單） */
/* 可搭配的設備：換行排列、不足一列置中（電腦 5 個一排、平板 3＋2、手機 2＋2＋1） */
.rm-pair__list{--g:clamp(10px,.8vw,16px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);margin:0;padding:0;list-style:none}
.rm-pair__list>li{display:flex;min-width:0;flex:0 0 calc((100% - 4 * var(--g)) / 5)}
.rm-pair__list .chip--link{flex:1;min-height:clamp(52px,3vw,62px);padding:8px 14px;font-size:clamp(16px,.85vw,19px);text-align:center;text-wrap:balance}
.rm-pair__list .chip--link:hover{border-color:var(--brand-2);border-bottom-color:var(--brand)}

/* 導入流程：同一個方格裡的三步時間軸（編號之間虛線相連），第三步多一顆下載鈕 */
.rm-flow__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.rm-flow__step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.rm-flow__step>.num3d{margin-bottom:6px}
.rm-flow__step:not(:last-child)::after{content:"";position:absolute;top:34px;left:88px;right:calc(16px - var(--gap));height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--sky) 0 12px,transparent 12px 22px)}
.rm-flow__step h3{font-size:var(--fs-h3);line-height:1.4}
.rm-flow__btn{margin-top:6px}

@media(max-width:1199px){
  .rm-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-pair__list>li{flex-basis:calc((100% - 2 * var(--g)) / 3)}
}
/* 平板窄寬：三張並排太擠 → 控制器、開關箱兩張並排，選配的偵測器整列橫放（照片左、文字右），不落單 */
@media(max-width:900px){
  .rm-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-device:last-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-content:center;column-gap:var(--gap)}
  .rm-device:last-child>*{grid-column:2}
  .rm-device:last-child>.rm-device__photo{grid-column:1;grid-row:1 / span 3;align-self:center}
}
@media(max-width:600px){
  .rm-benefit-grid,.rm-device-grid,.rm-flow__list{grid-template-columns:minmax(0,1fr)}
  /* 共用卡片手機內距是上下 26、左右 22；本頁卡片四邊統一 22（四周留白一致） */
  .rm-benefit,.rm-device,.rm-flow{padding:22px}
  .rm-device:last-child{display:flex;grid-column:auto}
  .rm-benefit{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:16px;row-gap:6px}
  .rm-benefit>*{grid-column:2}
  .rm-benefit>.rm-benefit__icon{grid-column:1;grid-row:1 / span 2;width:64px;margin:0}
  .rm-pair__list>li{flex-basis:calc((100% - var(--g)) / 2)}
  .rm-pair__list .chip--link{padding-inline:10px}
  /* 手機：編號在左、文字在右，虛線改成直的接到下一步 */
  .rm-flow__step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start}
  .rm-flow__step>*{grid-column:2}
  .rm-flow__step>.num3d{grid-column:1;grid-row:1 / span 3;width:56px;height:56px;margin:0;font-size:24px;border-radius:16px}
  .rm-flow__step>.rm-flow__btn{justify-self:start}
  .rm-flow__step:not(:last-child)::after{top:66px;bottom:calc(6px - var(--gap));left:26px;right:auto;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--sky) 0 10px,transparent 10px 18px)}
}