/* ═══════════════════════════════════════════════════════════════════
   「先刷重点」板块样式 · 复刻 apple.com.cn/ipad-pro section-highlights
   数值出处：research/ipad-pro/highlights-HANDOFF.md（Apple 源码直读 + 实机探针）
   断点体系对齐 Apple：base(>1068) / medium(≤1068) / small(≤734)
   设计原则：CSS 默认态 = 无 JS 降级态（原生滚动 + 锚点跳转可用），增强态由 JS 叠加
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 变量层：--hlts-* 画廊 / --aap-* 浮条（theme-dark 数值直读自 ov.css） ─── */
.hlts-section {
  /* 画廊几何 */
  --hlts-glry-height: 680px;                        /* 画廊高（base；628/560 见断点） */
  --hlts-glry-item-width: min(100%, 1260px);        /* 卡宽 = min(视口内容宽, 1260) */
  --hlts-glry-card-radius: 28px;                    /* 卡圆角 = --global-card-corner-radius */
  --hlts-glry-card-bg: #fff;                        /* 卡底白色（用户定稿 2026-10-14） */
  --hlts-glry-caption-color: #1d1d1f;               /* 卡内文案深色（白卡上白字不可见，联动改） */
  --hlts-glry-caption-top: 39px;                    /* 文案距卡顶（large；32/44 见断点） */
  --hlts-glry-caption-left: 46px;                   /* 文案距卡侧 */
  --hlts-glry-caption-width: 400px;                 /* 文案最大宽 */
  --hlts-card-gap: 28px;                            /* 文字↔图片呼吸距离（四种排列共用，2026-10-15 用户定 28） */
  --hlts-autoplay-duration: 6.25s;                  /* 自动播放节拍 = --hlts-autoplay-persist-duration */
  /* 浮条（theme-dark） */
  --aap-min-height: 56px;                           /* 圆点态/条高（实测探针 56×56） */
  --aap-margin-bottom: 80px;                        /* 画廊底→「最新作品」标题间距（2026-10-15 用户指定 70→80：
                                                       浮条外阴影 0 4px 16px 向下晕出 ~16px，70px 时间隙下段
                                                       仅 7px 被 overflow:clip 裁掉阴影；+10px 全加在浮条下方，
                                                       浮条与画廊的 7px 上间隙不动）。浮条悬浮化后为唯一间距段 */
  --aap-blur: 7px;                                  /* 毛玻璃模糊 */
  --aap-background-color: rgb(232 232 237 / 70%);   /* 浮条底（浅色态，Apple ov.css 浅色值） */
  --aap-text-color: #1d1d1f;                        /* 圆钮图标深色（浅色态） */
  --aap-inner-glow-color: rgb(0 0 0 / 8%);          /* 1px 内发光（浅色态） */
  --aap-dotnav-background: rgb(29 29 31 / 60%);     /* 胶囊/圆钮底（叠 aapBg 后视觉 ≈ #353537，实测吻合） */
  --aap-dot-fill: rgb(29 29 31 / 60%);              /* dot/current 深灰本体色（浅色态：黑点在白胶囊上） */
  --aap-icon-color: var(--aap-dot-fill);            /* 播放钮 SVG fill（原版变量名；与小点同色，用户定稿） */
  --aap-dotnav-background-hover: rgb(255 255 255 / 48%);
  --aap-active-fill-color: #1d1d1f;                 /* 进度条充能深色（浅色态） */
  --aap-button-hover: rgb(0 0 0 / 6%);              /* 圆钮 hover 浅色态 */
  --aap-button-active: rgb(0 0 0 / 10%);            /* 圆钮按压浅色态（原版 :active 有专用色） */
  --aap-accent-color: #0071e3;
  --aap-font-size: 17px;
  --sk-dotnav-size: 8px;                            /* dot 直径 */
  --progress-bar-active-width: 48px;                /* current dot 拉长宽（小屏 32） */
  --aap-background-transition-duration: 250ms;

  /* 区块本体：不单独设背景，透明继承主页背景（用户定稿 2026-10-14） */
  /* 顶部 70px = Banner 下边缘 → 画廊上边缘总间距（2026-10-15 用户指定，
     与「最新作品」标题上方 70px 同规；标题行删除后链路上仅此一段，无叠加）。
     底部 80px = 浮条上间隙 7px + 浮条高 56px + 下间隙 17px（阴影缓冲）：
     必须用 padding 而非子元素 margin——margin 会与 section 发生外边距塌陷，
     导致 section 底边紧贴浮条、overflow:clip 把浮条外阴影裁掉（用户实测 bug 2026-10-15） */
  position: relative;                               /* .aap 浮条 absolute 的定位参照 */
  padding: 70px 0 var(--aap-margin-bottom);
  overflow: clip;                                   /* 圆角裁切 + 裁住越界内容（含弹入动画起点的探出部分） */
}

