/* ==========================================================================
   Contact FAQ Section — 外层布局 + 右侧表单
   全站共用首页视觉规范（间距 / 颜色 / 字号），不再只对 .home 生效。
   FAQ 列表结构见 assets/css/components/faq.css（.junj-faq--dark）
   ========================================================================== */

.contact-faq-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--junj-contact-background, transparent) center/cover no-repeat;
}

.contact-faq-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(11, 68, 135, 0.66) 0%,
      rgba(27, 78, 138, 0.68) 48%,
      rgba(8, 58, 119, 0.7) 100%),
    rgba(27, 78, 138, 0.64);
}

.contact-faq-container {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: calc(100% - 320px);
  max-width: 1600px;
  align-items: flex-start;
  gap: 12.1875%;
  margin: 0 auto;
  padding: 84px 0 49px;
  color: #fff;
}

.contact-faq-section .faq-column {
  flex: 0 0 38.4375%;
  max-width: 38.4375%;
}

.contact-faq-section .form-column {
  flex: 0 0 49.375%;
  max-width: 49.375%;
}

.contact-faq-section .faq-title,
.contact-faq-section .form-title {
  margin: 0 0 31px;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.contact-faq-empty {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
}

/* ---- FAQ dark（覆盖 faq.css 默认 15/13px 紧凑样式） ---- */

.contact-faq-section .junj-faq--dark {
  --junj-faq-divider: rgba(255, 255, 255, 0.2);
  --junj-faq-fg: #fff;
  --junj-faq-answer-fg: #fff;
}

.contact-faq-section .junj-faq--dark .junj-faq__question {
  padding-block: 24px;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 0;
}

.contact-faq-section .junj-faq--dark .junj-faq__q-text {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.contact-faq-section .junj-faq--dark .junj-faq__answer {
  max-width: 600px;
  padding-bottom: 26px;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0;
}

.contact-faq-section .junj-faq--dark .junj-faq__icon,
.contact-faq-section .junj-faq--dark .junj-faq__item[open] .junj-faq__icon {
  flex-basis: 20px;
  width: 20px;
  color: #4ec3e5;
  font-size: 22px;
  font-weight: 700;
}

/* ---- Contact Form ---- */

.contact-faq-section .contact-form .form-grid {
  gap: 20px 20px;
  margin-bottom: 20px;
}

.contact-faq-section .contact-form input.form-control,
.contact-faq-section .contact-form input[type="text"],
.contact-faq-section .contact-form input[type="email"],
.contact-faq-section .contact-form input[type="tel"] {
  height: 56px;
  padding: 0 14px;
  background-color: #d0e0f4;
  color: #1b428a;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: 3px;
}

.contact-faq-section .contact-form textarea.form-control,
.contact-faq-section .contact-form textarea {
  height: 179px;
  margin-bottom: 27px;
  padding: 13px 14px;
  background-color: #d0e0f4;
  color: #1b428a;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: 3px;
}

.contact-faq-section .contact-form input.form-control::placeholder,
.contact-faq-section .contact-form textarea.form-control::placeholder,
.contact-faq-section .contact-form input[type="text"]::placeholder,
.contact-faq-section .contact-form input[type="email"]::placeholder,
.contact-faq-section .contact-form input[type="tel"]::placeholder,
.contact-faq-section .contact-form textarea::placeholder {
  color: #1b428a;
  opacity: 1;
}

.contact-faq-section .contact-form button[type="submit"] {
  height: 58px;
  border: 1px solid #4eb7e2;
  border-radius: 0;
  background: linear-gradient(90deg, #0b4a8a 0%, #42acd3 50%, #09437f 100%);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.contact-faq-section .contact-form-status {
  min-height: 18px;
  margin-top: 10px;
}

/* ---- Legacy markup fallback（旧 class，避免残留 13px） ---- */

.junj-contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.junj-contact-form--home .junj-contact-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  margin-bottom: 20px;
}

.junj-contact-form--home .junj-contact-form__field,
.junj-contact-form--home .junj-contact-form__message {
  display: block;
}

.junj-contact-form--home .junj-contact-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.junj-contact-form--home input,
.junj-contact-form--home textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 3px;
  background: #d0e0f4;
  color: #1b428a;
  box-shadow: none;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

.junj-contact-form--home input {
  height: 56px;
  padding: 0 14px;
  text-transform: uppercase;
}

.junj-contact-form--home textarea {
  height: 179px;
  margin-bottom: 27px;
  padding: 13px 14px;
  resize: none;
}

.junj-contact-form--home :is(input, textarea)::placeholder {
  color: #1b428a;
  opacity: 1;
}

.junj-contact-form--home :is(input, textarea):focus-visible {
  outline: none;
  background: #e1efff;
  box-shadow: 0 0 0 2px rgba(11, 68, 135, 0.45);
}

.junj-contact-form--home .junj-contact-form__submit {
  width: 100%;
  height: 58px;
  border: 1px solid #4eb7e2;
  border-radius: 0;
  background: linear-gradient(90deg, #0b4a8a 0%, #42acd3 50%, #09437f 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.junj-contact-form--home .junj-contact-form__submit:hover,
.junj-contact-form--home .junj-contact-form__submit:focus-visible {
  filter: brightness(1.15);
}

.junj-contact-form__submit[disabled] {
  cursor: wait;
  opacity: 0.65;
}

.junj-contact-form__status {
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 13px;
  text-align: center;
}

.junj-contact-form__status[data-state="success"] {
  color: #7ce0b4;
}

.junj-contact-form__status[data-state="error"] {
  color: #ff8b8b;
}

/* ---- Tablet landscape ---- */

@media (max-width: 1199.98px) {
  .contact-faq-container {
    width: calc(100% - 80px);
    gap: 56px;
  }

  .contact-faq-section .faq-column {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .contact-faq-section .form-column {
    flex: 1 1 56%;
    max-width: 56%;
  }

  .contact-faq-section .faq-title,
  .contact-faq-section .form-title {
    font-size: 36px;
  }

  .contact-faq-section .junj-faq--dark .junj-faq__question {
    padding-block: 22px;
    font-size: 18px;
  }

  .contact-faq-section .contact-form input.form-control,
  .contact-faq-section .contact-form input[type="text"],
  .contact-faq-section .contact-form input[type="email"],
  .contact-faq-section .contact-form input[type="tel"],
  .contact-faq-section .contact-form textarea.form-control,
  .contact-faq-section .contact-form textarea,
  .junj-contact-form--home input,
  .junj-contact-form--home textarea {
    font-size: 16px;
  }
}

/* ---- Tablet portrait / small laptop ---- */

@media (max-width: 991.98px) {
  .contact-faq-container {
    flex-wrap: wrap;
    width: 100%;
    gap: 44px;
    padding: 64px 20px;
  }

  .contact-faq-section .faq-column,
  .contact-faq-section .form-column {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-faq-section .faq-title,
  .contact-faq-section .form-title {
    margin-bottom: 24px;
    font-size: 32px;
  }

  .contact-faq-section .junj-faq--dark .junj-faq__question {
    padding-block: 20px;
    font-size: 18px;
  }

  .contact-faq-section .junj-faq--dark .junj-faq__answer {
    max-width: none;
    font-size: 16px;
  }

  .contact-faq-section .contact-form input.form-control,
  .contact-faq-section .contact-form input[type="text"],
  .contact-faq-section .contact-form input[type="email"],
  .contact-faq-section .contact-form input[type="tel"],
  .junj-contact-form--home input {
    height: 52px;
    font-size: 16px;
  }

  .contact-faq-section .contact-form textarea.form-control,
  .contact-faq-section .contact-form textarea,
  .junj-contact-form--home textarea {
    height: 160px;
    font-size: 16px;
  }

  .contact-faq-section .contact-form button[type="submit"],
  .junj-contact-form--home .junj-contact-form__submit {
    font-size: 18px;
  }
}

/* ---- Mobile ---- */

@media (max-width: 575.98px) {
  .contact-faq-container {
    gap: 32px;
    padding: 44px 16px;
  }

  .contact-faq-section .faq-title,
  .contact-faq-section .form-title {
    margin-bottom: 18px;
    font-size: 28px;
  }

  .contact-faq-section .junj-faq--dark .junj-faq__question {
    padding-block: 18px;
    font-size: 16px;
    line-height: 1.35;
  }

  .contact-faq-section .junj-faq--dark .junj-faq__answer {
    padding-bottom: 24px;
    font-size: 15px;
    line-height: 1.45;
  }

  .contact-faq-section .contact-form .form-grid,
  .junj-contact-form--home .junj-contact-form__fields {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-faq-section .contact-form input.form-control,
  .contact-faq-section .contact-form input[type="text"],
  .contact-faq-section .contact-form input[type="email"],
  .contact-faq-section .contact-form input[type="tel"],
  .junj-contact-form--home input {
    height: 48px;
    font-size: 16px;
  }

  .contact-faq-section .contact-form textarea.form-control,
  .contact-faq-section .contact-form textarea,
  .junj-contact-form--home textarea {
    height: 140px;
    margin-bottom: 18px;
    font-size: 16px;
  }

  .contact-faq-section .contact-form button[type="submit"],
  .junj-contact-form--home .junj-contact-form__submit {
    height: 52px;
    font-size: 16px;
  }
}