/* =========================================================
   1. 局部作用域样式 (Scoped Styles)
   【彻底抛弃全局 * 和 body，绝不污染主站导航栏和页脚】
========================================================= */

/* 将原本放在 body 的字体和颜色，精准限制在我们自己的几个大区块内 */
.page-hero,
.hero-slider,
.section-block,
.job-list-section {
  font-family: "Barlow", "Arial", sans-serif;
  color: #000;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* 核心容器：限制最大宽度并居中 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 常用辅助类 (Utility Classes) */
.fw-bold { font-weight: bold; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 4rem; }
.bg-white { background-color: #ffffff; }
.bg-light { background-color: #f4f4f4; }

/* =========================================================
   2. 共用 UI 组件 (UI Components)
========================================================= */

/* --- 精准狙击咱们这几个大区块里的标题，绝对不碰原生框架的标题 --- */
.page-hero h1,
.hero-slider h1,
.section-block h1,
.section-block h2,
.section-block h3,
.job-list-section h1,
.job-list-section h2,
.job-list-section h3,
.section-title {
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 0;
}

/* --- 下面是你原来的 .btn-primary 代码，保持不变 --- */

/* --- 核心按钮样式 --- */
.btn-primary {
  display: inline-block;
  padding: 15px 35px;
  background-color: #ffc900;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Barlow", sans-serif;
  letter-spacing: 0.5px;
}

.btn-primary:hover {
  background-color: #000;
  color: #ffc900;
}

/* --- 带有黄色下划线的通用区块标题 --- */
.section-title {
  font-size: 2.4rem;
  color: #000;
  margin-bottom: 1.8rem;
  display: inline-block;
  border-bottom: 4px solid #ffc900;
  padding-bottom: 4px;
  max-width: 100%;
}

/* --- 通用区块间距与正文段落 --- */
.section-block {
  padding: 80px 0;
}

.section-block p {
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  color: #000;
  line-height: 1.45;
  width: 100%;
}

/* =========================================================
   3. 全站统一 Hero 区域 (Landing, Job Filter, Details 共用)
========================================================= */

.hero-slider,
.page-hero {
  width: calc(100% - 40px);
  max-width: 1160px;
  margin: 40px auto 0;
  height: 600px;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
  justify-content: flex-start;
  overflow: hidden;
  background-color: #222;
}

/* 统一强制接管所有 Hero 的图片 */
.hero-slider img,
.page-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

/* 统一去掉黑魔法渐变遮罩 */
.slider-overlay,
.page-hero-overlay {
  display: none !important;
}

/* 👇 【关键层级控制，就是这里被误删了】 👇 */
.slider-content,
.page-hero-content {
  position: relative;
  z-index: 10 !important; /* 强制层级提到最高，绝对不会被图片挡住 */
  padding-left: 60px;
  width: 100%;
}

/* 纯白标题设定 */
.slider-content h1,
.page-hero-content h1 {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 30px;
  margin-top: 0;
  line-height: 1.25; 
  max-width: 100%;
  word-break: normal;
  /* 强制纯白，强制去掉所有阴影，无视主站一切干扰 */
  color: #ffffff !important; 
  text-shadow: none !important; 
}


/* =========================================================
   4. 首页专属区块 (Landing Page Specifics)
========================================================= */

/* --- 第一部分：Join a Team --- */
.first-part .section-title {
  font-size: 2.15rem;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

/* --- 第二部分：左右分割排版 (Split Layout) --- */
.split-layout {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 60px;
}
.split-image {
  flex: 0 0 calc(58% - 30px);
  max-width: calc(58% - 30px);
}
.split-text {
  flex: 0 0 calc(42% - 30px);
  max-width: calc(42% - 30px);
  display: flex;
  flex-direction: column;
}
.split-text p:last-child {
  margin-bottom: 0;
}
.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- 第三部分：Our People 团队大图 --- */
.third-part {
  position: relative;
}
.people-text-area {
  width: 100%;
}

.people-large-image {
  width: 100%;
  max-width: 100%; /* 回归普通盒子，与文字绝对对齐 */
  margin-top: 60px;
  position: relative;
  left: 0;
  transform: none;
}
.people-large-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* =========================================================
   5. 职位列表页 (Job Filter Page Specifics)
========================================================= */
.job-list-section {
  padding: 40px 0 120px 0;
  background-color: #ffffff;
}
.job-card {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 100px;
}
.job-card-image {
  flex: 0 0 380px;
  max-width: 380px;
}
.job-card-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.job-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 5px;
}
.job-card-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #000;
  margin-bottom: 1.5rem;
  display: inline-block;
  border-bottom: 4px solid #ffc900;
  padding-bottom: 8px;
}
.job-card-content p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 850px;
}
.job-card-content .btn-primary {
  padding: 14px 38px;
  font-size: 0.95rem;
}

/* =========================================================
   6. 个人信息表单页 (Details Page Specifics)
========================================================= */
.application-form {
  margin-top: 60px;
  max-width: 100%;
}
.form-group {
  margin-bottom: 25px;
}

/* 普通文本输入框的 Label 标签 (已修复恢复) */
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  color: #000;
}

