/* ============================================================
   Aivance｜日進 · Homepage v4 「一天的動線」
   日出（內容）→ 日中（工具）→ 日暮（品牌）
   只作用於首頁，全部 class 以 h4- 前綴，不污染共用樣式
   ============================================================ */

/* 首頁專屬：中文標題也吃襯線（Noto Serif TC），跟 Cormorant 同調性 */
:root{--serif:'Cormorant Garamond','Noto Serif TC',Georgia,serif;--display:'Zen Maru Gothic','Noto Sans TC',sans-serif}

/* ---------- Hero：左文右浮動卡 ---------- */
/* 晨空：頂部淡藍天光 → 淡入頁面米白；配合頁尾 .h4-dusk 日暮，整頁「白天到黃昏」 */
.h4-hero{position:relative;border-bottom:1.5px solid var(--line);background:linear-gradient(180deg,#fbedbe 0%,#fdf6dd 46%,var(--bg) 100%)}
.h4-hero-in{max-width:1060px;margin:0 auto;padding:80px 24px 72px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center;position:relative;z-index:2}
.h4-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--ink3);letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.h4-eyebrow::before{content:'';width:22px;height:1.5px;background:var(--ink3)}
.h4-h1{font-family:var(--display);font-size:clamp(44px,5.5vw,74px);font-weight:700;line-height:1.12;color:var(--ink);max-width:14em}
.h4-h1 em{font-style:italic;color:var(--red)}
.h4-lead{font-size:19px;line-height:1.9;color:var(--ink2);max-width:520px;margin:24px 0 32px}
.h4-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* 三張浮動卡：桌機浮動、手機正常堆疊 */
.h4-heroR{position:relative;height:300px}
.h4-hv{position:absolute;background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 4px 24px rgba(28,20,16,.07);text-decoration:none;color:inherit;display:block;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.h4-hv:hover{border-color:var(--orange);box-shadow:0 10px 34px rgba(28,20,16,.14)}
.h4-hv:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.h4-hv:nth-child(1){width:206px;top:0;left:0;animation:h4f 5s ease-in-out infinite 0s}
.h4-hv:nth-child(2){width:196px;top:54px;right:0;animation:h4f 5s ease-in-out infinite 1.3s}
.h4-hv:nth-child(3){width:204px;bottom:0;left:20px;animation:h4f 5s ease-in-out infinite 2.6s}
@keyframes h4f{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.h4-horizon{position:relative;z-index:2;height:1.5px;background:var(--ink);opacity:.85}

/* ---------- 今日精選 ---------- */
.h4-today{max-width:1060px;margin:44px auto 0;padding:0 24px}
.h4-today-card{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;align-items:center;border:2px solid var(--ink);border-radius:22px;background:var(--white);text-decoration:none;color:inherit;box-shadow:6px 6px 0 var(--yellow);transition:transform .18s,box-shadow .18s;overflow:hidden}
.h4-today-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--yellow)}
.h4-today-txt{padding:30px 34px}
.h4-today-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.h4-today-title{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.35;color:var(--ink)}
.h4-today-card:hover .h4-today-title{color:var(--red)}
.h4-today-ex{font-size:16px;line-height:1.8;color:var(--ink2);margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h4-today-meta{font-family:var(--mono);font-size:13px;color:var(--ink3);margin-top:16px}
/* 縮圖：固定 16:9、留白框住，設計字卡不會被裁 */
.h4-today-img{padding:16px 16px 16px 0}
.h4-today-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:14px;border:1.5px solid var(--line)}
/* fallback：抓不到文章時的顏文字卡 */
.h4-today-kao{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:var(--yellow);border-left:2px solid var(--ink)}
.h4-today-kao .k{font-size:30px;letter-spacing:2px}
.h4-today-kao .t{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink2)}

/* ---------- 區段標頭：彩色 pill 相位標記 ---------- */
.h4-sec{max-width:1060px;margin:0 auto;padding:72px 24px 0}
.h4-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.h4-phase{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:var(--white);border:1.5px solid var(--line);border-radius:99px;padding:6px 14px}
.h4-phase svg{width:20px;height:12px}
.h4-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.h4-sec-title{font-family:var(--display);font-size:clamp(32px,4vw,44px);font-weight:700;color:var(--ink);margin-top:14px}
.h4-sec-more{font-family:var(--mono);font-size:14px;color:var(--ink2);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:2px;white-space:nowrap}
.h4-sec-more:hover{color:var(--red);border-color:var(--red)}

