/* World Map Grid Section */

.leadership-map-section {
  padding: var(--spacing-4xl) 0;
  overflow: hidden;
}

.world-map-container {
  position: relative;
  width: 100%;
  height: 700px;
  margin: var(--spacing-3xl) 0;
  background: #F8FAFB;
}

/* Ocean - sparse light dots */
.world-map-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(147, 181, 219, 0.3) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
}

/* Continents - dense navy dots forming map shapes */
.world-map-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #0B3D91 2.5px, transparent 2.5px);
  background-size: 20px 20px;
  clip-path: polygon(
    /* North America - taller */
    15% 15%, 18% 17%, 20% 20%, 23% 24%, 25% 28%, 26% 32%, 27% 36%, 28% 40%,
    27% 44%, 26% 48%, 24% 50%, 22% 51%, 20% 50%, 18% 48%, 16% 44%, 15% 40%,
    14% 35%, 14% 30%, 14% 25%, 14.5% 20%, 15% 15%,

    /* South America - more vertical space */
    24% 53%, 26% 56%, 27% 60%, 28% 65%, 29% 70%, 28% 75%, 27% 80%, 25% 83%,
    23% 81%, 22% 76%, 21% 70%, 21% 64%, 22% 59%, 23% 55%, 24% 53%,

    /* Europe */
    45% 18%, 48% 20%, 51% 22%, 53% 24%, 54% 27%, 53% 30%, 51% 31%, 49% 30%,
    47% 27%, 46% 24%, 45% 21%, 45% 18%,

    /* Africa - more height */
    47% 33%, 50% 37%, 52% 42%, 54% 48%, 55% 54%, 55% 61%, 54% 67%, 52% 72%,
    50% 75%, 48% 73%, 46% 68%, 45% 62%, 45% 55%, 45% 48%, 46% 41%, 47% 33%,

    /* Asia - larger, more spread */
    55% 14%, 60% 16%, 65% 18%, 70% 20%, 75% 23%, 80% 26%, 83% 29%, 85% 33%,
    86% 37%, 86% 42%, 85% 46%, 83% 49%, 80% 50%, 76% 50%, 72% 49%, 68% 47%,
    64% 44%, 60% 40%, 57% 35%, 55% 29%, 54% 22%, 55% 14%,

    /* Australia */
    76% 64%, 79% 66%, 82% 68%, 84% 70%, 85% 73%, 84% 76%, 82% 77%, 79% 76%,
    77% 74%, 75% 71%, 75% 67%, 76% 64%
  );
}

/* Map Points */
.map-point {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
  animation: point-appear 0.6s ease-out forwards;
}

.map-point[data-delay="0"] { animation-delay: 0.5s; }
.map-point[data-delay="200"] { animation-delay: 0.7s; }
.map-point[data-delay="400"] { animation-delay: 0.9s; }
.map-point[data-delay="600"] { animation-delay: 1.1s; }
.map-point[data-delay="800"] { animation-delay: 1.3s; }

@keyframes point-appear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Map Markers */
.map-marker {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  animation: marker-pulse 2s infinite;
}

.map-marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.global-marker {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0B3D91 0%, #2563EB 100%);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
}

.global-marker::before {
  width: 12px;
  height: 12px;
}

@keyframes marker-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* Map Text */
.map-text {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--color-border);
  min-width: 280px;
  text-align: center;
  transition: all var(--transition-base);
}

.map-text:hover {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-accent);
}

.map-text h4 {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}

.map-text p {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.global-text {
  min-width: 350px;
  background: linear-gradient(135deg, rgba(11, 61, 145, 0.98) 0%, rgba(37, 99, 235, 0.98) 100%);
  border: 2px solid var(--color-accent);
}

.global-text h4 {
  color: white;
  font-size: 20px;
}

.global-text p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

/* Regional Positions - adjusted for taller map */
.north-america {
  top: 45%;
  left: 20.5%;
}

.europe {
  top: 24%;
  left: 50%;
}

.europe .map-text {
  top: 50%;
  left: auto;
  right: 30px;
  transform: translateY(-50%);
}

.apac {
  top: 65%;
  left: 73%;
}

.middle-east {
  top: 50%;
  left: 55%;
}

.india {
  top: 55%;
  left: 66%;
}

.india .map-text {
  top: auto;
  bottom: 30px;
}

.global-center {
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
}

.global-center .map-text {
  top: -100px;
}

/* Leadership Footer */
.leadership-footer {
  text-align: center;
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 2px solid var(--color-border);
}

.leadership-footer p {
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.leadership-footer strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .map-text {
    min-width: 240px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .global-text {
    min-width: 300px;
  }

  .map-text h4 {
    font-size: 16px;
  }

  .map-text p {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .world-map-container {
    height: 550px;
  }

  .map-point {
    display: none;
  }

  .global-center {
    display: block;
    position: static;
    transform: none;
    margin: var(--spacing-xl) auto;
    width: 90%;
    max-width: 400px;
  }

  .global-center .map-marker {
    display: none;
  }

  .global-center .map-text {
    position: static;
    transform: none;
    min-width: auto;
    width: 100%;
  }

  .leadership-footer p {
    font-size: var(--font-size-base);
  }
}

/* No extra layers - keep it simple and crisp */

/* World Map Image */
.world-map-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
}

/* Hide old grid and SVG styles */
.world-map-grid,
.world-map-grid::before,
.world-map-svg {
  display: none;
}