@charset "utf-8";

/* ============================================================================
   天物官网 · 全站样式
   ----------------------------------------------------------------------------
   设计稿：Figma「天物官网 / 风格定版」
   所有颜色 / 字号 / 间距均取自设计稿全局变量，统一收敛为 CSS 变量，改色改字号只动一处
   前端库：Bootstrap 4.6.2 + jQuery 3.6.4 + Layui 2.13.4（CDN），不引入其他框架
   ============================================================================ */

:root {
    /* ---- 颜色：主色与文字 ---- */
    --c-ink: #161512;
    --c-ink-2: #333333;
    --c-ink-3: #4B4B4B;
    --c-ink-4: #666666;
    --c-gray: #999999;
    --c-gray-2: #A0A1A0;
    --c-line: #DAD9D9;
    --c-panel: #D5D5D5;
    --c-ccc: #CCCCCC;
    --c-white: #FFFFFF;
    --c-black: #000000;
    --c-green: #28C445;
    /* 导航底色：实色（原为半透明 rgba(217,217,217,.7)，那是为悬浮在首屏图上透出底图而设） */
    --c-nav-bg: #D9D9D9;

    /* ---- 半透明层 ---- */
    --c-mm-bg: rgba(217, 217, 217, 0.48);
    --c-mm-item: rgba(0, 0, 0, 0.33);
    --c-nav-text: rgba(51, 51, 51, 0.83);
    --c-bar-dark: rgba(51, 51, 51, 0.83);
    --c-panel-dark: rgba(51, 51, 51, 0.93);
    --c-veil: rgba(66, 66, 66, 0.71);
    --c-veil-light: rgba(255, 255, 255, 0.83);

    /* ---- 图片渐变遮罩 ---- */
    --g-veil: linear-gradient(180deg, rgba(51, 51, 51, 0) 43%, rgba(22, 21, 18, 0.85) 100%);
    --g-veil-soft: linear-gradient(180deg, rgba(51, 51, 51, 0) 26%, rgba(18, 18, 18, 0.67) 100%);

    /* ---- 字体 ---- */
    --f-cn: "Noto Sans SC", "Source Han Sans CN", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --f-en: "Inter", "Helvetica Neue", Arial, sans-serif;

    /* ---- 字号阶（设计稿实测） ---- */
    --fs-12: 12px;
    --fs-16: 16px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-32: 32px;
    --fs-40: 40px;
    --fs-48: 48px;
    --fs-64: 64px;
    --fs-128: 128px;

    /* ---- 结构与间距 ---- */
    --w-page: 1920px;
    --w-content: 1281px;
    --h-header: 121px;
    --h-header-top: 88px;
    --h-row: 750px;
    --line: 1px solid var(--c-black);
    --line-soft: 1px solid rgba(0, 0, 0, 0.12);
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================================
   1. 基础
   ============================================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.site-body {
    font-family: var(--f-cn);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}

a:hover {
    color: var(--c-ink);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
    font-weight: 400;
}

.site-main {
    display: block;
}

/* 内容容器：设计稿内容区 1281px 居中（1920 下左右各约 321px） */
.site-container {
    width: 100%;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-container--wide {
    max-width: var(--w-page);
    padding: 0;
}

/* ============================================================================
   2. 顶部导航
   —— 样式已内联到组件模板 TP/T_nav.php（组件自治），此处不再维护
   ============================================================================ */


/* ============================================================================
   3. 内页标题条
   —— 首屏（hero）样式已内联到 TP/sections/T_section_hero.php（组件自治）
   ============================================================================ */

.site-banner {
    position: relative;
    padding: 64px 0 28px;
    background: var(--c-white);
    border-bottom: var(--line);
}

.site-banner__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

.site-banner--image {
    padding: 140px 0 48px;
    border-bottom: 0;
}

.site-banner--image .site-banner__bg {
    opacity: 1;
}

.site-banner--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--g-veil);
}

.site-banner__inner {
    position: relative;
    z-index: 2;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-banner--image .site-banner__title {
    color: var(--c-white);
}

.site-banner__title {
    font-size: var(--fs-40);
    font-weight: 900;
    line-height: 1.45;
    color: var(--c-ink-2);
    letter-spacing: 0.01em;
}

.site-banner__subtitle {
    margin-left: 12px;
    font-family: var(--f-en);
    font-size: var(--fs-20);
    font-weight: 400;
    color: rgba(51, 51, 51, 0.75);
}

.site-banner--image .site-banner__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================
   4. 分类切换条
   ============================================================================ */

.site-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 28px 20px;
}

