/* 360 viewer - Photo Sphere Viewer
   Overgenomen uit WP Codebox (sc3.studiocoda.dev) en omgezet naar ACSS-tokens.
   Deze classes worden door het 360-viewer-script zelf gegenereerd (niet aan Etch-blocks gekoppeld),
   daarom in een stylesheet. De PSV-basis-CSS (core + markers-plugin) laadt het script van Viewer360 Wrapper. */

.marker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.marker-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-m);
  font-weight: 600;
  line-height: var(--heading-line-height);
  color: var(--text-light);
}

.marker-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.marker-text {
  margin: 0;
  line-height: var(--text-line-height);
}

/* Links in het panel (o.a. .marker-link): een regel, licht op de donkere PSV-achtergrond.
   Vervangt de blauwe .marker-body a + witte .marker-link !important uit de WP-versie. */
.marker-body a {
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: calc(var(--border-size) * 2);

  &:hover {
    color: var(--accent);
  }
}

.marker-body img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius);
}

/* Pulserende markers: alleen de opacity knippert, het icoon blijft even groot (zoals de WP-versie). */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.psv-marker--has-content {
  animation: pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .psv-marker--has-content {
    animation: none;
  }
}