/* =========================================
   Join Us Page - 加入我们页面样式
   ========================================= */

/* Header 样式与 index.html 保持一致 - 使用 styles.css 中的样式 */

/* Hero Section - 加入我们 */
.joinus-hero {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.joinus-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/joinUs_top_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.joinus-hero-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 302px;
}

.joinus-hero-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.5em;
    color: #F8F8F8;
    margin-bottom: 32px;
}

.joinus-hero-desc {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.8);
    max-width: 576px;
}

/* Job Listings Section */
.job-listings {
    background: #F2F2F2;
    padding: 96px 0;
    min-height: 700px;
    width: 100%;
}

.job-listings-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 293px;
    width: 100%;
}

/* Table Header */
.job-table-header {
    display: flex;
    align-items: flex-start;
    height: 84px;
    background: #FFFFFF;
    margin-bottom: 0;
    position: relative;
    padding-top: 31px;
    width: 1334px;
    max-width: 100%;
}

.job-header-cell {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.57em;
    color: #1A1A1A;
    opacity: 0.3;
    height: 22px;
    display: flex;
    align-items: center;
}

/* 根据 Figma: 职位名称 x:60, 发布时间 x:551, 招聘人数 x:922 */
.job-title-header {
    width: 491px;  /* 551 - 60 = 491 */
    padding-left: 60px;
}

.job-date-header {
    width: 371px;  /* 922 - 551 = 371 */
    padding-left: 0;
}

.job-count-header {
    width: 412px;  /* 1334 - 922 = 412 */
    padding-left: 0;
}

/* PC端：不显示伪元素 */
.job-count-header::after {
    display: none;
}

/* Table Rows */
.job-table-row {
    display: flex;
    align-items: center;
    height: 100px;
    background: #FFFFFF;
    position: relative;
    border-top: 1px solid rgba(26, 26, 26, 0.05);
    margin-top: 0;
    width: 1334px;
    max-width: 100%;
}

/* PC端：鼠标移上变小手 */
@media (min-width: 769px) {
    .job-table-row {
        cursor: pointer;
    }
}

.job-table-row:first-of-type {
    border-top: none;
    margin-top: 0;
}

.job-cell {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 2em;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    height: 32px;
}

