/* ==========================================================================
   WINTEC MACHINING — 站点样式

   Tailwind 用本地已编译的 css/tailwind.min.css（不用 cdn.tailwindcss.com：
   运行时 Tailwind 会拖慢 LCP，而且 CSP 还得为它单独开口子）。
   这里只放 Tailwind 覆盖不到的少量样式。
   ========================================================================== */

/* 多行截断（产品卡片标题） */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 屏幕阅读器专用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus\:not-sr-only:focus {
    position: fixed;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 平滑锚点滚动 */
html {
    scroll-behavior: smooth;
}

/* 表格横向滚动容器（设备矩阵在窄屏） */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    min-width: 640px;
}

/* 打印：去掉导航与页脚 */
@media print {
    header, footer, nav.breadcrumb {
        display: none !important;
    }
}

/* ==========================================================================
   迁移正文的排版与旧站遗留工具类

   正文是从旧站模板抽取的 HTML，里面用了两类样式：
     ① Tailwind 工具类（text-apple-blue / bg-success/10 / font-sf …）
        —— 这些在本地已编译的 tailwind.min.css 里都有（它就是用旧站
           tailwind.config.js 的自定义色板构建的），无需处理
     ② 旧站自己写但**从未定义**的几个类（card-hover / img-container /
        page-number / fade-in）—— 旧站同样没定义，属于遗留死类。
        这里补上，让迁移过来的版式不塌。
   ========================================================================== */

/* 卡片悬浮：旧站到处在用，但没定义过 */
.card-hover {
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-hover:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

/* 图片容器 + 角标文字（旧站车间/检测相册用） */
.img-container {
    position: relative;
    overflow: hidden;
}
.img-container img {
    display: block;
    width: 100%;
    transition: transform .5s ease;
}
.img-container:hover img {
    transform: scale(1.03);
}
.page-number {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    backdrop-filter: blur(4px);
}

/* ⚠️ .fade-in 必须是"默认可见"的。
   旧站靠 JS（IntersectionObserver）把它从 opacity:0 动画到 1 ——
   也就是说**禁用 JS 时旧站的整段正文是隐形的**。新站不这么做：
   内容可见性不能依赖 JS（爬虫与多模态 AI 都不滚动、不执行脚本）。
   这里只保留一个纯 CSS 的入场动画，起点就是可见的。 */
.fade-in {
    animation: wintec-fade-in .5s ease both;
}
@keyframes wintec-fade-in {
    from { opacity: .01; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .fade-in { animation: none; }
}

/* 迁移正文的兜底排版
   （正文自带大量 Tailwind 工具类，这里只补它们没覆盖到的语义标签） */
.prose-page {
    color: #374151;
    line-height: 1.75;
}
.prose-page > * + * {
    margin-top: 1rem;
}
.prose-page h2 {
    margin-top: 2.25rem;
    margin-bottom: .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.prose-page h3 {
    margin-top: 1.75rem;
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}
.prose-page a {
    color: #0071e3;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-page ul,
.prose-page ol {
    padding-left: 1.25rem;
}
.prose-page ul { list-style: disc; }
.prose-page ol { list-style: decimal; }
.prose-page li + li { margin-top: .35rem; }
.prose-page img {
    max-width: 100%;
    border-radius: .75rem;
}
/*
 * height:auto 只给"没有显式高度"的图片兜底。
 *
 * ⚠️ 以前写成 `.prose-page img { height: auto }`，把**所有**正文图片的高度都压成
 *    原始比例 —— 而正文是从旧站搬过来的 HTML，里面的图片常常自带高度类
 *    （`h-full` 撑满 aspect-square 方框、`h-80` 固定 320px…）。
 *    后果：方框是等高的正方形，图片却按自身比例显示（实测 135/274/176/171），
 *    **同一行里每张图高度都不一样**。
 *
 *    加 :not([class*="h-"]) 之后：
 *      - 有 h-full / h-80 / h-[300px] 的图片 → 用正文自己写的高度 ✓
 *      - 没有的 → 仍然 height:auto（配合 max-width，浏览器按比例缩放不变形）✓
 *
 *    保留 height:auto 兜底还有一层原因：旧站正文里的 <img> 带 width/height 属性，
 *    只有 max-width:100% 时会被拉伸变形，必须靠 height:auto 让浏览器等比缩放。
 */
.prose-page img:not([class*="h-"]) {
    height: auto;
}
.prose-page table {
    width: 100%;
    font-size: .875rem;
    border-collapse: collapse;
}
.prose-page th,
.prose-page td {
    padding: .65rem .75rem;
    border-bottom: 1px solid #f3f4f6;
}
.prose-page blockquote {
    border-left: 3px solid #0071e3;
    padding-left: 1rem;
    color: #4b5563;
}

/* ==========================================================================
   设备页标签（精选设备一 / 精选设备二 / 完整清单）

   为什么这套样式写在 site.css 而不是用 Tailwind 类：
   标签的"当前态"要和 JS 的选中状态严格对应，用 is-active 一个类切换
   最不容易出错；而 Tailwind 的类名组合要靠 JS 去增删好几个类，
   一旦漏删就出现"两个标签同时高亮"这种只有肉眼能发现的毛病。

   ⚠️ 关键约定：**无 JS 时三个面板全部显示**。
   面板的隐藏只发生在 html.js 之下（html.js 由页面 head 里一行内联脚本加上），
   所以不执行 JS 的抓取器（GPTBot / ClaudeBot / CCBot）拿到的 HTML 里
   三块内容都在 —— 这是全站"内容必须能被不执行 JS 的爬虫读到"的约定。
   ========================================================================== */

.eq-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.eq-tab {
    padding: .75rem 2rem;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 500;
    background: #fff;
    color: #4b5563;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    cursor: pointer;
    transition: all .2s ease;
}

.eq-tab:hover {
    border-color: #60a5fa;
    color: #2563eb;
}

.eq-tab.is-active {
    font-weight: 700;
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, .2);
}

/* 键盘可达性：Tab 聚焦时有清晰焦点环 */
.eq-tab:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* 只有 JS 可用时才隐藏非当前面板（无 JS 时三块全显示，内容可抓取） */
html.js [data-tab-panel]:not(.is-active) {
    display: none;
}

/* ==========================================================================
   相册点击放大（lightbox）

   行为在 public/static/js/main.js，这里只管样式。
   ⚠️ 关键：容器默认带 `hidden` 属性，**无 JS 时它永远不显示** ——
      所以不执行 JS 的访客不会看到一个空遮罩，图片链接会退化成直接打开原图。
      因此这里不要写 `display:flex` 去覆盖 `[hidden]`，要用 `:not([hidden])`。
   ========================================================================== */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 10, 10, .92);
    padding: 4vh 4vw;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gallery-lightbox:not([hidden]) {
    display: flex;
}

.gallery-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.gallery-lightbox-figure img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .55);
}

