/* ==========================================================
   浪台灣 — 首頁專用區塊（磁磚 / 當季聚光燈 / 水逆狀態 / 熱門主題）
   只在 index.html 載入，沿用 style.css 的設計 tokens
   ========================================================== */

/* ---- 活著的即時列：水逆狀態 + 當季聚光燈 ---- */
/* 今日快訊緊貼 Hero：它是「今天」的狀態列，報紙 dateline 就是貼著頭版走的。
   下方的本月旅行優惠是卡片，兩者一線一框，職責分得開。 */
.live-strip { padding:30px 0 10px; }
.live-strip .container { display:grid; gap:16px; }

.retro-status {
  display:block; background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:12px 18px; font-size:.95rem; color:var(--c-ink); font-weight:600;
}
.retro-status a { color:var(--c-coral-deep); font-weight:700; white-space:nowrap; }
.retro-status a:hover { color:var(--c-ink); }

/* ---- 三支柱視覺磁磚 ---- */
.pillar-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile {
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:28px 24px 24px;
  color:#fff; text-decoration:none; min-height:190px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); color:#fff; }
.tile-kaiyun  { background:linear-gradient(150deg,#C9962A,#A84E2C 90%); }
.tile-healing { background:linear-gradient(150deg,#1E8791,#103A40 92%); }
.tile-nature  { background:linear-gradient(150deg,#3C9E86,#1E5A4A 92%); }
.tile .t-icon { width:44px; height:44px; margin-bottom:14px; opacity:.95; }
.tile .t-icon svg { width:100%; height:100%; display:block; }
.tile h3 { color:#fff; font-size:1.35rem; margin:0 0 6px; }
.tile p { color:rgba(255,255,255,.9); font-size:.92rem; margin:0 0 16px; flex:1; }
.tile .t-go {
  font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
}
.tile .t-count { opacity:.8; font-weight:500; }
.tile::before {
  content:""; position:absolute; right:-30px; bottom:-30px; width:130px; height:130px;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events:none;
}

/* ---- 熱門主題 / 關鍵字雲 ---- */
.topic-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.topic-tag {
  display:inline-flex; align-items:center; padding:8px 16px; border-radius:var(--r-pill);
  background:var(--c-mist); border:1px solid var(--c-line); color:var(--c-ink);
  font-size:.92rem; font-weight:600; text-decoration:none;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s;
}
.topic-tag:hover { border-color:var(--c-teal); background:#fff; color:var(--c-teal-deep); }
.topic-tag .hash { color:var(--c-teal); margin-right:2px; }

@media (max-width:760px) {
  .pillar-tiles { grid-template-columns:1fr; }
}

/* ==========================================================
   首頁編輯誌版型 Magazine portal
   ========================================================== */

/* 圖片佔位框（老闆之後補圖，直接把 .imgph 換成 <img>） */
.imgph {
  position:relative; overflow:hidden; color:var(--c-slate); text-align:center;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(22,24,29,.028) 11px 22px),
    #ECECEE;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.imgph::after { content:""; position:absolute; inset:0; border:1.5px dashed rgba(22,24,29,.2); border-radius:inherit; pointer-events:none; }
.imgph .ic { font-size:1.4rem; opacity:.4; }
.imgph .lb { font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.imgph .sz { font-size:.66rem; opacity:.6; letter-spacing:.14em; font-family:var(--font-display); text-transform:uppercase; }

/* 真圖（取代佔位框）：沿用各版位的比例與圓角 */
.ph-img { width:100%; height:auto; object-fit:cover; display:block; background:#ECECEE; }
.pf-lead .ph-img { aspect-ratio:12/5; border-radius:16px; margin-bottom:16px; }
.pf-lead:hover .ph-img { box-shadow:var(--shadow-hover); }
.pf-item .ph-img { aspect-ratio:4/3; border-radius:10px; }
.mcard .ph-img { aspect-ratio:16/9; border-radius:0; }

/* 區塊標頭 */
.mag-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.mag-head .kk { font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--c-teal-deep); display:block; margin-bottom:6px; }
.mag-head h2 { font-size:clamp(1.5rem,3vw,1.95rem); margin:0; }
.mag-head .more { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--c-teal-deep); white-space:nowrap; align-self:flex-end; }
.mag-head .more:hover { color:var(--c-coral); }
.mag-head .l { position:relative; padding-left:18px; }
.mag-head .l::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px; background:var(--c-teal); }
.sec-kaiyun .mag-head .l::before { background:var(--c-gold); }
.sec-healing .mag-head .l::before { background:var(--c-teal); }
.sec-nature .mag-head .l::before { background:var(--c-mint); }

/* 支柱區：主打大卡 + 側欄清單 */
.pillar-feature { display:grid; grid-template-columns:1.55fr 1fr; gap:30px; align-items:stretch; }
.pf-lead { text-decoration:none; color:inherit; display:block; }
.pf-lead .imgph { aspect-ratio:16/9; border-radius:16px; margin-bottom:16px; }
.pf-lead:hover .imgph { box-shadow:var(--shadow-hover); }
.pf-tag { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.08em; padding:3px 11px; border-radius:999px; color:#fff; margin-bottom:10px; }
.pf-lead h3 { font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.25; margin:0 0 10px; }
.pf-lead:hover h3 { color:var(--c-teal-deep); }
.pf-lead p { color:var(--c-slate); font-size:.98rem; margin:0; }
/* 固定 4 格：每格高度固定；滿了 4 篇，只有 2 篇就填上面 2 格、下面留白（不隨篇數拉高） */
.pf-list { display:flex; flex-direction:column; }
.pf-item { min-height:110px; box-sizing:border-box; display:grid; grid-template-columns:100px 1fr; gap:15px; align-items:center; text-decoration:none; color:inherit; padding:12px 0; border-bottom:1px solid var(--c-line); }
.pf-item:first-child { padding-top:0; }
.pf-item:last-child { border-bottom:none; }
.pf-item .imgph { aspect-ratio:4/3; border-radius:10px; }
.pf-item h4 { font-size:1rem; line-height:1.35; margin:0 0 3px; }
.pf-item:hover h4 { color:var(--c-teal-deep); }
.pf-item .ex { font-size:.82rem; color:var(--c-slate); }

/* 編輯精選網格 */
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mcard {
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line); border-radius:16px; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.mcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--c-teal); }
.mcard .imgph { aspect-ratio:16/10; }
.mcard .body { padding:13px 16px 15px; display:flex; flex-direction:column; gap:5px; flex:1; }
/* 最新更新區：首頁專屬收緊上下留白（不動共用 .article-list-item 樣式） */
#latest { padding-block:48px; }
.mcard .pillar-tag { font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.06em; color:var(--c-teal-deep); }
.mcard h4 { font-size:1.08rem; line-height:1.35; margin:0; }
.mcard p { font-size:.85rem; color:var(--c-slate); margin:0; flex:1; }

/* 旅遊籤 hook 帶（首頁互動鉤子） */
.oracle-hook {
  display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center;
  background:var(--c-surface); color:var(--c-ink); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--c-line); padding:44px 44px 44px 48px; position:relative;
}
.oracle-hook .oh-kk { font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--c-accent); }
.oracle-hook h2 { color:var(--c-ink); font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.2; margin:12px 0 12px; }
.oracle-hook p { color:var(--c-text-muted); margin:0 0 22px; max-width:26em; }
.oracle-hook .oh-art .imgph { aspect-ratio:3/4; border-radius:14px; }
.oracle-hook .oh-art .ph-img { aspect-ratio:3/4; border-radius:14px; }

@media (max-width:860px){
  .pillar-feature { grid-template-columns:1fr; gap:22px; }
  .mag-grid { grid-template-columns:1fr 1fr; }
  .oracle-hook { grid-template-columns:1fr; padding:34px 28px; }
  .oracle-hook .oh-art { display:none; }
}
@media (max-width:560px){
  .mag-grid { grid-template-columns:1fr; }
}

/* ==========================================================
   首頁第一屏：旅遊籤互動鉤子（Q1 心情直接放這裡，一點就進測驗）
   ========================================================== */
/* 整張主視覺當背景（左側米黃留白＝放文字；旅遊籤視覺已畫在圖裡） */
.hero-oracle {
  position:relative; overflow:hidden;
  padding:118px 0 60px; min-height:min(64vw, 660px);
  display:flex; align-items:center;
  background:var(--hp-hero) center right / cover no-repeat, #FBF4EF;
}
.hero-oracle > .container { width:100%; position:relative; z-index:2; }
/* 文字限制在左邊留白區，不壓到右邊實景 */
.hero-oracle .ho-text { max-width:min(45%, 500px); }
.hero-oracle .kicker { margin-bottom:16px; }
/* 標題：上行小的鋪陳、下行大的問句，關鍵字紅字＋筆刷底線（呼應圖上的筆刷） */
.hero-oracle h1 { margin:0; font-weight:700; }
.hero-oracle .ho-lead-in {
  display:block; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:500;
  color:var(--c-text-muted); letter-spacing:.06em; margin-bottom:10px;
}
.hero-oracle .ho-punch {
  display:block; font-size:clamp(2rem,3.4vw,2.85rem); line-height:1.12;
  letter-spacing:-.01em; color:var(--c-ink);
}
.hero-oracle .ho-punch mark {
  background:linear-gradient(120deg, rgba(226,62,92,.24), rgba(226,62,92,.24)) no-repeat;
  background-size:100% .3em; background-position:0 86%;
  color:var(--c-accent); padding:0 .04em;
}
.hero-oracle .hero-lead { margin:22px 0 0; max-width:23em; font-size:1.02rem; line-height:1.8; }

.ho-quiz { margin-top:30px; }
.ho-quiz .ho-q {
  display:block; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  color:var(--c-ink); margin-bottom:14px;
}
.ho-moods { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.ho-mood {
  display:flex; flex-direction:column; gap:2px; padding:11px 13px;
  border:1.5px solid var(--c-line); border-radius:13px; background:rgba(255,255,255,.9);
  color:var(--c-text-muted); font-size:.76rem; text-decoration:none;
  transition:border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ho-mood b { color:var(--c-ink); font-size:.94rem; font-weight:700; }
.ho-mood:hover {
  border-color:var(--c-accent); transform:translateY(-3px);
  box-shadow:0 12px 24px -13px rgba(226,62,92,.55); color:var(--c-text);
}
.ho-all {
  display:inline-block; margin-top:16px; font-family:var(--font-display);
  font-weight:700; font-size:.92rem; color:var(--c-accent);
}
.ho-all:hover { color:var(--c-accent-hover); }

@media (max-width:860px){
  /* 手機：圖改滿版鋪底，蓋一層由左而下的米黃紗保文字可讀，文字滿版 */
  .hero-oracle {
    min-height:auto; padding:96px 0 40px;
    background:
      linear-gradient(180deg, rgba(251,244,239,.92) 0%, rgba(251,244,239,.78) 46%, rgba(251,244,239,.5) 100%),
      var(--hp-hero) center / cover no-repeat, #FBF4EF;
  }
  .hero-oracle .ho-text { max-width:none; }
  .hero-oracle h1 { font-size:clamp(1.8rem,7vw,2.3rem); }
  .ho-moods { grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   首頁：旅遊籤介紹（怎麼運作的 3 步驟）— 取代原本重複的 CTA 卡
   ========================================================== */
.oracle-intro { text-align:center; }
.oracle-intro .oi-head { max-width:44em; margin:0 auto; }
.oracle-intro .oh-kk {
  font-family:var(--font-display); font-weight:700; font-size:.76rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--c-accent);
}
.oracle-intro h2 { font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.2; margin:12px 0 14px; }
.oracle-intro .oi-head > p { color:var(--c-text-muted); font-size:1.06rem; line-height:1.85; margin:0; }
.oracle-intro .oi-head strong { color:var(--c-ink); }

/* 3 步驟：大的透明數字當背景、細鋪陳、無笨重方框 */
.oi-steps {
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left;
  counter-reset:oi;
}
.oi-steps li {
  position:relative; padding:30px 28px 28px; overflow:hidden;
  background:linear-gradient(165deg,#FFFFFF, #FFF8F5);
  border:1px solid var(--c-line); border-radius:20px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.oi-steps li:hover {
  transform:translateY(-5px); border-color:rgba(226,62,92,.4);
  box-shadow:0 22px 40px -24px rgba(226,62,92,.5);
}
/* 大的透明數字（編輯感），墊在右上角 */
.oi-steps li::before {
  counter-increment:oi; content:"0" counter(oi);
  position:absolute; top:-14px; right:6px; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:5.4rem; line-height:1;
  color:rgba(226,62,92,.09); letter-spacing:-.03em;
}
.oi-steps .oi-step {
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; color:var(--c-accent);
}
.oi-steps h3 { position:relative; z-index:1; font-size:1.22rem; margin:10px 0 8px; }
.oi-steps p { position:relative; z-index:1; color:var(--c-text-muted); font-size:.95rem; line-height:1.72; margin:0; }

.oi-cta {
  display:inline-block; margin-top:30px; height:52px; line-height:52px; padding:0 34px;
  border-radius:var(--r-pill); background:var(--c-accent); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.oi-cta:hover { background:var(--c-accent-hover); color:#fff; transform:translateY(-2px); }

@media (max-width:760px){
  .oi-steps { grid-template-columns:1fr; gap:14px; }
  .oi-steps li::after { display:none; }
}

/* ==========================================================
   首頁「本月旅行優惠」入口（施工單_首頁優惠入口）
   ----------------------------------------------------------
   只做入口不搬內容：首頁不出現任何折扣碼，也不標筆數／折扣數字
   （標了就得處理「0 則」，顯示 0 則比不顯示更糟）。
   配色一律用站上既有的色票（玫瑰紅重音＋中性灰底），不另外開一組金色：
   正上方「今日快訊」的連結是玫瑰紅，這排如果用金色，兩條右對齊的連結
   一紅一金並排就是不對盤。克制靠的是「面積小、層級低」，不是換色系——
   視覺層級仍然必須低於上面的旅遊籤測驗。
   ========================================================== */
.home-deals { padding:12px 0 0; }
.hd-box {
  border:1px solid var(--c-line); border-radius:16px;
  background:var(--c-mist);
  padding:11px 16px 12px;
}
.hd-head { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.hd-head h2 {
  display:flex; align-items:center; gap:7px; margin:0;
  font-size:1rem; letter-spacing:.01em; color:var(--c-ink); white-space:nowrap;
}
.hd-head h2 img { width:19px; height:19px; }
.hd-sub {
  flex:1; min-width:0; margin:0; font-size:.86rem; color:var(--c-text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hd-all {
  /* 用 --c-accent 而不是 --c-teal-deep：正上方今日快訊的「看○○○ →」就是這個色，
     兩條右對齊的連結必須一模一樣，差一階看起來就是沒對齊。 */
  flex:none; font-size:.86rem; font-weight:600; color:var(--c-accent);
  transition:color .16s var(--ease);
}
.hd-all:hover { color:var(--c-accent-hover); }

.hd-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hd-card {
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border:1px solid var(--c-line); border-radius:12px;
  background:#fff; color:var(--c-ink); min-width:0;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.hd-card:hover {
  border-color:var(--c-accent); color:var(--c-ink);
  box-shadow:0 6px 18px rgba(226,62,92,.13); transform:translateY(-1px);
}
/* 圖示是深墨線稿（無法改色），放進中性灰底方框：底色不搶戲，
   重音留給「查看更多」那條連結與 hover 的紅框 */
.hd-ic {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; background:#fff; border:1px solid var(--c-line);
}
.hd-ic img { width:20px; height:20px; display:block; }
.hd-t { display:grid; gap:1px; min-width:0; }
.hd-t b { font-size:.93rem; font-weight:600; white-space:nowrap; }
.hd-t small {
  font-size:.76rem; color:var(--c-text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hd-go { flex:none; margin-left:auto; color:var(--c-text-faint); font-size:1.1rem; line-height:1; }
.hd-card:hover .hd-go { color:var(--c-accent); }

@media (max-width:900px){
  .hd-cards { grid-template-columns:repeat(2,1fr); }
  .hd-head { flex-wrap:wrap; gap:6px 12px; }
  .hd-sub { flex:1 1 100%; order:3; white-space:normal; }
  .hd-all { margin-left:auto; }
}
@media (max-width:420px){
  .hd-cards { grid-template-columns:1fr; }
}