/* =========================================================
   移动端专用排版
   只在窄屏 / 触屏生效，桌面版不受任何影响。
   设计目标：把桌面「左右分区 + 悬停交互」的版式，
   改成手机上「单列 + 层级清晰 + 无需悬停」的阅读动线。
   ========================================================= */

/* ---------- 触屏设备：消除一切依赖 hover 的隐藏信息 ---------- */
@media (hover: none) {
  .tool img, .tool video { filter: none; }
  .tool p { max-height: none; }
  .tool .info { padding: 44px 14px 12px; }
  .mask-view .hint { display: none; }
  .deck-nav { opacity: 1; }
  .fig .media img.zoom { cursor: default; }
}

@media (max-width: 760px) {

  /* ---------- 基础 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15.5px; line-height: 1.75; }
  .wrap { padding: 0 18px; }

  /* 锚点跳转不被固定导航挡住 */
  section, article.case, .part-head, .sub-h, [id] { scroll-margin-top: 78px; }

  /* 入场动画在手机上更快，减少等待感 */
  .rv { transition: opacity .6s var(--ease), transform .6s var(--ease); }

  /* ---------- 首屏 ---------- */
  .hero { height: 86svh; min-height: 520px; }
  .hero-copy { bottom: 30px; left: 18px; right: 18px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .lede { font-size: clamp(19px, 5vw, 24px); margin-top: 18px; line-height: 1.5; }
  .hero .sub { font-size: 12.5px; row-gap: 4px; }
  .hero .sub span { white-space: normal; }              /* 允许换行，杜绝右侧溢出 */
  .hero .sub span + span::before { margin: 0 .45em; }
  .hero-stats { margin-top: 24px; padding-top: 16px; gap: 26px; }
  .hero-stats b { font-size: 22px; }
  .hero-stats span { font-size: 11px; }
  .hero-cook { left: 18px; right: 18px; top: 68px; }

  /* ---------- 案例头部 ---------- */
  .case { padding: 64px 0 20px; }
  .case-head { grid-template-columns: 1fr; gap: 0; margin-bottom: 26px; }
  .case-no { font-size: 64px; -webkit-text-stroke-width: 1px; line-height: .8; margin-bottom: 10px; }
  .kicker { font-size: 11px; letter-spacing: .16em; }
  .case h2 { font-size: clamp(30px, 9vw, 38px); line-height: 1.08; margin: 8px 0 12px; }
  .case-lede { font-size: 15.5px; line-height: 1.65; }

  /* 元信息表：桌面是并排带竖线，手机改成「标签左 / 值右」的规格表，
     长值（ENGINE、STACK）可以占满整行，不再被挤成多行 */
  .case-meta { display: block; margin-top: 22px; padding: 6px 0; }
  .case-meta div { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); }
  .case-meta div:last-child { border-bottom: 0; }
  .case-meta dt { font-size: 10px; letter-spacing: .12em; color: var(--dim); }
  .case-meta dd { font-size: 12.5px; line-height: 1.55; }

  /* 01-A / 01-B 索引卡与下方小节标题内容重复，手机上反而打断阅读 */
  .side-cards { display: none !important; }

  /* ---------- 小节标题 ---------- */
  .part-head { margin: 64px 0 26px; padding-top: 24px; }
  .part-head.first { margin-top: 0; padding-top: 0; }
  .part-head > .mono { font-size: 12px; }
  .part-head h3 { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.1; }
  .part-head p { font-size: 15px; margin-top: 10px; line-height: 1.7; }
  .sub-h { margin-bottom: 14px; gap: 10px; }
  .sub-h h3 { font-size: 21px; }
  .sub-h span { font-size: 10.5px; }

  /* ---------- 正文与栅格 ---------- */
  .mt { margin-top: 44px; }
  .grid { gap: 12px; }
  .pdr > div { padding: 22px 0; }
  .pdr p, .pdr li { font-size: 14.5px; }
  .pdr h3 { margin-bottom: 10px; }
  .chips li { flex: 1 1 100%; padding: 14px 30px 14px 16px; }
  .bignums > div { padding: 22px 0 20px; }
  .bignums b { font-size: 54px; }

  /* ---------- 图与图注 ---------- */
  .fig .media { border-radius: 4px; }
  .fig figcaption { font-size: 11.5px; line-height: 1.55; margin-top: 8px; }

  /* ---------- 遮罩演示 ---------- */
  .mask-view .hint { display: none; }
  .mask-card .mask-txt { padding-top: 14px; }
  .diagram { padding: 14px; -webkit-overflow-scrolling: touch; }

  /* ---------- 工具墙 / 关于 / 附录 ---------- */
  .sec-head h2 { font-size: clamp(34px, 9vw, 44px); }
  .sec-head p { font-size: 14.5px; margin-top: 12px; }
  /* 分组标题：桌面上「字母 + 标题 + 右侧统计」挤在一行，手机改两行 */
  .wg-head { display: grid; grid-template-columns: 16px 1fr; gap: 4px 10px; align-items: baseline; padding-bottom: 12px; margin-bottom: 14px; }
  .wg-head > .mono:first-child { grid-column: 1; }
  .wg-head h3 { font-size: 20px; }
  .wg-head small { grid-column: 2; margin-left: 0; font-size: 10.5px; letter-spacing: .06em; }
  .tool img, .tool video { filter: none; }
  .tool p { max-height: none; }
  .tool .info { padding: 44px 14px 12px; }
  .about-grid { gap: 26px; }
  .about-grid .big { font-size: 21px; line-height: 1.6; }
  .deck { margin-left: 0; }
  .deck-nav { opacity: 1; width: 38px; height: 38px; }
  .deck-thumbs button { width: 96px; }
}