/* 标题区已整体删除（2026-10-15 用户指令：首页不再展示「先刷重点」标题行；
   HTML 结构同步移除，banner→画廊 70px 间距并入 .hlts-section 的 padding-top） */

/* ─── 画廊容器：横向原生滚动 + snap（对齐 .gallery.media-gallery.scroll-container） ─── */
.hlts-gallery {
  --hlts-pad: max(6.25vw, calc(50vw - 630px));      /* --hlts-glry-padding：页边距与 1260 上限取大 */
  height: var(--hlts-glry-height);
  overflow-x: auto; overflow-y: hidden;             /* 横向 padding 移入 item-container：
                                                       Chrome 忽略滚动容器自身 padding-right（不计入
                                                       scrollWidth），放容器上末卡永远差一个 pad 到不了
                                                       标题左对齐线（实测 maxScroll 少 90px） */
  scroll-padding-inline: var(--hlts-pad);           /* snap 吸附基准线 = 标题左对齐线 */
  scroll-snap-type: x mandatory;                    /* 原生吸附（animateToItem 靠它落位） */
  scroll-padding-inline: var(--hlts-pad);           /* snap 对齐基准 = 内容起点 */
  scrollbar-width: none;                            /* 隐藏原生滚动条（Firefox） */
  -webkit-overflow-scrolling: touch;
}
.hlts-gallery::-webkit-scrollbar { display: none; } /* 隐藏原生滚动条（WebKit） */

.hlts-item-container {
  --hlts-gap: 20px;                                 /* 卡间距（探针 scrollWidth 反推，验收可微调） */
  display: flex;
  gap: var(--hlts-gap);
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 var(--hlts-pad);                       /* 横向留白在这里 */
}
/* 末尾垫板（与主页作品卡行 .rail-track::after 同一机制）：
   Chrome 的 scrollWidth 不计入内容末尾的 padding-right（实测 maxScroll 少整整一个 pad），
   末卡会被顶在差一个 pad 的位置——垫一块等宽板把这段空间"实物化"，末卡才能滑到左缘
   对齐标题左对齐线。宽取 --hlts-pad 与两侧留白同源，窗口变化自动跟随 */
.hlts-item-container::after {
  content: "";
  flex: 0 0 var(--hlts-pad);
}

/* ─── 卡片：排列方式分区布局（2026-10-15「文字位置」九宫格 → 「排列方式」四项）───
   地基：crop 容器变 flex，文字块 / 图片块成为两个流内子块——文字块由内容
   撑开，图片块 flex:1 吃掉剩余空间，图在块内「原始尺寸居中、超界等比缩小」。
   旧机制退役：绝对定位浮层文字 + 媒体 inset:60px 固定让位 + nth-child(2) 满卡特例 */
