/* ── contact.css ───────────────────────────── */

.page-hero--contact {
  background: var(--warm-white);
  padding: calc(var(--header-h) + 1rem) 0 4rem;
}

.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-2xl); align-items: start; }

/* Grid items default to min-width: auto, so a wide descendant (e.g. the
   h2, or the quick-links list) can force this track wider than its own
   parent and blow out the layout horizontally on narrow phones. Both
   children share the single column once it collapses to one track below
   900px, so both need the override -- fixing only one still lets the
   other's content keep the track wide. */
.contact-form-wrap, .contact-info { min-width: 0; }

.contact-form-wrap h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.5rem; }
.contact-form-wrap__intro { color: var(--grey-mid); margin-bottom: var(--space-lg); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.form-group input, .form-group select, .form-group textarea {
  padding: 0.75rem 1rem; border: 1.5px solid var(--grey-pale);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem;
  color: var(--ink); background: var(--warm-white); transition: border-color var(--transition);
  width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-pale);
}
.form-group input.is-invalid, .form-group select.is-invalid, .form-group textarea.is-invalid {
  border-color: var(--error);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group--checkbox { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.checkbox-label { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--coral); margin-top: 2px; }
.form-error { font-size: 0.8rem; color: var(--error); min-height: 1.2em; }

.contact-success { text-align: center; padding: var(--space-xl); background: var(--coral-pale); border-radius: var(--radius-lg); }
.contact-success__icon { width: 60px; height: 60px; background: var(--coral); color: white; border-radius: 50%; font-size: 1.75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); }
.contact-success h3 { font-family: var(--font-display); font-size: 1.75rem; margin-bottom: 0.75rem; }
.contact-success p { color: var(--grey-mid); margin-bottom: var(--space-lg); }

.contact-info { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact-info-card { background: var(--warm-white); border: 1px solid var(--grey-pale); border-radius: var(--radius-lg); padding: var(--space-lg); }
.contact-info-card__icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.contact-info-card__icon--whatsapp { color: #25d366; }
.contact-info-card__icon--whatsapp svg { width: 28px; height: 28px; display: block; }
.contact-info-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.25rem; }
.contact-info-card__value { font-size: 1rem; font-weight: 600; color: var(--coral); display: block; margin-bottom: 0.4rem; text-decoration: none; overflow-wrap: break-word; word-break: break-word; }
.contact-info-card__value:hover { text-decoration: underline; }
.contact-info-card p { font-size: 0.85rem; color: var(--grey-mid); line-height: 1.6; }
.contact-social-links { display: flex; flex-direction: row; gap: 0.6rem; margin-top: 0.25rem; }
.contact-social-link { font-size: 0.875rem; color: var(--coral); text-decoration: none; }
.contact-social-link:hover { text-decoration: underline; }
.contact-social-link--icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: var(--coral-pale);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.contact-social-link--icon:hover { background: var(--coral); color: #fff; text-decoration: none; }
.contact-social-link--icon .social-icon { width: 1.1rem; height: 1.1rem; display: block; }
.contact-quicklinks { background: var(--ink); border-radius: var(--radius-lg); padding: var(--space-lg); }
.contact-quicklinks h3 { font-family: var(--font-display); font-size: 1rem; color: white; margin-bottom: var(--space-sm); }
.contact-quicklink { display: block; padding: 0.5rem 0; color: rgba(255,255,255,0.7); font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color var(--transition); }
.contact-quicklink:last-child { border-bottom: none; }
.contact-quicklink:hover { color: var(--coral-light); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .form-row--two { grid-template-columns: 1fr; }
}