/*****************************************************************************************************
* Fields Module: bub Gallery CSS
******************************************************************************************************/

/*
Common
---------------------------------------------------------------------------------------------------- */

/* General
--------------------------------------------- */

.gallery {
  visibility: hidden;
  margin: 1.2em 0;
}

.js .gallery {
  visibility: visible;
}

.bub-gallery-wrap {
  padding: 0;
}

.wp-block-gallery ul.blocks-gallery-grid {
  margin: 0;
}

.gallery .gallery-item {
  list-style: none;
  padding: 0 !important;
}

.gallery .gallery-item::before {
  display: none !important;
}

.gallery .gallery-item img {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
  
  /* Apply hardware acceleration to mitigate occasional rendering issues in Chrome. */
  transform: translate3d(0, 0, 1px);
}


/* Caption
--------------------------------------------- */

/* Gallery Caption: Common */

.bub-gallery-entry .gallery-caption {
  font-size: 0.85rem;
  -ms-hyphens: manual;
  -webkit-hyphens: manual; 
  -moz-hyphens: manual; 
  hyphens: manual;
  line-height: 1.3;
  pointer-events: none;
  word-break: break-word;
} 

/* Gallery Caption: 'Below Image' */

.bub-gallery-entry[data-bub-gallery-options*="textposition=below"] .gallery-caption {
  margin-top: 0.3em;
}

/* Gallery Caption: 'Overlay':
No overflow hidden on gallery items, causing issues with box shadows and more. */

.bub-gallery-entry[data-bub-gallery-options*="textposition=overlay"] .gallery-item {
  position: relative;
}

.bub-gallery-entry[data-bub-gallery-options*="textposition=overlay"] .gallery-caption {
  background: rgba(0,0,0,0.5);
  /*background: rgba(255,255,255,0.7);*/
  color: #fff;
  /*color: #111;*/
  padding: 0.6em 0.6em;
  margin: 0;
  position: absolute;
    bottom: 0;
  width: 100%;
  opacity: 0;
  transition: all 200ms;
}

.bub-gallery-entry[data-bub-gallery-options*="textposition=overlay"] 
  .gallery-item:hover .gallery-caption {
  opacity: 1;
  transition: all 400ms;
}


/*
Layout Setting
---------------------------------------------------------------------------------------------------- */

/* Layout: Masonry (JS)
--------------------------------------------- */

/* Prevent masonry items flickering on page load. */

.bub-gallery-entry[data-bub-gallery-options*="layout=masonry"] .gallery-item {
  opacity: 0;
}

.bub-gallery-entry[data-bub-gallery-options*="layout=masonry"] .bub-gallery-error .gallery-item {
  opacity: 1;
}


/* Layout: Modular (JS)
--------------------------------------------- */

/*.bub-gallery-entry[data-bub-gallery-options*="layout=modular"] .blocks-gallery-item img,*/
.bub-gallery-entry[data-bub-gallery-options*="layout=modular"] .gallery-item img {
  height: 100%; /* Fix: Firefox 63 */
  object-fit: cover;
  transform: translate3d(0, 0, 1px);
}


/* Layout: Columns
--------------------------------------------- */

.bub-gallery-entry[data-bub-gallery-options*="layout=coltop"] .bub-gallery-wrap {
  align-items: flex-start;
}


/* Layout: Regular Rows
--------------------------------------------- */

.bub-gallery-entry[data-bub-gallery-options*="layout=colbottom"] .bub-gallery-wrap {
  align-items: flex-end;
}


/* Layout: Fixed Height Rows
--------------------------------------------- */

.bub-gallery-entry[data-bub-gallery-options*="layout=rowfixed"] .bub-gallery-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.bub-gallery-entry[data-bub-gallery-options*="layout=rowfixed"] .gallery-item,
.bub-gallery-entry[data-bub-gallery-options*="layout=rowfixed"] .gallery-item img {
  width: auto !important;
}


/*
Other Settings
---------------------------------------------------------------------------------------------------- */

/* Hover Setting
--------------------------------------------- */

/* Transition:
Transitioning the 'transform' property (or 'all') on the whole gallery item
interferes with Masonry.js, but we can transform only the image instead. */

.bub-gallery-wrap .gallery-item {
  transition-duration: 500ms;
  transition-property: filter, opacity;
}

.bub-gallery-wrap .gallery-item img {
  transition: all 500ms;
}

.gallery-item:hover,
.gallery-item img:hover {
  transition: all 100ms;
}

/* Darken */

.bub-gallery-entry[data-bub-gallery-options*="hover=darken"] .gallery-item:hover img {
  filter: brightness(80%);
}

/* Lighten */

.bub-gallery-entry[data-bub-gallery-options*="hover=lighten"] .gallery-icon:hover {
  background-color: #fff;
}

.bub-gallery-entry[data-bub-gallery-options*="hover=lighten"] .gallery-item:hover img {
  opacity: 0.85 !important;
}

/* Scale */

.bub-gallery-entry[data-bub-gallery-options*="hover=scale"] .gallery-item img:hover {
  transform: scale(1.015);
}

.bub-gallery-entry[data-bub-gallery-options*="hover=scale"][data-bub-gallery-options*="textposition=overlay"] 
  .gallery-item:hover .gallery-caption {
  opacity: 1;
  transition: none;
  transform: scale(1.015);
  bottom: -2px;
}

/* Blur */

.bub-gallery-entry[data-bub-gallery-options*="hover=blur"] .gallery-item:hover img {
  filter: blur(3px);
}

/* Outline */

.bub-gallery-entry[data-bub-gallery-options*="hover=outline"] .gallery-item:hover img {
  outline: 2px solid #222;
}


/* Border/Shadow Setting
--------------------------------------------- */

.bub-gallery-entry[data-bub-gallery-options*="outline=border"] .gallery-item img {
  border: 1px solid #ddd;
}

.bub-gallery-entry[data-bub-gallery-options*="outline=shadow"] .gallery-item img {
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.13);
}

.bub-gallery-entry[data-bub-gallery-options*="outline=bordershadow"] .gallery-item img {
  border: 1px solid #ddd;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.13);
}


/*
Images Indicator
---------------------------------------------------------------------------------------------------- */
/* Indicates in archive post previews, that post content has images (gallery). */

  /* Disable link clickability (whole post is clickable) */

.archive .entry .bub-has-images-indicator {
  pointer-events: none;
}