/*----------------------------------------------------------------
  BBC Industrial Services — Our Global Network (SVG map)
  ----------------------------------------------------------------
  Interactive Global Presence section: a hand-built SVG map of India
  + UAE (no globe, no third-party map API) with animated location
  pins on the left, and a vertical list of company cards on the right.

  Loaded AFTER main.css + theme.css + bbc-features.css. Additive only —
  bbc- prefix, semantic design tokens with safe fallbacks, light/dark
  aware. Brand accent for pins/highlights: #EC5F24.
-----------------------------------------------------------------*/

.bbc-network-area {
  --bbc-net-accent: #EC5F24;
  --bbc-net-accent-soft: rgba(236, 95, 36, 0.14);
}

/*==================================================
  1. LAYOUT
==================================================*/
.bbc-net-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 34px;
  align-items: stretch;
}

/* Reveal on scroll (.bbc-in added by inline observer) */
.bbc-net-map-col,
.bbc-net-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
    border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.bbc-network-area.bbc-in .bbc-net-map-col,
.bbc-network-area.bbc-in .bbc-net-card { opacity: 1; transform: translateY(0); }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(1) { transition-delay: .04s; }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(2) { transition-delay: .08s; }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(3) { transition-delay: .12s; }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(4) { transition-delay: .16s; }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(5) { transition-delay: .20s; }
.bbc-network-area.bbc-in .bbc-net-card:nth-child(n+6) { transition-delay: .24s; }

/*==================================================
  2. MAP PANEL
==================================================*/
.bbc-net-list-col { min-width: 0; }

.bbc-net-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 698;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, #ffffff 0%, #f3f6fb 46%, #eaeff7 100%);
  border: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.05));
  box-shadow: var(--bbc-shadow-card, 0 15px 50px rgba(0, 0, 0, 0.05));
  isolation: isolate;
}

/* Soft ambient gradient blobs (subtle depth, requested background element) */
.bbc-net-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.bbc-net-blob-1 { width: 46%; height: 46%; left: -8%; top: 4%;
  background: radial-gradient(circle, rgba(236, 95, 36, 0.18), transparent 70%); }
.bbc-net-blob-2 { width: 52%; height: 52%; right: -10%; bottom: -6%;
  background: radial-gradient(circle, rgba(43, 78, 143, 0.20), transparent 70%); }

.bbc-net-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* Scene group that pans/zooms toward the active pin */
.bbc-net-scene {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-box: view-box;
  transform-origin: center;
  will-change: transform;
}

.bbc-net-dots { pointer-events: none; }

.bbc-net-land {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 10px 16px rgba(38, 48, 104, 0.22));
  transition: opacity 0.3s ease;
}

