/* My Harvest List — canonical venue-photo placeholder visual.
   Shared source of truth for venue fallback surfaces and pre-live loading shells. */
:root {
  --mhl-placeholder-base: #F1EEE8;
  --mhl-placeholder-glow: rgba(255,255,255,.88);
  --mhl-placeholder-soft-light: rgba(255,255,255,.34);
  --mhl-placeholder-sheen: rgba(255,255,255,.16);
  --mhl-placeholder-depth: rgba(34,34,34,.035);
}

.mhl-venue-placeholder {
  background:
    radial-gradient(circle at 48% 38%,
      var(--mhl-placeholder-glow) 0%,
      var(--mhl-placeholder-soft-light) 30%,
      rgba(255,255,255,0) 62%),
    linear-gradient(145deg,
      var(--mhl-placeholder-sheen) 0%,
      var(--mhl-placeholder-depth) 100%),
    var(--mhl-placeholder-base);
  background-color: var(--mhl-placeholder-base) !important;
}

/* Pre-live district-carousel shell. Reuses .c-tile-wrap/.c-tile geometry so
   every existing responsive card-width rule remains authoritative. */
.mhl-card-skeleton {
  cursor: default !important;
  pointer-events: none;
}

.mhl-card-skeleton .c-tile {
  box-shadow: none !important;
  transform: none !important;
}

.mhl-card-skeleton .c-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  animation: mhlPlaceholderSweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

.mhl-card-skeleton__meta {
  min-height: 42px;
}

.mhl-card-skeleton__line {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(34,34,34,.065);
}

.mhl-card-skeleton__line--name { width: 68%; }
.mhl-card-skeleton__line--sub  { width: 42%; height: 7px; }

@keyframes mhlPlaceholderSweep {
  0%, 18% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .mhl-card-skeleton .c-tile::after {
    animation: none;
    transform: none;
    opacity: .45;
  }
}