/* Contact: the person first (portrait, call, WhatsApp), then the form, then
   the office. One column on a phone; from 64em the person and the office sit
   in a narrow column beside the form. */
@layer page {
  .contact { padding-bottom: var(--sp-6); }
  .contact__head { padding-top: var(--sp-3); margin-bottom: var(--sp-6); }
  .contact__head h1 { max-width: 20ch; }
  .contact__head .section__lead { margin-top: var(--sp-3); }

  .contact__layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }

  /* The person */
  .contact__reach { display: grid; gap: var(--sp-5); align-content: start; }
  .contact__agent img { width: 4.5rem; height: 4.5rem; }
  .contact__agent .agent__name { font-size: var(--fs-l); }
  .contact__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

  /* Facts: a label above each value, the values in ink */
  .contact__facts { display: grid; gap: var(--sp-3); }
  .contact__facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
  .contact__facts dd { font-weight: 600; line-height: 1.6; }
  .contact__facts a { color: var(--ink); text-decoration: none; }
  .contact__facts a:hover { text-decoration: underline; text-underline-offset: 0.14em; }
  .contact__where { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
  .contact__booking { color: var(--ink-2); }

  /* The office */
  .contact__office { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
  .contact__office h2 { font-size: var(--fs-l); }
  .contact__address { font-style: normal; line-height: 1.5; }
  .contact__map { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }

  @media (min-width: 64em) {
    .contact__head { padding-top: var(--sp-5); }
    .contact__layout {
      grid-template-columns: 20rem minmax(0, 44rem);
      grid-template-areas: "reach form" "office form";
      column-gap: var(--sp-8);
      row-gap: var(--sp-7);
      justify-content: start;
      align-items: start;
    }
    .contact__reach { grid-area: reach; }
    .contact__panel { grid-area: form; }
    .contact__office { grid-area: office; }
  }
}

/* The office map (map.js): a fixed box, so nothing shifts when it loads. */
@layer page {
  .contact__mapframe { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: var(--stone-2); overflow: hidden; display: grid; place-items: center; align-content: center; gap: var(--sp-3); padding: var(--sp-4); text-align: center; }
  .contact__mapframe .maplibregl-map { position: absolute; inset: 0; }
  .contact__mapframe[data-ready] { padding: 0; }
}