/* 電腦版首頁精簡(老師 09-30 核可)。只在電腦(寬 >= 1000、有滑鼠)生效;手機、平板不套用。
   index.html 用 <link media="(min-width:1000px) and (hover:hover) and (pointer:fine)"> 載入,裡面再包一層同樣的 @media 以防萬一。
   選擇器一律 html body:has(.hero) 開頭,才蓋得過 site.css 裡老師 09-27/09-29 的 html body ... !important。
   原則:字級一律不縮(老師定過的:大標 48px 兩行不加點、內文 18px、播放器膠囊 18px、資歷卡字級),高度只從留白、排版、欄數省;
   沒有任何文字被截掉或藏起來(比較表收合有按鈕可展開;JS 沒跑 = 全部展開)。
   手機收合(data-mfold)在電腦版 .mfold-body 是 display:contents,所以排序一律排在 main 底下的 section 本身。 */
.dk-cta,.fig-book{display:none}
@media (min-width:1000px) and (hover:hover) and (pointer:fine){

/* 0. 視覺順序(HTML 順序不動,Google 看到的不變;鍵盤 Tab 順序照 HTML)。沒列到的區塊排在最後面,不會跑到最上面 */
html body:has(.hero) main{display:flex;flex-direction:column}
html body:has(.hero) main>*{order:80}
html body:has(.hero) main>.news-bar{order:0}
html body:has(.hero) main>.hero{order:1}
html body:has(.hero) main>.creds{order:2}
html body:has(.hero) main>.stats{order:3}
html body:has(.hero) main>#courses{order:4}
html body:has(.hero) main>section:has(ol.path){order:5}
html body:has(.hero) main>#celebs{order:6}
html body:has(.hero) main>#upcoming{order:7}
html body:has(.hero) main>section:has(.feat-grid){order:8}
html body:has(.hero) main>#compare{order:9}
html body:has(.hero) main>#live{order:10}
html body:has(.hero) main>section:has(.quote-card){order:11}
html body:has(.hero) main>section:has(.promo-tool a[href="app.html"]){order:12}
html body:has(.hero) main>#faq{order:13}
html body:has(.hero) main>#free-course{order:14}
html body:has(.hero) main>#more{order:15}
/* 延後排版(content-visibility)的預估高度改成電腦版實際高度(不含上下 padding,1366 寬量的),捲動時捲軸不跳;排到第一個畫面附近的數字帶直接排版 */
html body:has(.hero) main>.stats{content-visibility:visible}
html body:has(.hero) main>section:has(ol.path){contain-intrinsic-size:auto 410px}
html body:has(.hero) main>#celebs{contain-intrinsic-size:auto 550px}
html body:has(.hero) main>#upcoming{contain-intrinsic-size:auto 175px}
html body:has(.hero) main>section:has(.feat-grid){contain-intrinsic-size:auto 560px}
html body:has(.hero) main>#compare{contain-intrinsic-size:auto 590px}
html body:has(.hero) main>#live{contain-intrinsic-size:auto 480px}
html body:has(.hero) main>section:has(.quote-card){contain-intrinsic-size:auto 640px}
html body:has(.hero) main>section:has(.promo-tool a[href="app.html"]){contain-intrinsic-size:auto 115px}
html body:has(.hero) main>#more{contain-intrinsic-size:auto 530px}

/* 1. 演奏會橫幅變薄(字級不變,只收上下留白) */
html body:has(.hero) .news-bar .wrap{padding-top:6px!important;padding-bottom:6px!important;line-height:1.5}
html body:has(.hero) .news-bar .wrap>a{padding:4px 18px!important;line-height:1.5}
html body:has(.hero) .news-bar b{padding:2px 12px!important;line-height:1.5}

/* 2. 主視覺:老師的排法與字級不動(得獎行一行 18px、大標 48px「台北學吉他/吉他教學推薦」兩行不加點、內文 18px、
      播放器膠囊一行 18px 在按鈕同一排、照片頂端跟大標對齊、照片裁切照老師 09-27 的 4:3 靠左);
      只把左欄放寬(內文 6 行)、行距與上下留白收緊,讓「加 LINE 報名吉他課」在 1280×633 以上的筆電第一個畫面就看得到 */
html body:has(.hero) .hero .wrap{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)!important;column-gap:40px!important;padding-top:8px!important;padding-bottom:12px!important}
html body:has(.hero) .hero .badge{padding-top:0!important;padding-bottom:0!important;margin-bottom:8px!important}
html body:has(.hero) .hero h1{line-height:1.12!important;margin:0 0 10px!important}
html body:has(.hero) .hero h1 span,html body:has(.hero) .hero h1 em{line-height:inherit!important}
html body:has(.hero) .hero .lead{max-width:none!important;line-height:1.55!important;margin:0 0 12px!important}
html body:has(.hero) .hero .wrap>figure{margin-top:4px!important;max-width:none!important;justify-self:stretch}
html body:has(.hero) .hero figure figcaption{margin-top:8px!important;line-height:1.5!important}
html body:has(.hero) .hero figure figcaption strong{line-height:1.45}
/* 「演出邀約」膠囊放在 figcaption 外面(同一個 figure 裡):放裡面會讓 partials.js 的「句尾不留孤字」改抓膠囊的字 */
html body:has(.hero) .hero .fig-book{display:inline-flex!important;margin-top:6px;align-items:center;gap:6px;padding:4px 14px;border:1px solid rgba(212,164,90,.6);border-radius:999px;color:var(--gold);font-size:15px;line-height:1.5;font-weight:700;text-decoration:none;white-space:nowrap}
html body:has(.hero) .hero .fig-book:hover{background:rgba(212,164,90,.14)}
/* 得獎行 18px 一行要 1088px 寬;比這窄的小筆電(原本右邊被切掉看不到)才讓它在「｜《歌手 2026》」前面換行,字級不變 */
@media (max-width:1087.98px){html body:has(.hero) .hero .badge{white-space:normal!important;width:auto!important;max-width:100%!important}}
/* 右下角 LINE/電話浮動鈕:主視覺自己的 LINE、電話按鈕還在畫面上時先藏起來(不蓋住資歷卡),捲過主視覺才出現(home-desk.js 加 dk-cta-on) */
html body:has(.hero) .line-fab,html body:has(.hero) .tel-fab{transition:opacity .2s,visibility .2s}
html.dk-cta-on body:has(.hero) .line-fab,html.dk-cta-on body:has(.hero) .tel-fab{opacity:0;visibility:hidden;pointer-events:none}

