/* ==========================================================================
   棒棒的bonbon｜書籍目錄樣式（首頁上「目前作品」＋「敬請期待」兩個區塊）
   跟首頁其餘的版面（導覽、Hero、關於、頁尾）分開放，之後上新書只改這份，
   不會動到首頁其他地方。要注意的是：這份檔案要跟在 styles.css 之後載入，
   因為顏色變數（--ember、--steel 等）是定義在 styles.css 的 :root 裡。
   ========================================================================== */

/* ==========================================================================
   ★ 顏色設定 —— 只要改這裡的色碼(#開頭那六碼)就好，不用動下面的規則 ★

   每一行後面的中文說明就是它控制的地方。色碼可以用小畫家的顏色挑選器、
   或搜尋「色碼選取工具」網站，選好顏色複製那組 # 開頭的六碼貼進來即可。
   ========================================================================== */
:root {
  --works-bg:        #201c18;  /* 目前作品《廚刀》卡片的底色 */
  --works-border:    #3a352d;  /* 目前作品《廚刀》卡片的外框線 */

  --upcoming-bg:      #201c18; /* 敬請期待（牛排/牛肉/海鮮）卡片的底色 */
  --upcoming-border:  #3a352d; /* 敬請期待卡片的外框線（虛線） */
  --upcoming-border-hover: #8d96a0; /* 滑鼠移過去時外框線變成的顏色 */

  --blog-bg:          #201c18; /* 部落格預留位卡片的底色 */
  --blog-border:      #3a352d; /* 部落格預留位卡片的外框線（虛線） */
}

/* ==========================================================================
   精選作品卡（目前作品《廚刀》）—— 上方大圖／未來輪播，下方書籍資訊
   ========================================================================== */
.work-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(155deg, var(--works-bg), var(--surface-2));
  border:1px solid var(--works-border);
  border-radius:4px;
  padding:0 0 44px;
  position:relative;
  overflow:hidden;
}
.work-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(201,138,62,0.14), transparent 45%);
  pointer-events:none;
}
/* 目前只放一張圖；以後做輪播時，在裡面多放幾個 img（或包一層 slide 容器）
   加上左右箭頭／點點導覽即可，這個容器的比例已經抓得比較寬（21:9），
   適合放橫幅式的輪播大圖 */
.work-hero-media{
  width:100%;
  aspect-ratio:21/9;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(160deg, rgba(141,150,160,0.18), transparent 60%),
    linear-gradient(200deg,#22201b,#151310);
}
.work-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.work-info{
  padding:40px 52px 0;
  position:relative;
}
.work-title-cn{
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom:8px;
}
.work-sub{
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem;
  color:var(--ember);
  letter-spacing:0.1em;
  margin-bottom:18px;
  display:block;
}
.work-desc{color:var(--paper-dim); max-width:560px; margin-bottom:26px;}
.chapters{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-bottom:32px;
  color:var(--steel-pale);
  font-size:0.92rem;
}
.chapters span::before{content:"— ";color:var(--steel);}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.84rem;
  letter-spacing:0.06em;
  color:var(--bg);
  background:var(--ember);
  padding:14px 26px;
  border-radius:2px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:background .25s, transform .25s;
}
.cta:hover, .cta:focus-visible{background:var(--glow); transform:translateX(2px); outline:none;}
.cta span.arrow{transition:transform .25s;}
.cta:hover span.arrow{transform:translateX(4px);}

/* ==========================================================================
   敬請期待整體版面：外層 3 欄 —— 未來作品佔 2 欄，部落格預留位佔 1 欄
   ========================================================================== */
.upcoming-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:22px;
  align-items:stretch;
}

/* 未來作品（佔上面 2 欄的空間），裡面的卡片自己再往下換行排列 */
.upcoming-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.upcoming-card{
  border:1px dashed var(--upcoming-border);
  border-radius:4px;
  padding:20px 24px 24px;
  color:var(--paper-dim);
  background:var(--upcoming-bg);
  min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .3s, color .3s;
}
.upcoming-thumb{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:3px;
  margin-bottom:16px;
  filter:grayscale(70%) brightness(0.75);
  opacity:0.7;
  transition:filter .3s, opacity .3s;
}
.upcoming-card:hover .upcoming-thumb{
  filter:grayscale(20%) brightness(0.9);
  opacity:0.9;
}
.upcoming-card:hover{border-color:var(--upcoming-border-hover);}
.upcoming-card h3{
  font-family:'Noto Serif TC', serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--steel-pale);
}
.upcoming-card .status{
  margin-top:16px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  color:var(--steel);
}

/* 部落格預留位（佔第 3 欄），先做成跟書籍卡片同一家族的樣式，
   之後部落格真的上線時，把這裡換成文章列表的連結卡片即可 */
.blog-teaser{
  border:1px dashed var(--blog-border);
  border-radius:4px;
  padding:24px;
  background:var(--blog-bg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  transition:border-color .3s;
}
.blog-teaser:hover{border-color:var(--steel);}
.blog-teaser .status{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  color:var(--steel);
}
.blog-teaser h3{
  font-family:'Noto Serif TC', serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--steel-pale);
}
.blog-teaser p{
  font-size:0.86rem;
  color:var(--paper-dim);
  margin:0;
}



/* ==========================================================================
   RWD 響應式：書籍卡片部分（平板／手機）
   ========================================================================== */
@media (max-width: 860px){
  .work-info{padding:34px 34px 0;}
  .upcoming-layout{grid-template-columns:1fr;}
  .upcoming-grid{grid-template-columns:1fr;}
}