/* 区块级的小调整（标题不换行、内容垂直居中）。由 tools/section-tweaks.mjs 挂载；
   数值想改直接改这里，重跑脚本不会覆盖。 */

/* 标题不换行。
   原站把标题盒子设成 width:10%（1440 宽下内容区约 63.5px），
   葡语 "Sobre" 是单个拉丁词、不会断行，溢出一点也看不出来；
   中文「关于」是两个汉字，可以在任意两字之间断行，
   30.24px 字号 + 4.32px 字距下需要约 70px，于是被折成了上下两行。
   这里只加禁止换行——盒子宽度、下划线长度、下方内容的位置都保持原样，
   与葡语时"单词溢出"的表现一致。 */
html body .about-title,
html body .service-title,
html body .project-title,
html body .contact-title {
  white-space: nowrap;
}

/* 第 2 屏（关于）右侧内容整列上下居中。
   原站这一列是普通流式排布，贴着区块顶部、底部空出约 153px；
   改成 flex 纵向居中后，上下留白均分（元素自身的宽度、间距、相对定位都不变）。 */
html body #about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* safe：手机上内容比区块还高时退回顶部对齐，不会被裁掉（不支持的浏览器用上一行） */
  justify-content: safe center;
}
/* flex 居中的是"外边距盒"，首元素自带的 20.26px 上外边距会让视觉留白上下不等（74/54），
   这里去掉它，让上下留白严格相等。 */
html body #about > :first-child {
  margin-top: 0;
}

/* 第 4 屏（项目）内容整列上下居中。
   这一屏不能像第 2 屏那样用 flex 居中：轮播的盒子只有 10vw 高，卡片是绝对定位 + 3D 变换，
   视觉上溢出到盒子外面（约 500px），flex 会把整列推得太多、卡片跑出屏幕。
   改成"量出来再补偿"：由 vendor/section-tweaks.js 计算出让上下留白相等的偏移，
   写进下面的 CSS 变量；这里只负责把偏移应用到子元素上（相对定位，不影响布局与区块高度，
   轮播内部那些绝对定位的卡片会跟着一起移动）。 */
/* 只作用于三个内容块：不能写成 #projects > *，否则会把弹窗与遮罩也匹配到——
   遮罩原本是 position:fixed、弹窗是 position:absolute; top:15%，
   被改成 relative + top 之后会掉进文档流、跑到页面下面去。 */
html body #projects > .project-title,
html body #projects > .project-text,
html body #projects > .carousel {
  position: relative;
  top: var(--projects-shift, 0px);
}

/* 「项目」标题的水平对中：桌面宽度下标题盒中心比卡片行中轴偏左 8–13px（随视口等比），
   由 vendor/section-tweaks.js 现场量出差值写进 --project-title-shift（含下划线一起移动）；
   移动端标题由媒体查询居中、该变量为 0，此规则不产生影响。 */
html body #projects > .project-title {
  left: var(--project-title-shift, 0px);
}

/* 精简后第 2 屏只剩标题与文案：flex 居中的是外边距盒，末元素自带的下外边距会让视觉留白不公平，
   这里去掉它（与上面的 :first-child 规则对称）。 */
html body #about > :last-child {
  margin-bottom: 0;
}

/* 「关于」标题：横线宽度与文字等宽。
   原样式把标题盒子设成 width:10%（1440 下约 63.5px）、左侧 1% 内边距、右侧无留白，
   而「关于」两个字约 69px，比盒子还宽、向右溢出（横线比文字短一点）。
   改法：盒子 width:fit-content 贴合文字宽度，左右都不留白，
   横线（border-bottom）正好落在文字下方、与文字等宽。 */
html body .about-title {
  width: fit-content;
  padding-left: 0;
  padding-right: 0;
}

/* 「关于」正文：收窄 + 左对齐。
   盒子贴列左边缘（与标题横线左端同一条竖线），宽度收到 72%（1440 下 635 → 457px），
   文字左对齐，每行从同一左边缘起排。 */
html body .about-text {
  align-self: flex-start;
  width: 72%;
  text-align: left;
}

/* 移动端：第 2 屏（关于）的标题与内容都居中显示。
   桌面那套「标题贴左、正文左对齐」的版式在窄屏下不适用——窄屏只有一列，
   标题（含横线）与正文整块居中、正文逐行居中，阅读上更自然（也贴近原站窄屏的居中样式）。 */
