/* ============================================
   TEAM CLOSING — MAP
   Content split: copy column (1/3) + interactive
   D3 world map (2/3) on desktop; stacks on tablet
   and mobile. Map adapts colors to section bg.
   ============================================ */

/* ─── Grid layout ─────────────────────────────────────────── */
.tcm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .tcm__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-3xl);
  }
}

/* ─── Copy column ─────────────────────────────────────────── */
.tcm__copy {
  color: var(--clr-text-inverse);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  /* Prevent uppercase Barlow Condensed from blowing the track wider
     than the grid container (gotchas §18.1 / §18.2). */
  min-width: 0;
}

@media (min-width: 1024px) {
  .tcm__copy {
    margin: 0;
    text-align: left;
  }
}

.tcm__eyebrow {
  margin: 0 0 var(--space-md);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--clr-brand-accent);
}

.tcm__heading {
  margin: 0 0 var(--space-lg);
  line-height: 1.0;
  letter-spacing: 0.018em;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.tcm__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-text-inverse);
}

.tcm__heading-line2 {
  display: block;
  font-weight: 400;
  color: var(--clr-brand-accent);
  letter-spacing: 0;
  font-size: 0.82em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.tcm__body {
  margin: 0 auto;
  max-width: 600px;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--clr-text-inverse);
  opacity: 0.82;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .tcm__body { font-size: 17px; }
}

@media (min-width: 1024px) {
  .tcm__body { margin: 0; }
}

.tcm__cta-wrap {
  margin-top: var(--space-xl);
}