.site-tabs__item {
    position: relative;
    font-size: var(--fs-16);
    color: var(--c-mm-item);
    padding-bottom: 6px;
}

.site-tabs__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--c-ink);
    transition: right 0.3s var(--ease);
}

.site-tabs__item:hover {
    color: var(--c-ink-2);
}

.site-tabs__item.is-active {
    color: var(--c-ink);
    font-weight: 500;
}

.site-tabs__item.is-active::after,
.site-tabs__item:hover::after {
    right: 0;
}

/* ============================================================================
   5. 通用区块
   ============================================================================ */

.site-section {
    position: relative;
    padding: 96px 0;
}

.site-section--tight {
    padding: 56px 0;
}

.site-section--dark {
    background: var(--c-ink-3);
    color: var(--c-white);
}

.site-section--gray {
    background: var(--c-line);
}

.site-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--w-content);
    margin: 0 auto 48px;
    padding: 0 20px;
}

.site-section__title {
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--c-ink-2);
    letter-spacing: 0.02em;
}

.site-section__subtitle {
    display: block;
    margin-top: 10px;
    font-family: var(--f-en);
    font-size: var(--fs-20);
    font-weight: 400;
    color: var(--c-gray-2);
    letter-spacing: 0.02em;
}

.site-section--dark .site-section__title {
    color: var(--c-white);
}

.site-section__more {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-16);
    color: var(--c-ink-4);
    white-space: nowrap;
}

.site-section__more i {
    margin-left: 8px;
    transition: transform 0.3s var(--ease);
}

.site-section__more:hover i {
    transform: translateX(6px);
}

.site-paragraph {
    font-size: var(--fs-20);
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: 0.07em;
    color: var(--c-ink-2);
}

/* 品牌介绍区块 */
.site-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-intro__title {
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--c-ink-2);
}

.site-intro__en {
    display: block;
    margin-top: 12px;
    font-family: var(--f-en);
    font-size: var(--fs-20);
    color: var(--c-gray-2);
}

.site-intro__text {
    margin-top: 28px;
    font-size: var(--fs-20);
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.05em;
    color: var(--c-ink-4);
}

.site-intro__media img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* 数据条（艺术中心 2022 / 3600m² / 5层 / 地址） */
.site-stat {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-stat__item {
    flex: 1 1 0;
    min-width: 200px;
    padding: 24px 24px 24px 0;
    border-right: var(--line-soft);
}

.site-stat__item:last-child {
    border-right: 0;
}

.site-stat__value {
    font-family: var(--f-cn);
    font-size: var(--fs-64);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-panel);
}

.site-stat__label {
    margin-top: 10px;
    font-size: var(--fs-20);
    font-weight: 300;
    color: var(--c-panel);
}

.site-section--light .site-stat__value,
.site-section--light .site-stat__label {
    color: var(--c-ink-2);
}

/* 图集 */
.site-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-gallery img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.site-gallery a:hover img {
    transform: scale(1.03);
    opacity: 0.92;
}

/* 图文区块 */
.site-imagetext {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-imagetext__media img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.site-imagetext__body {
    padding-right: 20px;
}

.site-imagetext__title {
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--c-ink-2);
}

.site-imagetext__en {
    display: block;
    margin-top: 12px;
    font-family: var(--f-en);
    font-size: var(--fs-20);
    color: var(--c-gray-2);
    letter-spacing: 0.02em;
}

/* 联系方式 */
.site-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-contact-list li {
    display: flex;
    padding: 22px 0;
    border-bottom: var(--line-soft);
    font-size: var(--fs-20);
    font-weight: 300;
    color: var(--c-ink-2);
}

.site-contact-list__label {
    width: 140px;
    flex: 0 0 140px;
    color: var(--c-gray-2);
    font-size: var(--fs-16);
    line-height: 32px;
}

.site-map {
    height: 420px;
    background: var(--c-line) url('/static/images/common/placeholder.svg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-20);
    color: var(--c-ink-4);
    letter-spacing: 0.06em;
}

/* ============================================================================
   6. 列表：线框网格（产品 3 栏 640×750、资讯左图右文，均取自设计稿实测）
   ============================================================================ */

.site-grid {
    display: grid;
    max-width: var(--w-page);
    margin: 0 auto;
    border-top: var(--line);
    border-bottom: var(--line);
}

.site-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.site-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.site-grid__cell {
    position: relative;
    border-right: var(--line);
    border-bottom: var(--line);
    overflow: hidden;
}

.site-grid--3 .site-grid__cell:nth-child(3n) {
    border-right: 0;
}

.site-grid--2 .site-grid__cell:nth-child(2n) {
    border-right: 0;
}

/* 产品格：浅灰底衬托产品图 */
.site-card {
    display: flex;
    flex-direction: column;
    height: var(--h-row);
    padding: 32px 40px;
}

.site-card__media {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-line);
    overflow: hidden;
}