@media (max-width: 999px) {
  html body .about-title {
    align-self: center;
    /* 标题与正文之间的间距（原来只有 23px，太挤） */
    margin-bottom: 30px;
  }
  html body .about-text {
    align-self: center;
    text-align: center;
    /* 正文宽度：390 视口下取到 336px 左右（原来是 72% ≈ 263px，偏窄），上限再留 92% 兜底 */
    width: min(336px, 92%);
  }
  /* 内容离卡片（#about 自身带 rgb(27,27,27) 背景与圆角）上下边缘的留白（原来只有约 5px）。
     选择器必须写到 #about.section：窄屏样式里有 .section#about{padding:5px}（优先级 1,1,0），
     写成 html body #about（1,0,2）压不过它。 */
  html body #about.section {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

/* 「服务」标题：横线与文字等宽 + 与下方文案左对齐。
   原样式是 width:20% 的盒子 + 左侧 1% 内边距（1440 下横线 108.9px），文字（「服务」约 59px）居中在横线上。
   改成贴合文字宽度、左右都不留白 → 横线 = 「服务」宽度；块级盒子直接落在内容列左边缘，
   与下方文案的左边缘同一条竖线（和「关于」那屏一致）。 */
html body .service-title {
  width: fit-content;
  padding-left: 0;
  padding-right: 0;
}

/* 「服务」正文改左对齐：原来继承区块的 text-align:center（末行居中、行首参差），
   改左对齐后每行从同一条左边缘起排，与上面横线的左端对齐。 */
html body .service-text {
  text-align: left;
}

/* 移动端：第 4 屏（项目）标题居中（与「服务」同样的做法：盒子是 fit-content，左右 auto 外边距）。 */
@media (max-width: 999px) {
  html body .project-title {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 移动端：第 3 屏（服务）—— 标题居中、六张卡片 2×3 排布，
   卡片内的图标与文案收紧、内容离卡片四边的留白加大（原来卡片是整列宽、图标与文案隔得远、
   内容离边只有 5%）。 */
@media (max-width: 999px) {
  html body .service-title {
    /* 盒子是 fit-content，左右 auto 外边距即可在列内居中 */
    margin-left: auto;
    margin-right: auto;
  }
  /* 48% + 两侧各 1% 的 margin（原样式 margin:1%）= 每行正好两张，共三行 */
  html body .service-card {
    width: 48%;
    height: 108px;
    min-height: 0;
    margin: 1%;
  }
  /* 图标：略放大一点、贴到卡片上边留白 16%，水平居中（left = (100-36)/2） */
  html body .service-card img {
    width: 36%;
    height: 33%;
    margin-top: 16%;
    left: 32%;
  }
  /* 文案：紧贴图标下方（原来 margin-top:60px，图标在 5% 处，两者隔得远）。
     16% 的图标上边距在 175 宽的卡片上约 28px、图标盒底约 64px，文案 margin-top 66
     → 文字顶部约 68，与图标留 4px 间隙。 */
  html body .service-card-text {
    margin-top: 66px;
    font-size: smaller;
  }
}

/* 服务卡片图标：原样式用 filter 把单色图标"染"成青绿色，
   换成自带配色（#86A7A3）的图标后关掉滤镜、按原色显示；
   各图标长宽比不同，object-fit:contain 防止被 30%×30% 的盒子拉伸。 */
html body .service-card img {
  filter: none;
  object-fit: contain;
}

/* 联系区图标行删除后，表单底部 .button-container 只剩「发送」按钮：
   原规则 justify-content:space-between 会把它挤到左边，这里固定右对齐，保持和原来一样的位置。 */
html body .button-container {
  justify-content: flex-end;
}

/* 项目轮播：四个透明大热区（prev/next 的 large / second）原本盖在左右两张卡片上，
   只剩 3 张卡时它们触发的旋转是死循环，却把点击吃掉了——设成不接收指针事件，
   点卡片就能直接打开对应项目；翻页改用可见的左右三角箭头。 */
html body .carousel__prev--large,
html body .carousel__next--large,
html body .carousel__prev--second,
html body .carousel__next--second {
  pointer-events: none;
}

/* 三角箭头本来被卡片下方那层透明占位（.carousel .img，约 200px 高）盖住 —— 位置对但点不到。
   这里把箭头提到上层，并让占位层不接收指针事件（它是空的，点击本来就没人处理）。 */
html body .carousel .prev,
html body .carousel .next {
  z-index: 5;
}
html body .carousel .img {
  pointer-events: none;
}

/* 移动端可见的那对箭头（.prev_mobile / .next_mobile）是上方大热区的子元素：
   热区设了 pointer-events:none 之后它们也一起被禁用了（本来是靠事件冒泡触发热区的翻页，
   现在环绕范围修好、翻页本身可用）。这里让箭头自己恢复接收指针事件即可——
   点击照常冒泡到父热区，触发站点自己的翻页逻辑，不需要额外的中转脚本。 */
html body .prev_mobile,
html body .next_mobile {
  pointer-events: auto;
}



/* 项目列表卡片：隐藏标题下方的「项目简介」与「标签」文案（.card-info 里除了 h3 就是这些 p）。
   灯箱里的详情与标签是另外的元素，不受影响。 */
html body .card-info > p {
  display: none;
}

/* === 项目详情弹窗：只留视频、居中、控件可见 === */
/* 弹窗内容：项目名 / 详情 / 标签 / 外链按钮隐藏（元素保留在 DOM 里——主包打开弹窗时会往里写内容，
   删掉元素会报错）。 */
html body .project-description-container,
html body .lightbox-logo-container {
  display: none;
}
/* 弹窗本体改 fixed 铺满视口：原样式是 absolute + top:15%/left:4.5%，包含块是所属区块，
   位置跟着区块走（整块偏左偏下、视频底部的控制条会掉出屏幕）。 */
html body #videoLightbox.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;            /* 窄屏样式里加了 padding，会把绝对定位的包含块顶偏 */
  border-radius: 0;
}
/* 面板用绝对定位 + translate 居中（不能用父容器 flex：主包打开弹窗时会写行内
   style.display="block"，行内样式压过 CSS，flex 居中不生效）。
   宽度按 16:9 + 控制条的高度反推（156vh），内边距计入尺寸，保证连控制条都在视口内。 */
html body .lightbox-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;            /* 取消原样式的两列网格（视频区只占一半宽），改成单列块级 */
  box-sizing: border-box;
  width: min(92vw, 156vh);
  height: auto;
}
/* 视频区：宽度撑满面板、高度由 16:9 决定；视频 contain 等比完整显示（不裁切）。 */
html body .lightbox-video-area {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
}
html body .lightbox-video-area .lightbox-content {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 关闭按钮：弹窗铺满视口后，它原本落在屏幕右上角，正好被顶部导航盖住（导航所在层的层级更高，
   ✕ 既看不清也点不到——命中测试落到导航链接上）。移到导航下方并留边距。 */
html body #videoLightbox .close {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
}

/* === 项目详情弹窗 end === */

/* 弹窗背板（.lightbox-backdrop）：默认隐藏。
   它是弹窗打开时铺在页面后的黑色毛玻璃（#000000d3 + blur(8px)、200vw×300vh）。
   弹窗代码只在「打开」时把它设为 display:block、「关闭」时设回 none（都是内联样式），
   站点 CSS 里没有默认的 display 规则——加上 2026-10-09 把它从 #projects 移到 body 末尾
   （position:fixed 在带 transform 的祖先里会失效），它就成了「一打开网站就盖住全站的黑蒙版」，
   直到用户滚动页面或开关一次弹窗（那些处理函数才会把它设成 none）。
   2026-10-10 用户反馈：「一打开网站有一层蒙版，需要点击才能看到首页」——就是它。
   默认 none 之后：页面加载干净、无遮罩；打开弹窗时内联 display:block 照常生效，功能不变。 */
html body .lightbox-backdrop {
  display: none;
}

/* 第 4 屏：隐藏「项目」标题下方的那句介绍文字（.project-text）。
   文案本身仍保留在 i18n/zh-cn.json 的 PROJECT-TEXT 里，想恢复删掉这条规则即可。 */
html body .project-text {
  display: none;
}

/* 移动端：第 5 屏（联系）标题与「发送」按钮居中。
   标题盒子是 fit-content，左右 auto 外边距即可在列内居中；
   按钮容器原本在（同文件的）桌面规则里设了 justify-content:flex-end（图标行删掉后保持按钮靠右），
   窄屏改成居中——注意这条必须放在那条 flex-end 之后，同优先级下后者生效。 */
@media (max-width: 999px) {
  html body .contact-title {
    margin-left: auto;
    margin-right: auto;
  }
  /* 第 5 屏的联系卡片（#contact 区块自带 rgba(0,0,0,.5) 背景与 10px 圆角）在移动端偏左 10px：
     原样式带 left:-3.5px + padding-left:3.5px + margin-right:-10.5px，卡片只有 362 宽、起点偏左。
     把 left / padding-left 归零、右侧负外边距放到 23px —— 卡片正好铺满 body 的内容宽（374），
     中心落在视口中心；卡片里的表单也就有了一条正的轴线（不必再逐项补偿）。 */
  html body #contact.content {
    /* 站点窄屏规则给 #contact 设了 right:1%!important（相对左移 3.5px）+ width:102%（= main 的 102%，
       390 下 358px），再加上一条 margin-left（实测 15.98px），卡片因此整体偏左。
       这里：left 归零（压掉那 1% 的相对左移）、padding-left 归零、margin-left 设 8px ——
       盒子左端落在 16px（= (390−358)/2，body 左边距 8 + 8），中心正好在视口中心。
       宽度是 main 的 102%，360/430 下残差 ≤1.5px。 */
    left: 0;
    padding-left: 0;
    margin-left: 8px;
  }
  /* 表单里的元素对齐：原样式是 flex 列 + align-items:flex-end（右对齐），
     而输入框带左右各 10px 外边距、比内容区还宽，右对齐后整体偏左（实测 −10px）。
     改成居中对齐，并把输入框的左右外边距归零（选择器要带 input[type=…] 才压得过站点规则）。 */
  html body #contact-form {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
  html body #contact-form input[type=text],
  html body #contact-form input[type=email],
  html body #contact-form textarea {
    margin-left: 0;
    margin-right: 0;
  }
  /* 标题本身的外边距是左右对称的（居中），但站点给它写了一个内联的 transform: translateX(11.09px)
     （进场动画留下的），窄屏压掉它，标题就落在卡片正中。 */
  html body .contact-title {
    transform: none !important;
  }
  /* 「发送」按钮居中（容器是表单里右对齐的 flex 项；早先为补偿 11px 偏差加的负外边距，
     卡片与表单居中后不再需要）。 */
  html body .button-container {
    justify-content: center;
    margin-right: 0;
  }
}