/* 便當線的視覺。刻意明亮、資訊密度高、可掃讀。
   ⚠️ 不要套 cinematic-ui、不要滿版大圖、不要捲動轉場。
   目標：企業採購 30 秒內找到價格、產能、配送範圍、聯絡方式。

   Jay：這個檔裡沒有任何 animation / transition（hover 的底色除外），
   是刻意的。理由寫在 docs/decisions.md「便當頁是刻意的例外」。 */

body.page-bento { background: var(--bg-light); color: var(--text-light); }

/* 這頁不用內框，內容直接吃滿寬度到 --page-max，資訊才塞得下 */
.section, .hero-business { max-width: var(--page-max); margin-inline: auto; }

/* 導覽列的明亮版 */
.site-nav.light {
  background: color-mix(in srgb, var(--bg-light) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.site-nav.light a { color: var(--text-light); opacity: .7; }
.site-nav.light a.current, .site-nav.light .brand { opacity: 1; }
.site-nav.light a.current { color: var(--accent); }

/* ── 首屏 ────────────────────────────────────────────────────
   紅線：375×667 不捲動就要看到 h1 + 價格帶 + 產能 + 詢價按鈕。
   所以這裡的 padding 壓得比 .section 小很多，不要放大圖。 */
.hero-business {
  padding: var(--gap-m) var(--frame) var(--gap-l);
  border-bottom: 1px solid var(--line);
}
.hero-business h1 {
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  margin-bottom: var(--gap-s);
}
.hero-business .lead {
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  margin-bottom: var(--gap-m);
  max-width: 42rem;
}
.hero-business .lead strong { color: var(--accent); font-size: 1.15em; }

/* ── 按鈕 ──────────────────────────────────────────────────── */
.cta-primary {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .8rem 1.6rem; text-decoration: none; border-radius: 2px;
  font-weight: 700;
}
.cta-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }

/* LINE 綠。這是品牌色，不是本站色票，所以直接寫死 */
.cta-secondary {
  display: inline-block; color: #06c755; border: 1px solid #06c755;
  padding: .8rem 1.6rem; text-decoration: none; border-radius: 2px;
  font-weight: 700;
}
.cta-secondary:hover { background: #06c755; color: #fff; }

.cta-row { display: flex; flex-direction: column; gap: var(--gap-s); align-items: stretch; }
.cta-row a { text-align: center; }
@media (min-width: 560px) {
  .cta-row { flex-direction: row; align-items: center; }
  .cta-row a { text-align: left; }
}

/* ── 區塊節奏 ────────────────────────────────────────────────
   這頁的 padding 比電影感那兩頁小一半，因為要塞得下更多資訊 */
body.page-bento .section { padding: var(--gap-l) var(--frame); }
body.page-bento .section h2 {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--line);
}
.note { font-size: .9rem; opacity: .72; max-width: 46rem; }

/* 奶油白底色，把「產能與配送」這個最重要的區塊跟其他區隔開 */
.section.highlight {
  background: var(--cream);
  max-width: none;          /* 底色要吃滿寬 */
  border-block: 1px solid var(--line);
}
.section.highlight > * { max-width: var(--page-max); margin-inline: auto; }

/* ── 便當卡 ──────────────────────────────────────────────── */
.bento-grid {
  display: grid; gap: var(--gap-m);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-block: var(--gap-m);
}
.bento-card { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bento-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--cream); }
.bento-card h3 {
  font-size: 1.05rem; margin: var(--gap-s) var(--gap-s) .25rem;
}
.bento-card .price {
  margin: 0 var(--gap-s);
  color: var(--accent); font-weight: 700;
  font-size: 1.6rem; line-height: 1.2;
}
/* 「元」直接用 CSS 補，HTML 裡只留數字，老闆改價格時不會改到單位 */
.bento-card .price::after {
  content: " 元"; font-size: .8rem; font-weight: 400; opacity: .7;
}
.bento-card .desc {
  margin: .35rem var(--gap-s) var(--gap-s);
  font-size: .88rem; opacity: .78; line-height: 1.6;
}
.bento-card .desc:empty { display: none; }

/* ── 產能規格表 ──────────────────────────────────────────── */
.spec {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--gap-s) var(--gap-m);
  margin: var(--gap-m) 0 0; max-width: 46rem;
}
.spec dt { font-weight: 700; white-space: nowrap; }
.spec dd { margin: 0; }
/* 375px 下 max-content 那欄會把右邊擠爆，窄螢幕改單欄堆疊 */
@media (max-width: 480px) {
  .spec { grid-template-columns: 1fr; gap: 0; }
  .spec dt { margin-top: var(--gap-s); }
  .spec dt:first-of-type { margin-top: 0; }
}

/* ── 訂購流程：自訂圓形序號，不用預設的 1. 2. 3. ─────────── */
.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--gap-m) 0 0; }
.steps li {
  counter-increment: step;
  position: relative; padding-left: 3rem;
  margin-bottom: var(--gap-m); max-width: 42rem;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: .95rem; font-weight: 700;
}

/* ── 詢價區：這頁真正的目的，給它一個框 ─────────────────── */
.inquiry {
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--cream);
}
.inquiry .cta-row { margin-top: var(--gap-m); }

/* ── 頁尾（明亮版） ──────────────────────────────────────── */
.site-footer.light {
  border-top: 1px solid var(--line);
  padding: var(--gap-l) var(--frame);
  font-size: .9rem;
  max-width: var(--page-max); margin-inline: auto;
}
.site-footer.light p { margin-bottom: .35rem; }

/* ── 招牌品項標記 ─────────────────────────────────────────────
   ✏️ 要換招牌：在 bento.html 的 <article> 加／移除 class="signature" */
.bento-card.signature { border-color: var(--accent); }
.bento-card.signature h3::before {
  content: "招牌";
  display: inline-block;
  margin-right: .45rem;
  padding: .1rem .4rem;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: var(--accent);
  border-radius: 2px;
  vertical-align: .12em;
}

/* ── 小量外送運費表 ───────────────────────────────────────────
   摺疊起來，因為團膳訂單一定免運，這張表只服務小量／臨時訂單 */
.fee-note { margin-top: var(--gap-m); }
.fee-note summary {
  cursor: pointer;
  font-weight: 700;
  padding: .5rem 0;
  border-top: 1px solid var(--line);
}
.fee-note summary:hover { color: var(--accent); }
.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin: .6rem 0;
  font-size: .93rem;
}
.fee-table th, .fee-table td {
  border-bottom: 1px solid var(--line);
  padding: .45rem .6rem;
  text-align: left;
}
.fee-table th { font-weight: 700; white-space: nowrap; }
.fee-table td:nth-child(2) { white-space: nowrap; }