.site-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.7s var(--ease);
}

.site-card:hover .site-card__media img {
    transform: scale(1.05);
}

.site-card__body {
    flex: 0 0 auto;
    padding-top: 22px;
}

.site-card__title {
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--c-ink-2);
}

.site-card__en {
    margin-top: 6px;
    font-family: var(--f-en);
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

.site-card__cat {
    margin-top: 8px;
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

/* 深色强调格（设计稿中首格用 0.93 深底 + 大字产品名） */
.site-card--dark {
    background: var(--c-panel-dark);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.site-card--dark .site-card__media {
    background: transparent;
    flex: 0 0 auto;
}

.site-card--dark .site-card__title {
    font-size: var(--fs-40);
    font-weight: 900;
    color: var(--c-panel);
}

.site-card--dark .site-card__en {
    font-size: var(--fs-20);
    font-weight: 900;
    color: var(--c-white);
}

/* 案例卡：大图 + 渐变遮罩 + 项目名 */
.site-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px 40px;
}

.site-case-card {
    position: relative;
    display: block;
    height: 460px;
    overflow: hidden;
    background: var(--c-line);
}

.site-case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease);
}

.site-case-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--g-veil);
    opacity: 0.9;
    transition: opacity 0.5s var(--ease);
}

.site-case-card:hover img {
    transform: scale(1.06);
}

.site-case-card:hover::after {
    opacity: 0.72;
}

.site-case-card__body {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 36px;
    z-index: 2;
    color: var(--c-white);
}

.site-case-card__title {
    font-size: var(--fs-32);
    font-weight: 500;
}

.site-case-card__en {
    margin-top: 8px;
    font-family: var(--f-en);
    font-size: var(--fs-16);
    color: rgba(255, 255, 255, 0.78);
}

.site-case-card--tall {
    height: 620px;
}

/* 资讯行：左 640 图片 + 右内容，行高 750，中间 1px 黑线 */
.site-news-row {
    display: grid;
    grid-template-columns: 640px 1fr;
    max-width: var(--w-page);
    margin: 0 auto;
    border-bottom: var(--line);
}

.site-news-row__media {
    position: relative;
    height: var(--h-row);
    overflow: hidden;
    border-right: var(--line);
    background: var(--c-line);
}

.site-news-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease);
}

.site-news-row:hover .site-news-row__media img {
    transform: scale(1.04);
}

.site-news-row__body {
    padding: 64px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-news-row__title {
    font-size: var(--fs-40);
    font-weight: 900;
    color: var(--c-ink-2);
    line-height: 1.45;
}

.site-news-row__meta {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

.site-news-row__summary {
    margin-top: 26px;
    font-size: var(--fs-20);
    font-weight: 300;
    line-height: 1.85;
    color: var(--c-ink-4);
    letter-spacing: 0.03em;
}

.site-news-row__more {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-16);
    color: var(--c-ink-2);
}

.site-news-row__more i {
    margin-left: 8px;
    transition: transform 0.3s var(--ease);
}

.site-news-row:hover .site-news-row__more i {
    transform: translateX(6px);
}

/* 空状态 */
.site-empty {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 120px 20px;
    text-align: center;
    font-size: var(--fs-20);
    color: var(--c-gray-2);
    letter-spacing: 0.06em;
}

/* ============================================================================
   7. 分页（对应设计稿 #110:1063 / #137:1333，两帧逐项一致）
   ----------------------------------------------------------------------------
   设计稿实测（分页组内相对坐标，1920 宽）：
     左箭头  24×24 图标框（内部 12×20 的 chevron，垂直居中）        x=0
     数字    20px / 13.3×29；当前页 #333333 + Bold 700，其余 #666666 + Regular
             x = 43.7 / 98.02 / 152.35 / 206.67 / 261  → 数字中心距 54.32
     右箭头  24×24 图标框                                        x=294
   换算：数字中心距 54.32、两端箭头框到首/末个数字各 19.7。
   实现用「gap: 0 + 数字给固定格子宽 54.32」还原中心距 —— 数字在各自格子里居中，
   箭头框（24 宽）紧贴格子留白，正好落在 19.7（整组误差 <1px）。
   箭头字形由 inc/site_inc.php 的 site_pager() 以 SVG 输出（fill: currentColor），
   这里只管尺寸与颜色。
   ============================================================================ */

.site-pager {
    display: flex;
    align-items: center;
    /* 左对齐（设计稿里分页条不是居中，而是贴着左侧内容线）：
       各页面在自己的区块模板里用 padding-left 给具体左边距
       —— 全部案例 320、家具产品 / 新闻 / 展览 / 商铺 / 招聘 280（TP/sections/* 里注明） */
    justify-content: flex-start;
    /* 与内容区同宽同列（1920 居中），padding-left 才能落在设计稿的绝对坐标上 */
    max-width: var(--w-page);
    margin: 0 auto;
    /* 间距不靠 gap：数字之间的中心距由 .pager-num 的格子宽给出（见上）；
       箭头紧贴数字格子的留白，正好是设计稿的 19.7 */
    gap: 0;
    padding: 56px 20px 120px;
    font-family: var(--f-cn);
    font-size: var(--fs-20);
}

/* 数字：格子宽 = 设计稿的数字中心距 54.32，字在格内居中
   （数字间净距因此自然等于设计稿的 41 = 54.32 - 13.3；两位数的页码也照样居中） */
.site-pager .pager-num {
    color: var(--c-ink-4);
    min-width: 54.32px;
    text-align: center;
}

.site-pager .pager-num.is-active {
    color: var(--c-ink-2);
    font-weight: 700;
}

/* 箭头：24×24 的图标框（与设计稿同尺寸），内部 12×20 的 chevron 居中。
   颜色 #666666 —— 与设计稿一致（和普通数字同色，不是 #333333）。 */
.site-pager .pager-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--c-ink-4);
}

