/* Striped placeholder utility used throughout the site for missing media */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.02) 0 14px,
      rgba(255,255,255,0.06) 14px 28px
    ),
    #1a1a1a;
  color: rgba(255,255,255,0.55);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ph.light {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.02) 0 14px,
      rgba(0,0,0,0.05) 14px 28px
    ),
    #e8e4dc;
  color: rgba(0,0,0,0.45);
}
.ph > .ph-label {
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
  border-radius: 2px;
  margin: 12px;
  backdrop-filter: blur(4px);
}
.ph.light > .ph-label { background: rgba(255,255,255,0.65); color: rgba(0,0,0,0.6); }

/* ─────────────────────────────────────────────────────────────
   Skeleton — animated loading placeholder for stat cards, map,
   listings, etc. while live API data is in flight.
   ───────────────────────────────────────────────────────────── */
.relux-skeleton {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: relux-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.relux-skeleton--block { display: block; }

@keyframes relux-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .relux-skeleton { animation: none; background: rgba(255,255,255,0.06); }
}