/* Map band — global reach. Inline full-width vector map (defines band height); heading/body overlaid left.
   The map's baked office pills (Figma ids) get an active state: transparent .map-band__hotspot buttons sit over
   each pill; the active office's pill background/text/crosshair are recoloured and its .map-band__card is shown. */
.map-band {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  height: 100vh; /* full viewport height, then JS pins the section to scroll the map */
  background: var(--color-alabaster); /* motif reveals the map against the alabaster brand bg (not the ocean teal) */
}
.map-band__media {
  position: relative;
}

/* Desktop: the map spans the FULL viewport width; its height follows the map aspect
   (1920×1083) so the %-positioned hotspots/cards keep their alignment. Vertically centred
   in the 100vh section — any band above/below reads as ocean via the section's water bg
   (taller viewports crop top/bottom under overflow:hidden). */
@media (min-width: 769px) {
  .map-band__media {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1083;
    transform: translateY(-50%);
    /* Shave the SVG's ~3px light artboard sliver (canvas 1083px vs ocean fill 1080px). */
    clip-path: inset(0 0 0.3% 0);
  }
  .map-band__svg,
  .map-band__svg svg {
    width: 100%;
    height: 100%; /* box already carries the map's aspect, so the SVG fills it edge-to-edge */
  }
  .map-band__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ── Motif-mask reveal (desktop, opt-in) ────────────────────────────────────
   map-zoom.js adds .is-map-zoom (>=769px, motion allowed) and scrubs mask-size +
   mask-position inline as the section pins: the map is clipped to the TTW dot-motif
   silhouette (--mb-mask, set on .map-band in PHP), which first glides from the top
   down to the centre, then scales up until the full map shows. These are just the
   frame-0 values — JS overrides them on scroll. JS-gated so mobile / reduced-motion
   users keep the unmasked map. */
.map-band.is-map-zoom .map-band__media {
  -webkit-mask-image: var(--mb-mask);
  mask-image: var(--mb-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Start: a small, fluid motif (~99px) near the top, centred horizontally. */
  --mb-motif-size: clamp(5rem, 4rem + 2.4vw, 6.1875rem); /* ≈ 99px on desktop, scales down a touch */
  -webkit-mask-position: 50% 6%;
  mask-position: 50% 6%;
  -webkit-mask-size: auto var(--mb-motif-size);
  mask-size: auto var(--mb-motif-size);
}
.map-band__svg {
  display: block;
  width: 100%;
  font-size: 0;
}
.map-band__svg svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-band__img {
  display: block;
  width: 100%;
  height: auto;
}

.map-band__inner {
  position: absolute;
  inset: 0;
  align-content: center;
  padding-block: var(--section-pad);
  pointer-events: none;
}
.map-band__copy {
  grid-column: 1 / 5;
  pointer-events: auto;
}
.map-band__heading {
  font-size: var(--text-h2);
  margin: 0 0 var(--sp-5xl);
  color: var(--color-white);
}
.map-band__body {
  margin: 0;
  font-size: var(--text-body-main);
}

/* Transparent click/keyboard targets sized to each baked SVG pill (positions set inline, % of the map box). */
.map-band__hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.map-band__hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 3px;
  transition: transform 0.25s ease;
}
.map-band__hotspot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
/* Active office — highlight the hotspot area (white ring + soft clay glow) and scale it up
   a bit. NB: font-size only bites once the button holds an icon/label. */
.map-band__hotspot[aria-pressed="true"] {
  font-size: 30px;
  transform: scale(1.15);

}
@media (prefers-reduced-motion: reduce) {
  .map-band__hotspot {
    transition: none;
  }
}

/* Active-area tiles — pixel-squares clustered around the active pin (tagged .mb-near in JS).
   Recolour to clay + a slight pop so the region reads as "lit". Radius is data-area-radius on .map-band. */
/* Contact page: no water band (About uses background="water"), so render the map white
   against the light section bg instead of the baked cream/ocean fills. Active tiles keep clay. */
.is-contact .map-band__svg path:not(.mb-near) {
  fill: var(--color-white);
}
.map-band__svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.45s ease,
    transform 0.45s ease;
}
.map-band__svg path.mb-near {
  fill: var(--color-clay);
  transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
  .map-band__svg path {
    transition: fill 0.45s ease;
  }
  .map-band__svg path.mb-near {
    transform: none;
  }
}

/* Active office — recolour the baked SVG pill (background + text + crosshair).
   IDs come from about-global-reach-map.svg (Figma export). If that SVG is re-exported, update these mappings. */