.bbc-net-link {
  fill: none;
  stroke: var(--bbc-net-accent);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

/*==================================================
  3. PINS
==================================================*/
.bbc-net-pin { cursor: pointer; }
.bbc-net-pin:focus { outline: none; }

.bbc-net-pin-dot {
  fill: var(--bbc-net-accent);
  stroke: #ffffff;
  stroke-width: 2.4;
  transition: transform 0.3s ease, fill 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.bbc-net-pin-ring {
  fill: none;
  stroke: var(--bbc-net-accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bbc-net-pin-halo {
  fill: var(--bbc-net-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.35);
}

/* hover / keyboard focus */
.bbc-net-pin:hover .bbc-net-pin-dot,
.bbc-net-pin:focus-visible .bbc-net-pin-dot { transform: scale(1.25); }
.bbc-net-pin:hover .bbc-net-pin-ring,
.bbc-net-pin:focus-visible .bbc-net-pin-ring { opacity: 0.6; transform: scale(0.9); }

/* active (selected) */
.bbc-net-pin.is-active .bbc-net-pin-dot { transform: scale(1.35); }
.bbc-net-pin.is-active .bbc-net-pin-ring { opacity: 0.85; transform: scale(1); }
.bbc-net-pin.is-active .bbc-net-pin-halo { animation: bbc-net-halo 1.8s ease-out infinite; }

@keyframes bbc-net-halo {
  0%   { opacity: 0.5; transform: scale(0.4); }
  70%  { opacity: 0;   transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.25); }
}

/* HQ base dot reads a touch larger */
.bbc-net-pin.is-hq .bbc-net-pin-dot { stroke-width: 2.8; }

/*==================================================
  4. TOOLTIP (glass info card over the map)
==================================================*/
.bbc-net-tip {
  position: absolute;
  z-index: 4;
  top: 0; left: 0;
  min-width: 150px;
  max-width: 220px;
  padding: 11px 14px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--bbc-bg-elevated, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
  box-shadow: 0 14px 34px rgba(20, 25, 40, 0.18);
  transform: translate(-50%, -128%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.bbc-net-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -128%);
}
/* flipped below the pin (when the pin is near the top edge) */
.bbc-net-tip.is-below { transform: translate(-50%, 34%) translateY(6px); }
.bbc-net-tip.is-below.is-visible { transform: translate(-50%, 34%); }
.bbc-net-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
  border-bottom: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
}
.bbc-net-tip.is-below::after {
  bottom: auto; top: -6px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
  border-top: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
}
.bbc-net-tip-name {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--bbc-text-heading, #1F1F1F);
}
.bbc-net-tip-loc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--bbc-text-body, #616161);
}
.bbc-net-tip-tag {
  display: inline-block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bbc-net-accent);
  background: var(--bbc-net-accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

/*==================================================
  5. COMPANY LIST (right)
==================================================*/
.bbc-net-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 560px;
  overflow-y: auto;
  padding: 4px 8px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--bbc-border-strong, #D2D2D2) transparent;
}
.bbc-net-list::-webkit-scrollbar { width: 6px; }
.bbc-net-list::-webkit-scrollbar-thumb {
  background: var(--bbc-border-strong, #D2D2D2); border-radius: 6px;
}

.bbc-net-card {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  text-align: start;
  cursor: pointer;
  border: 1px solid var(--bbc-border, rgba(0, 0, 0, 0.06));
  border-inline-start: 3px solid transparent;
  border-radius: 15px;
  background: color-mix(in srgb, var(--bbc-bg-elevated, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px var(--bbc-shadow-color, rgba(0, 0, 0, 0.07));
}

.bbc-net-card:hover,
.bbc-net-card.is-map-hover {
  border-color: rgba(236, 95, 36, 0.4);
  border-inline-start-color: var(--bbc-net-accent);
  box-shadow: 0 12px 28px rgba(236, 95, 36, 0.14);
  transform: translateX(4px);
}

.bbc-net-card.is-active {
  border-color: var(--bbc-net-accent);
  border-inline-start-color: var(--bbc-net-accent);
  background: linear-gradient(120deg, var(--bbc-net-accent-soft), transparent 90%);
  box-shadow: 0 14px 32px rgba(236, 95, 36, 0.18);
}
.bbc-net-card:focus-visible {
  outline: 2px solid var(--bbc-net-accent);
  outline-offset: 2px;
}

.bbc-net-card-logo {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bbc-border-soft, #F1F1F1);
  display: flex; align-items: center; justify-content: center;
}
.bbc-net-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.bbc-net-card-fallback {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font: 700 15px/1 inherit;
  color: var(--bbc-text-body, #616161);
  background: var(--bbc-bg-surface, #F7F7F7);
}

.bbc-net-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bbc-net-card-name {
  font-weight: 600; font-size: 14.5px; line-height: 1.3;
  color: var(--bbc-text-heading, #1F1F1F);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bbc-net-card-loc {
  font-size: 12.5px; color: var(--bbc-text-body, #616161);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbc-net-card-loc .fa-location-dot { color: var(--bbc-net-accent); font-size: 11px; margin-inline-end: 3px; }

.bbc-net-card-tag {
  flex: none;
  font-size: 11px; font-weight: 600;
  color: var(--bbc-text-muted, rgba(97, 97, 97, 0.54));
  white-space: nowrap;
}
.bbc-net-card-tag.is-hq-tag {
  color: #fff; background: var(--bbc-net-accent);
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.05em;
}
.bbc-net-card.is-active .bbc-net-card-tag:not(.is-hq-tag) { color: var(--bbc-net-accent); }

/*==================================================
  6. DARK MODE
==================================================*/
html[data-theme="dark"] .bbc-net-map-wrap {
  background: radial-gradient(120% 120% at 18% 12%, #1b2331 0%, #141a24 60%, #10151d 100%);
}
html[data-theme="dark"] .bbc-net-land { stroke: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .bbc-net-blob-1 { opacity: 0.55; }
html[data-theme="dark"] .bbc-net-card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .bbc-net-card-logo { background: #E9EDF2; border-color: transparent; }
html[data-theme="dark"] .bbc-net-card-fallback { background: #E9EDF2; color: #333; }

/*==================================================
  7. RESPONSIVE
==================================================*/
/* Tablet & below: stack — map first, then the list */
@media (max-width: 991px) {
  .bbc-net-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bbc-net-list { max-height: none; overflow: visible; }
}

/* Mobile: horizontally scrollable company cards under the map */
@media (max-width: 575px) {
  .bbc-net-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .bbc-net-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .bbc-net-card:hover, .bbc-net-card.is-map-hover { transform: none; }
  .bbc-net-list::-webkit-scrollbar { height: 6px; }
}

/*==================================================
  8. REDUCED MOTION
==================================================*/
@media (prefers-reduced-motion: reduce) {
  .bbc-net-map-col, .bbc-net-card, .bbc-net-scene,
  .bbc-net-pin-dot, .bbc-net-pin-ring, .bbc-net-tip {
    transition: none !important;
  }
  .bbc-net-pin.is-active .bbc-net-pin-halo { animation: none; }
}