/* 3. 資歷 8 格:金曲獎得獎排第一(CLAUDE.md 順序);欄寬照字數配(1366 寬時每張卡的標題都一行、不從詞中間斷),字級不變、全部文字都看得到 */
html body:has(.hero) .creds .wrap{grid-template-columns:minmax(0,240fr) minmax(0,216fr) minmax(0,322fr) minmax(0,296fr)!important;gap:10px!important;padding-top:8px!important;padding-bottom:6px!important}
html body:has(.hero) .creds .cred.win{order:-1}
html body:has(.hero) .creds .cred{padding:10px 11px!important;gap:8px!important;line-height:1.5!important}
html body:has(.hero) .creds .contrib-link{margin-top:0!important;padding-bottom:8px!important}

/* 4. 數字帶接在資歷下面(同一塊深色「資歷」),只收上下留白,數字字級不變 */
html body:has(.hero) .stats ul{padding-top:16px!important;padding-bottom:18px!important}

/* 5. 各區標題:標題在左、說明在右。flex 換行:標題一行放得下(說明還有 260px)才並排,放不下說明自動回到標題下面 */
html body:has(.hero) main>.section .section-head:has(>h2+p){display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:56px;max-width:none;margin-bottom:26px}
html body:has(.hero) main>.section .section-head:has(>h2+p)>.eyebrow{flex:0 0 100%}
html body:has(.hero) main>.section .section-head:has(>h2+p)>h2{flex:0 1 auto;min-width:0}
html body:has(.hero) main>.section .section-head:has(>h2+p)>h2+p{flex:1 1 260px;margin:12px 0 0}

/* 6. 課程卡:圖示放標題左邊 */
html body:has(.hero) #courses .grid{gap:14px}
html body:has(.hero) #courses .card{padding:18px 20px 16px;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-content:start}
html body:has(.hero) #courses .card>.icon{width:34px;height:34px;margin:0;grid-row:1}
html body:has(.hero) #courses .card>h3{grid-column:2;grid-row:1;align-self:center;margin:0}
html body:has(.hero) #courses .card>p{grid-column:1/-1;margin:10px 0 0;line-height:1.7}
html body:has(.hero) #courses .pills{margin-top:16px}

