/* ==========================================================================
   portal-r38f.css — bug261022（2）官网移动端六个缺陷的样式补丁（只追加，不改既有文件）

   本文件覆盖的问题：
     问题7  首页「选填补充信息」折叠面板文案 → 由 portal-r38f.js 改写（此处只管样式兜底）
     问题8  表单头部「信息仅用于服务对接，我们会严格保密。」被右侧胶囊挤成两行
     问题10 联系我们「需求登记」表单占屏过高 → 与首页一致：必填留首屏 + 其余折叠 + 紧凑化
     问题11 联系我们「办公位置」大标题与图片之间没有间距（PC + 移动端都要）
     问题24 联系我们信息卡：图标缩小移到左侧、标题与图标同行居中、联系方式加粗、
            服务时间/使用建议降级为小字、卡片内边距收紧
     问题25 人才招聘「福利待遇」胶囊过大
     问题26 人才招聘「3 个工作日内回复」胶囊换成一行 + 简历投递登记表单紧凑化/折叠

   作用范围：
     · 问题11 是 PC + 移动端，用非媒体查询规则，且只作用于 .pg-contact；
     · 其余问题只针对移动端（≤900px），PC 版式一行都不动；
     · 折叠面板的 DOM 由 portal-r38f.js 生成，本文件只负责样式。
   ========================================================================== */

/* ==========================================================================
   问题11：办公位置 —— 大标题与图片之间补间距
   根因：模板上 <figure> 带着 .mt-l（margin-top:40px），但 portal.css:530 的
        `.contact-map{margin:0}` 同特异性且写在 .mt-l 之后，把 40px 覆盖成了 0。
   改法：用 .pg-contact 前缀提高特异性，PC 与移动端一起生效（不需要媒体查询）。
   ========================================================================== */
.pg-contact .contact-map {
  margin-top: 24px;
}

/* ==========================================================================
   问题24 前置：联系方式数值/辅助说明改用类名，便于移动端重排
   原来热线/邮箱/微信/地址的数值是元素内联样式（18px/700、16px/700、15px/600），
   这里等价复刻，保证 PC 端视觉与改前一致；移动端的字号重排写在下面的媒体查询里。
   ========================================================================== */
.pg-contact .info-card__value {
  font-weight: 700;
  color: var(--navy-800);
}
.pg-contact .info-card__value--lg { font-size: 18px; }
.pg-contact .info-card__value--md { font-size: 16px; }
.pg-contact .info-card__value--sm {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}

