/* 首頁的導購（.home-cross）、選物格（.home-shop）與消息格（.home-news）。
   標記由 lib/home-grids.mjs 產生。檔尾另有一段既有毛病的修正（指南卡標題）。
   這個檔只有 WLIU_HOME_GRIDS=1 的 build 才會被複製到輸出目錄、被首頁連結。

   視覺沿用站上既有的卡片語彙（.guide-list 那一套）：細黑框、紙色底、等寬字眉標，
   區塊的內距與標題字級跟 product.css 的 .roles／.section-heading 對齊。
   類別名都帶 hg- 或 home- 前綴，不借用 .section-heading／.guide-grid——
   那兩個在 style.css 與 product.css 各有一份定義，站根與內頁吃到的不一樣。 */

.home-shop,
.home-news {
  padding: 6vw 9vw;
  border-bottom: 1px solid var(--line, #15191e);
}
/* 上面那條不設 display，所以 hidden 屬性本來就有效；這一行是保險，
   免得之後有人在 .home-news 上加了 display 就把還沒有文章的區塊打開。 */
.home-news[hidden] {
  display: none;
}

/* 站根的頁面在瀏覽器端切語言（app.js 改 <html lang>），中文與韓文的區塊同時在頁面裡。
   跟 style.css 最後面的站長列是同一組規則：只顯示跟頁面語言相符的那一個；
   中韓以外的語言兩個都不顯示。build 出來的頁面一頁只有一語，這三條不會動到它。 */
html:not([lang^="zh"]):not([lang^="ko"]) .home-cross,
html:not([lang^="zh"]):not([lang^="ko"]) .home-shop,
html:not([lang^="zh"]):not([lang^="ko"]) .home-news,
html[lang^="ko"] .home-cross:not([lang="ko"]),
html[lang^="ko"] .home-shop:not([lang="ko"]),
html[lang^="ko"] .home-news:not([lang="ko"]),
html[lang^="zh"] .home-cross[lang="ko"],
html[lang^="zh"] .home-shop[lang="ko"],
html[lang^="zh"] .home-news[lang="ko"] {
  display: none;
}
.home-cross[lang="ko"],
.home-shop[lang="ko"],
.home-news[lang="ko"] {
  font-family: "Gowun Dodum", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
}
/* 站根：區塊後面緊接站長列，兩條邊線會疊成一條粗線。 */
.home-shop + .racco-strip,
.home-news + .racco-strip {
  border-top: 0;
}

/* ---------------------------------------------------------------- 導購 --- */
/* 黃底的一條帶子，裡面一張紙色卡片加實心陰影——陰影是站根 .tool-form 那一套。
   站根上它夾在藍色的 .free-tool 與粉色的 .field-notes 中間，build 出來的首頁上
   夾在廣告版位與選物格中間，兩邊都需要一眼看得出「這是另一件事」。 */

/* 兩欄：卡片、這一站的 Racco。Racco 站在卡片右邊、腳跟卡片底對齊；欄寬跟著視窗縮，
   卡片最寬 820px，兩欄靠左排，寬螢幕上 Racco 才不會被推到最右邊離卡片很遠。 */
.home-cross {
  display: grid;
  grid-template-columns: minmax(0, 820px) clamp(140px, 16vw, 210px);
  justify-content: start;
  align-items: end;
  column-gap: clamp(28px, 4vw, 56px);
  padding: 5vw 9vw;
  border-bottom: 1px solid var(--line, #15191e);
  background: var(--yellow, #ffdc55);
}
.hc-racco {
  display: block;
  width: 100%;
  height: auto;
}
/* 站根：導購要等 app.js 畫完、搬到 .free-tool 後面才出現（home-grids.mjs 的 rootPlacementScript），
   不然連線慢的時候它會先出現在頁面底下再跳上去。只有 JS 有在跑（html.hg-js）才先藏；
   不開 JS 的讀者看到的是留在原地的那一塊。 */
html.hg-js .home-cross.hc-wait {
  display: none;
}
.hc-card {
  padding: 30px 32px 32px;
  border: 1px solid var(--line, #15191e);
  background: var(--paper, #f6f1e8);
  box-shadow: 8px 8px 0 var(--ink, #15191e);
}
/* 這裡的標題是一整句話，不是標語，所以用內文的字體（不指定 font-family）：
   區塊標題那一套把英數換成高反差襯線體，句子裡的 Marriage License、IRA、My USA Plan
   夾在圓體中文中間會跳出來，同一張卡裡品名還會出現兩種字體。斷行規則同下面的 .hg-head h2。 */
.hc-card h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* 不拆行的詞（品名、表格名、用斜線連起來的一對），見 home-grids.mjs 的 NOWRAP。 */
.hc-nb {
  white-space: nowrap;
}
.hc-detail {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #4c5156;
  /* 最後一行不要只剩一兩個字。 */
  text-wrap: pretty;
}
.hc-name {
  margin: 22px 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}
.hc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.hc-facts li {
  padding: 6px 10px;
  border: 1px solid var(--line, #15191e);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.hc-actions {
  margin: 0;
}
.hc-also {
  margin: 22px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(21, 25, 30, 0.16);
  font-size: 14px;
  line-height: 1.7;
  color: #4c5156;
}
/* inline-block 加上下內距：整條連結有 44px 以上可以點，不是只有一行字的高度。 */
.hc-also a {
  display: inline-block;
  padding: 11px 0;
  color: var(--ink, #15191e);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ------------------------------------------------- 站根 hero 的 Racco --- */
/* 放在 .hero-art（style.css：position: relative、overflow: hidden）的左下角，站在封面前面。
   那個角落沒有字：左上是「WE LIVE IN USA」，封面底下那行小字從封面左緣往內 28px 才開始，
   貼紙在右下。寬度用百分比，跟著版面縮；761–1199px 之間封面佔版面的比例最大，所以那一段最窄。
   圖進版面之前帶著 hidden（見 home-grids.mjs 的 heroRacco），這裡補一條免得被下面的 display 蓋掉。 */
.hero-racco[hidden] {
  display: none;
}
.hero-art > .hero-racco {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: 0;
  display: block;
  width: 24%;
  /* 圖檔寬 420px，顯示不超過它的一半。 */
  max-width: 210px;
  height: auto;
}
@media (min-width: 761px) and (max-width: 1199px) {
  .hero-art > .hero-racco {
    width: 20%;
  }
}

/* ---------------------------------------------------------------- 標題 --- */

.hg-head {
  max-width: 700px;
}
.hg-head h2 {
  margin: 0 0 14px;
  font: 600 clamp(26px, 3.4vw, 46px)/1.12 "Bodoni Moda", "Huninn", "Noto Sans TC", serif;
  letter-spacing: -0.035em;
  /* 手機上標題會折成兩行。keep-all 讓中文只在標點後面斷（「不鑽牆、帶得走、／押金拿得回來」），
     不會把一個詞切成兩半；整句沒有標點又放不下時，overflow-wrap 仍然會斷，不會撐破版面。
     balance 讓兩行差不多長。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* 選物格的標題是清單的全名（「剛租到空房：99 件真正需要買的安家用品」），冒號之後一整段沒有標點，
   keep-all 會讓它整段不能斷、最後硬切在句尾。這一個照一般中文的斷法，兩行長度由 balance 去平衡。 */
.home-shop:not([lang="ko"]) .hg-head h2 {
  word-break: normal;
}
.home-shop[lang="ko"] .hg-head h2,
.home-news[lang="ko"] .hg-head h2 {
  font-family: "Gowun Dodum", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(22px, 2.9vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.hg-head > p:last-child {
  margin: 0;
  line-height: 1.8;
  color: #4c5156;
}

/* ---------------------------------------------------------------- 格線 --- */
/* 邊框畫在卡片自己身上、相鄰的用負邊距疊成一條線，而不是畫在容器上：
   韓文的消息常常只有兩三則，容器有框的話，沒填滿的那一格會變成一個空框。 */

.hg-shop-list,
.hg-news-list {
  display: grid;
  margin: 34px 0 0;
  padding: 0 1px 1px 0;
  list-style: none;
}
.hg-shop-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hg-news-list {
  grid-template-columns: minmax(0, 1fr);
}
.hg-item,
.hg-news {
  min-width: 0;
  margin: 0 -1px -1px 0;
  border: 1px solid var(--line, #15191e);
  background: var(--paper, #f6f1e8);
}

/* ---------------------------------------------------------------- 選物 --- */

.hg-item {
  display: flex;
  flex-direction: column;
}
.hg-art,
.hg-item > .shop-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--line, #15191e);
  background: #f3eee2;
}
/* 沒有插畫的品類退回線條圖示（shop-icons.mjs），留白讓它不要頂到邊。 */
.hg-item > .shop-icon {
  box-sizing: border-box;
  padding: 24%;
}
.hg-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 16px 18px;
}
.hg-body h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hg-body p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #4c5156;
  overflow-wrap: anywhere;
}
/* 按鈕貼在卡片底部、整格寬：兩欄的手機版一格只有一百多像素，
   「在 Amazon 查看」放不進靠左的小按鈕。高度 44px 是手指點得到的大小。 */
.hg-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--line, #15191e);
  background: var(--yellow, #ffdc55);
  color: var(--ink, #15191e);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.hg-buy:hover,
.hg-buy:focus-visible {
  background: var(--ink, #15191e);
  color: var(--paper, #f6f1e8);
}

/* amazon 模式才有的那一行：「什麼時候不必買」，跟 /shop 頁同一句。 */
.hg-body .hg-when {
  margin-top: -6px;
  font-size: 12.5px;
  line-height: 1.7;
}
.hg-more {
  margin: 28px 0 0;
}
/* 聯盟揭露句（amazon 模式）。放在格子上面、第一顆按鈕之前，字級 13px——讀者要先看到它。 */
.hg-disclosure {
  max-width: 44rem;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #4c5156;
}
/* 格子底下的說明：這八件怎麼來的、買的連結在哪一頁。 */
.hg-note {
  max-width: 44rem;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #4c5156;
}

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

.hg-news {
  position: relative;
  padding: 22px 22px 26px;
}
.hg-news time {
  display: block;
  margin: 0 0 12px;
}
.hg-news h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.hg-news a {
  color: inherit;
  text-decoration: none;
}
/* 整張卡都點得到，連結仍然只有標題那一個。 */
.hg-news a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hg-news:hover {
  background: var(--yellow, #ffdc55);
}
.hg-news a:focus-visible {
  outline: 2px solid var(--ink, #15191e);
  outline-offset: 3px;
}

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

@media (min-width: 640px) {
  .hg-news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 700px) {
  .hg-shop-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .hg-news-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* 760px 是 product.css 把各區塊內距從 vw 換成固定值的那個斷點。 */
@media (max-width: 760px) {
  /* 手機：單欄。Racco 排到卡片上面、靠右，腳踩在卡片的上緣（往下疊 10px，疊到的是卡片的留白，沒有字）。 */
  .home-cross {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 42px;
  }
  .hc-racco {
    position: relative;
    z-index: 1;
    order: -1;
    align-self: flex-end;
    width: 92px;
    margin: 0 18px -10px 0;
  }
  .hc-card {
    padding: 22px 20px 24px;
    box-shadow: 5px 5px 0 var(--ink, #15191e);
  }
  .home-shop,
  .home-news {
    padding: 44px 24px;
  }
  .hg-shop-list,
  .hg-news-list {
    margin-top: 28px;
  }
  .hg-body {
    padding: 12px 12px 14px;
  }
  .hg-body h3 {
    font-size: 15px;
  }
  .hg-body p {
    font-size: 13px;
  }
  /* 375px 寬、兩欄時按鈕裡只剩一百出頭像素：內距與字級各收一點，「在 Amazon 查看」才不會折行。 */
  .hg-buy {
    gap: 4px;
    padding: 10px 9px;
    font-size: 12.5px;
  }
  .hg-news {
    padding: 18px 18px 22px;
  }
}

/* 340px 以下（舊的小螢幕手機）：兩欄一格只剩一百三十幾像素，說明一行五六個字。
   改單欄，插畫壓成橫的一條（contain，不裁掉圖）。 */
@media (max-width: 340px) {
  .hg-shop-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .hg-art,
  .hg-item > .shop-icon {
    aspect-ratio: 5 / 2;
    object-fit: contain;
  }
  .hg-item > .shop-icon {
    padding: 6% 34%;
  }
}

@media print {
  .home-cross,
  .home-shop,
  .home-news,
  .hero-racco {
    display: none !important;
  }
}

/* ------------------------------------------ 既有毛病的修正：指南卡的標題 --- */
/* 跟上面三個區塊無關，順著同一個開關一起上（2026-10-06）。
   build 出來的首頁把本站指南排在 .guide-grid 裡，而 style.css 的 `.guide-grid a` 是寫給
   站根那三張入口卡的：整張卡就是一個連結，所以有 padding 24px、min-height、右邊與底下
   各一條框線、滑過去整塊變黃。那個選擇器太寬，指南卡標題裡的連結也一起吃到，
   結果每張卡的標題往右縮 24px，旁邊與底下多出線條。
   這裡只還原「指南卡裡的連結」。站根那三張卡的連結不在 .guide-card 裡，不受影響，
   所以不必去動手維護的 style.css。 */
.guide-grid .guide-card a {
  min-height: 0;
  padding: 0;
  position: static;
  border: 0;
  transition: none;
}
.guide-grid .guide-card a:hover {
  background: none;
}

/* ══ 這一站的調整（steps／wedding）═══════════════════════════════════════
   這條線以上是六個 product 站共用的那一份，原樣複製自 codex 專案的
   product-src/lib/home-grids.css（2026-10-07 00:58 的版本）；那邊改了，整段換掉就好，這條線以下留著。
   這兩站的 style.css 有一條 `section { max-width: 48rem; margin: 0 auto; }`，
   也沒有 product 站的 .button，所以補下面幾條。標記（tools/home-grids.mjs）與類別名都跟那一份相同。
   上面那一份裡有 .hero-racco 的規則（六站站根 hero 的小圖）；這兩站 hero 的圖用的是 .hero-mascot，不要撞名。 */
.home-shop,
.home-news {
  max-width: none;
  margin: 0;
}
.hg-head .eyebrow {
  margin: 0 0 14px;
}
.hg-more .button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--line, #15191e);
  background: transparent;
  color: var(--ink, #15191e);
  font-weight: 700;
  text-decoration: none;
}
.hg-more .button:hover,
.hg-more .button:focus-visible {
  background: var(--signal, #ffdc55);
}
/* 消息卡的日期：這兩站的 .eyebrow 是珊瑚色 10px，在紙色底上對比只有 2.7:1。改用內文的灰（5.7:1）。 */
.hg-news time.eyebrow {
  color: var(--muted, #52606d);
}
/* 只有兩則的時候（wedding 現在就是）：寬螢幕排兩欄，不留一格空的。 */
@media (min-width: 1000px) {
  .hg-news-list:has(> .hg-news:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}