/* ============================================================================
 * themes/kgtwbeef/pages/post.css — kgtwbeef 主題貼文頁完整抽取
 * ============================================================================
 *
 * 用途：
 *   完整承接舊 kgtwbeef.css 的 post / blog 相關段落內容，含貼文列表卡（舊版
 *   .blog-item 與新版 .blog-item-2）與貼文詳情頁（.blog-details-area）。
 *
 * 抽取策略（按 dgfactor 模式 — 完整段落抽取，非僅差異）：
 *   舊 kgtwbeef.css 已停用（css.blade.php line 24 註解掉），其 post 段落 SHALL
 *   完整抽到本檔。本檔載入順序在 common/pages/post.css 之後。
 *
 * 抽取來源：public/web/css/kgtwbeef.css 3 個區段
 *   - line 3551-3643：舊版列表卡 .blog-img / .blog-title / .blog-desc /
 *                     .blog-item 含 ::before / ::after 邊框 + hover
 *   - line 3700-3784：新版列表卡 .blog-item-2 / .blog-title-2 / .blog-desc /
 *                     .blog-image + .date-box / .date-text 日期框 + 767↓ RWD +
 *                     .blog-item-2:hover img opacity transform
 *   - line 4439-4513：貼文詳情頁 .blog-details-area 容器 + 標題 + 描述 + img +
 *                     RWD + .blog-details-title 獨立 + .blog-section-title
 *
 * 跳過範圍：
 *   - 5745-5899：#page-content scoped 跨頁面標題字級 cascade 已在 widget.css 區段 D
 *
 * 載入順序：
 *   common/pages/post.css -> themes/kgtwbeef/pages/post.css（本檔）
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.7）
 * ============================================================================
 */

/* ============================================================================
 * 區段 1：舊版列表卡 .blog-img / .blog-item + ::before/::after 邊框（line 3551-3643）
 * ============================================================================ */

.read-more a {
  color: #E8380C;
  font-size: 16px;
  text-transform: uppercase;
}

/* ============================================================================
 * 區段 2：新版列表卡 .blog-item-2 / .blog-title-2 + .date-box 日期框（line 3700-3784）
 * ============================================================================ */

.blog-item-2 {
  margin-bottom: 30px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.blog-item-2 .blog-desc {
  text-align: center;
  padding: 10px 20px 10px 0;
}

.blog-title-2 {
  color: #333333;
  font-weight: 700;
  line-height: 30px;
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
  font-size: 18px;
}

.blog-title-2>a {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 4px;
}

.blog-title-2>a:hover {
  color: #E8380C;
}

.blog-desc>p {
  color: #333333;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 28px;
}

.date-text {
  margin-bottom: 0 !important;
  font-size: 14px;
  text-align: end;
}

/* ============================================================================
 * 區段 3：貼文詳情頁 .blog-details-area + .blog-section-title（line 4439-4513）
 * ============================================================================ */

.blog-details-area .blog-description p img {
  width: auto;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: auto;

}

.blog-details-area .blog-description img {
  width: auto;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: auto;

}

@media screen and (max-width: 768px) {

.blog-details-area .blog-description p img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto;
  }
}

/* .blog-section-title 已遷至 themes/kgtwbeef/base.css（跨頁：post / contactUs / orders.cancel
 * / orders.return 共用）。color / weight / uppercase 由 common/base.css 提供，
 * font-size 18px / line-height 32px 由 kgtwbeef/base.css 提供，本檔不再重述。 */

.wrapper {
  background: #fff none repeat scroll 0 0;
}