/* === Contact map — Mapbox GL custom markers + cross-hover sync ===
   Markery generowane w JS z markup'em:
     <div class="map-pin [map-pin--main]" data-unit-id="...">
         <span class="map-pin__label">Nazwa biura</span>
         <span class="map-pin__dot"></span>
     </div>

   Centrala (map-pin--main) ma większy primary dot z pulse animation; pozostałe oddziały
   secondary color, mniejsze. is-hover (lub :hover) — scale-up + zmiana koloru, sync wzajemny
   z .office-card.is-hover. */

.map-pin {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    /* Bottom anchor punktu na markerze — Mapbox stawia top-left elementu na lng/lat,
       ale my chcemy że dokładny punkt to środek dotu na dole. Margin-bottom kompensuje. */
    transform: translate(0, 0);
    transition: transform 0.2s ease;
}

.map-pin__label {
    background: white;
    color: var(--color-on-surface);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* żeby hover na całym .map-pin nie był blokowany przez label */
}

.map-pin__dot {
    width: 12px;
    height: 12px;
    background: var(--color-secondary);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

/* Centrala — większa, pulsująca, primary color. */
.map-pin--main .map-pin__dot {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    animation: map-pin-pulse 2.5s ease-in-out infinite;
}

.map-pin--main .map-pin__label {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* === Hover state ===
   :hover — bezpośredni hover myszką na markerze.
   .is-hover — dodawane przez JS gdy user hover'uje odpowiadającą kartę office-card. */
.map-pin:hover,
.map-pin.is-hover {
    transform: scale(1.08);
    z-index: 2; /* nad innymi pinami przy nakładaniu */
}

.map-pin:hover .map-pin__dot,
.map-pin.is-hover .map-pin__dot {
    background: var(--color-primary);
    transform: scale(1.4);
    box-shadow: 0 4px 12px rgba(176, 0, 30, 0.4);
}

.map-pin:hover .map-pin__label,
.map-pin.is-hover .map-pin__label {
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: scale(1.05);
}

@keyframes map-pin-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .map-pin,
    .map-pin__dot,
    .map-pin__label,
    .map-pin--main .map-pin__dot {
        transition: none;
        animation: none;
    }
}

/* === Office card sync — gdy JS doda is-hover (z hovera pinu na mapie) =====
   Visual highlight zwiniętej karty żeby user wiedział "to jest biuro pod tym pinem".
   Expanded card już jest podświetlona; dodajemy delikatny outline na primary. */
.office-card.is-hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(176, 0, 30, 0.12), var(--shadow-sm);
}