/* ==========================================================================
   International Portfolio (world map)
   Map labels show only the country name; the details card appears on
   hover / focus / tap (portfolio.js). Coordinates are % of the 848×706 map box.
   ========================================================================== */
.portfolio {
  position: relative;
  padding: 40px 0 64px;
}
@media (min-width: 1024px) {
  .portfolio {
    padding-bottom: 80px;
  }
}

.portfolio__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: clip;
  padding: 40px 20px 0;
  border: 1px solid rgba(32, 73, 137, 0.07);
  border-radius: 28px;
  background: var(--white);
}
@media (min-width: 768px) {
  .portfolio__card {
    padding: 48px 40px 0;
  }
}
@media (min-width: 1280px) {
  .portfolio__card {
    flex-direction: row;
    padding: 64px 64px 0;
  }
}

/* ---- Title + stats ---- */
.portfolio__intro {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1280px) {
  .portfolio__intro {
    width: 321px;
    gap: 80px;
  }
}
.portfolio__title {
  font-weight: var(--fw-regular);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: var(--crimson);
}
.portfolio__br {
  display: none;
}
@media (min-width: 768px) {
  .portfolio__title {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1.2px;
  }
}
@media (min-width: 1280px) {
  .portfolio__br {
    display: block;
  }
}

.portfolio__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}
@media (min-width: 640px) {
  .portfolio__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .portfolio__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 80px;
  }
}
.portfolio__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.portfolio__stat-value {
  font-weight: var(--fw-news);
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.04em;
}
@media (min-width: 768px) {
  .portfolio__stat-value {
    font-size: 72px;
    line-height: 80px;
  }
}
.portfolio__stat-label {
  font-weight: var(--fw-news);
  font-size: 14px;
  line-height: 18px;
  color: var(--muted);
}

/* ---- Map rail: scrolls sideways below md ---- */
.portfolio__rail {
  min-width: 0;
  margin-inline: -20px;
  padding-inline: 20px;
  overflow-x: auto;
}
@media (min-width: 768px) {
  .portfolio__rail {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}
@media (min-width: 1280px) {
  .portfolio__rail {
    flex: 1 1 0%;
  }
}

.portfolio__map {
  --label-scale: 1;
  position: relative;
  width: 100%;
  min-width: 640px;
  aspect-ratio: 848 / 706;
  overflow: clip;
}
@media (min-width: 768px) {
  .portfolio__map {
    min-width: 0;
  }
}
@media (min-width: 1280px) {
  .portfolio__map {
    max-width: 848px;
  }
}

/* Figma's 1200×706 "Partner highlights" frame, offset −167px inside the map box. */
.portfolio__layer {
  position: absolute;
  top: 0.11%;
  left: -19.693%;
  width: 141.509%;
  height: 100%;
}
.portfolio__world {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio__overlay {
  position: absolute;
  inset: var(--inset);
  transition:
    opacity 0.3s,
    filter 0.3s;
}
.portfolio__overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* The pins layer bleeds slightly past its frame in Figma. */
.portfolio__overlay--pins img {
  top: -0.12%;
  left: -0.16%;
  width: 100.32%;
  height: 100.24%;
}
/* Hovering a country's dots opens its card too. */
.portfolio__overlay--country {
  pointer-events: auto;
}
.portfolio__overlay.is-lit {
  filter: drop-shadow(0 0 6px rgba(49, 180, 231, 0.75));
}

/* ---- Pin pulse ---- */
.portfolio__pulse {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 10px;
  height: 10px;
  pointer-events: none;
  translate: -50% -50%;
}
.portfolio__pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--sky);
  border-radius: 50%;
  background: rgba(49, 180, 231, 0.3);
  animation: portfolio-pulse 2.4s ease-out calc(var(--i) * 0.35s) infinite backwards;
}
@keyframes portfolio-pulse {
  from {
    opacity: 0.7;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio__pulse {
    display: none;
  }
}

/* ---- Country labels ---- */
.portfolio__labels {
  position: absolute;
  inset: 0;
}
.portfolio__label {
  position: absolute;
  top: var(--y);
  left: var(--x);
  translate: -50% 0;
}
/* Labels keep their Figma size at 848px map width and shrink with the map below that. */
.portfolio__label-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  white-space: nowrap;
  box-shadow: 0 6px 16px -10px rgba(18, 41, 77, 0.35);
  scale: var(--label-scale);
  transform-origin: top;
  transition:
    border-color 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    translate 0.3s var(--ease-out-expo);
}
.portfolio__label-btn:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 20px -10px rgba(18, 41, 77, 0.45);
}
.portfolio__label-btn.is-active {
  border-color: var(--navy-40);
}
.portfolio__label-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--sky-20);
  font-size: 12px;
  line-height: 16px;
  color: var(--navy);
}
.portfolio__label-name {
  font-size: 16px;
  line-height: 20px;
  color: var(--navy);
}

/* Entrance: overlays fade, then labels pop in (portfolio.js); hidden only while JS runs. */
.js .portfolio__overlay,
.js .portfolio__label-in {
  opacity: 0;
}

/* ---- Details card (fixed, positioned by portfolio.js) ---- */
.portfolio__tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 220px;
  pointer-events: none;
  visibility: hidden;
}
.portfolio__tip-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(18, 41, 77, 0.4);
  animation: portfolio-tip-in 0.18s var(--ease-out-expo);
}
@keyframes portfolio-tip-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio__tip-card {
    animation: none;
  }
}
.portfolio__tip-region {
  font-size: 12px;
  line-height: 16px;
  color: var(--navy-60);
  text-transform: uppercase;
}
.portfolio__tip-name {
  font-size: 16px;
  line-height: 20px;
  color: var(--navy);
}
.portfolio__tip-gap {
  height: 4px;
}
.portfolio__tip-partner {
  font-weight: var(--fw-news);
  font-size: 16px;
  line-height: 20px;
  color: var(--navy);
}
.portfolio__tip-activity {
  font-weight: var(--fw-news);
  font-size: 14px;
  line-height: 18px;
  color: var(--muted);
}