/* Offices — layout and map motion only. Type sizes, colours and the map frame width are in the
   Style tab (City, Address, Maps). */

.tc-w-offices {
  padding: 96px 0 48px;
}

.tc-w-offices__title {
  margin: 0;
}

.tc-w-offices__grid {
  display: grid;
  gap: 0;
}

/* Copy grows, map keeps a fixed frame (design 432 × 350) and sits on the row's bottom edge. */
.tc-w-offices__card {
  display: flex;
  align-items: flex-end;
  gap: var(--tc-gutter, 24px);
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--tangerine-charcoal, #262626);
}

.tc-w-offices__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.tc-w-offices__city,
.tc-w-offices__address {
  margin: 0;
}

.tc-w-offices__btn {
  display: inline-flex;
}

/* Clickable map: fixed crop; the image zooms on hover and drifts with the pointer (script.js). */
.tc-w-offices__map {
  display: block;
  flex: none;
  width: var(--tc-map-w, 432px);
  aspect-ratio: 432 / 350;
  overflow: hidden;
  cursor: pointer;
}

.tc-w-offices__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: var(--tc-map-x, 0px) var(--tc-map-y, 0px);
  scale: 1;
  transition:
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tc-w-offices__map:is(:hover, :focus-visible) img {
  scale: var(--tc-map-zoom, 1.08);
}

.tc-w-offices__map:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .tc-w-offices {
    padding: 64px 0 40px;
  }

  .tc-w-offices__copy {
    gap: 16px;
  }
}

/* Phone: copy and a smaller map stay side by side, as in the mobile design. */
@media (max-width: 600px) {
  .tc-w-offices {
    padding: 40px 0 32px;
  }

  .tc-w-offices__card {
    gap: 16px;
    padding: 8px 0 16px;
  }

  .tc-w-offices__copy {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-w-offices__map img {
    translate: none;
    transition: none;
  }

  .tc-w-offices__map:is(:hover, :focus-visible) img {
    scale: 1;
  }
}