/* =========================================
   Job Detail Section - 职位详情样式
   ========================================= */

.job-detail {
    background: #FCFCFC;
    padding: 86px 0 70px;
    min-height: 1004px;
}

.job-detail-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 302px;
    position: relative;
}

.job-detail-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.4em;
    color: #111111;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 21px;  /* 88 - 67 = 21px (标题高度67px，线在y:88) */
}

.job-detail-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 96px;
    height: 1px;
    background: #3B3B3B;
    opacity: 0.6;
}

.job-detail-content {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 954px;
    margin-top: 65px;  /* 标题下方间距 */
}

.job-detail-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-detail-position {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    color: #111111;
    margin: 0;
}

.job-detail-department {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: rgba(17, 17, 17, 0.8);
    margin: 0;
}

.job-detail-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-detail-section-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    color: #111111;
    margin: 0;
}

.job-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.job-detail-list li {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: rgba(17, 17, 17, 0.6);
    padding: 0;
    margin: 0;
}

.job-detail-divider {
    width: 1332px;
    max-width: 100%;
    height: 1px;
    background: rgba(26, 26, 26, 0.1);
    margin: 55px 0 56px;
}

.job-detail-back-btn {
    display: block;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 2em;
    color: #1A1A1A;
    text-decoration: none;
    width: 104px;
    margin: 0 auto;
    transition: opacity 0.3s ease;
}

.job-detail-back-btn:hover {
    opacity: 0.7;
}

/* =========================================
   Job Detail Section - PC端样式
   ========================================= */
@media (min-width: 769px) {
    .job-detail-position {
        font-size: 30px !important;
    }
}

/* =========================================
   Job Detail Section - 响应式适配 (1440px)
   ========================================= */
@media (max-width: 1440px) {
    .job-detail {
        padding: 60px 0 50px;
    }

    .job-detail-container {
        padding: 0 80px;
    }

    .job-detail-title {
        font-size: 40px;
        margin-bottom: 60px;
    }

    .job-detail-content {
        gap: 48px;
        max-width: 100%;
    }

    .job-detail-position {
        font-size: 18px;
    }

    .job-detail-department {
        font-size: 14px;
    }

    .job-detail-section-title {
        font-size: 14px;
    }

    .job-detail-list li {
        font-size: 14px;
    }

    .job-detail-divider {
        width: 100%;
        margin: 40px 0 40px;
    }
}

/* =========================================
   Job Detail Section - H5移动端样式 (严格按照Figma设计稿)
   ========================================= */
@media (max-width: 768px) {
    .job-detail {
        background: #FFFFFF;
        padding: 31px 0 70px 0; /* 327px from top of page, 296px hero height, so 327-296=31px */
        min-height: auto;
        position: relative;
    }

    .job-detail-container {
        max-width: 390px;
        margin: 0 auto;
        padding: 0 22px 0 22px; /* left padding 22px to match Figma */
        position: relative;
    }

    /* 职缺详情标题 - y:327 from page top, so relative to job-detail is 0 */
    .job-detail-title {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.41em; /* 24/17 ≈ 1.41 */
        color: #727272;
        margin: 0 0 36px 0; /* 387-327-24=36px (title height 24px, position y:387) */
        padding: 0;
        width: auto;
        height: 24px;
    }

    .job-detail-title::after {
        display: none;
    }

    /* Header包含职位名称和技术组 - 需要显示在content之前 */
    .job-detail-header {
        display: flex;
        flex-direction: column;
        gap: 6px; /* 433-387-40=6px between position and department */
        margin: 0;
        width: 100%;
        max-width: 330px;
    }

    /* 内容区域 */
    .job-detail-content {
        width: 100%;
        max-width: 330px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin: 0;
    }

    /* 职位名称 */
    .job-detail-position {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.81em; /* 40/22 ≈ 1.81 */
        color: #1A1A1A;
        margin: 0;
        padding: 0;
        width: 294px;
        min-height: 40px;
    }

    /* 技术组 */
    .job-detail-department {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.37em; /* 22/16 = 1.37 */
        color: #1A1A1A;
        opacity: 0.6;
        margin: 0;
        padding: 0;
        width: auto;
        min-height: 22px;
    }

    /* 章节容器 */
    .job-detail-section {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 330px;
    }

    /* 第一个section: 工作职责 height: 128px (second child of content, after header) */
    .job-detail-section:nth-child(2) {
        min-height: 128px;
    }

    /* 第二个section: 任职要求 height: 100px (third child of content) */
    .job-detail-section:nth-child(3) {
        min-height: 100px;
    }

    /* 第三个section: 加分条件 height: 72px (fourth child of content) */
    .job-detail-section:nth-child(4) {
        min-height: 72px;
    }

    /* 章节标题 - y:44 from section start, but we use margin-bottom instead */
    .job-detail-section-title {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4em; /* 28/20 = 1.4 */
        color: #1A1A1A;
        margin: 0 0 16px 0; /* 44-28=16px gap between title and content */
        padding: 0;
        width: 80px;
        min-height: 28px;
    }

    /* 列表 */
    .job-detail-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 330px;
    }

    .job-detail-list li {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.75em; /* 28/16 = 1.75 */
        color: #1A1A1A;
        opacity: 0.6;
        padding: 0;
        margin: 0;
        width: 330px;
    }

    /* 分割线和返回按钮容器 */
    /* 从Figma: BACK TO LIST group at x:12, y:911, width:366, height:52 */
    /* 分割线在group顶部(y:0相对于group)，文本在分割线下方24px(y:24相对于group) */
    /* Content区域结束位置：485(start) + 128(工作职责) + 30(gap) + 100(任职要求) + 30(gap) + 72(加分条件) = 845px from page top */
    /* BACK TO LIST group在911px from page top，所以margin-top: 911-845=66px */
    /* Container padding: 0 22px，content width: 330px */
    /* Group x: 12px from page left, container padding 22px, so group x relative to container content area: 12-22=-10px */
    /* But group width is 366px, content width is 330px, so group extends 366-330=36px beyond content */
    /* Since container has 22px left padding, we need -10px to align group left edge at 12px from page left */
    .job-detail-divider {
        width: 366px;
        max-width: calc(100% + 36px); /* 366-330=36px extension */
        height: 1px; /* stroke-weight: 0.5px from Figma, but browser renders 0.5px as 1px */
        background: #1A1A1A;
        opacity: 0.1;
        margin: 66px 0 24px -10px; /* 66px from content end, 24px gap to button text, -10px to align left edge */
        padding: 0;
    }

    /* 返回按钮 - 文本居中，但group内文本x:130，group width:366，所以文本从group left: (366-103)/2 ≈ 131.5px，接近130px */
    .job-detail-back-btn {
        display: block;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.75em; /* 28/16 = 1.75 */
        color: #1A1A1A;
        text-decoration: none;
        text-align: center;
        width: 366px;
        max-width: calc(100% + 36px);
        height: 28px; /* text height */
        margin: 0 0 0 -10px;
        padding: 0;
        box-sizing: border-box;
        transition: opacity 0.3s ease;
    }

    .job-detail-back-btn:hover {
        opacity: 0.7;
    }
}