/* ============================================================
   CONLUXS Contact Form Layout V1 — page-specific styles
   Start Your Project Inquiry module rebalance (candidate only).
   Scope: /contact main-content layout only.
   Does NOT touch site-shell-v2.css / homepage-redesign-v2.css /
   solutions-redesign-v1.css. Header/Footer untouched.
   ============================================================ */

/* ---------- Container (aligned with global shell 1220px) ---------- */
.contact-container {
  max-width: 76.25rem; /* 1220px */
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Two-column: LEFT info (35-40%) / RIGHT form (60-65%) ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 3rem;
  align-items: start;
}

.contact-info,
.contact-form-col {
  min-width: 0;
}

/* ---------- LEFT: Project Preparation Guide panel ---------- */
.contact-review-panel {
  border: 1px solid #2a323a;
  background: #0e1318;
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}

.contact-review-panel__title {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.contact-review-panel__intro {
  color: #c5cdd1;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.contact-review-panel__list {
  color: #5d6b73;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.625rem;
}

/* ---------- RIGHT: Form grid ---------- */
.contact-form {
  margin: 0;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.contact-field {
  min-width: 0;
}

.contact-field--full {
  grid-column: 1 / -1;
}

/* Inputs: full width, comfortable height, border-box */
.contact-field input,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 52px;
}

.contact-field textarea {
  height: auto;
  min-height: 160px;
}

/* ---------- Tablet (768-1023): stack columns, keep 2-col form if room ---------- */
@media (max-width: 1023px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .contact-review-panel {
    margin-bottom: 2rem;
  }
}

/* ---------- Mobile (<768): everything single column ---------- */
@media (max-width: 767px) {
  .contact-container {
    padding: 0 1.25rem;
  }
  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .contact-review-panel {
    padding: 1.375rem;
  }
}