.gallery-lightbox-figure figcaption {
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    line-height: 1.6;
    text-align: center;
    max-width: 60ch;
}

.gallery-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.gallery-lightbox-close:hover {
    background: rgba(255, 255, 255, .22);
}

.gallery-lightbox-nav {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.gallery-lightbox-nav:hover {
    background: rgba(255, 255, 255, .22);
}

/* 键盘可达性：遮罩里的按钮要有清晰焦点环 */
.gallery-lightbox button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .gallery-lightbox {
        padding: 3vh 3vw;
    }

    .gallery-lightbox-nav {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ---------------------------------------------------------------------------
   正文首个元素不是 <section> 时的兜底间距

   栏目页容器（templates/pages/section.tpl）的上内边距是 0 —— 正文第一段自带
   内边距，两层叠加就是"内容离「当前位置」太远"（实测 112px，旧站是 48px）。
   万一以后有人把正文改成直接以 <p>/<h2> 开头，那里没有内边距，内容就会贴上
   面包屑。这一条就是给那种情况留的最小呼吸位。
   --------------------------------------------------------------------------- */
.prose-page > :first-child:not(section) {
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   块内第一个标题不要上外边距

   .prose-page h2/h3 的 margin-top 是为了"段落之后的标题"留呼吸 —— 但正文里
   很多标题是各自块（卡片、居中标题栏）里的**第一个**元素，那点外边距会穿透到
   容器外面（margin 折叠），表现为"这一段的上边距莫名偏大"：
   联系我们页的「常见问题」标题实测因此多出 36px（业务方反馈标题上边距偏大）。
   --------------------------------------------------------------------------- */
.prose-page h2:first-child,
.prose-page h3:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   正文里的「按钮式链接」不要下划线

   .prose-page a 给正文内联链接加了 underline（正确），但正文里还有几个**按钮**（比如
   质量保障页的「更多 / Learn more」）—— 它们带边框与内边距，看着是按钮，被加上下划线就
   不搭了。做法：在锚点上加 `no-underline` 类，这里用更高特异性覆盖掉
   （单靠 Tailwind 的 .no-underline(0,1,0) 压不过 .prose-page a(0,1,1)）。
   --------------------------------------------------------------------------- */
.prose-page a.no-underline {
  text-decoration: none;
}