/* 主選單總覽頁（2026-10-06 老闆：「好像都沒有自己的頁面，然後再下一層。」）
   about／products／services／applications／projects／videos／downloads／shop／contact／faq 共 10 頁共用。
   區塊：子項入口卡（上方情境小字＝什麼情況看這頁）→ 橫式入口卡（改善方案）→ 摘要小卡（案例、影片）。
   顏色只用 assets/base.css 的變數；間距、圓角沿用 theme-3d.css 的 --c-gap、--c-radius；卡片外觀吃 theme-3d.css 的丙版方格（a.card 浮起）。 */

/* ---------- 子項入口卡：上圖（該頁的立體場景）＋名稱＋這頁能幫你什麼＋進入鍵；整張可點 ---------- */
.ov-grid{--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--c-gap);align-items:stretch}
.ov-grid--2{--n:2}
.ov-grid--3{--n:3}
.ov-grid--5{--n:5}
.fx3d .ov-card{display:flex;flex-direction:column;gap:0;min-width:0;padding:0;overflow:hidden;color:inherit;text-decoration:none}
.fx3d .ov-card>.ov-card__body{margin-top:0}
/* 圖格：直式卡一律同高（不隨卡寬變高），立體場景圖放大取中間；橫式卡由整列高度撐滿、不放大 */
.ov-card__art{--zoom:1.2;position:relative;display:block;height:clamp(150px,10.5vw,260px);overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 60% 60% at 50% 80%,color-mix(in srgb,var(--sky) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--white),var(--tint))}
.ov-card__art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--zoom));transition:transform .5s}
.ov-card__art--photo{--zoom:1}
.ov-card__art--photo img{object-fit:contain;padding:5% 10%;mix-blend-mode:multiply}
.ov-card__art--cover{--zoom:1;height:auto;aspect-ratio:16/9;background:var(--tint)}
@media(hover:hover) and (min-width:900px){
 .ov-card:hover .ov-card__art img{transform:scale(calc(var(--zoom) + .06))}
}
.ov-card__body{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-width:0;padding:clamp(20px,1.6vw,34px)}
.ov-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.ov-card__title{margin:0;color:var(--ink);font-size:clamp(22px,1.4vw,32px);line-height:1.3}
h3.ov-card__title{font-size:clamp(20px,1.2vw,28px)}
.ov-card__text{margin:0;color:var(--ink-2)}
/* 情境小字：卡片最上方一行（左側細色條），整張卡可點，所以它是文字不是按鈕 */
.ov-card__ask{display:flex;gap:10px;margin-bottom:-2px;color:var(--brand);font-size:16px;font-weight:800;line-height:1.5}
.ov-card__ask::before{content:"";flex:none;width:4px;border-radius:4px;background:linear-gradient(var(--sky),var(--brand))}
/* 數量標籤：輕量立體（比按鈕輕） */
.ov-card__count{display:inline-flex;align-items:baseline;gap:4px;padding:5px 12px 3px;border:1px solid var(--line);border-bottom-width:3px;border-radius:50px;background:linear-gradient(var(--white),var(--tint));color:var(--brand-d);font-size:16px;font-weight:800;line-height:1.4;white-space:nowrap;box-shadow:var(--depth-1)}
.ov-card__count b{color:var(--brand);font-size:19px;font-weight:900}
.ov-card__chip{align-self:flex-start}
.ov-card .ov-card__go{align-self:flex-start;margin-top:auto;height:auto;min-height:48px;padding:3px 20px 0;font-size:17px}
.ov-card__go::after{content:"›";margin-left:2px;font-size:1.2em;line-height:1}

/* 影片封面：播放記號＋片長 */
.ov-card__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:clamp(52px,3.6vw,72px);aspect-ratio:1;border:1px solid var(--white);border-bottom:4px solid var(--brand-d);border-radius:50%;background:linear-gradient(145deg,var(--sky),var(--brand-2) 55%,var(--brand));box-shadow:var(--depth-1);transform:translate(-50%,-50%)}
.ov-card__play::before{content:"";margin-left:12%;border-left:16px solid var(--white);border-block:10px solid transparent}
.ov-card__dur{position:absolute;right:10px;bottom:10px;padding:3px 10px 1px;border-radius:8px;background:color-mix(in srgb,var(--ink) 78%,transparent);color:var(--white);font-size:16px;font-weight:700;line-height:1.5}

/* 橫式入口卡（改善方案）：左圖、右邊說明與進入鍵 */
.ov-strip{margin-top:var(--c-gap)}
.fx3d .ov-card--strip{display:grid;grid-template-columns:minmax(0,clamp(220px,26%,560px)) minmax(0,1fr)}
.ov-card--strip .ov-card__art{--zoom:1;height:auto;min-height:180px;border-right:1px solid var(--line);border-bottom:0}
.ov-card--strip .ov-card__body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px var(--c-gap)}
.ov-card--strip .ov-card__copy{display:flex;flex:1 1 320px;flex-direction:column;gap:10px;min-width:0}
.ov-card--strip .ov-card__go{align-self:center;margin-top:0}

.ov-note{margin:0;color:var(--ink-3);font-size:16px}

/* ---------- 各寬度欄數：同一列等高、最後一列不落單、320～600 一欄 ---------- */
/* 大卡（關於我們、服務項目、聯絡我們）：寬螢幕改左圖右文的橫式大卡 */
@media(min-width:1100px){
 .fx3d .ov-grid--wide .ov-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
 .ov-grid--wide .ov-card__art{--zoom:1.05;height:auto;min-height:clamp(220px,14vw,330px);border-right:1px solid var(--line);border-bottom:0}
}
@media(max-width:1439px){
 .ov-grid--5{--n:6}
 .ov-grid--5>*{grid-column:span 2}
 .ov-grid--5>:nth-child(n+4){grid-column:span 3}
}
@media(max-width:1179px){
 .ov-grid--4{--n:2}
}
@media(max-width:899px){
 .ov-grid--5{--n:2}
 .ov-grid--5>*,.ov-grid--5>:nth-child(n+4){grid-column:auto}
 .ov-grid--5>:last-child{grid-column:1 / -1}
 .ov-grid--3{--n:1}
 /* 三張卡、五張卡的最後一張：改左圖右文，一欄不顯得空 */
 .fx3d .ov-grid--3 .ov-card,.fx3d .ov-grid--5>.ov-card:last-child{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
 /* 窄螢幕卡片貼近畫面兩側，圖不放大（放大的圖框會超出畫面） */
 .ov-card__art{--zoom:1}
 .ov-grid--3 .ov-card__art,.ov-grid--5>.ov-card:last-child .ov-card__art{height:auto;aspect-ratio:auto;min-height:190px;border-right:1px solid var(--line);border-bottom:0}
}
@media(max-width:600px){
 .ov-grid{--n:1}
 .ov-grid>*,.ov-grid--5>:last-child{grid-column:auto}
 .fx3d .ov-grid--3 .ov-card,.fx3d .ov-grid--5>.ov-card:last-child,.fx3d .ov-card--strip{display:flex}
 .ov-grid--3 .ov-card__art,.ov-grid--5>.ov-card:last-child .ov-card__art,.ov-card--strip .ov-card__art{height:150px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
 .ov-grid--3 .ov-card__art--cover{height:auto;aspect-ratio:16/9}
 .ov-card--strip .ov-card__body{flex-direction:column;align-items:stretch}
 .ov-card--strip .ov-card__copy{flex:none}
 .ov-card--strip .ov-card__go{align-self:flex-start}
}