/* ============================================================
   後台編輯器產出的內文樣式
   來源:OfficalAdmin/src/assets/css/editor.css

   移植時做了三件事,不是原樣複製:

   1. **全部收進 .editor-content 底下。** 原檔用了 `h2`、`table`、`blockquote`
      這類裸選擇器,直接搬進來會汙染全站(產品規格表就是真 <table>);
      而且 `.faq-section`、`.faq-item`、`.section-header` 跟官網 /faq/ 頁的
      class 撞名,不收進命名空間會把那一頁改壞。

   2. **刪掉 CKEditor 工具列的樣式**(.cke_*、.editor-container、.ckeditor-instance
      等)。那些是後台編輯畫面的外框,官網沒有編輯器。

   3. **顏色改用官網的設計 token。** 原檔是後台的藍綠色系(#499fb6 系),
      直接搬過來會在官網的碳灰 + 工業橘裡看起來像貼上去的。版面與結構完全照原樣,
      只換色票。

   ============================================================ */

.editor-content {
  color: var(--ink);
}

/* ---------- 標題 ---------- */

.editor-content h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink);
  position: relative;
  display: block;
  padding-bottom: 10px;
  margin: 40px 0 24px;
}

/* ---------- 圖片畫廊 ---------- */

.editor-content .image-gallery {
  display: flex;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
}

.editor-content .image-item {
  flex: 1 1 300px;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* 圖片有手動設定寬度時,卡片改為跟隨圖片而不是平均分配 */
.editor-content .image-item:has(img[style*="width"]) {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

.editor-content .image-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(34, 38, 42, 0.2);
}

.editor-content .image-item img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  object-fit: cover;
}

.editor-content .image-item img[style*="width"] {
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* 手機上不換行會把兩張圖擠成細長條,改成直排 */
@media (max-width: 640px) {
  .editor-content .image-gallery {
    flex-wrap: wrap;
  }

  .editor-content .image-item {
    flex: 1 1 100%;
  }
}

/* ---------- 打勾列表 ---------- */

.editor-content .check-list-container {
  background-color: var(--mist);
  padding: 25px;
  border-radius: var(--radius);
  margin: 30px 0;
}

.editor-content .check-list-title {
  font-size: 1.2rem;
  color: var(--grit-deep);
  margin-bottom: 15px;
  font-weight: 700;
}

.editor-content .check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 官網內文容器(.na-body / .d-tab-pane / .faq-a)直接在 `ul li` 上設了 list-style: disc,
   只在 ul 上設 none 蓋不掉,li 這層也要清掉,否則圓點會跟 ✓ 疊在一起 */
.editor-content .check-list li {
  list-style: none;
  padding-left: 25px;
  position: relative;
  margin-bottom: 12px;
}

.editor-content .check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--grit);
  font-weight: bold;
}

/* ---------- 表格 ---------- */

.editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.editor-content table th {
  background-color: var(--grit-tint);
  color: var(--grit-deep);
  padding: 12px 15px;
  text-align: left;
  border: 1px solid var(--line);
  font-weight: 700;
}

.editor-content table td {
  padding: 12px 15px;
  border: 1px solid var(--line);
}

.editor-content table tr:nth-child(even) {
  background-color: rgba(244, 245, 246, 0.5);
}

/* ---------- 引用 ---------- */

.editor-content blockquote {
  padding: 20px;
  background-color: var(--mist);
  border-left: 4px solid var(--grit);
  margin: 20px 0;
  font-style: italic;
}

/* ---------- 應用場景 ---------- */

.editor-content .application-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.editor-content .application-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  text-align: center;
  background-color: var(--paper);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.editor-content .application-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(34, 38, 42, 0.1);
}

.editor-content .application-icon {
  font-size: 2em;
  color: var(--grit);
  margin-bottom: 10px;
}

.editor-content .application-name {
  font-weight: 500;
  color: var(--ink);
}

/* ---------- 編輯器插入的常見問題區塊 ----------
   注意:這裡的 .faq-section / .faq-item 是**編輯器插進內文的元件**,
   跟官網 /faq/ 那一頁的同名 class 是兩回事。靠 .editor-content 隔開。

   **答案一律展開。** 原檔靠 .faq-item.active 切換 max-height,而那個 active
   是後台編輯畫面的 JS 加的 —— 官網沒有那段 JS,照搬的話答案永遠是 max-height: 0,
   讀者完全看不到。內文裡的問答本來就該直接看得到,不需要再點一次。
   ------------------------------------------------------------ */

.editor-content .faq-section {
  padding: 20px 0;
  background-color: transparent;
}

.editor-content .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.editor-content .faq-section .section-header h2 {
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
}

.editor-content .faq-section .section-header h2::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 3px;
  background-color: var(--grit);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.editor-content .faq-section .faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.editor-content .faq-item {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 15px;
  overflow: hidden;
}

.editor-content .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--grit-tint);
}

.editor-content .faq-question span {
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

/* 展開/收合的圈圈符號在官網沒有作用,不要留著誤導讀者以為可以點 */
.editor-content .faq-toggle {
  display: none;
}

.editor-content .faq-answer {
  padding: 20px;
  max-height: none;
  overflow: visible;
}

.editor-content .faq-answer p {
  margin-bottom: 15px;
  color: var(--steel);
  line-height: 1.8;
}

.editor-content .faq-answer p:last-child {
  margin-bottom: 0;
}

.editor-content .faq-answer ul {
  margin: 15px 0 15px 20px;
  color: var(--steel);
}

.editor-content .faq-answer li {
  margin-bottom: 8px;
  line-height: 1.6;
}