/* PC端：鼠标悬停效果 */
@media (min-width: 769px) {
    /* 鼠标悬停时，所有文案的 font-weight 为 700 */
    .job-table-row:hover .job-cell {
        font-weight: 700 !important;
    }
    
    .job-table-row:hover .job-title {
        font-weight: 700 !important;
    }
    
    .job-table-row:hover .job-date {
        font-weight: 700 !important;
    }
    
    .job-table-row:hover .job-count {
        font-weight: 700 !important;
    }
    
    /* 箭头图标默认隐藏，只有鼠标移到当条 item 上时才显示 */
    .job-arrow-icon {
        display: none;
    }
    
    .job-table-row:hover .job-arrow-icon {
        display: block;
        /* 保持img标签可点击，但让它完全透明 */
        opacity: 0.01; /* 使用极小的透明度，确保可点击 */
        pointer-events: auto !important;
        z-index: 1;
    }
    
    /* PC端：使用PC端图标，通过伪元素覆盖显示 */
    .job-table-row:hover .job-count::after {
        content: '';
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 42.6px;
        height: 32px;
        background-image: url('../images/join_us_list_icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        pointer-events: none !important; /* 让点击穿透到下面的img标签 */
        z-index: 2;
    }
}

.job-title {
    width: 491px;  /* 551 - 60 = 491 */
    padding-left: 60px;
    font-weight: 500;
    line-height: 1.5em;
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* PC端：副标题隐藏，只显示主标题（包含括号内容） */
.job-title-sub {
    display: none;
}

/* PC端：确保主标题正常显示（包含括号） */
.job-title-main {
    display: inline;
}

.job-table-row:first-of-type .job-title {
    font-weight: 500;
    font-family: 'Noto Sans SC', sans-serif;
}

.job-table-row:not(:first-of-type) .job-title {
    font-weight: 400;
    font-family: 'Noto Sans SC', sans-serif;
}

.job-date {
    width: 371px;  /* 922 - 551 = 371 */
    padding-left: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 2em;
}

.job-table-row:first-of-type .job-date {
    font-weight: 700;
}

.job-table-row:not(:first-of-type) .job-date {
    font-weight: 400;
}

.job-count {
    width: 412px;  /* 1334 - 922 = 412 */
    padding-left: 23px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    justify-content: flex-start;
    line-height: 2em;
    position: relative; /* 确保伪元素可以正确定位 */
}

.job-table-row:first-of-type .job-count {
    font-weight: 700;
}

.job-table-row:not(:first-of-type) .job-count {
    font-weight: 400;
}

.job-count span {
    display: inline-block;
}

/* 箭头图标 - 只在第一行显示 */
.job-table-row:first-of-type .job-count {
    position: relative;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.job-table-row:first-of-type .job-count span {
    margin-left: 23px;  /* 945 - 922 = 23 */
}

.job-arrow-icon {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 42.6px;
    height: 32px;
    object-fit: contain;
    display: none; /* PC端默认隐藏 */
    cursor: pointer;
}

/* =========================================
   Join Us Page - 响应式适配 (1920px 到 1440px 之间)
   ========================================= */
@media (min-width: 1450px) and (max-width: 1910px) {
    .job-listings-container {
        padding: 0 calc(80px + (293px - 80px) * ((1920px - 100vw) / (1920px - 1440px)));
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .job-table-header,
    .job-table-row {
        width: calc(1100px + (1334px - 1100px) * ((1920px - 100vw) / (1920px - 1440px)));
        max-width: 100%;
        margin: 0 auto;
    }

    .job-arrow-icon {
        right: calc(30px + (-20px - 30px) * ((1920px - 100vw) / (1920px - 1440px)));
        width: calc(36px + (42.6px - 36px) * ((1920px - 100vw) / (1920px - 1440px)));
        height: calc(27px + (32px - 27px) * ((1920px - 100vw) / (1920px - 1440px)));
        display: none; /* PC端默认隐藏 */
    }
    
    .job-table-row:hover .job-arrow-icon {
        display: block;
        opacity: 0.01; /* 使用极小的透明度，确保可点击 */
        pointer-events: auto !important;
        z-index: 1;
    }
    
    /* PC端：使用PC端图标，通过伪元素覆盖显示 */
    .job-table-row:hover .job-count::after {
        content: '';
        position: absolute;
        right: calc(30px + (-20px - 30px) * ((1920px - 100vw) / (1920px - 1440px)));
        top: 50%;
        transform: translateY(-50%);
        width: calc(36px + (42.6px - 36px) * ((1920px - 100vw) / (1920px - 1440px)));
        height: calc(27px + (32px - 27px) * ((1920px - 100vw) / (1920px - 1440px)));
        background-image: url('../images/join_us_list_icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        pointer-events: none !important; /* 让点击穿透到下面的img标签 */
        z-index: 2;
    }
}

/* PC端时，当分辨率在1440px到1600px之间时，job-arrow-icon向左移动80px（更靠近table） */
@media (min-width: 1440px) and (max-width: 1600px) {
    .job-arrow-icon {
        right: calc((30px + (-20px - 30px) * ((1920px - 100vw) / (1920px - 1440px))) + 80px) !important;
    }
    
    .job-table-row:hover .job-count::after {
        right: calc((30px + (-20px - 30px) * ((1920px - 100vw) / (1920px - 1440px))) + 80px) !important;
    }
}

/* 1440px时的特殊情况：right值为30px，加80px后为110px */
@media (min-width: 1440px) and (max-width: 1449px) {
    .job-arrow-icon {
        right: 110px !important;
    }
    
    .job-table-row:hover .job-count::after {
        right: 110px !important;
    }
}

/* =========================================
   Join Us Page - 响应式适配 (1440px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1440px) {
    .joinus-hero {
        height: 480px;
    }

    .joinus-hero-container {
        padding: 0 80px;
    }

    .joinus-hero-title {
        font-size: 54px;
        margin-bottom: 24px;
    }

    .joinus-hero-desc {
        font-size: 20px;
        max-width: 500px;
    }

    .job-listings {
        padding: 80px 0;
    }

    .job-listings-container {
        padding: 0 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .job-table-header {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
    }

    .job-table-row {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* 按比例缩小列宽 */
    .job-title-header,
    .job-title {
        width: 40%;
        padding-left: 40px;
    }

    .job-date-header,
    .job-date {
        width: 30%;
    }

    .job-count-header,
    .job-count {
        width: 30%;
    }

    .job-table-row:first-of-type .job-count span {
        margin-left: 0;
    }

    .job-arrow-icon {
        right: 30px;  /* 1440px 下缩小边距，确保不超出 */
        top: 50%;
        transform: translateY(-50%);
        width: 36px;  /* 按比例缩小 */
        height: 27px;
        display: none; /* PC端默认隐藏 */
    }
    
    .job-table-row:hover .job-arrow-icon {
        display: block;
        opacity: 0.01; /* 使用极小的透明度，确保可点击 */
        pointer-events: auto !important;
        z-index: 1;
    }
    
    /* PC端：使用PC端图标，通过伪元素覆盖显示 */
    .job-table-row:hover .job-count::after {
        content: '';
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 27px;
        background-image: url('../images/join_us_list_icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        pointer-events: none !important; /* 让点击穿透到下面的img标签 */
        z-index: 2;
    }
}

/* =========================================
   多语言支持样式 - 招聘页面
   ========================================= */

/* 职位表格单元格：允许文本换行 */
.job-title,
.job-detail-position,
.job-detail-section-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* 严禁单词断行，确保在空格处换行 */
    white-space: normal;
    min-height: auto;
}

/* 职位详情列表项：允许换行 */
.job-detail-list li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* 严禁单词断行，确保在空格处换行 */
    white-space: normal;
}

/* 多语言差异化排版 */
:lang(en) .job-title {
    min-height: 2em;
}

:lang(en) .job-detail-position {
    min-height: 2.5em;
}

:lang(en) .job-detail-list li {
    line-height: 1.6;
}

:lang(ja) .job-detail-list li {
    line-height: 1.8;
}

/* 职位详情容器：自适应高度 */
.job-detail-content {
    min-height: auto;
    height: auto;
}

.job-detail-section {
    min-height: auto;
    height: auto;
}

/* =========================================
   Join Us Page - 移动端适配 (768px以下)
   严格按照Figma设计稿还原
   ========================================= */
@media (max-width: 768px) {
    /* Hero Section - 移动端 */
    .joinus-hero {
        height: 296px; /* 按照Figma设计稿精确高度 */
        padding-top: 60px; /* 为固定header留出空间 */
    }
    
    .joinus-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/joinUs_top_bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .joinus-hero-container {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        margin: 0 auto;
        max-width: 390px;
    }
    
    .joinus-hero-title {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 30px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 700; /* 按照Figma设计稿精确字重 */
        line-height: 1.2em; /* 按照Figma设计稿精确行高 */
        color: #FFFFFF; /* 按照Figma设计稿精确颜色 */
        margin: 0;
        margin-top: 52px; /* y:112 - 60(header) = 52px */
        text-align: center;
        width: 120px; /* 按照Figma设计稿精确宽度 */
        height: 36px; /* 按照Figma设计稿精确高度 */
    }
    
    .joinus-hero-desc {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 14px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 500; /* 按照Figma设计稿精确字重 */
        line-height: 1.8em; /* 按照Figma设计稿精确行高 */
        color: #D4D4D4; /* 按照Figma设计稿精确颜色 */
        margin: 0;
        margin-top: 21px; /* y:169 - y:148(title bottom) = 21px */
        text-align: center;
        width: 336px; /* 按照Figma设计稿精确宽度 */
        height: 75px; /* 按照Figma设计稿精确高度 */
        max-width: 336px;
    }
    
    /* Job Listings Section - 移动端 */
    .job-listings {
        background: #F2F2F2; /* 按照Figma设计稿精确背景色 */
        padding: 34px 12px; /* y:330 - 296(hero) = 34px, x:12 */
        min-height: 353px;
        width: 100%;
        margin: 0 auto;
    }
    
    .job-listings-container {
        max-width: 366px; /* 按照Figma设计稿精确宽度 */
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    
    /* Table Header - 移动端 */
    .job-table-header {
        display: flex;
        align-items: flex-start;
        height: 44px; /* 按照Figma设计稿精确高度 */
        background: #FFFFFF; /* 按照Figma设计稿精确背景色 */
        margin-bottom: 0;
        position: relative;
        padding-top: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .job-header-cell {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 400; /* 按照Figma设计稿精确字重 */
        line-height: 1.38em; /* 按照Figma设计稿精确行高 */
        color: #1A1A1A; /* 按照Figma设计稿精确颜色 */
        opacity: 0.3; /* 按照Figma设计稿精确透明度 */
        height: 18px; /* 按照Figma设计稿精确高度 */
        display: flex;
        align-items: center;
        position: absolute;
        top: 13px; /* 按照Figma设计稿精确位置 y:13 */
    }
    
    /* 职位名称 x:16, y:13 */
    .job-title-header {
        width: auto;
        left: 16px; /* 按照Figma设计稿精确位置 */
        flex: 0 0 auto;
        padding-left: 0; /* H5端去掉padding-left */
    }
    
    /* 发布时间 x:194, y:13 */
    .job-date-header {
        width: auto;
        left: 194px; /* 按照Figma设计稿精确位置 */
        flex: 0 0 auto;
    }
    
    /* 人数 x:285, y:13 */
    .job-count-header {
        width: auto;
        left: 285px; /* 按照Figma设计稿精确位置 */
        flex: 0 0 auto;
        font-size: 13px;
        line-height: 1.38em;
        color: transparent; /* 移动端：隐藏原来的"招聘人数"文本内容 */
        position: relative;
    }
    
    /* 移动端：使用伪元素显示"人数" */
    .job-count-header::after {
        content: '人数';
        display: inline;
        font-size: 13px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 400;
        line-height: 1.38em;
        color: #1A1A1A;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    /* Table Rows - 移动端 */
    .job-table-row {
        display: flex;
        align-items: flex-start;
        height: 60px; /* 按照Figma设计稿精确高度 */
        background: #FFFFFF; /* 按照Figma设计稿精确背景色 */
        position: relative;
        border-top: 0.34px solid rgba(26, 26, 26, 0.05); /* 按照Figma设计稿精确分隔线 */
        margin-top: 0;
        width: 100%;
        padding: 0;
        overflow: visible; /* 确保图标不被裁剪 */
    }
    
    .job-table-row:first-of-type {
        border-top: none;
        margin-top: 0;
    }
    
    .job-cell {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 400; /* 按照Figma设计稿精确字重 */
        line-height: 1.38em; /* 按照Figma设计稿精确行高 */
        color: #1A1A1A; /* 按照Figma设计稿精确颜色 */
        display: flex;
        align-items: flex-start;
        height: auto;
        position: relative;
    }
    
    /* 职位名称 - 移动端 */
    .job-title {
        position: absolute;
        left: 16px; /* 按照Figma设计稿精确位置 x:16 */
        top: 12px; /* 按照Figma设计稿精确位置 y:12 */
        width: 172px; /* 按照Figma设计稿第一个职位名称宽度 */
        height: 36px; /* 按照Figma设计稿精确高度 */
        padding: 0;
        font-weight: 400;
        line-height: 1.38em;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        white-space: normal;
        word-wrap: break-word;
        gap: 0;
    }
    
    /* 职位名称主标题 - 移动端 */
    .job-title-main {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.38em;
        color: #1A1A1A;
        display: block;
        width: 100%;
    }
    
    /* H5端英文和日语：job-title-main 固定宽度150px，内容可换行 */
    :lang(en) .job-title-main,
    :lang(ja) .job-title-main {
        width: 150px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: normal;
    }
    
    /* 职位名称副标题 - 移动端（灰色小字） */
    .job-title-sub {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.38em;
        color: rgba(26, 26, 26, 0.5); /* 灰色，根据截图描述 */
        display: block;
        width: 100%;
        margin-top: 0;
    }
    
    /* 第二个职位名称宽度约199px */
    .job-table-row:nth-child(2) .job-title {
        width: 199px;
    }
    
    /* H5端英文和日语：第二个job-table-row高度改为80px，元素垂直居中 */
    /* 注意：因为job-table-header是第一个子元素，所以第二个row是nth-child(3) */
    :lang(en) .job-listings-container .job-table-row:nth-child(3),
    :lang(ja) .job-listings-container .job-table-row:nth-child(3),
    :lang(en) .job-listings-container .job-table-row[data-job-id="2"],
    :lang(ja) .job-listings-container .job-table-row[data-job-id="2"] {
        height: 80px !important;
        align-items: center;
    }
    
    /* H5端英文和日语：第二个row中的job-title垂直居中 */
    :lang(en) .job-listings-container .job-table-row:nth-child(3) .job-title,
    :lang(ja) .job-listings-container .job-table-row:nth-child(3) .job-title,
    :lang(en) .job-listings-container .job-table-row[data-job-id="2"] .job-title,
    :lang(ja) .job-listings-container .job-table-row[data-job-id="2"] .job-title {
        top: 50% !important;
        transform: translateY(-50%);
        height: auto;
    }
    
    /* H5端英文和日语：第二个row中的job-date垂直居中 */
    :lang(en) .job-listings-container .job-table-row:nth-child(3) .job-date,
    :lang(ja) .job-listings-container .job-table-row:nth-child(3) .job-date,
    :lang(en) .job-listings-container .job-table-row[data-job-id="2"] .job-date,
    :lang(ja) .job-listings-container .job-table-row[data-job-id="2"] .job-date {
        top: 50% !important;
        transform: translateY(-50%);
    }
    
    /* H5端英文和日语：第二个row中的job-count垂直居中 */
    :lang(en) .job-listings-container .job-table-row:nth-child(3) .job-count,
    :lang(ja) .job-listings-container .job-table-row:nth-child(3) .job-count,
    :lang(en) .job-listings-container .job-table-row[data-job-id="2"] .job-count,
    :lang(ja) .job-listings-container .job-table-row[data-job-id="2"] .job-count {
        top: 50% !important;
        transform: translateY(-50%);
    }
    
    /* 第三个职位名称宽度约229px */
    .job-table-row:nth-child(3) .job-title {
        width: 229px;
    }
    
    /* 日期 - 移动端 */
    .job-date {
        position: absolute;
        left: 185px; /* 按照Figma设计稿精确位置 */
        top: 21px; /* 按照Figma设计稿精确位置 y:21 */
        width: 70px; /* 按照Figma设计稿精确宽度 */
        height: 18px; /* 按照Figma设计稿精确高度 */
        padding: 0;
        font-family: 'Lato', sans-serif;
        font-size: 13px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 400;
        line-height: 1.38em;
        display: flex;
        align-items: center;
    }
    
    /* 人数 - 移动端 */
    .job-count {
        position: absolute;
        left: 294px; /* 按照Figma设计稿精确位置 */
        top: 21px; /* 按照Figma设计稿精确位置 y:21 */
        width: auto;
        height: 18px; /* 按照Figma设计稿精确高度 */
        padding: 0;
        font-family: 'Lato', sans-serif;
        font-size: 13px; /* 按照Figma设计稿精确字体大小 */
        font-weight: 400;
        line-height: 1.38em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 30px; /* 数字与图标之间的间距，按截图视觉调整 */
    }
    
    .job-count span {
        display: inline-block;
        width: auto;
        min-width: 8px; /* 按照Figma设计稿精确宽度 */
        text-align: left;
    }
    
    /* 箭头图标 - 移动端 */
    .job-table-row .job-arrow-icon {
        position: static !important; /* 在人数区域内随 flex 布局排列 */
        transform: none !important;
        width: 24px !important; /* 按照Figma设计稿精确宽度 */
        height: 24px !important; /* 按照Figma设计稿精确高度 */
        object-fit: contain;
        display: block !important;
        cursor: pointer;
        flex-shrink: 0;
        margin: 0;
    }
}