/*
 * Alf Theme — Home Page Presence / Map Stats Section
 * Figma node: 665:7098
 *
 * India map with 9 clickable pin overlays. Active pin shows a red ring.
 * A dark tooltip card is anchored at Figma position (403,430) within the map.
 * An SVG connector line runs from the active pin centre to the card notch.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.presence {
  background-color: var(--color-bg);
  padding: 160px var(--section-pad-x);
}

.presence__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
}

.presence__rule {
  width: 100%;
  height: 1px;
  background-color: rgba(12, 12, 12, 0.15);
  border: none;
  margin: 0;
}

.presence__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   MAP COLUMN
   ═══════════════════════════════════════════════════════════════════ */
.presence__map-wrap {
  position: relative;
  flex-shrink: 0;
  width: 610px;
  height: 629px;
}

/* Inline SVG map — replaces the old india-map.png <img>.
   preserveAspectRatio="none" on the SVG element stretches it to fill
   the fixed 610×629 container so JS connector-line pixel coords remain valid. */
.presence__map-svg {
  display: block;
  width: 610px;
  height: 629px;
}

/* Theme the state paths */
.presence__map-svg path {
  fill: var(--color-bg);
  stroke: rgba(0, 0, 0, 0.18);
  /* viewBox 2500×2843 rendered at 610px — scale ≈0.244; 5 units ≈ 1.2px */
  stroke-width: 5;
  fill-rule: nonzero;
}

/* ── Clickable pin overlays ─────────────────────────────────────────
   Each 36×36 button wraps an inline SVG pin icon. The icon colour
   transitions from dark-grey (inactive) to primary red (active/hover). */
.presence__pin {
  position: absolute;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 3px;
}

/* Inline SVG icon inside each pin button */
.presence__pin-icon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-dark);
  transition: color 0.2s ease;
}

.presence__pin:hover .presence__pin-icon,
.presence__pin--active .presence__pin-icon {
  color: var(--color-primary);
}

.presence__pin::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid transparent;
  transition: border-color 0.2s ease;
  pointer-events: none;
}

.presence__pin:hover::after {
  border-color: rgba(205, 38, 29, 0.5);
}

.presence__pin--active::after {
  border-color: var(--color-primary);
}

/* ── SVG connector line ─────────────────────────────────────────── */
.presence__connector {
  position: absolute;
  top: 0;
  left: 0;
  width: 610px;
  height: 629px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

/* ── Tooltip / plant info card ──────────────────────────────────────
   Fixed at Figma position (left:403, top:430) inside the 610px map.
   Top-left corner is notched via clip-path where the connector meets. */
.presence__tooltip {
  position: absolute;
  background: #252525;
  color: #ffffff;
  padding: 15px 17px 15px 20px;
  width: 264px;
  min-height: 127px;
  z-index: 4;
  box-sizing: border-box;
  clip-path: polygon(16px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 16px);
}

.presence__tooltip-list {
  list-style: disc;
  margin: 0;
  padding-left: 22px;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.presence__tooltip-list li {
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS COLUMN
   ═══════════════════════════════════════════════════════════════════ */
.presence__stats {
  flex-shrink: 0;
  width: 437px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.presence__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
}

.presence__heading .accent {
  color: var(--color-primary);
}

.presence__stats-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.presence__stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.presence__stat-value {
  font-size: 58px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.16px;
  color: var(--color-dark);
  margin: 0;
}

.presence__stat-label {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  color: var(--color-dark);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .presence {
    padding: 120px var(--section-pad-x);
  }

  .presence__main {
    gap: 40px;
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  .presence__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
  }

  .presence__stats {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .presence {
    padding: 80px var(--section-pad-tab-portrait);
  }

  .presence__map-wrap {
    width: 100%;
    max-width: 610px;
    height: auto;
    aspect-ratio: 610 / 629;
  }

  .presence__map-img {
    width: 100%;
    height: 100%;
  }

  .presence__pin,
  .presence__connector,
  .presence__tooltip {
    display: none;
  }
}

@media (max-width: 480px) {
  .presence {
    padding: 60px var(--section-pad-mobile);
  }

  .presence__stat-value {
    font-size: 44px;
  }

  .presence__heading {
    font-size: 28px;
  }
}