/* ==========================================================================
   JALON THAILAND — GET IN TOUCH
   Page-specific only; load after jalon-shell.css.

   1. Layout       3. Quote form
   2. Offices      4. Map          5. Responsive

   .fig columns on the 1280 container: 626 offices + 28 gutter + 626 form.
   ========================================================================== */

/* 1. Layout --------------------------------------------------------------- */
.contact-page { padding: 108px 0 var(--sp-96); }
.contact-page__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 626px));
  gap: 28px; align-items: start; justify-content: space-between;
}
.contact-page__title { margin-top: 19px; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; }
/* Same eyebrow pill as Our Story (.fig: 41px tall, radius 10) */
.contact-eyebrow {
  display: inline-flex; align-items: center; height: 41px; padding: 0 25px;
  border-radius: 10px; background: rgba(238,179,13,.1);
  font-size: var(--fs-body); line-height: 1; text-transform: uppercase; color: var(--gold);
}

/* 2. Offices -------------------------------------------------------------
   One .office per location; the two-up pair (India / UAE) is a nested grid,
   so adding an office in WordPress never breaks the layout. */
.office-list { margin-top: 40px; }
.office { padding-bottom: var(--sp-24); }
.office + .office { padding-top: var(--sp-24); border-top: 1px solid var(--hairline); }
.office__name { font-size: 18px; font-weight: 700; line-height: 24px; }
.office__lines {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px; margin-top: 18px;
}
.office__line { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.office__icon { width: 18px; height: 19px; margin-top: 3px; color: var(--gold); }
.office__icon svg { display: block; width: 100%; height: 100%; }
/* 16px minimum for body copy — the .fig's own size for these lines */
.office__text { font-size: var(--fs-body); line-height: 24px; color: var(--ink-soft); }
.office__text b { font-weight: 700; color: var(--ink); }
.office__text a { color: var(--ink-soft); }
.office__text a:hover { color: var(--gold); }
/* India + UAE sit side by side under one rule, as in the .fig */
.office-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.office-pair .office { padding-top: var(--sp-24); border-top: 1px solid var(--hairline); }
.office-pair .office__lines { grid-template-columns: minmax(0, 1fr); }

/* Social card: .fig 626 × 94, #5D5D5D, radius 10 */
.social-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24);
  min-height: 94px; padding: 0 30px; border-radius: 10px; background: var(--grey-panel);
}
.social-card__label { font-size: 20px; font-weight: 700; color: var(--gold); }
.social-card__links { display: flex; gap: 4px; }
.social-card__links a {
  display: grid; place-items: center; width: 51px; height: 51px; border-radius: 50%;
  background: rgba(238,179,13,.1); color: var(--gold);
  transition: background-color 160ms ease, transform 160ms var(--ease);
}
.social-card__links a:hover { background: var(--gold); color: #FFFFFF; transform: translateY(-2px); }
/* Inline SVG, so currentColor drives both states from the anchor's color */
.social-card__links svg { width: 21px; height: 21px; display: block; }

/* 3. Quote form ----------------------------------------------------------
   Only the panel itself lives here. The fields, validation states, submit
   pill and status line are the shared form component in jalon-shell.css —
   the sample-request modal uses the same ones. */
.quote-form { padding: 34px; border-radius: 10px; background: #F8F8F8; }
.quote-form__title { font-size: 36px; font-weight: 700; line-height: 1; }
.quote-form__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 10px; margin-top: 30px;
}

/* 4. Map -----------------------------------------------------------------
   A live Google Maps embed, not a picture of one. .fig: 1283 × 561, radius 10. */
.contact-map {
  display: block; width: 100%; height: 561px; margin-top: 48px;
  border: 0; border-radius: 10px;
}

/* 5. Responsive ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .contact-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
  .quote-form { padding: var(--sp-24); }
  .contact-map { height: 480px; }
}

@media (max-width: 1024px) {
  .contact-page { padding: 72px 0 var(--sp-64); }
  /* Offices above the form, both full width */
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .contact-map { height: 420px; margin-top: var(--sp-32); }
}

@media (max-width: 768px) {
  .office__lines { grid-template-columns: minmax(0, 1fr); }
  .office-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .office-pair .office:last-child { padding-bottom: 0; }
  /* One column of fields — two would put the labels under 13px */
  .quote-form__grid { grid-template-columns: minmax(0, 1fr); }
  .quote-form__title { font-size: 28px; }
  .social-card { flex-direction: column; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-24) 20px; }
  .contact-map { height: 360px; }
}

@media (max-width: 480px) {
  .contact-eyebrow { height: 34px; padding: 0 16px; font-size: var(--fs-small); }
  .social-card__links a { width: 44px; height: 44px; }
  .contact-map { height: 300px; }
}