/* ===========================================================
   潮麻吉 — 最新消息 列表 / 內頁 進階版型
   超大日期、左右交錯卡片、插畫浮動、滾動視覺
   =========================================================== */

/* ---------- 內頁 banner ---------- */
.news-banner{position:relative;height:60vh;min-height:420px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#0d0a07;text-align:center}
.news-banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.45) saturate(1.05);transform:scale(1.08)}
.news-banner::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(15,10,7,.2),rgba(15,10,7,.85))}
.news-banner__in{position:relative;z-index:3}
.news-banner .en{display:block;color:var(--gold);letter-spacing:.42em;font-size:14px;margin-bottom:16px;
  opacity:0;transform:translateY(20px);animation:rise .9s .2s var(--ease) forwards}
.news-banner h1{font-size:clamp(40px,6vw,84px);color:#fff;letter-spacing:.08em;
  opacity:0;transform:translateY(26px);animation:rise 1s .35s var(--ease) forwards}
.breadcrumb{margin-top:20px;color:var(--cream-2);font-size:13px;letter-spacing:.08em;
  opacity:0;animation:rise 1s .55s var(--ease) forwards}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{margin:0 10px;color:var(--gold)}
/* 浮動插畫 in banner */
.news-banner .deco{position:absolute;z-index:2;opacity:.85;pointer-events:none}
.deco-spin{animation:spin 14s linear infinite}
.deco-float{animation:floaty 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* ---------- 分類頁籤 ---------- */
.news-filter{position:sticky;top:0;z-index:40;background:rgba(20,16,11,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.news-filter .inner{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:18px 24px}
.news-filter a{font-size:15px;letter-spacing:.06em;color:var(--cream-2);padding:9px 24px;border-radius:40px;
  border:1px solid transparent;transition:.3s var(--ease)}
.news-filter a:hover{color:var(--gold)}
.news-filter a.active{background:var(--gold);color:var(--ink);font-weight:700}

/* ---------- 列表 ---------- */
.news-list{padding:clamp(60px,9vw,120px) 0;position:relative;overflow:hidden}
.news-list .deco{position:absolute;pointer-events:none;opacity:.5;z-index:0}
.news-row{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);
  align-items:center;margin-bottom:clamp(60px,8vw,110px)}
.news-row:nth-child(even){direction:rtl}
.news-row:nth-child(even) > *{direction:ltr}
.news-row__media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.news-row__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1s var(--ease)}
.news-row:hover .news-row__media img{transform:scale(1.12)}
.news-row__date{position:absolute;left:0;top:0;z-index:3;background:var(--gold);color:var(--ink);
  padding:14px 20px;border-bottom-right-radius:20px;text-align:center;line-height:1}
.news-row__date .d{font-family:"Cormorant Garamond",serif;font-size:42px;font-weight:600;display:block}
.news-row__date .m{font-size:13px;letter-spacing:.2em;margin-top:4px}
.news-row__body{position:relative}
.news-row__index{position:absolute;right:0;top:-72px;font-family:"Cormorant Garamond",serif;
  font-size:clamp(90px,12vw,170px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(245,197,24,.22);z-index:-1}
.news-row__cat{display:inline-block;font-size:13px;letter-spacing:.14em;color:var(--ink);
  background:var(--cream);padding:5px 16px;border-radius:30px;font-weight:700;margin-bottom:18px}
.section--dark .news-row__cat{background:var(--gold)}
.news-row__title{font-size:clamp(24px,3vw,38px);color:#fff;line-height:1.4;margin-bottom:18px}
.news-row__excerpt{color:var(--cream-2);font-size:16px;line-height:1.9;margin-bottom:28px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-row__more{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:15px;
  letter-spacing:.1em;border-bottom:1px solid var(--gold);padding-bottom:6px;transition:gap .3s var(--ease)}
.news-row__more:hover{gap:22px}

/* reveal 方向 */
.slide-l{opacity:0;transform:translateX(-60px);transition:.9s var(--ease)}
.slide-r{opacity:0;transform:translateX(60px);transition:.9s var(--ease)}
.slide-l.in,.slide-r.in{opacity:1;transform:none}

/* 空狀態 */
.news-empty{text-align:center;color:var(--muted);padding:80px 0}

/* ---------- 內頁 article ---------- */
.article{padding:clamp(50px,7vw,90px) 0 clamp(70px,9vw,120px);position:relative;overflow:hidden}
.article .deco{position:absolute;pointer-events:none;opacity:.45;z-index:0}
.article__wrap{max-width:860px;margin:0 auto;position:relative;z-index:2}
.article__meta{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.article__meta .cat{background:var(--gold);color:var(--ink);font-weight:700;padding:5px 16px;border-radius:30px;font-size:13px;letter-spacing:.1em}
.article__meta .date{color:var(--gold);font-family:"Cormorant Garamond",serif;letter-spacing:.16em;font-size:18px}
.article__title{text-align:center;font-size:clamp(28px,4.4vw,52px);color:#fff;line-height:1.4;margin-bottom:40px}
.article__hero{border-radius:22px;overflow:hidden;margin-bottom:48px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.article__hero img{width:100%;display:block}
.article__body{color:var(--cream-2);font-size:17px;line-height:2.05;letter-spacing:.02em}
.article__body p{margin:0 0 26px}
.article__divider{width:60px;height:3px;background:var(--gold);margin:50px auto;border-radius:3px}
.article__share{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.1em;margin-top:10px}

/* 上下篇 / 返回 */
.article-nav{border-top:1px solid var(--line);margin-top:60px}
.article-nav .inner{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:34px 24px;flex-wrap:wrap}
.article-nav a{color:var(--cream-2);font-size:15px;transition:.3s;display:inline-flex;align-items:center;gap:10px}
.article-nav a:hover{color:var(--gold)}
.article-nav .home{background:var(--gold);color:var(--ink);padding:12px 28px;border-radius:40px;font-weight:700}
.article-nav .home:hover{color:var(--ink);filter:brightness(1.05)}

@media(max-width:880px){
  .news-row{grid-template-columns:1fr;gap:24px}
  .news-row:nth-child(even){direction:ltr}
  .news-row__index{top:-40px;font-size:90px}
}

/* 分頁 */
.news-pager{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:64px}
.news-pager__btn{color:var(--cream-2);font-size:15px;letter-spacing:.04em;padding:10px 22px;border:1px solid var(--line);
  border-radius:40px;transition:.3s;white-space:nowrap}
.news-pager__btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.news-pager__btn.is-disabled{opacity:.35;pointer-events:none}
.news-pager__pages{display:flex;align-items:center;gap:8px}
.news-pager__num{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--cream-2);font-size:15px;border-radius:50%;transition:.3s}
.news-pager__num:hover{background:rgba(255,255,255,.08);color:var(--gold)}
.news-pager__num.is-current{background:var(--gold);color:var(--ink);font-weight:700}

@media(max-width:880px){
  .news-pager{gap:10px;margin-top:44px}
  .news-pager__btn{padding:9px 18px;font-size:14px}
  .news-pager__num{min-width:38px;height:38px;font-size:14px}
}