/* ============================================================================
 * themes/custom-kgtwbeef/blocks.css — kgtwbeef 主題專屬區塊元件（非 widget）
 * ============================================================================
 *
 * 用途：
 *   承接原本混在 themes/custom-kgtwbeef/widget.css 內、但**不屬於任何 common/widget/
 *   模組**的 kgtwbeef 專屬元件。widget.css 的職責因此收斂為「對 common/widget/
 *   19 支模組的主題覆寫」，本檔則收納 kgtwbeef 自有的版面區塊。
 *
 * 為什麼要分出來（issue #694 延伸）：
 *   原 widget.css 1,253 行中有 ~330 行不是 widget——.dutyBox／.timelineBox／
 *   .blockTitleBox 等是 kgtwbeef 官網自有的內容區塊，與 bannerA~E／imgTextA~D／
 *   productA~C 等 widget 模組無關。混在一起導致「要改某個 widget 找不到在哪、
 *   翻到的又不是 widget」。分檔後 widget.css 可與 common/widget/ 的模組編號一一對應。
 *
 * 本檔收錄（依原 widget.css 內的先後順序搬移，內部 cascade 關係不變）：
 *   1. .owl-carousel-suggest / .owl-carousel-btn-suggestbox
 *      跨頁相關商品輪播與箭頭（products/show 相關商品、posts/show 文章分享共用）
 *   2. #page-content scoped 的貼文標題字級 RWD 與按鈕尺寸 RWD
 *      （.blog-item-2 .blog-title-2 / .btnSummit 等；同 @media 內的
 *        .widget-block-title .widget-title-size2 屬 04-title 模組，留在 widget.css）
 *   3. .dutyBox 系列——首頁「責任」四格卡（含 4 張 iconBg 背景圖）
 *   4. .blockMSpacing / .blockMSpacingXL / .blockPSpacing 區塊間距 utility、
 *      .sgsBox 系列、.secSwiper、.timelineBox 系列（時間軸）、
 *      .blockTitleBox / .blockTitle 系列（含 .blockTitleBg 大字背景）、
 *      .blockLine 系列、.containerText、.blockLineText、.swiperPaginationBox
 *
 * 未搬移（刻意留在 widget.css，語意上屬 widget）：
 *   - .btn-group-category：側欄商品分類 widget 的 ≤991 手機版變體，與
 *     .widget-categories 同屬 17-sidebar 模組
 *   - .widget-title-more：widget 標題列的「更多」連結，屬 04-title 模組
 *   - .widget / .widget-title / .product-cat treeview：widget 容器與側欄本體
 *
 * 檔名由來與易混淆處：
 *   本檔多數 class 以 block 命名（.blockTitleBox／.blockTitle／.blockLine／
 *   .blockMSpacing／.blockLineText 等共 49 處選擇器），檔名即沿用此既有詞彙。
 *   **但 block 一詞在本專案有兩種用途，找東西前先看前綴**：
 *     - 無前綴的 .blockTitleBox / .blockTitle …＝ kgtwbeef 自有版面區塊 → 本檔
 *     - 有 widget- 前綴的 .widget-block-title ＝ 標題 widget（後台可編輯的
 *       widget 模組，markup 見 components/web/widgets.blade.php）→ 屬 04-title
 *       模組，主題覆寫在 themes/custom-kgtwbeef/widget.css 的 04 分區，不在本檔
 *   兩者都是「章節標題」的外觀，但一個是站台自有版面、一個是 widget 系統元件。
 *
 * markup 來源提醒（重要）：
 *   本檔多數 class（.dutyBox／.timelineBox／.blockTitleBox／.sgsBox／
 *   .blockLineText 等）在 resources/views/ 內 grep 不到——它們的 HTML 由後台
 *   widget／CKEditor 編輯後存在資料庫，屬 kgtwbeef 站台既有內容。
 *   **grep 不到不等於死碼，不得逕行刪除。**
 *
 * 載入順序：
 *   common/* → common/widget/* → themes/custom-kgtwbeef/base.css → header → sidebar →
 *   footer → widget.css → **本檔** → custom.css
 *   本檔排在 widget.css 之後，與搬移前「這些規則位於 widget.css 內」相比，
 *   相對於 common 層與其他主題檔的先後關係完全不變。
 *
 * 等價驗證：
 *   docs/front/grid-removal-harness/compare.mjs（6 主題 × 全 pageKey × 24 視口，
 *   逐 (media, selector, property) 比對最終生效值）與 widget-synth-probe.mjs。
 * ============================================================================
 */

