/* ============================================================
   18. Category image placeholders
   Shown when an event has no image_url, or when an image fails to load.
   Uses existing --cat-* colour variables from section 1.
   Phase 10: added shows category.
   ============================================================ */

.card-placeholder {
  position: relative;
  aspect-ratio: 16 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}

.card-image--hidden { display: none !important; }

.placeholder-icon {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.9;
}

.placeholder-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Per-category background + foreground colours */
.card-placeholder--cat-music     { background: color-mix(in srgb, var(--cat-music)     20%, var(--bg-elevated)); color: var(--cat-music);     }
.card-placeholder--cat-nightlife { background: color-mix(in srgb, var(--cat-nightlife) 15%, var(--bg-elevated)); color: var(--cat-nightlife); }
.card-placeholder--cat-arts      { background: color-mix(in srgb, var(--cat-arts)      20%, var(--bg-elevated)); color: var(--cat-arts);      }
.card-placeholder--cat-culture   { background: color-mix(in srgb, var(--cat-culture)   20%, var(--bg-elevated)); color: var(--cat-culture);   }
.card-placeholder--cat-food      { background: color-mix(in srgb, var(--cat-food)      20%, var(--bg-elevated)); color: var(--cat-food);      }
.card-placeholder--cat-sport     { background: color-mix(in srgb, var(--cat-sport)     20%, var(--bg-elevated)); color: var(--cat-sport);     }
.card-placeholder--cat-tech      { background: color-mix(in srgb, var(--cat-tech)      20%, var(--bg-elevated)); color: var(--cat-tech);      }
.card-placeholder--cat-community { background: color-mix(in srgb, var(--cat-community) 20%, var(--bg-elevated)); color: var(--cat-community); }
.card-placeholder--cat-family    { background: color-mix(in srgb, var(--cat-family)    20%, var(--bg-elevated)); color: var(--cat-family);    }
.card-placeholder--cat-shows     { background: color-mix(in srgb, var(--cat-shows)     20%, var(--bg-elevated)); color: var(--cat-shows);     }
.card-placeholder--cat-other     { background: color-mix(in srgb, var(--cat-other)     20%, var(--bg-elevated)); color: var(--cat-other);     }