/**
 * FooGallery Mosaic Layout
 * File: wp-content/themes/genesis-sample/css/gallery-mosaic.css
 * v2.0.0
 *
 * Overrides FooGallery's masonry column-width system for gallery #55571.
 * All positioning is handled by gallery-mosaic.js.
 */

/* ── Neutralize FooGallery's masonry column-width variable ──────────────── */
/* FooGallery masonry sets --fg-column-width per breakpoint and uses it to
   control item width. We reset it to auto so our JS-set widths win.        */
#foogallery-gallery-55571 {
  --fg-column-width: auto !important;
  position: relative !important;
}

/* ── Kill FooGallery's inline-block / float layout on items ─────────────── */
#foogallery-gallery-55571 .fg-item {
  display:   block    !important;
  float:     none     !important;
  position:  absolute !important;
  margin:    0        !important;
  /* width/height/left/top are set by JS */
  overflow:  hidden;
  box-sizing: border-box;
}

/* ── Make inner figure/anchor fill the JS-sized cell ────────────────────── */
#foogallery-gallery-55571 .fg-item .fg-item-inner,
#foogallery-gallery-55571 .fg-item figure {
  width:  100% !important;
  height: 100% !important;
  margin: 0    !important;
  padding: 0   !important;
}

#foogallery-gallery-55571 .fg-item a.fg-thumb {
  display: block   !important;
  width:   100%    !important;
  height:  100%    !important;
  overflow: hidden;
}

#foogallery-gallery-55571 .fg-item .fg-image-wrap {
  display: block !important;
  width:   100%  !important;
  height:  100%  !important;
}

#foogallery-gallery-55571 .fg-item img.fg-image {
  width:           100%   !important;
  height:          100%   !important;
  object-fit:      cover  !important;
  object-position: center !important;
  display:         block  !important;
  max-width:       none   !important;
}

/* ── Shape classes applied by JS ─────────────────────────────────────────── */

#foogallery-gallery-55571 .fg-item.gm-tall-rect,
#foogallery-gallery-55571 .fg-item.gm-small-rect {
  border-radius: 18px !important;
}
#foogallery-gallery-55571 .fg-item.gm-tall-rect a.fg-thumb,
#foogallery-gallery-55571 .fg-item.gm-small-rect a.fg-thumb {
  border-radius: 18px !important;
}

#foogallery-gallery-55571 .fg-item.gm-circle {
  border-radius: 50% !important;
}
#foogallery-gallery-55571 .fg-item.gm-circle a.fg-thumb {
  border-radius: 50% !important;
}

/* ── FooGallery's own .fg-round-medium on the container adds 10px radius ── */
/* to .fg-item — override it so our per-item shapes are in full control.     */
#foogallery-gallery-55571.fg-round-medium .fg-item,
#foogallery-gallery-55571.fg-round-medium .fg-item-inner {
  border-radius: 0 !important;
}