/* ==========================================================================
首頁主標題帶 .hp-intro v3.1
適用：欣興高雄租車（SoberCMS / themes/zy001）
放置位置：themes/zy001/css/heroh1.css（以 引入）
用途：讓首頁有一顆「看得見的 H1」
（原本 高雄租車推薦
卡在沒有 active 的 .tab-pane 裡，
Bootstrap 3.3.2 的 .tab-content>.tab-pane{display:none} 會讓整塊隱藏）
v3.1 變更（做質感）：
1. 修正 v3.0 的浮動 bug：
.hp-intro 有 clear:both，而瀏覽器把負的 margin-top 直接算進 clearance，
結果卡片沒有真的往上蓋住 banner。現在改成
「position:relative; top:-56px」位移 + 負 margin-bottom 抵消高度。
2. 補上 display:flex，右欄 4 格資訊才會跟左欄並排。
同時保留相容性：沒有 .hp-intro__main 包的舊版 HTML
（h1 / p / .hp-intro__btns 直接當 inner 的子元素）也會自動各佔一整列。
3. A 案＝半透明玻璃面板（往上壓在 banner 下緣），B 案＝深藍實心帶。
★ 切換版本只有一個字：
A 半透明玻璃面板 →
B 深藍底白字帶 →
設計依據：站上品牌深藍 #171c61、輔色 #3f93bf、淺藍底 #f3f8fc、
細邊框 #e0ecf5、直角無圓角、平面無漸層（站上為平面設計語彙）
========================================================================== */
.hp-intro{
--hp-lift:-56px; /* 負值＝面板往上壓住 banner 下緣 */
--hp-card-pad:34px; /* 面板內距 */
--hp-gap:20px; /* 面板下方到下一個版塊的留白 */
box-sizing:border-box;
clear:both; /* 站上版面是 float 欄位，不 clear 會被浮動吃掉 */
position:relative; /* 蓋住浮動的 banner 時必須提高層級 */
z-index:5;
background:none;
margin:0;
padding:0 0 var(--hp-gap);
font-family:"Microsoft JhengHei",PMingLiU,sans-serif;
color:#666;
text-align:left;
}
/* ---------- 面板本體 ---------- */
.hp-intro__inner{
/* 寬度跟站上其他版塊一致：
.ide_m1/.ide_m2/.ide_m3/.ide_m4 都是 padding:70px 15%、不設 max-width，
這裡改用 width:70% + margin:auto 做出同樣的左右留白。
寬度不對時請改這裡的 width，不要改 max-width。 */
box-sizing:border-box;
max-width:none;
width:70%;
margin:0 auto;
/* ★ 浮動修正：位移用 top，不用負 margin-top。
負 margin-top 會被 clear:both 的 clearance 抵消，等於沒浮。 */
position:relative;
top:var(--hp-lift);
margin-bottom:var(--hp-lift); /* lift 為負 → 負邊界，抵消位移，面板下方高度不變 */
padding:var(--hp-card-pad) 38px;
/* 半透明玻璃：底色 + 背景模糊，做出浮在照片上的通透感 */
background:rgba(255,255,255,.86);
-webkit-backdrop-filter:blur(18px) saturate(120%);
backdrop-filter:blur(18px) saturate(120%);
border:1px solid rgba(224,236,245,.95);
border-top:3px solid #3f93bf;
box-shadow:0 30px 60px -30px rgba(23,28,97,.5);
/* 左右兩欄 */
display:flex;
flex-wrap:wrap;
align-items:stretch;
}
/* 相容舊版 HTML：h1 / p / .hp-intro__btns 直接是 inner 的子元素時，各自佔一整列 */
.hp-intro__inner > h1,
.hp-intro__inner > p,
.hp-intro__inner > .hp-intro__btns{flex:1 0 100%;}
/* ---------- 左欄：英文小字 + H1 + 簡介 + CTA ---------- */
.hp-intro__main{flex:1 1 55%;min-width:0;}
/* 左緣再位移 10px，對齊站上 .indextitle 的 padding-left:10px */
.hp-intro__kicker{
display:block;margin-bottom:12px;padding-left:10px;
font-size:13px;letter-spacing:5px;text-transform:uppercase;color:#a3abc0;
}
.hp-intro__title,
.hp-intro__desc,
.hp-intro__btns{padding-left:10px;}
.hp-intro__title{
margin:0 0 16px;
font-size:36px;
line-height:1.38;
font-weight:bold;
color:#171c61;
letter-spacing:1px;
}
.hp-intro__title em{ /* 關鍵字加粗強調用（可整段拿掉） */
font-style:normal;
border-bottom:4px solid #3f93bf;
}
/* 兩層級標題：品牌行 + 服務範圍行（沒有這兩個 span 時不會影響原版） */
.hp-intro__brand{display:block;}
.hp-intro__scope{
display:block;margin-top:8px;
font-size:25px;line-height:1.45;font-weight:normal;
color:#4a527f;letter-spacing:1.5px;
}
.hp-intro__desc{
margin:0 0 26px;
max-width:1100px;
font-size:16px;
line-height:2;
color:#666;
}
.hp-intro__desc b{color:#333;font-weight:bold;}
.hp-intro__btns{
display:flex;flex-wrap:wrap;gap:10px;
}
/* ---------- 右欄：4 格重點資訊（選用） ---------- */
.hp-intro__facts{
flex:0 0 40%;max-width:40%;
box-sizing:border-box;
margin:0;
padding:20px 26px;
list-style:none;
background:rgba(243,248,252,.86);
border-left:1px solid #e0ecf5;
display:grid;grid-template-columns:1fr 1fr;
align-content:start;gap:22px 26px;
}
.hp-intro__facts li{min-width:0;}
.hp-intro__facts li b{
display:block;margin-bottom:4px;
font-size:16px;line-height:1.5;font-weight:bold;color:#171c61;letter-spacing:.5px;
}
.hp-intro__facts li span{
display:block;
font-size:13px;line-height:1.75;color:#8b8a83;
}
/* ---------- 按鈕 ---------- */
.hp-btn{
display:inline-flex;align-items:center;justify-content:center;
height:48px;padding:0 28px;
font-size:15px;font-weight:bold;line-height:1;white-space:nowrap;
text-decoration:none !important;
border:1px solid transparent;
transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.hp-btn--main{color:#fff !important;background:#171c61;border-color:#171c61;}
.hp-btn--main:hover{background:#0e123f;border-color:#0e123f;}
.hp-btn--ghost{color:#171c61 !important;background:rgba(255,255,255,.9);border-color:#171c61;}
.hp-btn--ghost:hover{background:#f0f2fa;border-color:#171c61;}
/* ==========================================================================
B 案：深藍底白字的實心帶狀區塊
用法：把 改成
========================================================================== */
.hp-intro--navy{
--hp-gap:0px;
/* 深藍帶整條往上壓在 banner 下緣（位移用 top，margin-bottom 抵消高度） */
top:var(--hp-lift);
margin-bottom:var(--hp-lift);
background:#171c61;
/* 極淡斜紋，呼應站上 .iservA 的斜紋質感 */
background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,rgba(255,255,255,0) 2px 14px);
padding:46px 0 52px;
}
.hp-intro--navy .hp-intro__inner{
top:0;margin-bottom:0;
width:70%;padding:0;
background:none;
-webkit-backdrop-filter:none;backdrop-filter:none;
border:0;border-top:0;
box-shadow:none;
}
.hp-intro--navy .hp-intro__title{color:#fff;}
.hp-intro--navy .hp-intro__title em{border-bottom-color:#3f93bf;}
.hp-intro--navy .hp-intro__scope{color:rgba(255,255,255,.78);}
.hp-intro--navy .hp-intro__desc{color:rgba(255,255,255,.8);}
.hp-intro--navy .hp-intro__desc b{color:#fff;}
.hp-intro--navy .hp-intro__kicker{color:rgba(255,255,255,.5);}
.hp-intro--navy .hp-intro__facts{
background:rgba(255,255,255,.07);
border-left-color:rgba(255,255,255,.22);
}
.hp-intro--navy .hp-intro__facts li b{color:#fff;}
.hp-intro--navy .hp-intro__facts li span{color:rgba(255,255,255,.66);}
.hp-intro--navy .hp-btn--main{color:#171c61 !important;background:#fff;border-color:#fff;}
.hp-intro--navy .hp-btn--main:hover{background:#dce6f3;border-color:#dce6f3;}
.hp-intro--navy .hp-btn--ghost{color:#fff !important;background:transparent;border-color:rgba(255,255,255,.65);}
.hp-intro--navy .hp-btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}
/* ---------- 響應式：面板寬度階梯與站上 .ide_m1/.ide_m3 同步 ---------- */
@media (max-width:1480px){
.hp-intro__inner{width:80%;}
.hp-intro--navy .hp-intro__inner{width:80%;}
}
@media (max-width:1360px){
.hp-intro__inner{width:90%;}
.hp-intro--navy .hp-intro__inner{width:90%;}
}
@media (max-width:1280px){
/* 站上此時是 padding:70px 0，內容貼齊左右；面板保留 15px 外留白才有卡片感 */
.hp-intro__inner{width:calc(100% - 30px);padding:26px 24px;}
.hp-intro--navy .hp-intro__inner{width:calc(100% - 30px);padding:0;}
}
@media (max-width:991px){
.hp-intro{--hp-lift:-40px;--hp-card-pad:26px;--hp-gap:46px;}
.hp-intro__inner{width:calc(100% - 30px);padding:26px 24px;}
.hp-intro__title{font-size:29px;}
.hp-intro__scope{font-size:21px;}
.hp-intro__facts{
flex:0 0 100%;max-width:100%;
margin-top:22px;padding:20px 22px;
border-left:0;border-top:1px solid #e0ecf5;
grid-template-columns:1fr 1fr;
}
}
@media (max-width:767px){
.hp-intro{--hp-lift:-28px;--hp-card-pad:22px;--hp-gap:34px;}
.hp-intro__inner{width:calc(100% - 30px);padding:22px 18px;}
.hp-intro--navy{padding:30px 0 34px;}
.hp-intro--navy .hp-intro__inner{width:calc(100% - 30px);}
.hp-intro__title,
.hp-intro__desc,
.hp-intro__btns{padding-left:0;}
.hp-intro__kicker{letter-spacing:3px;margin-bottom:10px;padding-left:0;}
.hp-intro__title{font-size:22px;line-height:1.5;margin-bottom:12px;}
.hp-intro__title em{border-bottom-width:3px;}
.hp-intro__scope{font-size:18px;margin-top:6px;}
.hp-intro__desc{font-size:15px;line-height:1.85;margin-bottom:22px;}
.hp-intro__facts{grid-template-columns:1fr;gap:16px;padding-top:20px;}
.hp-intro__facts li b{font-size:15px;}
.hp-btn{width:100%;height:48px;}
}
/* ---------- 尊重系統「減少動態」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
.hp-btn{transition:none !important;}
}