.site-pager .pager-arrow__svg {
    display: block;
    width: 12px;
    height: 20px;
}

/* 首 / 末页那一侧的箭头不可点：变浅提示（设计稿两帧都是第 1 页、两个箭头同为
   #666666，没有画"变浅"的禁用态 —— 这里是实现自加的可点性提示，想严格照设计稿
   可以删掉这条规则，禁用箭头就与常态同色、仅不可点） */
.site-pager .pager-arrow.is-disabled {
    color: var(--c-ccc);
}

.site-pager .pager-total {
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

/* ============================================================================
   8. 详情页
   ============================================================================ */

/* 已删除：旧版详情页的 .site-detail / .site-detail__* 整套样式
 *   新版详情页改为组件自治 —— 样式全部内联在 TP/T_page_detail.php（类名统一 detail-*），
 *   不再依赖 site.css。删掉的原因是那条
 *   `.site-detail{max-width:1281px;margin:0 auto;padding:64px 20px 0}` 会把新版图片区
 *   压到 1241 宽并居中 —— 图片四周留白、格线落到 320/747/1173，跟导航三栏的 0/640/1280 错位。
 *   （TP/T_page_detail.php 里也做了 max-width / margin / padding 的兜底重置，双保险。）
 *   注：媒体查询里还剩几处 .site-detail__* 选择器，匹配不到任何元素，无害。
 */

/* ============================================================================
   9. 会员页（登录 / 注册 / 资料下载）
   ============================================================================ */

.site-member {
    min-height: 620px;
    padding: 80px 20px 120px;
    background: var(--c-mm-bg);
}

.site-member__card {
    max-width: 480px;
    margin: 0 auto;
    padding: 48px 44px;
    background: var(--c-white);
    border: var(--line-soft);
}

.site-member__title {
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--c-ink-2);
    text-align: center;
}

.site-member__en {
    display: block;
    margin-top: 10px;
    font-family: var(--f-en);
    font-size: var(--fs-16);
    color: var(--c-gray-2);
    text-align: center;
    letter-spacing: 0.04em;
}

.site-member__form {
    margin-top: 36px;
}

.site-field {
    margin-bottom: 26px;
}

.site-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

