/*
 * 全站行動裝置 RWD 覆寫（Stage A/B 合併）
 * 不改 7 個 HTML 內 React 組件，純靠 CSS 覆蓋 inline style + 一個 vanilla JS 注入漢堡。
 *
 * Breakpoints:
 *   <= 1024px : 平板
 *   <=  768px : 手機
 */

/* ===== 全域防溢出 ===== */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* ===== 全域 sticky header（桌機與手機共用） ===== */
/* sticky 需要祖先 overflow 不為 hidden；改用 clip，內容仍裁切 */
#root { overflow-x: clip !important; }
#root header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper, #f9f8f4);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
#root header.header-hidden {
  transform: translateY(-105%);
}
/* 抽屜開啟時不要隱藏 header（不然漢堡按鈕會跟著跑） */
body.nav-open #root header { transform: none !important; }

/* ===== 漢堡按鈕（桌機隱藏） ===== */
.mobile-hamburger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 8px;
  z-index: 110;
  position: relative;
}
.mobile-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink, #1a1a1a);
  margin: 5px 0;
  transition: transform 200ms, opacity 200ms;
}
body.nav-open .mobile-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .mobile-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .mobile-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== 平板（<=1024px）===== */
@media (max-width: 1024px) {
  /* 三欄 / 四欄 / 多欄 grid 收成兩欄 */
  [style*="repeat(3,"], [style*="repeat( 3,"],
  [style*="repeat(4,"], [style*="repeat( 4,"],
  [style*="repeat(6,"], [style*="repeat( 6,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== 手機（<=768px）===== */
@media (max-width: 768px) {

  /* 容器寬度 */
  #root { max-width: 100vw !important; overflow-x: hidden !important; }

  /* === 殺掉所有 1280 fixed-width wrapper（每頁外層 main wrapper）=== */
  [style*="width: 1280px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 殺掉所有固定寬度 wrapper（400/480/560/640/720/800） */
  [style*="width: 400px"], [style*="width: 480px"],
  [style*="width: 560px"], [style*="width: 640px"],
  [style*="width: 720px"], [style*="width: 800px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 殺掉桌機 translateX 位移（會讓內容跑到 viewport 外） */
  [style*="translateX(-"], [style*="translateX( -"],
  [style*="translate(-"] {
    transform: none !important;
  }
  /* 直書中文（writing-mode: vertical-rl）在手機隱藏 — 桌機藝術版面 */
  [style*="writing-mode: vertical-rl"],
  [style*="writingMode: vertical-rl"] {
    display: none !important;
  }
  /* H1 用 flex row-reverse（直書大標題群組）整塊隱藏 */
  h1[style*="row-reverse"] { display: none !important; }
  /* 上層 wrapper 含 translateX 與 alignItems flex-start（直書 hero 容器） */
  div[style*="translateX"][style*="flex-start"] {
    display: none !important;
  }
  /* 內部 section 的固定大 padding 一律縮小 */
  [style*="padding: 100px 80px"],
  [style*="padding: 120px 80px"],
  [style*="padding: 80px 80px"],
  [style*="padding: 60px 80px"],
  [style*="padding: 40px 80px"],
  [style*="padding: 100px 80px 160px"],
  [style*="padding: 160px 80px"] {
    padding: 48px 16px !important;
  }
  /* hero 之類的 flex space-between 在手機改成 column */
  section[style*="justify-content: space-between"],
  section[style*="justifyContent: space-between"],
  div[style*="justify-content: space-between"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* Header 重排 */
  header {
    padding: 20px 16px !important;
    flex-wrap: wrap !important;
  }

  /* 桌機 nav 預設隱藏，漢堡顯示 */
  header > nav { display: none !important; }
  .mobile-hamburger { display: block !important; }

  /* 漢堡開啟後 nav 變抽屜 */
  body.nav-open header > nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    top: 70px !important;
    right: 0 !important;
    left: 0 !important;
    background: var(--paper, #f4ede0) !important;
    padding: 24px !important;
    gap: 24px !important;
    z-index: 100 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  }
  body.nav-open header > nav > a {
    font-size: 16px !important;
    padding: 8px 0 !important;
  }
  body.nav-open { overflow: hidden; }

  /* 所有 grid 一律收成單欄（包含 inline style 的 repeat 與固定欄寬） */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }

  /* 常見的固定 padding（80/96/64/120）改成 clamp */
  [style*="padding: 0 96px"],
  [style*="padding: 0 80px"],
  [style*="padding: 0 64px"],
  [style*="padding: 0 120px"],
  [style*="padding:0 96px"],
  [style*="padding:0 80px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding: 80px 80px"],
  [style*="padding: 96px 80px"],
  [style*="padding: 96px 96px"],
  [style*="padding: 64px 80px"],
  [style*="padding: 120px 80px"] {
    padding: 48px 16px !important;
  }
  [style*="padding: 40px 80px"] {
    padding: 20px 16px !important;
  }
  /* 兜底：所有 section 至少留 16px 兩側內距 */
  section { padding-left: max(16px, env(safe-area-inset-left)) !important;
            padding-right: max(16px, env(safe-area-inset-right)) !important; }

  /* 大字級 hero 用 clamp 防溢出 */
  [style*="fontSize: 48"], [style*="fontSize: 56"],
  [style*="fontSize: 64"], [style*="fontSize: 72"],
  [style*="fontSize: 80"], [style*="fontSize: 96"],
  [style*="fontSize:48"], [style*="fontSize:56"],
  [style*="fontSize:64"], [style*="fontSize:72"] {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.2 !important;
  }
  [style*="fontSize: 32"], [style*="fontSize: 36"], [style*="fontSize: 40"] {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.3 !important;
  }

  /* 表單元件 */
  input[type="email"], input[type="text"], textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* email + button 通常並排 → 改 stack */
  form { flex-wrap: wrap !important; }
  form button, form input { flex: 1 1 auto !important; }

  /* 浮水印（ARTICLES / ABOUT 等大背景字） */
  .watermark { font-size: 50vw !important; opacity: 0.6; }

  /* 文章頁 TOC 側欄：手機隱藏（仍可用文內錨點） */
  aside, .toc, [class*="toc-"], [class*="TOC"] {
    display: none !important;
  }
  /* 例外：如果 aside 被當主要內容容器，請在自己頁面加更具體規則 */

  /* 文章卡常用的固定 width / minWidth 解除 */
  [style*="minWidth: 280"], [style*="minWidth: 320"],
  [style*="min-width: 280"], [style*="min-width: 320"] {
    min-width: 0 !important;
  }

  /* === About 頁：career timeline === */
  .timeline-cells, .timeline-dots {
    grid-template-columns: 1fr !important;
  }
  .timeline-cells { gap: 32px !important; }
  .timeline-dots { display: none !important; }
  .timeline-cell { padding-right: 0 !important; border-bottom: 1px solid var(--rule-line); padding-bottom: 24px; }
  .timeline-cell:last-child { border-bottom: 0; }
  /* About 頁：我把踩過的坑（makes-grid） */
  .makes-grid { grid-template-columns: 1fr !important; }

  /* === 產品頁 class-based grids === */
  /* Side Projects 三欄列表 */
  .catalog-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 28px !important;
  }
  /* Paid Services 三欄（編號/主文/詳細表）→ 改 stack */
  .service-entry {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 28px 0 !important;
  }
  .service-entry > div:first-child {
    /* 大編號（01/02/03）縮小 */
    font-size: 32px !important;
  }
  /* detail-table 維持 key/value 兩欄但縮窄 */
  .detail-table { grid-template-columns: 84px 1fr !important; }
  .detail-table > div { padding: 10px 0 !important; font-size: 13px !important; }
  /* pill chips 縮小 */
  .pill { font-size: 10px !important; padding: 4px 8px !important; }

  /* footer 通常是多欄 */
  footer { padding: 48px 16px !important; }
  footer [style*="grid"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* 文章列表 filter chips：橫向滾動 */
  [class*="filter"], [data-filter] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  [class*="filter"]::-webkit-scrollbar, [data-filter]::-webkit-scrollbar { display: none; }
}