.c-desc {
  margin-left: 20px;
  font-size: 2rem;
  line-height: 1.7;
}

.ap {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding-bottom: 80px;
}

/* ===== 左側側欄(平列所有應用領域) ===== */
.ap-side {
  width: 240px;
  flex-shrink: 0;
  border: 1px solid #e2e2e2;
  position: sticky;
  top: 20px;
}

.ap-side_head {
  padding: 18px 20px 12px;
}

.ap-side_title {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.ap-side_rule {
  width: 36px;
  height: 3px;
  background: #c89240;
  margin-top: 8px;
}

.ap-cat {
  display: block;
  padding: 13px 20px;
  font-size: 1.5rem;
  cursor: pointer;
  border-top: 1px solid #efefef;
  transition: all .2s;
  text-decoration: none;
}

.ap-cat:hover {
  color: #c89240;
}

.ap-cat.is-active {
  color: #c89240;
  font-weight: 500;
  box-shadow: inset 3px 0 0 #c89240;
}

.ap-main {
  flex: 1;
  min-width: 0;
}

/* ===== 列表卡片:前景(產品去背圖)疊在背景(情境圖)上,左右交錯 ===== */
.ap-card {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: 320px;
  margin-bottom: 24px;
}

.ap-card:last-child {
  margin-bottom: 0;
}

/* 背景滿版(填滿卡片) */
.ap-card_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ap-card_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}

.ap-card:hover .ap-card_bg img {
  transform: scale(1.04);
}

/* 可讀性遮罩(桌機版文字疊在背景上) */
.ap-card_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 22, .42);
}

/* 前景:產品去背圖填滿卡片高度 → 前景與背景同高(卡片為固定高,img height:100% 可確定解析、不超出) */
.ap-card_media {
  position: relative;
  z-index: 1;
  width: 44%;
  flex-shrink: 0;
}

.ap-card_media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ap-card_body {
  position: relative;
  z-index: 1;
  flex: 1;
  order: 2;
  padding: 34px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

/* 偶數卡:前景移右、文字移左(左右交錯) */
.ap-card:nth-child(even) .ap-card_media {
  order: 2;
}

.ap-card:nth-child(even) .ap-card_body {
  order: 1;
}

.ap-card_title {
  display: block;
  margin: 0 0 14px;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
}

.ap-card_title:hover {
  color: #f0c987;
}

.ap-card_desc {
  margin: 0 0 22px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f0c987;
  text-decoration: none;
  transition: color .2s;
}

.ap-more:hover {
  color: #fff;
}

.ap-more .ap-arrow {
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.ap-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 1.6rem;
  color: #8b938f;
}

/* ===== 明細頁 ===== */
.ap-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  margin-bottom: 24px;
  font-size: 1.4rem;
  border: 1px solid #e2e2e2;
  text-decoration: none;
  transition: all .2s;
}

.ap-back:hover {
  border-color: #c89240;
  color: #c89240;
}

/* 明細主視覺:左圖 + 右標題/前言 */
.ap-hero {
  display: flex;
  gap: 32px;
  margin-bottom: 30px;
}

.ap-hero_pic {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  overflow: hidden;
}

.ap-hero_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap-hero_txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ap-hero_txt h2 {
  margin: 0 0 16px;
  padding: 0;
  border: none;
  font-size: 2.6rem;
  font-weight: 500;
}

.ap-hero_txt p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
}

/* 明細富文本內文 */
.ap-content {
  font-size: 1.5rem;
  line-height: 1.9;
}

.ap-content h3 {
  margin: 28px 0 12px;
  font-size: 1.9rem;
  font-weight: 500;
  color: #c89240;
}

.ap-content p {
  margin: 0 0 14px;
}

.ap-content ul,
.ap-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.ap-content img {
  max-width: 100%;
  height: auto;
}

/* 推薦產品 */
.ap-recommend {
  margin-top: 44px;
}

.ap-recommend_title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 2rem;
  font-weight: 500;
  border-bottom: 1px solid #e2e2e2;
}

.ap-recommend_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== RWD:左欄於 ≤992px 隱藏(比照系統斷點) ===== */
@media all and (max-width: 992px) {
  .ap-side {
    display: none;
  }
}

/* ===== RWD:手機版(≤768px) ===== */
@media all and (max-width: 768px) {
  /* 卡片改上下堆疊:前景圖上、文字下(高度改 auto,覆寫桌機固定高) */
  .ap-card {
    height: auto;
    flex-direction: column;
  }

  /* 前景圖:width 100%,band 高度依圖片自然高度(背景與前景同高) */
  .ap-card_media {
    order: 1 !important;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .ap-card_media img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* 文字跳脫在背景之外:實色底 + 深色字,遮住其後方背景 */
  .ap-card_body {
    order: 2 !important;
    padding: 22px 24px;
    background: #fff;
    color: #4a4943;
  }

  .ap-card_title {
    color: #4a4943;
  }

  .ap-card_desc {
    color: #5f6d68;
  }

  .ap-more {
    color: #c89240;
  }

  .ap-more:hover {
    color: #a5762e;
  }

  /* 背景取單側:奇數取左、偶數取右(反過來) */
  .ap-card_bg img {
    object-position: left center;
  }

  .ap-card:nth-child(even) .ap-card_bg img {
    object-position: right center;
  }

  /* 手機版背景不加深色遮罩(前景圖區清楚呈現情境) */
  .ap-card_bg::after {
    background: transparent;
  }

  /* 明細主視覺改直排 */
  .ap-hero {
    flex-direction: column;
  }

  .ap-hero_pic {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .ap-recommend_list {
    grid-template-columns: repeat(2, 1fr);
  }
}