.hlts-item {
  flex: 0 0 auto;
  width: var(--hlts-glry-item-width);
  height: 100%;
  scroll-snap-align: center;                        /* 卡中心吸附 */
}
.hlts-item:last-child { scroll-snap-align: start; }  /* 末卡左缘吸附标题线（Apple 末卡停留位，用户参照主页卡行） */
.hlts-item-crop {
  display: flex;                                    /* 排列方式的地基（见上） */
  gap: var(--hlts-card-gap);                        /* 文字与图片之间的呼吸距离（四模式共用） */
  position: relative; overflow: hidden;
  width: 100%; height: 100%;
  border-radius: var(--hlts-glry-card-radius);
  background: var(--hlts-glry-card-bg);
}
/* 四种排列（模板对 crop 恒挂 hlts-layout-*，layout 留空按 default:'t'）：
   上下 = column / column-reverse，左右 = row / row-reverse。
   单子块卡（纯图/纯文字）方向无感知，flex:1 自动占满整卡 */
.hlts-layout-t { flex-direction: column; }          /* 文字上图片下（默认） */
.hlts-layout-b { flex-direction: column-reverse; }  /* 文字下图片上 */
.hlts-layout-l { flex-direction: row; }             /* 文字左图片右 */
.hlts-layout-r { flex-direction: row-reverse; }     /* 文字右图片左 */

/* 图片块：吃掉除文字块 + 呼吸距离外的全部剩余空间，图等比缩放居中。
   居中机制用「绝对定位 + 四向 auto margin」（旧版同款、实机验证过的方案），
   不用「flex 容器 + 子项 margin:auto」——实测后者在图片被 max-height 钳制
   等比回解后 auto margin 不再分配剩余空间，图贴到块左上角（2026-10-15
   用户截图实测：编辑器截图贴左、触底，不居中） */
.hlts-media {
  position: relative;                               /* img 绝对定位的参照 */
  flex: 1 1 0;
  min-width: 0; min-height: 0;                      /* 允许收缩到内容以下，图片缩放才有边界 */
  margin: 0;
}
.hlts-media img {
  position: absolute; inset: 0;
  margin: auto;                                     /* 绝对定位 + 四向 auto = 块内双向居中：
                                                       垂直排列（上下模式）= 剩余空间内垂直居中；
                                                       横向排列（左右模式）= 整卡高内纵向居中 */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;                        /* 原始尺寸展示，仅超出剩余空间时等比缩小：
                                                       Apple positioned-media-element 行为延续，
                                                       约束域从整卡变为排列分得的图片块
                                                       （cover/contain 仍不用——都会把小图放大） */
}

/* 文字块：由内容撑开（不抢图片空间），位置随排列模式走 */
.hlts-caption-container {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  box-sizing: border-box;
  pointer-events: none;                             /* 不挡卡片点击/拖拽 */
}
/* 上下排列：文字距卡顶/底沿 = caption-top 内边距（同旧「中上」现状），
   水平居中；caption 不设最大宽度（用户 2026-10-15 定），行长由卡片可用宽管 */