/* ============================================================================
 * 1. 跨頁相關商品輪播（原 widget.css 區段 B；kgtwbeef.css line 3652-3698）
 *    products/show 相關商品 + posts/show 文章分享共用此結構
 * ============================================================================ */

.owl-carousel-suggest .product-item {
  width: 100%;
  background: #ffffff;
  margin-bottom: 10px !important;
  box-shadow: none;
  border: 1px solid #dddddd;
}

@media screen and (max-width: 767.98px) {
  .owl-carousel-suggest .product-item {
    width: 100%;
    background: #ffffff;
    margin-bottom: 20px !important;
    box-shadow: none;
    border: 1px solid #dddddd;
  }
}

.owl-carousel-btn-suggestbox {
  width: fit-content;
  display: flex;
}

.owl-carousel-btn-suggestbox .carousel-btn {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.owl-carousel-btn-suggestbox>.carousel-btn.right {
  background-image: url('../../../img/icon/arrow_R.svg');
  float: none;
}

.owl-carousel-btn-suggestbox>.carousel-btn.left {
  background-image: url('../../../img/icon/arrow_L.svg');
  margin-right: 1rem;
}

/* ============================================================================
 * 2. #page-content scoped 貼文標題與按鈕 RWD（原 widget.css 區段 D）
 *    原三段 @media 內另有 #header 規則（已搬 header.css）與
 *    .widget-block-title .widget-title-size2（屬 04-title，留 widget.css）
 * ============================================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
  #page-content .blog-item-2 .blog-title-2 {
    font-size: 22px;
    line-height: 1.35;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #page-content .blog-item-2 .blog-title-2 {
    font-size: 20px;
    line-height: 1.35;
  }
}

@media (max-width: 479.98px) {
  #page-content .blog-item-2 .blog-title-2 {
    font-size: 18px;
  }

  #page-content .btnSummit,
  #page-content .btnNormal,
  #page-content .submit-btn,
  #page-content .btn-submit,
  #page-content .apply-btn,
  #page-content .check-btn,
  #page-content .btnCanNotBuy {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ============================================================================
 * 3. .dutyBox 首頁「責任」四格卡（原 widget.css 區段 E；kgtwbeef.css line 4861-4938）
 *    4 個 icon 背景圖（dutyBoxbg01~04.png）+ 標題 + 內容
 * ============================================================================ */

.dutyBox {
  padding: 30px 40px;
  border-right: 2px solid #D1AD4B;
  min-height: 500px;
}

.dutyBox:last-child {
  border-right: none;
}

@media screen and (max-width: 991.98px) {
  .dutyBox:nth-child(even) {
    border-right: none;
  }
}

@media screen and (max-width: 767.98px) {
  .dutyBox {
    padding: 60px 40px;
    min-height: -moz-fit-content;
    min-height: fit-content;
    border-right: none;
    border-bottom: 1px solid #D1AD4B;
  }

  .blockTitleBox {
    margin-top: 20px;
    padding-top: 50px;
  }
}

.dutyBox .dutyBoxbg {
  width: 171px;
  height: 134px;
  aspect-ratio: 171/134;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.dutyBox .dutyBoxbg.dutyBoxbg01 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg01.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg02 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg02.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg03 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg03.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg04 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg04.png");
}

.dutyBox .dutyBoxTitle {
  font-size: 24px;
  color: #A06400;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 0px;
}

.dutyBox .dutyBoxContent {
  line-height: 30px;
  margin-top: 50px;
  font-size: 16px;
  color: #333333;
}

/* ============================================================================
 * 4. kgtwbeef 首頁區塊容器群（原 widget.css 區段 I；kgtwbeef.css line 4945-5158）
 *    區塊間距 utility / sgsBox / secSwiper / timelineBox 時間軸 /
 *    blockTitleBox 區塊標題 / blockLine 分隔線 / containerText / blockLineText
 * ============================================================================ */

.blockMSpacing {
  margin-top: 60px;
}

.sgsBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sgsBox .sgsBoxTitle {
  width: -moz-fit-content;
  width: fit-content;
  background: #F8F8F8;
  padding: 10px 20px;
  border-radius: 99rem;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sgsBox .sgsBoxTitle .triangle-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #DD8C06;
}

.sgsBox .sgsBoxTitle .sgsTitle {
  font-size: 16px;
  color: #A06400;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

.blockMSpacingXL {
  margin-top: 100px;
}

.secSwiper .swiper-wrapper {
  margin-bottom: 60px;
}

.secSwiper .swiper-scrollbar {
  margin-top: 50px;
}

.timelineBox {
  width: 100%;
  height: 100%;
  background: antiquewhite;
  aspect-ratio: 1/1;
  border-radius: 99rem;
}

.timelineBox .timelineImgBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 99rem;
}

.timelineBox .timelineImgBox .timelineImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.timelineBox .timelineTextBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 99rem;
  padding: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

@media screen and (max-width: 767.98px) {
  .timelineBox .timelineTextBox {
    padding: 30px 20px 20px;
  }
}

.timelineBox .timelineTextBox::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20%;
  background: #ffffff;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.timelineBox .timelineTextBox .year {
  font-size: 20px;
  color: #ffffff;
  background: #A06400;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 20px;
  border-radius: 99rem;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 40px;
}

