/* 首頁的導購（.home-cross）與消息格（.home-news）。標記由 lib/home-grids.js 產生。
   這個檔只有 WLIU_HOME_GRIDS=1 的 build 才會被複製到輸出目錄（/home-grids.css）、被首頁連結。

   類別名跟六個 product 站的 lib/home-grids.css 相同（home-cross、hc-*、home-news、hg-*、eyebrow、button）。
   樣式是這一站自己的，照 assets/style.css 的帳本版面寫：.wrap 的寬度與邊距、24px 的區塊標題、
   等寬字眉標、1px 黑框的紙色卡片、黑底按鈕與黃色訊號色。
   assets/style.css 沒有 .eyebrow／.button 的規則，這裡把它們限定在這兩個區塊裡定義——
   頁面最下面的指南牆（cardwalls/cards.html）也用這兩個類別名，那一區不受影響。 */

.home-news {
  max-width: 1120px; /* 跟 .wrap 同寬、同邊距 */
  margin: 0 auto;
  padding: 0 20px 72px; /* 跟上面 .collections 的下邊距同一個節奏 */
}
.home-cross,
.home-news {
  scroll-margin-top: 88px; /* 頁首是 sticky 的，跳到 #news／#next-step 時標題不要被蓋住 */
}
/* 上面那條不設 display，所以 hidden 屬性本來就有效；這一行是保險，
   免得之後有人在 .home-news 上加了 display 就把還沒有文章的區塊打開。 */
.home-news[hidden] {
  display: none;
}
html[lang^="ko"] .home-cross,
html[lang^="ko"] .home-news {
  word-break: keep-all;
}

/* ---------------------------------------------------------------- 眉標 --- */

.home-cross .eyebrow,
.home-news .eyebrow {
  margin: 0 0 12px;
  font: 500 10.5px/1.5 "DM Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 站上的 .kicker 用 --ink-3，在紙色底上對比 4.1:1；這裡的字更小，用深一階的 --ink-2（5.7:1）。 */
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- 按鈕 --- */

.home-cross .button,
.home-news .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px; /* 手指點得到的大小 */
  padding: 11px 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.home-cross .button:focus-visible,
.home-news .button:focus-visible,
.hg-news a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- 導購 --- */
/* 位置：精選推薦（.featured）之後、90 張卡的圖鑑（#dex）之前。
   標記跟六個 product 站一樣：section.home-cross 裡先是 div.hc-card（字與按鈕），後面一張 img.hc-racco。
   樣子是這一站自己的：那六站是「整條黃色帶子裡放一張紙色卡片」，這一站的版面沒有滿版色帶，
   所以整個 section 就是一張收在內容欄裡的黃底黑框卡片——站上連到 steps 的那一格（.xlink-steps）
   本來就是黃底黑框。.hc-card 設成 display: contents，裡面的每一列直接排進 section 的格線，
   圖才能在桌機跨滿整張卡的高度、在手機只陪標題那兩列，不用自己算位置。
   桌機：字與黑底按鈕（站上的 .cta）在左，Racco 站在右下角、腳踩著卡片的底線。
   720px 以下：Racco 縮小放到標題右邊，其餘各列拉滿寬，按鈕也拉滿寬。 */

.home-cross {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  column-gap: 40px;
  align-items: start;
  /* 跟 .wrap 的內容欄同寬：最寬 1120 − 左右各 20。 */
  width: calc(100% - 40px);
  max-width: 1080px;
  /* 上面是 .featured（自己留 12px）、下面是 .dex（自己留 48px）：上下加起來各 56px 左右。 */
  margin: 44px auto 8px;
  padding: 28px 32px 30px;
  border: 1px solid var(--line);
  background: var(--signal);
}
/* 這一站沒有精選卡的時候（.featured 整段不輸出），區塊直接接在測驗後面，那一段自己已經留了 84px。 */
.ledger + .home-cross {
  margin-top: 0;
}
.hc-card {
  display: contents;
}
.hc-card > * {
  grid-column: 1;
  min-width: 0;
}
/* 六列：眉標、標題、補充、品名、事實列、按鈕。圖佔右欄、跨滿六列、貼底。
   下邊距抵掉卡片的下內距，腳剛好落在框線上。
   寬 150px 是這張圖最大的顯示尺寸；圖檔是它的兩倍（300px，lib/home-grids.js 的 ART_W）。 */
.hc-racco {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: end;
  justify-self: end;
  display: block;
  width: 150px;
  height: auto; /* 標記上有 width／height，比例由那兩個數字決定 */
  margin: 0 0 -30px;
}
.home-cross .eyebrow {
  color: var(--ink);
  opacity: 0.72; /* 黃底上 5.9:1 */
}
/* 這裡的標題是一整句話。 */
.hc-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
html[lang="ja"] .hc-card h2 {
  word-break: auto-phrase; /* 日文照文節斷行；不支援的瀏覽器照平常斷 */
}
.hc-detail {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
}
.hc-name {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.hc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-facts li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.hc-actions {
  margin: 22px 0 0;
}
.home-cross .button {
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.14s, box-shadow 0.14s;
}
/* 站上的 .cta 滑過去是往左上浮起、露出黃色的影子；這裡底色已經是黃的，影子改成紙色。 */
.home-cross .button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--card-bg);
}

