/* Image placeholder — vector "no image" icon on a soft surface, palette-driven.
   Fills its parent image box; the icon sits centered and scales with the box. */
.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft logo-grey wash — light enough to feel calm, but still distinct
       from the white card so the placeholder reads as its own area. */
    background-color: color-mix(in srgb, var(--c-grey-light) 45%, white);
    overflow: hidden;
}

/* For wrappers that establish their size via a padding-ratio box (the image
   has no intrinsic height there) — fill the box absolutely. */
.image-placeholder--absolute {
    position: absolute;
    inset: 0;
}

.image-placeholder__icon {
    display: block;
    width: clamp(72px, 38%, 150px);
    height: auto;
    /* Match the real photo's hover zoom (the card scales it via :hover). */
    transition: transform 0.3s ease;
}