/* Blurred placeholders (public/blurph.js). The image itself arrives as an inline
   background-image on the tile; these rules only say how it sits there and when it goes.

   !important because the tile's own rules use the `background` shorthand (and several themes
   restate it), which would otherwise reset size and position back to a 32px tile in the corner. */
[data-blur] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* A video card keeps its category badge under the poster as the fallback for no poster. With
   the blur there, there is already a picture, so the badge would only float over it. */
[data-blur] > .badge:not(.img-fb) { visibility: hidden; }

/* The thumbnail failed after all: drop the blur and let the badge be what it always was. */
[data-blur]:has(> img.hidden) { background-image: none !important; }
[data-blur]:has(> img.hidden) > .badge { visibility: visible; }

/* A selected photo shrinks inside its frame and the frame shows the theme's selection tint;
   the blur would fill that frame with the picture's colours instead. */
.ph-item.selected[data-blur] { background-image: none !important; }