/* ──────────────────────────────────────────────
   TRU Realty — contact.css
   Contact page only. The form controls themselves (.enquire-field,
   .enquire-form) are defined in base.css and shared with the modal; this file
   styles the page around them.
   ────────────────────────────────────────────── */

/* ─────────────  LAYOUT  ───────────── */

/* The hero above is position:sticky with its content on z-index 3, so every
   section that scrolls over it needs its own stacking context. Without this
   the hero stays painted on top and the page reads as blank. Matches
   .press-awards and the other post-hero sections in home.css. */
.contact-main {
  padding: var(--s-9) 0;
  background: var(--paper);
  position: relative;
  z-index: 1;
}

/* Details column is narrower than the form: it is scannable reference, the
   form is the thing we want the visitor to actually do. */
.contact-main__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-7), 6vw, var(--s-10));
  align-items: start;
}

@media (max-width: 900px) {
  .contact-main { padding: var(--s-8) 0; }
  .contact-main__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

/* ─────────────  DETAILS COLUMN  ───────────── */

.contact-details__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  margin: var(--s-3) 0 var(--s-5);
}

.contact-details__lede {
  color: var(--mute);
  font-size: var(--fs-lede);
  line-height: var(--lh-prose);
  margin: 0 0 var(--s-8);
  max-width: 46ch;
}

.contact-block {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.contact-block:last-of-type { border-bottom: 1px solid var(--line); }

.contact-block__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute-2);
  margin: 0 0 var(--s-3);
}

.contact-block__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: var(--lh-prose);
  color: var(--ink);
}

.contact-block__body a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.contact-block__body a:hover,
.contact-block__body a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Directions sits under the address as a quieter secondary action. */
.contact-block__aside {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-block__aside a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-block__aside a:hover,
.contact-block__aside a:focus-visible { border-bottom-color: var(--gold); }

/* ─────────────  SOCIAL  ───────────── */

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-2);
}
.contact-social svg { flex: none; }

/* ─────────────  FORM CARD  ───────────── */

.contact-form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(26px, 3.4vw, 44px);
}

.contact-form__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  margin: var(--s-2) 0 var(--s-3);
}

.contact-form__intro {
  color: var(--mute);
  font-size: 0.95rem;
  line-height: var(--lh-base);
  margin: 0 0 var(--s-6);
  max-width: 42ch;
}

/* The inputs sit on --paper-2 in the modal. Inside this card the card itself
   is --paper-2, so they need to lift back to --paper to stay distinguishable. */
.contact-form .enquire-field input { background: var(--paper); }

.contact-form__done {
  text-align: center;
  padding: var(--s-6) 0 var(--s-4);
}
.contact-form__done:focus { outline: none; }
.contact-form__done h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.contact-form__done p {
  color: var(--mute);
  line-height: var(--lh-prose);
  margin: 0;
}

/* Pre-JS fallback: the form is injected by enquire.js, so give the mount a
   sensible height instead of collapsing the card while it loads. */
.contact-form__mount:empty { min-height: 320px; }

/* ─────────────  MAP  ───────────── */

.contact-map {
  padding: 0 0 var(--s-9);
  background: var(--paper);
  position: relative;
  z-index: 1;
}

.contact-map__head {
  margin: 0 0 var(--s-5);
}

.contact-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  /* Maps ship their own bright chrome; a touch of desaturation keeps the
     embed from shouting next to the rest of the page. */
  filter: saturate(0.9);
}

.contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 700px) {
  .contact-map { padding-bottom: var(--s-8); }
  .contact-map__frame { aspect-ratio: 4 / 3; }
}