/* ===== Contact Page (clean, mobile-safe) ===== */

/* Section wrapper */
.contact-wrap{
  padding:28px 20px;
  scroll-margin-top:80px;            /* avoid sticky-header overlap on anchor jumps */
}
.contact-wrap *{ box-sizing:border-box; }

/* Intro */
.contact-intro h1{
  font-family:Poppins,system-ui,sans-serif;
  font-size:clamp(32px,4.5vw,56px);
  margin:0 0 6px;
}
.contact-intro p{ color:#c8c8d2; margin:0 0 16px; }

/* Info cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.card{
  background:var(--color-surface-750);
  border:1px solid var(--color-surface-600);
  border-radius:16px;
  padding:14px;
}
.card h3{ margin:0 0 6px; font-family:Poppins,system-ui,sans-serif; }
.card a, .card span{ color:#d7d7e0; text-decoration:none; }

/* Main grid: form | info/map */
/* Main grid: form | info/map (shrink-safe) */
.contact-grid{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); /* allow both cols to shrink */
  gap:16px;
  align-items:start;
}
/* let children actually shrink on small screens */
.contact-grid > *{ min-width:0; }

@media (max-width: 992px){
  .contact-grid{ grid-template-columns:1fr; }
}


/* Form */
.form label{
  display:block;
  margin:6px 0 6px;
  color:#d7d7e0;
}
.form input,
.form textarea{
  width:100%;
  background:#121216;
  border:1px solid #1f1f23;
  border-radius:12px;
  padding:12px 14px;
  color:#fafafa;
  outline:none;
  font:16px/1.35 Nunito, system-ui, sans-serif; /* 16px stops iOS zoom */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form input:focus,
.form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
.field{ margin-bottom:10px; }
.field.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field.two > *{ min-width:0; }       /* prevent overflow on iOS */

/* Errors + actions */
.error{ color:#ff8e8e; min-height:18px; display:block; font-size:.9rem; }
.actions{ display:flex; align-items:center; gap:12px; }
.status{ color:#9a9aa3; font-size:.95rem; min-height:20px; }

/* Consent / artist opt-in */
.artist-optin{ margin:8px 0 6px; }
.artist-optin .checkbox{ display:flex; align-items:center; gap:10px; color:#d7d7e0; }
.artist-optin .note{ color:#9a9aa3; margin:4px 0 0; font-size:.92rem; }
.artist-fields{
  border:1px solid var(--color-surface-600);
  border-radius:14px;
  padding:12px;
  margin:6px 0 10px;
}
.artist-fields legend{ padding:0 6px; color:#c8c8d2; }

/* Unified checkbox/tap targets */
.form-row.checkbox,
.consent,
.artist-optin{ display:flex; align-items:center; gap:10px; }
.form-row.checkbox label,
.consent label,
.artist-optin label{ line-height:1.3; margin:0; cursor:pointer; }
input[type="checkbox"]{
  width:20px; height:20px; margin:0;
  accent-color:var(--color-accent-500);
}

/* Map (responsive, no overflow) */
.map{
  background:#0f0f12;
  border:1px solid var(--color-surface-600);
  border-radius:16px;
  overflow:hidden;
}
.map iframe{
  display:block;
  width:100%;
  height:clamp(220px, 56vw, 360px);  /* scales on mobile, caps on desktop */
  border:0;
}
.map-caption{ color:#9a9aa3; margin-top:6px; font-size:.95rem; }

/* Toast + modal */
#toast{
  position:fixed; left:50%; bottom:22px;
  transform:translateX(-50%);
  background:var(--color-surface-750); border:1px solid var(--color-surface-600);
  padding:12px 16px; border-radius:12px; color:#fafafa;
  opacity:0; pointer-events:none; transition:.3s; z-index:9999;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

#success-modal{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); z-index:9998;
}
#success-modal[hidden]{ display:none; }
.modal-card{
  background:var(--color-surface-750); border:1px solid var(--color-surface-600);
  border-radius:16px; padding:24px; max-width:420px; width:92%;
}
.checkmark{
  width:64px; height:64px; border-radius:999px;
  background:color-mix(in srgb, var(--color-accent-500) 20%, transparent); border:1px solid rgba(245,209,90,.35);
  display:grid; place-items:center; margin-bottom:10px;
}
.checkmark svg{ width:28px; height:28px; fill:var(--accent); }

/* iOS text-size behavior */
html{ -webkit-text-size-adjust:100%; }

/* Responsive tweaks */
@media (max-width: 992px){
  .cards{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .map iframe{ height:clamp(220px, 62vw, 340px); }
}
@media (max-width: 700px){
  .field.two{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .contact-wrap{ padding-top:24px; }
}