/* 覆盖普通 label，专用于单选按钮组 */
.form-group label.custom-radio {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

/* 工业风大号文本输入框 */
.form-control {
  width: 100%;
  padding: 14px 20px;
  background-color: #f4f4f4;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  color: #000;
  transition: all 0.3s ease;
}
.form-control:focus {
  outline: none;
  background-color: #eee;
  box-shadow: 0 0 0 2px #ffc900;
}

/* 选择题小标题 */
.form-section-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
  color: #000;
}
.radio-group-label {
  margin-bottom: 15px;
  font-size: 1rem;
}
.radio-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 自定义方块单选交互 */
.custom-radio input[type="radio"],
.custom-radio input[type="checkbox"] {
  display: none;
}
.custom-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.radio-box {
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  background-color: #f4f4f4;
  border-radius: 4px;
  margin-right: 15px;
  transition: background-color 0.2s ease;
}
.custom-radio:hover .radio-box {
  background-color: #e8e8e8;
}
.custom-radio input[type="radio"]:checked + .radio-box,
.custom-radio input[type="checkbox"]:checked + .radio-box {
  background-color: #ffc900;
}
.custom-radio input[type="radio"]:checked + .radio-box::after {
  display: none !important;
}
.radio-text {
  font-size: 1rem;
  color: #000;

  /* 👇 【核心修复】：强制设定为普通字重，斩断 Bootstrap label 的加粗继承 👇 */
  font-weight: 400 !important; 
}

/* =========================================================
   7. 评估测试页 (Assessment Page Specifics)
========================================================= */

/* =========================================================
   专门拉开所有考卷中“大题与大题之间”的间距 (全站统一 50px)
========================================================= */
.role-block .form-group {
    margin-bottom: 50px !important; 
}

/* 👇 【终极补丁】：强制镇压前 3 个职位里残留的 HTML 错误！让选项乖乖合并！ 👇 */
.role-block label.form-group {
    margin-bottom: 0px !important; 
}





.question-text {
  font-size: 1.05rem;
  margin-bottom: 18px;
  color: #000;
  font-weight: bold;
}
.assessment-list {
  margin-left: 20px;
  margin-bottom: 25px;
  list-style-type: disc;
}
.assessment-list li {
  margin-bottom: 5px;
  font-size: 1.05rem;
}

/* 镂空黑框单选 */
.box-outlined {
  background-color: #ffffff;
  border: 2px solid #000;
}
.custom-radio:hover .box-outlined {
  background-color: #f9f9f9;
}
.custom-radio input[type="radio"]:checked + .box-outlined,
.custom-radio input[type="checkbox"]:checked + .box-outlined {
  background-color: #ffc900;
  border-color: #ffc900;
}

/* 多行文本域 textarea 独立调整 */
textarea.form-control {
  resize: vertical;
  min-height: 140px;
  padding-top: 18px;
  line-height: 1.5;
}

/* =========================================================
   8. 文件上传页 (Supporting Documents Page Specifics)
========================================================= */
.upload-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #000;
  margin-bottom: 18px;
}
.form-control-file {
  width: 100%;
  max-width: 500px;
  padding: 12px;
  border: 2px solid #000;
  background-color: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #444;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s ease;
}

/* 隐藏原生按钮重绘 */
.form-control-file::file-selector-button {
  background-color: #d9d9d9;
  color: #000;
  border: none;
  padding: 12px 35px;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  margin-right: 20px;
  transition: all 0.2s ease;
}

/* 悬停与聚焦统一交互 */
.form-control-file:hover,
.form-control-file:focus {
  border-color: #ffc900;
  box-shadow: 0 0 0 2px #ffc900;
  outline: none;
}
.form-control-file::file-selector-button:hover {
  background-color: #c0c0c0;
}

/* =========================================================
   9. 拖拽排序组件 (Drag & Drop Ranking)
========================================================= */

/* 小灰字提示 */
.hint-text {
  font-size: 0.95rem;
  font-weight: normal;
  color: #666;
}

/* 强制去除自带的圆点，重置列表样式 */
ul.ranking-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 15px 0 30px 0;
  max-width: 800px;
}

/* 单个可拖拽的条目 */
.ranking-item {
  background-color: #ffffff;
  border: 2px solid #000;
  margin-bottom: 12px;
  padding: 15px 20px;
  border-radius: 4px;
  font-size: 1.05rem;
  font-weight: 600; /* 加粗一点更有质感 */
  color: #000;
  display: flex;
  align-items: center;
  cursor: grab; /* 鼠标悬浮变成抓手 */
  transition: all 0.2s ease;
}

/* 前面的黄色小圆点 */
.yellow-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #ffc900;
  border-radius: 50%; /* 变成圆形 */
  margin-right: 18px;
  flex-shrink: 0;
}

