/* Image placeholder used wherever a card/visual has no photo yet (event cards, event detail,
   product, portfolio, homepage panels). Warm gradient with a soft red glow and the Hippocrates
   figure from the logo as a faint watermark. Replaces the prototype's striped StripePanel.
   Enqueued on every page by hipp_enqueue_placeholder_assets().
   .hipp-ph / .hipp-ph-dark are for markup that only needs the placeholder (homepage panels). */

.hipp-ph,
.hipp-ev-media:not(.has-image),
.hipp-ev-visual:not(.has-image),
.hipp-pr-visual:not(:has(img)),
.hipp-pf-media:not(:has(img)) {
  position: relative;
  background-color: #EAE1E4;
  background-image:
    radial-gradient(110% 85% at 100% 0%, rgba(227,6,19,.13) 0%, rgba(227,6,19,0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(87,87,86,.12) 0%, rgba(87,87,86,0) 60%),
    linear-gradient(155deg, #F6F0F2 0%, #DCD2D5 100%);
}

/* Watermark: only the oval with the figure (the logo's top 75%, so no wordmark), toned down */
.hipp-ph::after,
.hipp-ev-media:not(.has-image)::after,
.hipp-ev-visual:not(.has-image)::after,
.hipp-pr-visual:not(:has(img))::after,
.hipp-pf-media:not(:has(img))::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: clamp(64px, 30%, 200px); aspect-ratio: 545 / 362; transform: translate(-50%, -50%);
  background: url("images/hipp-mark.png") center top / 100% auto no-repeat;
  filter: grayscale(1) sepia(.85) saturate(.9);
  opacity: .13; mix-blend-mode: multiply; pointer-events: none;
}
/* Content inside the placeholder (badges, dates, labels) stays above the watermark */
.hipp-ph > *, .hipp-ev-media > *, .hipp-ev-visual > *, .hipp-pr-visual > *, .hipp-pf-media > * { z-index: 1; }

/* Labels on the placeholder: quiet text, no white box */
.hipp-ph .hipp-stripe-label, .hipp-ev-media .hipp-stripe-label,
.hipp-ev-visual .hipp-stripe-label, .hipp-pr-visual .hipp-stripe-label {
  background: rgba(246,240,242,.75) !important; color: #575756 !important; backdrop-filter: blur(2px);
}

/* Homepage panels carry an old descriptive label; the placeholder speaks for itself */
.hipp-ph > .hipp-stripe-label { display: none; }

/* Dark variant (homepage online-module video panel) */
.hipp-ph.hipp-ph-dark {
  background-color: #3E3D3D;
  background-image:
    radial-gradient(110% 85% at 100% 0%, rgba(227,6,19,.28) 0%, rgba(227,6,19,0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(155deg, #635F61 0%, #3E3D3D 100%);
}
.hipp-ph.hipp-ph-dark::after { filter: grayscale(1) brightness(1.6); opacity: .10; mix-blend-mode: screen; }