/* ==========================================================================
   Tour Ceylon +94 — Static map
   Ported from the static design's pages.css. Every length, colour and
   duration resolves through a theme.json token, so Global Styles still
   re-skins this section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Static map — a locally stored OpenStreetMap image, no third-party embed
   -------------------------------------------------------------------------- */
.tc94-map__canvas {
  position: relative;
  height: var(--wp--custom--map--height);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--md);
  background-color: var(--wp--preset--color--surface-subtle);
}

/* Cover-cropped from the centre outwards, so the office stays dead centre
   at every width and the marker below needs no per-breakpoint nudging. */
.tc94-map__canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The image is generated centred on the office. The badge is therefore
   lifted by its own height plus the gap, which leaves its pointer dot
   sitting exactly on the centre of the image. */
.tc94-map__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wp--custom--map--marker-size);
  height: var(--wp--custom--map--marker-size);
  transform: translate(-50%, calc(-100% - var(--wp--preset--spacing--20)));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--pill);
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--custom--color--on-accent);
  box-shadow: var(--wp--custom--shadow--md);
}

.tc94-map__marker .tc94-icon {
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
}

.tc94-map__marker::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--wp--preset--spacing--20));
  left: 50%;
  width: var(--wp--preset--spacing--30);
  height: var(--wp--preset--spacing--30);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 2px solid var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--pill);
  background-color: var(--wp--preset--color--accent);
}

.tc94-map__foot {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  justify-items: start;
  margin-top: var(--wp--preset--spacing--50);
  max-width: var(--wp--custom--measure--prose);
}

.tc94-map__note {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--text-muted);
}

.tc94-map__note strong { color: var(--wp--custom--color--text); }

/* Attribution. Required by the OpenStreetMap licence — keep it visible. */
.tc94-map__credit {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--custom--color--text-subtle);
}

.tc94-map__credit a { color: inherit; }
.tc94-map__credit a:hover { color: var(--wp--preset--color--ocean-deep); }