/* =========================================================
   comic.css — 漫畫知識探險隊首頁樣式 v3
   =========================================================

   上半部構圖（bg_main.png 1920×991）：
   ┌────────────────────────────────────┐ 0%
   │   黃色格          title_comic.png  │
   │                                   │ ~47% ← title 底部
   ├ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ╱ ┤ ~40-55% 斜線過渡
   │   恐龍/太空格      mainpic.png      │
   └────────────────────────────────────┘ 100%
                           ↕ -8%（破格延伸）
   ========================================================= */

/* =========================================================
   上半部容器
   ========================================================= */
.comic-upper {
  position: relative;
  max-width: 1920px;   /* 不超過原始圖寬 */
  margin: 0 auto;
  overflow: visible;   /* 允許 mainpic 破格溢出底部 */
}

/* bg_main.png：用 img 標籤撐開容器，RWD 等比縮放 */
.comic-bg-main {
  display: block;
  width: 100%;
  height: auto;
}

/* title_comic.png：置中，bottom:53% → 底部對齊黃格/斜線交界（~47% from top）
   原始尺寸 839×360，最大顯示 520px 寬 */
.comic-title-pos {
  position: absolute;
  bottom: 56%;
  left: 50%;
  transform: translateX(-50%);
  width: min(840px, 43%);
  z-index: 3;
  text-align: center;
}
.comic-title-pos img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

/* mainpic.png：置中，bottom:-8% = 底部超出容器 → 漫畫破格效果
   原始尺寸 750×558，最大顯示 480px 寬 */
.comic-mainpic-pos {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 39%);
  z-index: 5;
  text-align: center;
}
.comic-mainpic-pos img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45));
}

/* =========================================================
   下半部：書籍介紹
   ========================================================= */
.comic-lower {
  background-image: url('../img/bg04.jpg');
  background-size: cover;
  background-position: top center;
  /* mainpic 破格 -8%：section height ≈ 0.516×vw，8% × 0.516 ≈ 4.1vw
     padding 補足破格空間 + 視覺間距 */
  padding-top: calc(4.5vw + 98px);
  padding-bottom: 60px;
	margin-top: -180px;
}

.comic-lower-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 書籍列：左2.4欄＋右欄最大320px，無外框 */
.comic-book-row {
  display: grid;
  grid-template-columns: 2.4fr minmax(0, 320px);
  gap: 0;
  margin-bottom: 48px;
  align-items: start;
}
.comic-book-row:last-child {
  margin-bottom: 0;
}

/* 左欄：內頁圖，透明背景，RWD */
.comic-info-col {
  line-height: 0;   /* 消除 img 底部空隙 */
	padding: 10px;
}
.comic-info-col img {
  width: 100%;
  height: auto;
  display: block;
}

/* 電腦版：顯示單張大圖，隱藏手機版兩張
   用 .comic-info-col .info-* 提高 specificity(0,2,0)
   以覆蓋 .comic-info-col img(0,1,1) */
.comic-info-col .info-desktop { display: block; }
.comic-info-col .info-mobile  { display: none; }

/* 右欄：書封購買格（白底），按鈕使用 style.css 橘色 */
.comic-panel-book {
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 20px;
  gap: 14px;
}

.comic-panel-book .bookpic {
  text-align: center;
}
.comic-panel-book .bookpic img {
  max-width: 190px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  /* 無陰影 */
}

/* 購買按鈕加寬：撐滿右欄寬度 */
.comic-panel-book .buy-grid {
  width: 100%;
}

.comic-panel-book .bookprice {
  font-weight: 700;
  font-size: 15px;
  color: #555;
  text-align: center;
  margin: 0;
}

/* =========================================================
   平板（768px – 1024px）
   ========================================================= */
@media (max-width: 1024px) and (min-width: 768px) {
	.comic-upper {
		padding: 60px 0;
	}
	.comic-lower {
    padding-top: calc(4.5vw + 98px);
    padding-bottom: 40px;
	  margin-top: -150px;
  }
  /* bg_main.png 等比縮放（同桌機），不固定高度 */
  .comic-title-pos {
    width: min(420px, 43%);
  }
  .comic-mainpic-pos {
    width: min(380px, 39%);
	 bottom: 12%;
  }
  .comic-panel-book {
    padding: 20px 14px;
    gap: 10px;
  }
  .comic-panel-book .bookpic img {
    max-width: 150px;
  }
}

/* =========================================================
   手機（≤ 767px）：bg_main.png 自動縮小，調整 overlay 比例
   ========================================================= */
@media (max-width: 767px) {

  /* 手機版：固定高度，bg_main.png 用 object-fit:cover 填滿 */
  .comic-upper {
    height: 520px;
    padding-top: 0;
    overflow: visible;
  }
  .comic-bg-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* title/mainpic 仍以 comic-upper 的 480px 高度為基準定位 */
  .comic-title-pos {
    width: min(520px, 90%);
    bottom: 54%;
  }
  .comic-mainpic-pos {
    width: min(480px, 80%);
    bottom: 2%;
  }

  .comic-lower {
    padding-top: calc(4.5vw + 40px);
    padding-bottom: 40px;
	  margin-top: -50px;
  }
  .comic-lower-inner {
    padding: 0 12px;
  }

  /* 書籍列：單欄，左欄圖切換 */
  .comic-book-row {
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }

  /* 電腦版大圖隱藏，顯示手機版兩張圖 */
  .comic-info-col .info-desktop { display: none; }
  .comic-info-col .info-mobile  { display: block; }

  .comic-panel-book {
    padding: 24px 20px;
  }
}