.hlts-layout-t .hlts-caption-container,
.hlts-layout-b .hlts-caption-container {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hlts-layout-t .hlts-caption-container { padding: var(--hlts-glry-caption-top) var(--hlts-glry-caption-left) 0; }
.hlts-layout-b .hlts-caption-container { padding: 0 var(--hlts-glry-caption-left) var(--hlts-glry-caption-top); }
/* 左右排列：文字列宽 = 内容宽、上限 caption-width（400px，不够自动变窄），
   列内垂直居中；文字靠卡片外缘（用户 2026-10-15 定）：左模式左对齐、右模式右对齐 */
.hlts-layout-l .hlts-caption-container,
.hlts-layout-r .hlts-caption-container {
  flex: 0 1 auto;                                   /* 列宽 = 文字内容宽，空间不足可缩 */
  max-width: var(--hlts-glry-caption-width);
  min-width: 0;
  flex-direction: column;
  justify-content: center;                          /* 列内垂直居中 */
}
.hlts-layout-l .hlts-caption-container { padding: 0 0 0 var(--hlts-glry-caption-left); align-items: flex-start; text-align: left; }
.hlts-layout-r .hlts-caption-container { padding: 0 var(--hlts-glry-caption-left) 0 0; align-items: flex-end; text-align: right; }
.hlts-caption {
  /* 不设 max-width（用户 2026-10-15 定）：竖向（上下排列）文字占满可用宽，
     装不下才换行；左右排列的 400px 上限由 .hlts-caption-container 的
     max-width 管（原 .hlts-caption 自身那条对左右排列是冗余的，删） */
  /* pre-line：后台「说明文字」多行框里的回车（\n）在前台渲染成真实换行；
     空格仍按 HTML 常规折叠，单行文案视觉零变化（2026-10-15 用户定） */
  white-space: pre-line;
  font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em;
  font-family: "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--hlts-glry-caption-color);            /* 白卡上用深色字 */
  margin: 0;
}
/* ── 描述（2026-10-16 新增）：说明文字下面一行的小字 ──
   文字样式逐项对齐帮手卡描述 .help-card-desc（home.css）：13px / 400 /
   行高 19px / pre-line 保留后台框内手动换行 / 与上方文字隔 10px；
   颜色沿用轮播自己的 --hlts-glry-caption-color（当前值同为 #1d1d1f，
   改色联动）；对齐在这里一字不写——描述挂在 .hlts-caption-container
   里，四种排列方式的 text-align / align-items 由容器规则自动带给它 */
.hlts-desc {
  white-space: pre-line;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 19px;
  color: var(--hlts-glry-caption-color);
  margin: 0;
  padding-top: 10px;                                /* 与说明文字的间距，同帮手卡描述 */
}

/* ─── AAP 浮条：胶囊（dots）+ 独立圆钮并排（实测 Apple：胶囊 236px + 间隙 17px + 圆钮 56px） ─── */
.aap {
  /* 2026-10-15 第三形态：absolute 钉在 section 底部 70px 间隙内，不再滚动吸附。
     根因：sticky 吸附线（bottom 30px = 视口底上方）在负 margin 悬浮化后，滚动中段
     会把浮条拉到画廊中部（用户报"被挤高"）——画廊还没滚完它就往上爬。
     absolute 后浮条随 section 静止滚动，永远嵌在画廊与标题之间的 70px 间隙里。
     JS 进出场（spring 弹入/缩没）与滚动窗口（跟 section rect）不受定位方式影响；
     弹入起点在 section 外会被 overflow:clip 裁住，视觉变为"从底边冒出"（可接受） */
  position: absolute;
  bottom: 17px;                                     /* 浮条距 section 底 17px：80px 间隙 - 56px 浮条高 - 7px 上间隙
                                                       （上间隙 7px 锁死不动，2026-10-15 加的 10px 全落在浮条下方，
                                                       给外阴影 0 4px 16px 留出不被 overflow:clip 裁切的空间） */
  left: 0; right: 0;
  z-index: 10;
  display: flex; justify-content: center; align-items: center;
  gap: 17px;                                        /* 胶囊与圆钮间隙（Apple 截图实测 17px） */
  will-change: transform;
  pointer-events: none;                             /* 本体透明区不挡滚动/卡片点击，子元素再开 */
}
.aap-background {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--aap-min-height);
  padding: 0 25px;                                  /* 条/点距胶囊左右缘 ~25px（实测） */
  box-sizing: border-box;
  backdrop-filter: blur(var(--aap-blur));
  -webkit-backdrop-filter: blur(var(--aap-blur));
  background: var(--aap-background-color);
  border-radius: 32px;
  box-shadow: inset 0 0 1px var(--aap-inner-glow-color), 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: background-color linear var(--aap-background-transition-duration);
  /* 两态初始由 JS 时间组驱动；无 JS 时保持完整胶囊（降级态） */
  will-change: width, transform;  /* 独立合成层，防 width 动画在真实 GPU 下留残影 */
}

/* 提示光环：introduce 关键帧 0.1→0.8 的 hint 动画载体（JS 写 opacity/scale） */
/* 【竖条排查期临时下线】：真实浏览器出现过 8×40 竖条残影，先排除此元素嫌疑 */
.aap-hint { display: none; }

