/**
 * resources.html 移動端適配 + Tab 分割槽樣式（2026-07-04）
 * 覆蓋 MICOUNT 學習總覽 / TOC / AI 專節 / 表格橫滑
 */

/* Tab 導航（桌面 + 移動） */
.jdy-resources-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 auto 1.25rem;
  padding-top: 0.5rem;
  position: sticky;
  top: 55px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
  padding-bottom: 0.75rem;
}
.jdy-resources-tabs__btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.jdy-resources-tabs__btn.is-active {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.jdy-resources-panel {
  display: none;
}
.jdy-resources-panel.is-active {
  display: block;
}

/* 擴充套件資料摺疊區 */
.jdy-resources-more {
  margin: 1.5rem 0 0;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 1rem;
  background: #f9fafb;
  overflow: hidden;
}
.jdy-resources-more__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #111827;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
}
.jdy-resources-more__summary::-webkit-details-marker {
  display: none;
}
.jdy-resources-more__summary::after {
  content: "▾";
  margin-left: auto;
  color: #10b981;
  transition: transform 0.2s;
}
.jdy-resources-more[open] .jdy-resources-more__summary::after {
  transform: rotate(180deg);
}
.jdy-resources-more__hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}
.jdy-resources-more__body {
  border-top: 1px solid rgba(16, 185, 129, 0.12);
}

/* 資源頁：壓縮頂欄佔用（去掉 page-rail 後） */
body.jdy-resources-page .jdy-resources-chrome {
  border-bottom: 1px solid #e5e7eb;
}
body.jdy-resources-page .jdy-page-hero {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}
body.jdy-resources-page .jdy-resources-tabs {
  top: calc(55px + 2.5rem);
}

@media (max-width: 767px) {
  body:has(#learning-resources-2026),
  body:has(#resources-page-toc) {
    overflow-x: clip;
  }

  #learning-resources-2026,
  #resources-ai-2026,
  #resources-page-toc,
  #quick-index-section,
  #third-party-section,
  #feature-updates-section,
  #troubleshooting-section {
    max-width: 100%;
    min-width: 0;
  }

  /* 有二級導航的 resources 頁：網格強制單列 */
  body:has(#learning-resources-2026) .grid[class*="md:grid-cols"],
  body:has(#resources-page-toc) .grid[class*="md:grid-cols"],
  body:has(#learning-resources-2026) .grid[class*="lg:grid-cols"],
  body:has(#resources-page-toc) .grid[class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* 頁內 TOC：可橫滑 + 換行 */
  #resources-page-toc .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #resources-page-toc .flex.flex-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    gap: 0.5rem;
  }

  #resources-page-toc .flex.flex-wrap::-webkit-scrollbar {
    display: none;
  }

  #resources-page-toc .flex.flex-wrap a {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 表格：容器內橫滑，不撐破 viewport */
  .resources-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .resources-table-wrap table {
    min-width: min(640px, 100%);
  }

  .resources-table-hint {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
  }

  /* Hero / section 間距（有 platform-subnav 時） */
  body:has(.platform-subnav) section[class*="pt-28"],
  body:has(.platform-subnav) section[class*="pt-24"] {
    padding-top: 1.25rem !important;
  }

  body:has(#learning-resources-2026) section[class*="py-12"],
  body:has(#learning-resources-2026) section[class*="py-10"] {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* 卡片 hover 縮放易致窄屏溢位 */
  body:has(#learning-resources-2026) .hover\:scale-105,
  body:has(#resources-page-toc) .hover\:scale-105 {
    transform: none !important;
  }

  /* AI 區 CTA 按鈕堆疊全寬 */
  #resources-ai-2026 .flex.flex-wrap.justify-center {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #resources-ai-2026 .flex.flex-wrap.justify-center a {
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }

  #resources-ai-2026 .flex.flex-wrap.justify-center a:first-child {
    margin-top: 0;
  }

  /* traffic hub 已有規則，resources 頁 footer 前 hub 換行 */
  body:has(#learning-resources-2026) .site-traffic-hub .traffic-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jdy-resources-tabs {
    top: calc(48px + 2rem);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jdy-resources-tabs::-webkit-scrollbar {
    display: none;
  }
  .jdy-resources-tabs__btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .jdy-resources-more__summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .resources-table-hint {
    display: none;
  }
}