/* =========================================================
   Ya Madhir's Marketing | contact.css
   ========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,1.5fr);
  gap:clamp(36px,7vw,110px);
  align-items:start;
}

/* ---------- Direct details ---------- */
.contact-info h2{
  font-size:clamp(2.2rem,3.6vw,3rem);
  margin-bottom:8px;
}
.contact-info dl{ margin-top:22px; }
.contact-info dt{
  margin-top:26px;
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.1em;
  color:var(--gold);
}
.contact-info dd{ color:var(--bone); overflow-wrap:anywhere; }
.contact-info dd a{
  color:var(--ember-4);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.contact-info dd a:hover{ color:var(--gold); border-color:var(--gold); }
.contact-info .social-row{ margin-top:8px; }

/* ---------- Form ---------- */
.form-card{
  padding:clamp(24px,4vw,48px);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(160deg,var(--panel),rgba(0,0,0,.3));
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 22px;
}
.field{ margin-bottom:22px; }
.field label{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-size:.9375rem;
  font-weight:400;
  letter-spacing:.04em;
}
.field .optional{ color:var(--gold-dim); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,77,61,.28);
  border-radius:10px;
  background:rgba(0,0,0,.55);
  color:var(--bone);
  font-family:var(--body);
  font-size:1rem;
  font-weight:300;
  line-height:1.4;
  color-scheme:dark;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:#7c7157; }

.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23ff4d3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:rgba(255,77,61,.5); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ember-4);
  box-shadow:0 0 0 3px rgba(255,77,61,.18), 0 0 22px rgba(255,77,61,.2);
}

.field.has-error input,
.field.has-error textarea{ border-color:var(--ember-3); }
.field-error{
  margin-top:6px;
  color:var(--ember-4);
  font-size:.875rem;
  font-weight:400;
}
.field-error:empty{ display:none; }

/* honeypot: hidden from people, visible to naive bots */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.submit-btn{ margin-top:6px; min-width:210px; }

.form-status{
  margin-top:18px;
  min-height:1.5em;
  font-size:.9375rem;
  font-weight:400;
}
.form-status a{ text-decoration:underline; }
.form-status.sending{ color:var(--bone-dim); }
.form-status.success{ color:var(--gold); }
.form-status.error{ color:var(--ember-4); }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
  .submit-btn{ width:100%; }
}