@media screen and (max-width: 767.98px) {
  .timelineBox .timelineTextBox .year {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

.timelineBox .timelineTextBox .text {
  font-size: 16px;
  line-height: 32px;
  color: #653F00;
}

@media screen and (max-width: 767.98px) {
  .timelineBox .timelineTextBox .text {
    font-size: 12px;
  }
}

.secSwiper .swiper-scrollbar-drag {
  background: #A06400;
}

.blockPSpacing {
  padding-top: 60px;
}

.blockTitleBox {
  margin-top: 20px;
  padding-top: 120px;
}

.blockTitleBox .blockTitle.orange {
  color: #E8380C;
}

.blockTitleBox .blockTitle {
  font-size: 35px;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 767.98px) {
  .blockTitleBox {
    margin-top: 10px;
    padding-top: 120px;
  }

  .blockTitleBox .blockTitle {
    font-size: 24px;
  }
}

.blockLine-wrappe {
  display: flex;
  justify-content: center;
}

.blockLine {
  width: 2px;
  height: 80px;
  background: #E8380C;
  margin: 25px auto;
}

.containerText {
  max-width: 800px;
  margin: 0 auto;
}

.containerText p {
  color: #333333;
  font-size: 16px;
  line-height: 28px;
}

.blockLineText {
  font-size: 60px;
  color: #E8380C;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 767.98px) {
  .blockLineText {
    font-size: 40px;
  }
}

/* ============================================================================
 * 5. swiper 分頁器外框 + blockTitle 大字裝飾（原 widget.css 區段 J；
 *    kgtwbeef.css line 4804-4858）
 *    .blockTitleBox .blockTitle 於本區段重複定義（同值），依原檔保留，
 *    維持與區段 4 相同的先後覆寫關係
 * ============================================================================ */

.swiperPaginationBox {
  padding: 30px 0;
  margin-bottom: 10px;
}

.blockTitleBox .blockTitle.gold {
  color: #D2AD4B;
}

.blockTitleBox .blockTitle {
  font-size: 35px;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 767.98px) {
  .blockTitleBox .blockTitle {
    font-size: 24px;
  }
}

.blockTitleBox .blockTitleBgBox .blockTitleBg {
  color: rgba(112, 112, 112, 0.0901960784);
  font-size: 150px;
  font-family: Sitka;
  margin-top: -60px;
}

@media screen and (max-width: 991.98px) {
  .blockTitleBox .blockTitleBgBox {
    margin-top: -40px;
  }
}

@media screen and (max-width: 767.98px) {
  .blockTitleBox .blockTitleBgBox {
    margin-top: -30px;
  }
}

@media screen and (max-width: 991.98px) {
  .blockTitleBox .blockTitleBgBox .blockTitleBg {
    font-size: 80px;
  }
}

@media screen and (max-width: 767.98px) {
  .blockTitleBox .blockTitleBgBox .blockTitleBg {
    font-size: 40px;
  }
}

.blockTitleBgHtml {
  font-size: 115px !important;
  margin-top: -40px !important;
}