/* ---------------------------------------------------------------- 消息 --- */

.hg-head {
  max-width: 700px;
}
.hg-head h2 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hg-head > p:last-child {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
/* 格線跟上面的情境策展（.coll-grid）一樣：卡片之間留 16px，桌機三欄。 */
.hg-news-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.hg-news {
  position: relative;
  min-width: 0;
  padding: 18px 20px 22px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hg-news:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--accent-2);
}
.hg-news time {
  display: block;
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.hg-news h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
  /* 這一站的消息標題是用空格分段的（「【卡片權利】失去免息期 發卡機構不得回頭對前期餘額收息」）。
     keep-all 讓中文只在空格與標點後面斷行，不會把「發卡機構」切成兩半；
     一整段放不下一行時 overflow-wrap 仍然會斷，不會撐破卡片。balance 讓各行差不多長。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hg-news a {
  color: inherit;
  text-decoration: none;
}
/* 整張卡都點得到，連結仍然只有標題那一個。 */
.hg-news a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hg-more {
  margin: 20px 0 0;
}
/* 「看全部消息」是次要動作：細框，滑過去黃色由下往上填滿，跟站上的 .btn-apply 同一個手勢。 */
.home-news .button {
  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / 100% 0;
  transition: background-size 0.16s ease;
}
.home-news .button:hover,
.home-news .button:focus-visible {
  background-size: 100% 100%;
}

/* ---------------------------------------------------------------- 斷點 --- */

@media (min-width: 640px) {
  .hg-news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .hg-news-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .home-news {
    padding-bottom: 56px;
  }
  .hc-card h2,
  .hg-head h2 {
    font-size: 22px;
  }
  .home-cross {
    grid-template-columns: minmax(0, 1fr) 72px;
    column-gap: 14px;
    margin-top: 36px;
    padding: 22px 20px 24px;
  }
  /* 圖只陪眉標與標題那兩列，貼著標題的最後一行；補充以下各列橫跨兩欄。 */
  .hc-racco {
    grid-row: 1 / span 2;
    width: 72px;
    margin: 0;
  }
  .hc-detail,
  .hc-name,
  .hc-facts,
  .hc-actions {
    grid-column: 1 / -1;
  }
  .hc-detail {
    margin-top: 2px;
  }
  .hc-actions {
    margin-top: 20px;
  }
  .home-cross .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hg-news,
  .home-cross .button,
  .home-news .button {
    transition: none;
  }
  .hg-news:hover,
  .home-cross .button:hover {
    transform: none;
  }
}
@media print {
  .home-cross,
  .home-news {
    display: none !important;
  }
}