/* ---------- 工具卡：手机上把说明放到图下面，不再压在画面上 ---------- */
@media (max-width: 760px) {
  .tool:not(.tool-demo):not(.tf-player) {
    overflow: visible;
    background: none;
    border-color: transparent;
    aspect-ratio: auto;
  }
  .tool:not(.tool-demo):not(.tf-player) img,
  .tool:not(.tool-demo):not(.tf-player) video {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .tool:not(.tool-demo):not(.tf-player) .info {
    position: relative;
    inset: auto;
    padding: 9px 1px 0;
    background: none;
  }
  .tool:not(.tool-demo):not(.tf-player) b { font-size: 14.5px; line-height: 1.45; }
  .tool:not(.tool-demo):not(.tf-player) p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--mute);
  }
  .tool:not(.tool-demo):not(.tf-player) .no { top: 8px; left: 10px; }

  /* 卡牌组：同样改成图上字下，高度自适应 */
  .grid.strip > .tool { height: auto; overflow: visible; }
  .grid.strip > .tool img { aspect-ratio: 16 / 9; }
  .grid.strip > .tool .info { padding: 8px 1px 0; opacity: 1; }
}

/* 只在桌面显示的措辞（如“悬停”）在手机上隐藏 */
@media (max-width: 760px) {
  .d-only { display: none; }
}

/* ---------- 页脚备案号 ---------- */
footer .icp { color: var(--dim); text-decoration: none; transition: color .2s; }
footer .icp:hover { color: var(--acc); }

/* ---------- 首屏：先把名字读完，再看演示 ---------- */
@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(220px, 36svh) auto;
    overflow: visible;
  }
  .hero::after { display: none; }
  .hero > * { min-width: 0; max-width: 100%; }
  .hero-copy {
    position: static;
    transform: none;
    width: auto;
    left: auto; right: auto; bottom: auto; top: auto;
    grid-column: 1;
    grid-row: 1;
    padding: 82px 18px 10px;
  }
  #hero-canvas {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 2;
  }
  .hero-ov {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 2;
    pointer-events: none;
  }
  .hero-cook {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    grid-column: 1;
    grid-row: 3;
    padding: 14px 78px 6px 18px;
  }
  .scroll-cue { display: none; }
  .hero-stats { margin-top: 20px; }
}

/* ---------- 多图区域：一屏一张，左右滑 ---------- */
@media (max-width: 760px) {
  .figrow {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -18px;
    padding: 0 18px 6px;
    scrollbar-width: none;
  }
  .figrow::-webkit-scrollbar { display: none; }
  .figrow > .fig,
  .figrow > figure {
    flex: 0 0 87%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .figrow .fig figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.55; }
}