.site-field__input {
    width: 100%;
    height: 42px;
    padding: 0 2px;
    font-size: var(--fs-16);
    color: var(--c-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s var(--ease);
}

.site-field__input:focus {
    border-bottom-color: var(--c-ink);
}

textarea.site-field__input {
    height: 120px;
    padding: 10px 2px;
    border: 1px solid var(--c-line);
    resize: vertical;
}

textarea.site-field__input:focus {
    border-color: var(--c-ink);
}

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    font-size: var(--fs-16);
    color: var(--c-white);
    background: var(--c-ink-2);
    border: 0;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.site-btn:hover {
    background: var(--c-ink);
    color: var(--c-white);
}

.site-btn--ghost {
    background: transparent;
    color: var(--c-ink-2);
    border: 1px solid var(--c-ink-2);
}

.site-btn--ghost:hover {
    background: var(--c-ink-2);
    color: var(--c-white);
}

.site-member__extra {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: var(--fs-12);
    color: var(--c-gray-2);
}

/* 资料下载列表 */
.site-download-list {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
    border-top: var(--line);
}

.site-download-item {
    display: grid;
    grid-template-columns: 160px 1fr 160px;
    gap: 32px;
    align-items: center;
    padding: 28px 0;
    border-bottom: var(--line-soft);
}

.site-download-item__cover img {
    width: 160px;
    height: 110px;
    object-fit: cover;
    display: block;
}

.site-download-item__title {
    font-size: var(--fs-24);
    font-weight: 500;
    color: var(--c-ink-2);
}

.site-download-item__desc {
    margin-top: 10px;
    font-size: var(--fs-16);
    color: var(--c-ink-4);
}

.site-download-item__action {
    text-align: right;
}

/* ============================================================================
   10. 招聘
   ============================================================================ */

.site-job {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 20px;
}

.site-job__item {
    padding: 36px 0;
    border-bottom: var(--line-soft);
}

.site-job__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 20px;
}

.site-job__title {
    font-size: var(--fs-24);
    font-weight: 500;
    color: var(--c-ink-2);
}

.site-job__meta {
    font-size: var(--fs-16);
    color: var(--c-gray-2);
}

.site-job__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 20px;
}

.site-job__block h4 {
    margin-bottom: 10px;
    font-size: var(--fs-16);
    color: var(--c-ink);
}

.site-job__block p {
    font-size: var(--fs-16);
    line-height: 1.9;
    color: var(--c-ink-4);
}

/* ============================================================================
   11. 页脚
   —— 样式已内联到组件模板 TP/T_footer.php（组件自治），此处不再维护
   ============================================================================ */

/* ============================================================================
   12. 滚动进场动效
   ============================================================================ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .site-card__media img,
    .site-case-card img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================================
   13. 响应式（仅 ≤768 移动端 / ≤402 小屏）
   —— ≥769px 不再使用「断点跳变」，改由下方第 14 节按 1920 设计稿整体等比缩放
   ============================================================================ */

/* ============================================================================
   14. 桌面端等比缩放（方案A · 由 TP/T_head.php 的内联脚本驱动）
   —— 视口宽 ≥769px 时，脚本给 <html> 加 .is-scale 并写入 --site-zoom = 视口宽/1920；
      这里把整页按该比例缩放、并把 body 固定为 1920 设计宽，从而「不管怎么缩放都铺满屏幕」：
          body 固定 1920px，整体 zoom 到视口宽 → 组件里所有写死的 px 一起等比放大/缩小，
          任何分辨率下比例都与 1920 设计稿完全一致，且不留白、无横向滚动。
      ≤768px 不加 .is-scale → 走上方移动端样式，保持移动稿原样。
      浏览器不支持 zoom 时脚本不加类 → 保持默认布局（不会横向溢出）。
   ============================================================================ */
@media screen and (min-width: 769px) {

    html.is-scale {
        zoom: var(--site-zoom, 1);
    }

    /* body 固定为设计稿宽度：与 zoom 配合正好铺满视口（1920 × 视口宽/1920 = 视口宽） */
    html.is-scale body.site-body {
        width: 1920px;
    }

    /* 固定层（图片/视频查看模态、Bootstrap 遮罩、layui 弹层）抵消整页缩放，
       回到正常视口尺寸，避免被缩小或错位 */
    html.is-scale .modal,
    html.is-scale .modal-backdrop,
    html.is-scale .layui-layer,
    html.is-scale .layui-layer-shade {
        zoom: calc(1 / var(--site-zoom, 1));
    }
}

@media screen and (max-width: 768px) {
    :root {
        --fs-40: 28px;
        --fs-32: 24px;
        --fs-24: 18px;
        --h-row: 360px;
    }

    .site-grid--3,
    .site-grid--2 {
        grid-template-columns: 1fr;
    }

    .site-grid__cell {
        border-right: 0 !important;
    }

    .site-member__card {
        padding: 32px 22px;
    }
}

@media screen and (max-width: 402px) {
    .site-card {
        padding: 20px 18px;
    }

    /* 小屏（设计稿没给）：分页按比例收紧 —— 数字格子 54.32 → 38、箭头框 24 → 18 */
    .site-pager {
        font-size: var(--fs-16);
    }

    .site-pager .pager-num {
        min-width: 38px;
    }

    .site-pager .pager-arrow {
        width: 18px;
        height: 18px;
    }

    .site-pager .pager-arrow__svg {
        width: 9px;
        height: 15px;
    }
}