/* ════════════════════════════════════════════════════════════════════
 * wpins/map — mapa Google z bramką zgody.
 * Domyślnie placeholder; view.js dodaje <iframe> + klasę .is-loaded po zgodzie (i usuwa po cofnięciu).
 * ════════════════════════════════════════════════════════════════════ */
.wpins-gmap {
  position: relative;
  aspect-ratio: var(--wpins-gmap-ar, 16 / 9);
  margin: 1.5rem 0;
  border: 1px solid var(--color-wpins-border, #e8e8e8);
  background: var(--color-wpins-alt, #f7f5f2);
  overflow: hidden;
}
/* Mobile: 16/9 jest za niskie na wąskim ekranie — placeholder (tytuł + zgoda + przycisk) się nie mieści.
   Wyłączamy proporcje, dajemy wysokość mieszczącą treść; po wczytaniu iframe i tak wypełnia (inset:0). */
@media (max-width: 640px) {
  .wpins-gmap { aspect-ratio: auto; min-height: 360px; }
}
.wpins-gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.wpins-gmap__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1.5rem; text-align: center;
  color: var(--color-wpins-text);
}
.wpins-gmap.is-loaded .wpins-gmap__placeholder { display: none; }
.wpins-gmap__ph-ico { color: var(--color-wpins-accent-text, #e52528); }
.wpins-gmap__ph-title { margin: 0.2rem 0 0; font-family: var(--font-wpins-heading); font-weight: 800; font-size: 1.15rem; color: var(--color-wpins-heading); }
.wpins-gmap__ph-text { margin: 0; max-width: 34ch; font-size: 0.85rem; line-height: 1.5; color: var(--color-wpins-text-muted); }

/* CTA „Pokaż mapę" — styl marki (jasne tło: border ink-90, hover wypełnia; dark: biały border). */
.wpins-gmap__btn {
  margin-top: 0.6rem; min-height: 44px; padding: 0.5rem 1.2rem;
  font-family: var(--font-wpins-ui); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  background: none; border: 2px solid var(--color-wpins-ink-90, #1a1a1a); color: var(--color-wpins-ink-90, #1a1a1a);
  cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.wpins-gmap__btn:hover { background: var(--color-wpins-ink-90, #1a1a1a); color: #fff; }
[data-theme="dark"] .wpins-gmap__btn { border-color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.92); }
[data-theme="dark"] .wpins-gmap__btn:hover { background: #fff; color: #000; }
@media (prefers-reduced-motion: reduce) { .wpins-gmap__btn { transition: none; } }