.tcm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--space-xl);
  background: var(--clr-text-inverse);
  color: var(--clr-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tcm__btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.tcm__btn:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

/* ─── Light background overrides for the copy column ───────
   On light section backgrounds, swap text + button colors so the
   content remains legible. Mirrors the design guide §4 rules. */
.tcm.bg-white .tcm__copy,
.tcm.bg-neutral-light .tcm__copy,
.tcm.bg-neutral-lighter .tcm__copy,
.tcm.bg-accent-warm .tcm__copy,
.tcm.bg-card-secondary .tcm__copy,
.tcm.bg-accent-soft .tcm__copy,
.tcm.bg-card-primary .tcm__copy,
.tcm.bg-surface .tcm__copy,
.tcm.bg-page .tcm__copy { color: var(--clr-text-primary); }

.tcm.bg-white .tcm__eyebrow,
.tcm.bg-neutral-light .tcm__eyebrow,
.tcm.bg-neutral-lighter .tcm__eyebrow,
.tcm.bg-accent-warm .tcm__eyebrow,
.tcm.bg-card-secondary .tcm__eyebrow,
.tcm.bg-accent-soft .tcm__eyebrow,
.tcm.bg-card-primary .tcm__eyebrow,
.tcm.bg-surface .tcm__eyebrow,
.tcm.bg-page .tcm__eyebrow,
.tcm.bg-white .tcm__heading-line2,
.tcm.bg-neutral-light .tcm__heading-line2,
.tcm.bg-neutral-lighter .tcm__heading-line2,
.tcm.bg-accent-warm .tcm__heading-line2,
.tcm.bg-card-secondary .tcm__heading-line2,
.tcm.bg-accent-soft .tcm__heading-line2,
.tcm.bg-card-primary .tcm__heading-line2,
.tcm.bg-surface .tcm__heading-line2,
.tcm.bg-page .tcm__heading-line2 { color: var(--clr-primary); }

.tcm.bg-white .tcm__heading-line1,
.tcm.bg-neutral-light .tcm__heading-line1,
.tcm.bg-neutral-lighter .tcm__heading-line1,
.tcm.bg-accent-warm .tcm__heading-line1,
.tcm.bg-card-secondary .tcm__heading-line1,
.tcm.bg-accent-soft .tcm__heading-line1,
.tcm.bg-card-primary .tcm__heading-line1,
.tcm.bg-surface .tcm__heading-line1,
.tcm.bg-page .tcm__heading-line1,
.tcm.bg-white .tcm__body,
.tcm.bg-neutral-light .tcm__body,
.tcm.bg-neutral-lighter .tcm__body,
.tcm.bg-accent-warm .tcm__body,
.tcm.bg-card-secondary .tcm__body,
.tcm.bg-accent-soft .tcm__body,
.tcm.bg-card-primary .tcm__body,
.tcm.bg-surface .tcm__body,
.tcm.bg-page .tcm__body { color: var(--clr-text-secondary); opacity: 1; }

.tcm.bg-white .tcm__btn,
.tcm.bg-neutral-light .tcm__btn,
.tcm.bg-neutral-lighter .tcm__btn,
.tcm.bg-accent-warm .tcm__btn,
.tcm.bg-card-secondary .tcm__btn,
.tcm.bg-accent-soft .tcm__btn,
.tcm.bg-card-primary .tcm__btn,
.tcm.bg-surface .tcm__btn,
.tcm.bg-page .tcm__btn {
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
}

/* ─── Map container ───────────────────────────────────────── */
.tcm__map-wrap {
  min-width: 0;
}

.tcm__map-container {
  position: relative;
  width: 100%;
  /* Map color palette — defaults to the dark-section palette.
     Light-bg overrides come below this block. */
  --tcm-land:           rgba(253, 252, 250, 0.07);
  --tcm-land-stroke:    rgba(253, 252, 250, 0.18);
  --tcm-market:         var(--clr-brand-accent);
  --tcm-market-stroke:  rgba(60, 66, 46, 0.55);
  --tcm-market-hover:   #d6c89a;
  --tcm-pin:            var(--clr-text-inverse);
  --tcm-graticule:      rgba(253, 252, 250, 0.06);
  --tcm-tooltip-bg:     var(--clr-primary);
  --tcm-tooltip-text:   var(--clr-text-inverse);
}

/* Light-section overrides — darker land, olive markets, dark tooltip. */
.tcm.bg-white .tcm__map-container,
.tcm.bg-neutral-light .tcm__map-container,
.tcm.bg-neutral-lighter .tcm__map-container,
.tcm.bg-accent-warm .tcm__map-container,
.tcm.bg-card-secondary .tcm__map-container,
.tcm.bg-accent-soft .tcm__map-container,
.tcm.bg-card-primary .tcm__map-container,
.tcm.bg-surface .tcm__map-container,
.tcm.bg-page .tcm__map-container {
  --tcm-land:           rgba(60, 66, 46, 0.08);
  --tcm-land-stroke:    rgba(60, 66, 46, 0.22);
  --tcm-market:         var(--clr-primary);
  --tcm-market-stroke:  rgba(60, 66, 46, 0.6);
  --tcm-market-hover:   var(--clr-brand-alt);
  --tcm-pin:            var(--clr-primary);
  --tcm-graticule:      rgba(60, 66, 46, 0.07);
  --tcm-tooltip-bg:     var(--clr-primary);
  --tcm-tooltip-text:   var(--clr-text-inverse);
}

.tcm__map {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Map SVG element styles ──────────────────────────────── */
.tcm__sphere { fill: transparent; }

.tcm__graticule {
  fill: none;
  stroke: var(--tcm-graticule);
  stroke-width: 0.3;
}

.tcm__country {
  fill: var(--tcm-land);
  stroke: var(--tcm-land-stroke);
  stroke-width: 0.4;
  transition: fill 0.2s ease;
}

.tcm__country--market {
  fill: var(--tcm-market);
  stroke: var(--tcm-market-stroke);
  cursor: pointer;
}

.tcm__country--market:hover,
.tcm__country--market.is-lit {
  fill: var(--tcm-market-hover);
}

.tcm__pin { cursor: pointer; }

.tcm__pin-outer {
  fill: var(--tcm-pin);
  opacity: 0.22;
  transition: opacity 0.2s ease;
}

.tcm__pin-inner { fill: var(--tcm-pin); }

.tcm__pin:hover .tcm__pin-outer { opacity: 0.42; }

/* ─── Tooltip ─────────────────────────────────────────────── */
.tcm__tooltip {
  position: absolute;
  background: var(--tcm-tooltip-bg);
  color: var(--tcm-tooltip-text);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  z-index: 2;
}

.tcm__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tcm-tooltip-bg);
}

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tcm__country,
  .tcm__pin-outer,
  .tcm__btn,
  .tcm__tooltip { transition: none; }
}