/* 7. 程度路徑:左邊標題+說明+LINE 按鈕,右邊 6 階兩欄(.mfold-body 是 contents,裡面的 ol/按鈕直接是 .wrap 的格子) */
html body:has(.hero) main>section:has(ol.path)>.wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;column-gap:48px;align-items:start}
html body:has(.hero) main>section:has(ol.path) .section-head{display:block!important;margin:0!important;grid-column:1;grid-row:1}
html body:has(.hero) main>section:has(ol.path) .section-head>p{margin-top:14px}
html body:has(.hero) main>section:has(ol.path) ol.path{grid-column:2;grid-row:1/span 2;grid-template-columns:1fr 1fr;gap:12px;margin:0}
html body:has(.hero) main>section:has(ol.path) ol.path li{padding:14px 16px 14px 58px}
html body:has(.hero) main>section:has(ol.path) ol.path li::before{left:16px;top:12px}
html body:has(.hero) main>section:has(ol.path) ol.path b{margin-bottom:2px}
html body:has(.hero) main>section:has(ol.path) ol.path span{line-height:1.6;display:block}
html body:has(.hero) .dk-cta{display:block!important}
html body:has(.hero) .path-cta{grid-column:1;grid-row:2;margin:20px 0 0}
html body:has(.hero) .path-cta small{display:block;margin-top:8px;color:var(--ink-2)}

/* 8. 名人合作:八張一排小圖(老師:保留但不過度強調),點圖照樣放大;說明文字全部顯示;按鈕列最前面加一顆邀約 */
html body:has(.hero) #celebs .celeb-top{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:10px!important}
html body:has(.hero) #celebs .celeb-top figcaption{padding:6px 8px 8px!important}
html body:has(.hero) #celebs .celeb-also{margin-top:14px}
html body:has(.hero) #celebs .celeb-acts{margin-top:14px;gap:10px}
html body:has(.hero) #celebs .celeb-book{order:-1}

/* 9. 為什麼選盧家宏:老師的欄位順序不動,圖示放標題左邊,字全部看得到 */
html body:has(.hero) .feat-grid>.feat{display:block!important;padding:14px 0!important}
html body:has(.hero) .feat-grid>.feat>.icon{float:left;width:32px;height:32px;border-radius:9px;margin:0 10px 0 0}
html body:has(.hero) .feat-grid>.feat>.icon svg{width:18px;height:18px}
html body:has(.hero) .feat-grid>.feat h3{line-height:32px;margin:0 0 4px!important;min-height:0!important}
html body:has(.hero) .feat-grid>.feat p{clear:left;line-height:1.7;margin:0}
html body:has(.hero) main>section:has(.feat-grid){padding-bottom:12px}

/* 10. 比較表:接在「為什麼選」下面同一底色;先露前兩項,按鈕展開全部(字都在網頁裡)。
       收合框就是手機收合用的 #mf7(電腦版平常是 contents,收合時改成 block),不搬動任何節點 */
html body:has(.hero) #compare{background:var(--bg-alt);padding-top:24px}
html body:has(.hero) #compare .compare th,html body:has(.hero) #compare .compare td{padding:11px 16px;line-height:1.65}
html.dkfold body:has(.hero) #compare .mfold-body{display:block;max-height:360px;overflow:hidden;position:relative}
html.dkfold body:has(.hero) #compare .mfold-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(transparent,var(--bg-alt));pointer-events:none}
html.dkfold body:has(.hero) #compare .mfold-body.dk-open{max-height:none}
html.dkfold body:has(.hero) #compare .mfold-body.dk-open::after{display:none}
html body:has(.hero) .dk-more{display:inline-flex!important;align-items:center;gap:6px;margin-top:14px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-weight:700;font-size:15px;line-height:1.4;text-align:left;cursor:pointer}
html body:has(.hero) .dk-more:hover{border-color:var(--gold)}
html body:has(.hero) .dk-more:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* 11. 直播課 → 學員心得(兩篇都是直播班)→ 吉他譜播放器:重新排序後補回上下留白 */
html body:has(.hero) #live{padding-bottom:48px}
html body:has(.hero) .quote-card{padding:24px 26px}
html body:has(.hero) main>section:has(.promo-tool a[href="app.html"]){padding-top:40px!important;padding-bottom:48px}

/* 12. 吉他入門 6 問＋常見問題 → 《吉他之鑰》 → 認識盧老師 */
html body:has(.hero) #free-course{padding-bottom:40px}

/* 13. 認識盧老師:卡片變矮(字級不變) */
html body:has(.hero) #more .biz{gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
html body:has(.hero) #more .biz a{padding:18px 22px;gap:6px}
html body:has(.hero) #more .biz span{line-height:1.65}
}