/* ============================================================
   Contact page (/contact) + quote/enquiry form (@client)
   Tokens are defined in /styles.css (otc design system).
   ============================================================ */

.contact-section { padding-block: 64px 84px; }

.contact__layout {
  display: grid;
  grid-template-columns: 85fr 115fr;
  gap: 52px;
  align-items: start;
}

/* ---- Left column: contact-method cards ---- */
.contact__cards { display: flex; flex-direction: column; gap: 14px; }

.contact-card {
  display: block;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line-300);
  border-radius: var(--r-card);
  transition: border-color 0.2s var(--ease-standard),
    box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
.contact-card--link { cursor: pointer; }
.contact-card--link:hover {
  border-color: var(--navy-800);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.contact-card__row { display: flex; align-items: center; gap: 16px; }
.contact-card__badge {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--surface-2);
  border-radius: var(--r-card);
  color: var(--navy-800);
}
.contact-card__icon { width: 20px; height: 20px; }
.contact-card__icon--wa { color: var(--whatsapp); }
.contact-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-card__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-500);
}
.contact-card__value { font-size: 16px; font-weight: 500; color: var(--ink-900); }
.contact-card__note { font-size: 12.5px; color: var(--ink-400); }

/* ---- Map placeholder (navy gradient, mirrors the Flutter screen) ---- */
.contact-map {
  position: relative;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1px solid var(--line-300);
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-900));
}
.contact-map__glyph { width: 48px; height: 48px; color: rgba(255, 255, 255, 0.20); }
.contact-map__tag {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(20, 42, 80, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-card);
  font-size: 13px; color: #fff;
}
.contact-map__pin { color: var(--gold-500); }

/* ============================================================
   Quote / enquiry form card (.qform)
   ============================================================ */
.qform { width: 100%; }

.qform__card {
  padding: 36px;
  background: #fff;
  border: 1px solid var(--line-300);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

.qform__title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 24px; line-height: 1.2; color: var(--ink-900);
}
.qform__sub { margin-top: 8px; font-size: 14.5px; color: var(--ink-500); }

.qform__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 18px;
}

.qform__group { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.qform__row .qform__group { margin-top: 0; }
.qform__group--full { margin-top: 16px; }

.qform__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink-500);
}

.qform__input {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line-300);
  border-radius: var(--r-input);
  outline: none;
  transition: border-color 0.2s var(--ease-standard),
    box-shadow 0.2s var(--ease-standard);
}
.qform__input::placeholder { color: var(--ink-400); }
.qform__input:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(30, 58, 102, 0.12);
}
.qform__textarea {
  resize: vertical; min-height: 110px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5;
}

/* Honeypot — kept in the DOM but off-screen for bots only. */
.qform__hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.qform__error {
  margin-top: 14px;
  font-size: 13.5px; line-height: 1.4; color: var(--red-600);
}

.qform__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 22px;
}
.qform__btn { text-decoration: none; }
.btn[disabled], .btn:disabled { opacity: 0.6; cursor: not-allowed; }

.qform__note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 18px;
  font-size: 12.5px; color: var(--ink-500);
}
.qform__note-icon { color: var(--ink-400); margin-top: 1px; }

/* ---- Success state ---- */
.qform__card--success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding-block: 48px;
}
.qform__success-icon { width: 46px; height: 46px; color: var(--whatsapp); }
.qform__card--success .qform__btn { margin-top: 10px; }

/* ============================================================
   Responsive — single 900px breakpoint
   ============================================================ */
@media (max-width: 900px) {
  .contact__layout { grid-template-columns: 1fr; gap: 40px; }
  /* Form first on mobile, then the cards (matches the Flutter order). */
  .contact__form-col { order: -1; }
  .qform__card { padding: 24px; }
}

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