@media (max-width: 900px) {

  /* ========================================================================
     问题8：表单头部副标题不再被右侧胶囊挤压
     改前：head 是 flex（左列 h3+p / 右列 badge），390px 下副标题可用宽度只有
           218px，20 个汉字的句子被迫折成两行，胶囊下方却还剩空白。
     改法：移动端把 head 改成两行网格 —— 第一行「标题 + 胶囊」，第二行副标题
           横跨整卡宽度；子容器 display:contents 让 h3/p 直接成为网格项，
           因此不用改 lead-form.html / apply-form.html 的 DOM 结构也能生效。
     ======================================================================== */
  .form-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 5px;
    align-items: start;
  }
  .form-card__head > div { display: contents; }
  .form-card__head .h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: 16.5px;
    line-height: 1.35;
    margin: 0;
  }
  .form-card__head > .badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    white-space: nowrap;
    font-size: 10.5px;
    line-height: 1.6;
    padding: 2px 8px;
  }
  .form-card__head p {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 0;
  }

  /* ========================================================================
     问题10 / 问题26②：联系我们、人才招聘的表单卡片紧凑化
     与首页（portal-r37c.css 的 .pg-home 规则）保持同一套尺寸：
     卡片内边距 38 → 16/14，字段间距 16/8 → 9/4，输入框 46 → 40px。
     改前：联系页卡片宽 358 时输入框只有 280 宽（卡片内边距 38×2），
           整卡 1067.9px，一屏放不下；简历卡片 1044px。
     ======================================================================== */
  :is(.pg-contact, .pg-jobs) .form-card {
    padding: 16px 14px 18px;
    border-radius: 16px;
  }
  :is(.pg-contact, .pg-jobs) .form-card__head {
    margin-bottom: 12px;
    column-gap: 9px;
    row-gap: 4px;
  }
  :is(.pg-contact, .pg-jobs) .form-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  :is(.pg-contact, .pg-jobs) .field { gap: 4px; }
  :is(.pg-contact, .pg-jobs) .field label { font-size: 12.5px; }
  :is(.pg-contact, .pg-jobs) .field input,
  :is(.pg-contact, .pg-jobs) .field select,
  :is(.pg-contact, .pg-jobs) .field textarea {
    height: 40px;
    font-size: 13.5px;
    border-radius: 9px;
    padding: 0 11px;
  }
  :is(.pg-contact, .pg-jobs) .field textarea {
    height: auto;
    min-height: 76px;
    padding: 9px 11px;
    line-height: 1.6;
  }
  :is(.pg-contact, .pg-jobs) .field .btn.btn--navy {
    height: 42px;
    font-size: 14px;
    border-radius: 999px;
  }
  :is(.pg-contact, .pg-jobs) .form-note {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 9px;
  }
  :is(.pg-contact, .pg-jobs) .field > .field-err {
    font-size: 11px;
    margin-top: 3px;
  }

  /* 问题26②：简历附件上传框同步收紧（原 min-height:124 + 18px 内边距 = 137px） */
  .pg-jobs .upload__box {
    min-height: 92px;
    padding: 12px 14px;
    gap: 4px;
  }
  .pg-jobs .upload__ico { width: 22px; height: 22px; }
  .pg-jobs .upload__title { font-size: 13px; }
  .pg-jobs .upload__hint { font-size: 11.5px; line-height: 1.5; }

  /* ========================================================================
     折叠面板（联系我们 / 人才招聘）
     DOM 由 portal-r38f.js 生成，类名与首页一致（.lead-more*），
     视觉尺寸照抄 portal-r37c.css 的首页版本，保证两处体感一致。
     ======================================================================== */
  :is(.pg-contact, .pg-jobs) .lead-more { grid-column: 1 / -1; }
  :is(.pg-contact, .pg-jobs) .lead-more__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 1px dashed #E3D3AE;
    border-radius: 10px;
    background: var(--bg-navy-soft);
    color: var(--navy-800);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
    text-align: left;
  }
  :is(.pg-contact, .pg-jobs) .lead-more__btn .lead-more__hint {
    color: var(--ink-400);
    font-weight: 500;
  }
  :is(.pg-contact, .pg-jobs) .lead-more__btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform .2s var(--ease);
  }
  :is(.pg-contact, .pg-jobs) .lead-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  :is(.pg-contact, .pg-jobs) .lead-more__body[hidden] { display: none !important; }
  :is(.pg-contact, .pg-jobs) .lead-more__body {
    margin-top: 9px;
    padding-top: 10px;
    border-top: 1px dashed #EBD9A6;
  }
  :is(.pg-contact, .pg-jobs) .lead-more__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  :is(.pg-contact, .pg-jobs) .lead-more__grid .field--full { grid-column: 1 / -1; }

  /* 简历投递登记折叠面板（红框区问题）：原仅浅色虚线边框，像提示文本、看不出可点。
     整块面板加浅色渐变底，按钮改为实线描边 + 浅色底 + 阴影 + 加粗高亮，强化可点击属性。 */
  .pg-jobs .lead-more {
    background: linear-gradient(180deg, #FFFDF6 0%, #FBF3DF 100%);
    border: 1px solid #EBD9A6;
    border-radius: 12px;
    padding: 7px 5px 9px;
  }
  .pg-jobs .lead-more__btn {
    font-weight: 700;
    color: var(--navy-800);
    background: #FFFBEF;
    border: 1px solid #E6D2A0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(120, 90, 20, .12);
    letter-spacing: .3px;
  }
  .pg-jobs .lead-more__btn > span { flex: 1 1 auto; min-width: 0; }
  .pg-jobs .lead-more__btn[aria-expanded="true"] { background: #F7ECCF; }
  .pg-jobs .lead-more__btn:active {
    background: #F2E4BE;
    box-shadow: inset 0 1px 3px rgba(120, 90, 20, .20);
  }
  .pg-jobs .lead-more__btn[data-r38f-hint] {
    font-weight: 700;
    color: var(--navy-800);
  }
  .pg-jobs .lead-more__btn svg { color: var(--gold-500); }

  /* 简历投递登记：展开后内部字段（最高学历 / 补充说明）与折叠面板边界留出左右、顶部呼吸感 */
  .pg-jobs .lead-more__grid { padding: 4px 8px 2px; }

  /* 首页：折叠面板文案换成「点击展开，补充信息获取更精准诊断」后，
     整颗按钮都是主文案，不再有浅色 hint，这里给它统一字重与颜色。 */
  .pg-home .lead-more__btn[data-r38f-hint] {
    font-weight: 600;
    color: var(--navy-800);
  }

  /* ========================================================================
     问题24：联系我们信息卡（移动端）
     改前：图标 52px 独占一行、标题在图标下方（垂直中心差 -56.4px）、
           卡片上下内边距 30px，四张卡高 222.5 / 244 / 319.1 / 269.3px。
     改后：图标 34px 固定在左侧并与标题同一行居中；标题右侧；联系方式紧跟标题、
           加大加粗；服务时间/建议降级 12.5px；卡片内边距 15/13。
     ======================================================================== */
  .pg-contact .info-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 11px;
    row-gap: 2px;
    padding: 15px 15px 13px;
    align-items: start;
  }
  .pg-contact .info-card > .card__ico {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    margin-bottom: 0;
  }
  .pg-contact .info-card > .card__ico svg { width: 17px; height: 17px; }
  .pg-contact .info-card > b {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
    font-size: 15.5px;
  }
  .pg-contact .info-card > .info-card__value {
    grid-column: 2;
    grid-row: 2;
    margin-top: 2px;
    font-size: 15.5px;
    line-height: 1.5;
    word-break: break-word;
  }
  .pg-contact .info-card > .info-card__value--lg {
    font-size: 17.5px;
    letter-spacing: .2px;
  }
  .pg-contact .info-card > .info-card__value--md { font-size: 15.5px; }
  .pg-contact .info-card > .info-card__value--sm { font-size: 14.5px; }
  .pg-contact .info-card > .info-card__hint {
    grid-column: 2;
    grid-row: 3;
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .pg-contact .info-card > .photo {
    grid-column: 2;
    grid-row: 4;
    margin-top: 8px;
    max-width: 150px;
  }

  /* ========================================================================
     问题25：人才招聘「福利待遇」胶囊
     改前：单个 44.5px 高 × 186px 宽，字号 14px、内边距 9px 15px，视觉过大。
     改后：14px/9/15 → 12.5px/5/10，高度约 29px；外层容器 34px 内边距同步收紧。
     ======================================================================== */
  .pg-jobs .benefit-wrap {
    margin-top: 26px;
    padding: 20px 16px;
  }
  .pg-jobs .benefit-wrap .chips { gap: 8px; }
  .pg-jobs .benefit-wrap .chip {
    padding: 5px 10px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}