/**
 * xuye/contact block styles — mirror of prototypes/xuye/styles.css
 * .contact-section / .contact-compact / .contact-grid / .contact-copy / form fields
 * 原型行号范围:1133–1268(base)、3929–3945(compact)、2545/2745/4696(断点)。
 * Breakpoints:1080px / 680px(沿用原型,不新增)。
 */
@layer xuye-block {
  .xuye-x-contact {
    padding: 78px 0;
    color: #fff;
    background-color: var(--wp--preset--color--teal-dark, #045e64);
    background-image:
      linear-gradient(135deg, rgba(23, 45, 58, 0.96), rgba(4, 94, 100, 0.92)),
      var(--xuye-contact-bg, none);
    background-position: center;
    background-size: cover;
  }

  .xuye-x-contact--compact {
    padding: clamp(70px, 8vw, 104px) 0;
  }

  .xuye-x-contact__grid {
    display: grid;
    grid-template-columns: 0.88fr 1fr;
    gap: 54px;
    align-items: stretch;
  }

  .xuye-x-contact--compact .xuye-x-contact__grid {
    grid-template-columns: minmax(320px, 0.66fr) minmax(360px, 0.78fr);
    gap: clamp(44px, 8vw, 110px);
  }

  .xuye-x-contact__copy {
    display: grid;
    align-content: center;
  }

  .xuye-x-contact__kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    color: #9fd0d3;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .xuye-x-contact__copy h2 {
    max-width: 660px;
    color: #fff;
    font-size: calc(clamp(2.3rem, 3.25vw, 4.15rem) * 0.75);
    line-height: 1.03;
  }

  .xuye-x-contact--compact .xuye-x-contact__copy h2 {
    max-width: 620px;
    font-size: calc(clamp(2.2rem, 4.1vw, 4.8rem) * 0.75);
  }

  .xuye-x-contact__copy p {
    max-width: 620px;
    margin-top: 16px;
    color: #d8e6ea;
    font-size: 1rem;
    line-height: 1.75;
  }

  .xuye-x-contact dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 30px 0 0;
  }

  .xuye-x-contact dl div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .xuye-x-contact dt {
    color: #9fd0d3;
    font-weight: 800;
  }

  .xuye-x-contact dd {
    margin: 0;
    color: #f3fafb;
    line-height: 1.55;
  }

  .xuye-x-contact__form {
    display: grid;
    gap: 12px;
    align-self: center;
    padding: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    backdrop-filter: blur(16px);
  }

  .xuye-x-contact--compact .xuye-x-contact__form {
    padding: clamp(24px, 3vw, 34px);
  }

  .xuye-x-contact__field {
    display: grid;
    gap: 8px;
    color: #edf7f8;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .xuye-x-contact__field input,
  .xuye-x-contact__field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--wp--preset--color--ink, #0b131a);
    outline: none;
  }

  .xuye-x-contact__field input {
    min-height: 48px;
    padding: 0 14px;
  }

  .xuye-x-contact__field textarea {
    min-height: 132px;
    padding: 14px;
    resize: vertical;
  }

  .xuye-x-contact__field input:focus,
  .xuye-x-contact__field textarea:focus {
    border-color: var(--wp--preset--color--gold, #d8a728);
    box-shadow: 0 0 0 4px rgba(216, 167, 40, 0.22);
  }

  .xuye-x-contact__privacy,
  .xuye-x-contact__status {
    color: #d8e6ea;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .xuye-x-contact__privacy a {
    color: #fff;
    text-decoration: underline;
  }

  .xuye-x-contact__status {
    min-height: 22px;
    color: #e5f7eb;
    font-weight: 800;
  }
}

@layer xuye-responsive {
  @media (max-width: 1080px) {
    .xuye-x-contact__grid,
    .xuye-x-contact--compact .xuye-x-contact__grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 680px) {
    .xuye-x-contact {
      padding: 70px 0;
    }
  }
}