/* 悬停时的反馈效果 (边框变黄) */
.ranking-item:hover {
  border-color: #ffc900;
  box-shadow: 0 0 0 2px #ffc900;
}

/* 正在被拖拽时的状态 */
.ranking-item.dragging {
  opacity: 0.4;
  background-color: #f4f4f4;
  border-color: #ccc;
  box-shadow: none;
  cursor: grabbing;
}












/* =========================================================
   10. 响应式布局深度适配 (Responsive & Mobile Optimization)
========================================================= */

/* 平板屏幕及以下 (Max-width: 992px) */
@media (max-width: 992px) {
    .split-layout {
        flex-direction: column;
        gap: 40px;
    }
    .split-image, .split-text {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* 修复图片在上下堆叠时的高度问题 */
    .split-image img {
        height: auto !important; 
    }
    .job-card {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 80px;
    }
    .job-card-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .job-card-image img {
        aspect-ratio: 16 / 9; 
    }
}

/* 手机端屏幕适配 (Max-width: 768px) */
@media (max-width: 768px) {
    .section-block {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }
    
    /* 🚨 【致命 Bug 修复处】：解除强制不换行，允许长标题在手机自然折行 🚨 */
    .first-part .section-title {
        white-space: normal !important;
    }

    .job-card-title {
        font-size: 1.8rem;
    }

    /* 优化手机端巨幕比例 */
    .hero-slider,
    .page-hero {
        width: 100%; 
        margin-top: 0;
        height: auto; 
        min-height: 420px; /* 保证高度足够容纳文字 */
        padding-top: 40px;
        padding-bottom: 40px; 
    }
    .slider-content,
    .page-hero-content {
        padding-left: 20px; 
        padding-right: 20px;
    }
    .slider-content h1,
    .page-hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.4rem); 
        margin-bottom: 20px;
    }

    .form-section-title {
        font-size: 1.2rem;
        margin-top: 40px;
    }
    
    /* 强制打破行内样式，让 Q12 的选项在手机上垂直排列 */
    .radio-options[style*="flex-direction: row"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .ranking-item {
        font-size: 1rem;
        padding: 12px 15px;
    }

    .form-control-file::file-selector-button {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
        text-align: center;
    }
}

/* 超小屏手机微调 (Max-width: 480px) */
@media (max-width: 480px) {
    .btn-primary {
        width: 100%;
        text-align: center;
    }
    .radio-box {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }
    .yellow-dot {
        width: 14px;
        height: 14px;
        margin-right: 12px;
    }
    .question-text {
        font-size: 1rem;
    }
}




/* =========================================================
   专门调整 Assessment 和 Thanks 页面的 Hero 图片位置 (往下移)
========================================================= */

/* 1. 利用 .role-block 完美瞄准 Assessment 页面的所有职位图片 */
/* 2. 利用 img[src*="thank-you-hero"] 精准狙击 Thanks 页面的图片 */
/* =========================================================
   专门调整 Assessment 和 Thanks 页面的 Hero 图片位置 (往下移)
========================================================= */

/* 1. 命中 Assessment 页面的所有职位图片 */
/* 2. 命中 Thanks 页面 (只要图片路径里带 thanks 这个词就绝对能抓到) */
.role-block .page-hero img,
.page-hero img[src*="thanks"] {
    object-position: center 10% !important; 
}



/* =========================================================
   11. 专门微调 Job Filter 页面卡片图片的裁切、缩放与对齐
========================================================= */

.job-card-image {
    overflow: hidden;
    border-radius: 4px; 
}

/* 图1: Junior Office Administrator 
   (核心：把裁切焦点定在 10%，也就是偏左侧，把左边的墙露出来，人就居中了！) */
.job-card-image img[alt="Junior Office Administrator"] {
    object-position: 0% 50%;  
    transform: scale(1.1); /* 微微放大一点点，显得饱满 */
    transform-origin: center center;
}

/* 图2: Prefab & Fitout Technician (同样把裁切焦点往左靠) */
.job-card-image img[alt="Prefab & Fitout Technician"] {
    object-position: 10% 50%;  
    transform: scale(1.2);          
    transform-origin: center center;      
}

/* 图3: Senior Management (这个小哥在原图非常靠左，直接让裁切框贴死最左边 0%) */
.job-card-image img[alt="Senior Management"] {
    object-position: 5% 50%;  
    transform: scale(1.2);          
    transform-origin: center center;      
}

/* 图4: Sales & Customer Support (调整裁切位置并放大) */
.job-card-image img[alt="Sales & Customer Support"] {
    object-position: 60% 50%; 
    transform: scale(1.2);         
    transform-origin: center center;
  }

  /* 图5: Fabrication & Production Assistant */
.job-card-image img[alt="Fabrication & Production Assistant"] {
    object-position: 20% 50%;  
    transform: scale(1.0);          
    transform-origin: center center;      
}