/* ─── dotnav：8px 亮灰圆点，current 拉长成胶囊（实测 Apple：点/条 = 80% 白叠胶囊底 ≈ #ceced1） ─── */
.dotnav-item { display: flex; align-items: center; flex: none; height: var(--sk-dotnav-size); }
.dotnav-items { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.dotnav-link {
  position: relative; display: flex;
  flex: none; align-self: center;
  width: var(--sk-dotnav-size); height: var(--sk-dotnav-size);
  max-height: var(--sk-dotnav-size);
  min-width: var(--sk-dotnav-size);
  border-radius: 10px;
  background: var(--aap-dot-fill);                  /* 亮灰 rgb(245 245 247/80%)，Apple 截图实测 */
  cursor: pointer;
  /* 拉长动画（源码：min-width 400ms cubic-bezier(0.33,0,0.67,1)） */
  transition: min-width cubic-bezier(0.33, 0, 0.67, 1) 400ms,
              background-color linear var(--aap-background-transition-duration);
}
/* 触摸扩展层（源码 ::before padding:--sk-dotnav-size） */
.dotnav-link::before { content: ""; position: absolute; padding: var(--sk-dotnav-size); width: 100%; height: 100%; box-sizing: border-box; }
.dotnav-link.current {
  min-width: var(--progress-bar-active-width);      /* 8px → 48px 胶囊 */
  background: var(--aap-dot-fill);                  /* 暂停态整条亮灰（Apple 暂停态视觉） */
  pointer-events: none;                             /* current 不可再点（源码规则） */
  overflow: hidden;
}
/* 进度条：::after 纯白 #f5f5f7 充能覆盖亮灰底（播放态视觉），宽度由 --aap-progress 驱动 */
.dotnav-link.current::after {
  content: "";
  position: absolute; top: 0; inset-inline-start: 0;
  height: 100%;
  width: calc(var(--aap-progress, 0) * 115%);
  min-width: 15%;
  margin-left: -15%;
  border-radius: 10px;
  background: var(--aap-active-fill-color);
}

/* ─── 播放/暂停/重播圆钮：对齐 Apple 原版（all-access-pass__play-pause-button） ───
    结构：按钮 56×56 内放三个 56 视窗内联 SVG（path 原样复制自 Apple page.html），
    fill 走 --aap-icon-color（与小点同色，用户定稿），三态由 JS 切换的类控制显示 */
.aap-playpause {
  position: relative;
  width: var(--aap-min-height); height: var(--aap-min-height);
  border: 0; border-radius: 32px;                   /* 原版胶囊圆角（56 盒上视觉即圆） */
  background: var(--aap-background-color);          /* 圆钮底与胶囊同色（浅色态白系） */
  cursor: pointer;
  flex: 0 0 auto;
  pointer-events: auto;
  transition: background-color linear var(--aap-background-transition-duration);
  display: flex; justify-content: center; align-items: center;
  padding: 0;
}
.aap-playpause:hover { background: var(--aap-button-hover); }
.aap-playpause:active { background: var(--aap-button-active); }  /* 原版还有按压态 */

/* 三态图标：默认显示 play（含无 JS 降级）；is-playing 显 pause；is-ended 显 replay */
.aap-playpause .svg-icon {
  width: 100%; height: 100%;                        /* 原版：SVG 铺满按钮，56 视窗 1:1 */
  fill: var(--aap-icon-color);                      /* 图标与小点同色（用户定稿 2026-10-15） */
  display: none;
  transition: fill linear var(--aap-background-transition-duration);
}
.aap-playpause .play-icon { display: block; }
.aap.is-playing .play-icon { display: none; }
.aap.is-playing .pause-icon { display: block; }
.aap.is-ended .play-icon { display: none; }
.aap.is-ended .replay-icon { display: block; }

/* ─── 断点 medium（≤1068，对齐 Apple 值） ─── */
@media (max-width: 1068px) {
  .hlts-section { --hlts-glry-height: 628px; --hlts-glry-caption-top: 32px; --hlts-glry-caption-left: 44px; }
  .hlts-caption { font-size: 24px; line-height: 1.1666666667; letter-spacing: .009em; }
}

/* ─── 断点 small（≤734） ─── */
@media (max-width: 734px) {
  .hlts-section {
    /* 卡高 450 = 对齐「帮手在此」卡片手机端高度（home.css ≤768 的 .help-card，
       2026-10-15 用户指定两端块面节奏一致）；图片块随之变近正方形 328×328 */
    --hlts-glry-height: 450px;
    --hlts-glry-caption-top: 44px;
    /* 手机端文案边距 22px（2026-10-15 用户报「文字左侧空隙太大」）：
       caption-left 原本只有 46/44 两档，手机漏覆盖沿用了 46px——两侧各 46
       在手机屏上占近 1/4 宽。22px 对齐全站小屏内容边距基准（auth/upload 同规） */
    --hlts-glry-caption-left: 22px;
    --progress-bar-active-width: 32px;
  }
  /* 手机 caption 18px：用户 2026-10-15 指定（偏离 Apple 原版 21px）。行高比例
     1.1904761905 延续不动（18×1.19≈21.4px，与 Apple「21px 渲染 25px 行高」同密度） */
  .hlts-caption { font-size: 18px; line-height: 1.1904761905; letter-spacing: .011em; }
  /* 旧「小屏文案宽度 calc(100% - 左边距×2)」随浮层机制退役：文字块自带内边距，
     caption 在块内 fit-content 自动收缩，不会再超出小卡 */

  /* ── 手机端统一纵向排列 + 文字左对齐 + 图片贴边（2026-10-15 用户定）──
     四种排列方式在手机端一律折叠成「文字上图片下」；文字一律左对齐（含原本
     居中的上下模式）；图片贴边按每卡「手机端图片位置」hlts-ma-* 三选一。
     图片块仍是 flex:1 剩余空间，贴边只改 img auto margin 的分配方向（绝对
     定位居中机制不变）：贴底 = 纵向自由空间全给 top margin，图沉到卡底沿；
     贴左/贴右 = 对应侧 margin 归零，图贴侧边、纵向仍居中 */
  .hlts-layout-t, .hlts-layout-b,
  .hlts-layout-l, .hlts-layout-r { flex-direction: column; }
  .hlts-layout-t .hlts-caption-container,
  .hlts-layout-b .hlts-caption-container,
  .hlts-layout-l .hlts-caption-container,
  .hlts-layout-r .hlts-caption-container {
    text-align: left;
    align-items: flex-start;
    padding: var(--hlts-glry-caption-top) var(--hlts-glry-caption-left) 0;
  }
  /* 左右模式的文字列特化（列宽上限/单侧 padding/可收缩）随纵向折叠失效，回归通栏 */
  .hlts-layout-l .hlts-caption-container,
  .hlts-layout-r .hlts-caption-container {
    flex: 0 0 auto;
    max-width: none;
  }
  .hlts-ma-bottom .hlts-media img { margin: auto auto 0; }      /* 贴卡片底（默认），横向仍居中 */
  .hlts-ma-left .hlts-media img { margin: auto auto auto 0; }   /* 贴卡片左，纵向仍居中 */
  .hlts-ma-right .hlts-media img { margin: auto 0 auto auto; }  /* 贴卡片右，纵向仍居中 */
}

/* ─── 无障碍工具类 ─── */
.visuallyhidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); border: 0;
}

/* 减动效：进度条/拉长过渡瞬时化（JS 侧同时切 instant 滚动） */
@media (prefers-reduced-motion: reduce) {
  .dotnav-link { transition: none; }
}

/* ─── 演示占位区（验收后随移植删除） ─── */
.demo-spacer {
  height: 160vh;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f7;
  color: #86868b;
  font: 14px/1.6 -apple-system, "PingFang SC", sans-serif;
  border: 1px dashed #d2d2d7;
  box-sizing: border-box;
}
.demo-spacer p { max-width: 40ch; text-align: center; padding: 0 20px; }