/**
 * Contact and map.
 *
 * The two-column layout is the kit's `.split` (1fr 1fr, centred, stacking at
 * 860px), so none of that is repeated here. What is new is the map well itself
 * in both of its states, and the small stack of copy above the actions.
 *
 * The map is sized by `aspect-ratio` rather than a `min-height` in pixels: a
 * ratio is geometry and needs no token, whereas the mock-up's 420px is a design
 * value this file is not allowed to carry. 4/3 lands within a few pixels of the
 * approved height at the container width, and behaves better when the columns
 * stack.
 *
 * Every class is prefixed `contact-map__`, per AGENTS.md §2.
 */

.contact-map__heading { margin-block: var(--s-3) var(--s-3); }

.contact-map__body > p { color: var(--ink-soft); }
.contact-map__body > p + p { margin-block-start: var(--s-3); }

.contact-map__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}

.contact-map__meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--text-s);
  color: var(--ink-soft);
}

.contact-map__meta svg {
  inline-size: var(--s-3);
  block-size: var(--s-3);
  flex: none;
  color: var(--blue);
  /* Optical alignment with the first line of the label, in em so it tracks the
     type rather than a fixed offset. */
  margin-block-start: 0.2em;
}

.contact-map__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.contact-map__frame,
.contact-map__placeholder {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.contact-map__frame {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
}

.contact-map__frame iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* The deliberate, labelled fallback. Dashed rather than solid so it reads as a
   placeholder at a glance and nobody mistakes it for a map that failed to load. */
.contact-map__placeholder {
  border: 2px dashed var(--blue-tint-20);
  background: linear-gradient(160deg, var(--blue-tint-10), var(--blue-tint-05));
  display: grid;
  place-items: center;
  padding: var(--s-5);
  text-align: center;
  color: var(--blue);
}

.contact-map__pin {
  inline-size: var(--s-6);
  block-size: var(--s-6);
  margin-inline: auto;
  margin-block-end: var(--s-3);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-m);
  display: grid;
  place-items: center;
}

.contact-map__pin svg {
  inline-size: var(--s-4);
  block-size: var(--s-4);
}

.contact-map__placeholder b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-base);
}

.contact-map__placeholder small {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
}