/* ---------- 文章流 ---------- */
.h4-chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 28px}
.h4-chip{font-size:14px;font-weight:500;color:var(--ink2);background:var(--white);border:1.5px solid var(--line);border-radius:99px;padding:7px 16px;text-decoration:none;transition:all .15s}
.h4-chip:hover{border-color:var(--ink);background:var(--yellow);color:var(--ink);transform:translateY(-2px)}
.h4-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.h4-post{background:var(--white);border:2px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.h4-post:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--mint);border-color:var(--ink)}
.h4-post:nth-child(3n+2):hover{box-shadow:5px 5px 0 var(--purple)}
.h4-post:nth-child(3n):hover{box-shadow:5px 5px 0 var(--orange)}
.h4-post-img{aspect-ratio:16/9;background:var(--bg2)}
.h4-post-img img{width:100%;height:100%;object-fit:cover;display:block}
.h4-post-bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.h4-post-cat{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink3)}
.h4-post-title{font-size:18px;font-weight:700;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h4-post:hover .h4-post-title{color:var(--red)}
.h4-post-date{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:auto}
/* 抓失敗：不藏，給訪客一條路 */
.h4-posts-fallback{border:1.5px dashed var(--line);border-radius:18px;padding:40px 24px;text-align:center;color:var(--ink2);grid-column:1/-1}
.h4-posts-fallback a{color:var(--red);font-weight:700}

/* ---------- AI 事務所：即時辦公室 iframe ---------- */
#ai-office{scroll-margin-top:90px}
.h4-office-lead{font-size:17px;line-height:1.85;color:var(--ink2);max-width:560px;margin-top:16px}
.h4-office-frame{aspect-ratio:32/22;max-width:1000px;margin:28px auto 0;border:1.5px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--deep2);box-shadow:6px 6px 0 var(--yellow)}
.h4-office-frame iframe{width:100%;height:100%;border:0;display:block}
.h4-office-actions{max-width:1000px;margin:18px auto 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.h4-office-3d{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);background:var(--mint);border:1.5px solid var(--ink);border-radius:999px;padding:11px 22px;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.h4-office-3d:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.h4-office-3d:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.h4-office-tip{font-family:var(--mono);font-size:13px;color:var(--ink3);letter-spacing:.04em}
/* hero 錨點按鈕 */
.h4-peek{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:99px;padding:13px 24px;text-decoration:none;transition:all .15s}
.h4-peek:hover{background:var(--yellow);transform:translateY(-1px)}

/* ---------- 工具（日中） ---------- */
.h4-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;margin-top:28px}

/* ---------- 日暮：夕陽落進頁尾 ---------- */
.h4-dusk{margin-top:88px;padding:88px 24px 150px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,#fdf0dd 45%,#fbdfc0 100%)}
.h4-dusk-in{position:relative;max-width:640px;margin:0 auto;z-index:2}
.h4-dusk h2{font-family:var(--display);font-size:clamp(32px,4.6vw,56px);font-weight:700;color:var(--ink);line-height:1.3;margin:20px 0 16px}
.h4-dusk-kao{font-family:var(--sans);font-size:.45em;font-weight:400;color:var(--ink3);white-space:nowrap}
.h4-dusk p{font-size:18px;line-height:1.9;color:var(--ink2);margin-bottom:30px}
.h4-dusk p em{font-style:normal;font-weight:700;color:var(--red)}
/* 夕陽：貼在區塊底部，往下接深色 footer = 太陽落山 */
.h4-dusk-sun{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(300px,60vw);z-index:1;pointer-events:none}

/* ---------- RWD ---------- */
@media (max-width:860px){
  .h4-hero-in{grid-template-columns:1fr;gap:36px;padding-top:56px}
  .h4-heroR{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .h4-hv{position:static;width:auto !important;animation:none}
  .h4-hv:nth-child(1){grid-column:1/-1}
  .h4-today-card{grid-template-columns:1fr}
  .h4-today-img{padding:0 16px 16px}
  .h4-today-kao{border-left:none;border-top:2px solid var(--ink);min-height:140px}
  .h4-dusk{padding-bottom:120px}
  .h4-office-frame{border-radius:12px;box-shadow:4px 4px 0 var(--yellow)}
  .h4-posts{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:-24px;padding-right:24px}
  .h4-post{min-width:78%;scroll-snap-align:start}
  .h4-tools{grid-template-columns:1fr}
}
@media (max-width:520px){
  .h4-lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .h4-post,.h4-peek,.h4-today-card,.h4-chip{transition:none}
  .h4-hv{animation:none}
}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:6px}