/*
   Zaslepka w miejscu osadzonej mapy Google, pokazywana gdy nie ma zgody na
   cookies. Musi wypelnic ten sam kontener co iframe, wiec pozycjonujemy ja
   absolutnie wzgledem rodzica — .trip-locate__map i .google-map maja juz
   ustalone wymiary i position: relative (patrz nizej, gdyby nie mialy).
   Logika: scripts/map-embed.js.
*/

.trip-locate__map,
.google-map {
  position: relative;
}

.map-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: inherit;
  background: var(--color-soft-bg);
  text-align: center;
  font-family: "Work Sans", -apple-system, "Helvetica Neue", sans-serif;
}

.map-facade__text {
  margin: 0;
  max-width: 28rem;
  color: var(--color-muted-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.map-facade__btn {
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.map-facade__btn:hover {
  background: var(--color-primary-deep);
}

.map-facade__btn:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* Karta treningu ma wlasna, mniejsza mape - ten sam mechanizm zaslepki. */
.trip-training-card__map {
  position: relative;
}