/* JR Media Float Box – Thumbnail Size Override
   Goal: make thumbnail tiles slightly smaller so more fits comfortably inside the floating box.

   If you ever need to tweak the size:
   - change --jr-mfb-thumb (tile size)
   - change --jr-mfb-gap (gap between tiles)
*/

:root{
  /* Smaller than our first attempt (which could enlarge tiles if your default was already small). */
  --jr-mfb-thumb: 55px;
  --jr-mfb-gap: 7px;
}

/* Try a few likely wrappers/IDs/classes used by the JR Media Float Box */
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
){
  /* keep this scoped – we only set variables here */
  --jr-mfb-thumb: 55px;
  --jr-mfb-gap: 7px;
}

/* Common grid containers */
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
)
:is(
  .jrmfb-grid,
  .jrmfb-media-grid,
  .jrmfb-thumb-grid,
  .jrmfb-items,
  .jrmfb-thumbs,
  .jrmfb-gallery,
  .jrmfb-list
){
  gap: var(--jr-mfb-gap) !important;
}

/* Tile wrappers (a variety of possible classnames) */
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
)
:is(
  .jrmfb-item,
  .jrmfb-thumb,
  .jrmfb-tile,
  .jrmfb-media-item,
  .jrmfb-media-thumb,
  .jrmfb-gallery-item,
  .jrmfb-grid-item
){
  width: var(--jr-mfb-thumb) !important;
  height: var(--jr-mfb-thumb) !important;
}

/* Images inside the tiles */
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
)
:is(
  .jrmfb-item,
  .jrmfb-thumb,
  .jrmfb-tile,
  .jrmfb-media-item,
  .jrmfb-media-thumb,
  .jrmfb-gallery-item,
  .jrmfb-grid-item
) img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Fallback: if the markup doesn’t use the above classnames, still try to shrink
   the most common “thumbnail cards”: any img inside the floatbox where the image
   is inside a square tile wrapper. This is intentionally conservative. */
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
) .jrmfb-scroll img,
:is(
  #jrmfb-floating-box,
  #jr-media-floatbox,
  #jr-media-float-box,
  .jrmfb-box,
  .jrmfb-floating-box,
  .jr-media-floatbox,
  .jr-media-float-box,
  .jr-media-float,
  [id^="jrmfb-"],
  [class^="jrmfb-"],
  [id*="jrmfb"],
  [class*="jrmfb"]
) .jrmfb-body img{
  max-width: var(--jr-mfb-thumb) !important;
  max-height: var(--jr-mfb-thumb) !important;
  border-radius: 16px !important;
}