.map-band[data-active="singapore"] [id="Rectangle 41"] rect,
.map-band[data-active="jakarta"] [id="Rectangle 42"] rect,
.map-band[data-active="brisbane"] [id="Rectangle 43"] rect,
.map-band[data-active="sydney"] [id="Rectangle 44"] rect,
.map-band[data-active="canberra"] [id="Rectangle 45"] rect,
.map-band[data-active="melbourne"] [id="Rectangle 46"] rect {
  fill: var(--color-clay);
}
.map-band[data-active="singapore"] [id="Singapore"] path,
.map-band[data-active="melbourne"] [id="Melbourne"] path,
.map-band[data-active="jakarta"] [id="Jakarta"],
.map-band[data-active="brisbane"] [id="Brisbane"],
.map-band[data-active="sydney"] [id="Sydney"],
.map-band[data-active="canberra"] [id="Canberra"] {
  fill: #ffffff;
}
.map-band[data-active="singapore"] [id="Group 35"] line,
.map-band[data-active="jakarta"] [id="Group 41"] line,
.map-band[data-active="brisbane"] [id="Group 42"] line,
.map-band[data-active="sydney"] [id="Group 43"] line,
.map-band[data-active="canberra"] [id="Group 44"] line,
.map-band[data-active="melbourne"] [id="Group 45"] line {
  stroke: var(--color-clay);
}

/* Active office — grow the pill bubble + its label a touch to emphasise the selection.
   The marker <g>/<path>s carry no transform attribute (positioned by absolute coords),
   so fill-box scaling grows them in place; the transition animates both directions. */
.map-band [id="Rectangle 41"],
.map-band [id="Rectangle 42"],
.map-band [id="Rectangle 43"],
.map-band [id="Rectangle 44"],
.map-band [id="Rectangle 45"],
.map-band [id="Rectangle 46"],
.map-band [id="Singapore"],
.map-band [id="Jakarta"],
.map-band [id="Brisbane"],
.map-band [id="Sydney"],
.map-band [id="Canberra"],
.map-band [id="Melbourne"] {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease;
}
.map-band[data-active="singapore"] :is([id="Rectangle 41"], [id="Singapore"]),
.map-band[data-active="jakarta"] :is([id="Rectangle 42"], [id="Jakarta"]),
.map-band[data-active="brisbane"] :is([id="Rectangle 43"], [id="Brisbane"]),
.map-band[data-active="sydney"] :is([id="Rectangle 44"], [id="Sydney"]),
.map-band[data-active="canberra"] :is([id="Rectangle 45"], [id="Canberra"]),
.map-band[data-active="melbourne"] :is([id="Rectangle 46"], [id="Melbourne"]) {
  transform: scale(1.12);
}

/* Detail card for the active office — top-right over the map on desktop.
   The cards layer reuses the same .container.grid as .map-band__inner (full-bleed overlay),
   so the active card lands on grid columns 11 / -1, mirroring the copy at 1 / 5. */
.map-band__cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  align-content: start;
  padding-block: var(--section-pad, 3rem);
  pointer-events: none;
}
.map-band__card {
  grid-column: 11 / -1;
  pointer-events: auto;
  background: var(--color-clay);
  color: var(--color-white);
  padding: 2rem;
  min-width: 15.375rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.map-band__card[hidden] {
  display: none;
}
.map-band__card-name {
  margin: 0 0 var(--sp-md);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--color-white);
} /* 24px — matches Figma office card */
.map-band__card-address {
  margin: 0 0 var(--sp-xs);
  font-size: var(--text-body-sm);
  line-height: var(--lh-lg);
}
.map-band__card-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--text-body-sm);
}
.map-band__card-phone > span {
  position: relative;
}
/* Underline wipes in from the left on hover — same behaviour as .link-arrow. */
.map-band__card-phone > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.map-band__card-phone:hover > span::after,
.map-band__card-phone:focus-visible > span::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .map-band__card-phone > span::after {
    transition: none;
  }
}

/* New-location reveal — when a different office is shown, the active card's content
   (office name first) slides up + fades in. Pure CSS: the card flips display:none → grid
   as it gains .is-active, which restarts the animation. No motion under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .map-band__card.is-active > * {
    animation: map-card-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .map-band__card.is-active > *:nth-child(2) {
    animation-delay: 0.07s;
  }
  .map-band__card.is-active > *:nth-child(3) {
    animation-delay: 0.14s;
  }
}
@keyframes map-card-rise {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  /* Stack: map (with pills) on top, copy, then the active office card. */
  .map-band__inner {
    position: static;
    padding-block: clamp(1.5rem, 6vw, 2.5rem) var(--sp-20);
    pointer-events: auto;
  }
  .map-band__copy {
    grid-column: 1 / -1;
  }
  .map-band__heading {
    font-size: var(--text-h3);
  }
  .map-band__cards {
    position: static;
    align-content: start;
    padding-block: 0 var(--section-pad);
  }
  .map-band__card {
    grid-column: 1 / -1;
  }
}