/**
 * File: gallery-slider.css
 * Purpose: Custom styling for fullwidth gallery modules with slider behavior.
 * Usage: Intended for use with Divi's Fullwidth Gallery module styled as a slider.
 * Dependencies: Divi (gallery module, ETmodules icons)
 *
 * Note:
 * This file is currently not in use on the site. Included for potential future layouts or testing.
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

/* These are not set or tested since the restructure, due to the component not being in use. Edit before implementing. */
.et_pb_gallery_fullwidth {
   --gallery-navigation-pill-bg-color: var(--brown-medium-trans-lower);
   --gallery-navigation-pill-active-bg-color: var(--brown-medium-trans-none); /* slightly transparent brown */
   --gallery-arrow-color: var(--brown-medium); /* brown */
   --gallery-arrow-bg-color: var(--white-trans-low); /* slightly transparent white */
}


/* -------------------------- */

/*set the height of the slide image*/
.et_pb_gallery_fullwidth .et_pb_gallery_image img {
   width: auto;
   height: 80vh;
   max-height: 1500px;
   object-fit: contain;
}
/*align the slide image to the middle*/
.et_pb_gallery_image {
   line-height: 0;
   padding-top: auto;
   padding-bottom: auto;
   text-align: center;
}

/* style navigation dots*/
.et-pb-controllers {
   position:relative;
   padding:0.25em;
   height: auto;
   bottom: 0;
}

.et-pb-controllers a {
   line-height: 4px;
   width: 17px!important;
   height: 4px!important;
   font-size:1em;
   background-color: var(--gallery-navigation-pill-bg-color)!important;
}

.et-pb-controllers .et-pb-active-control{
   background-color: var(--gallery-navigation-pill-active-bg-color)!important;
}

/*style the slider previous and next buttons*/
a.et-pb-arrow-prev,
a.et-pb-arrow-next{
   margin-top: -65px;
   border-radius: 5px;
   font-size: 2.5em;
   color: var(--gallery-arrow-color)!important;
   text-decoration: none!important;
   background: var(--gallery-arrow-bg-color);
   opacity: 1!important;
}

a.et-pb-arrow-prev {
   margin-left: 10px!important;
}

.et-pb-arrow-prev:before {
   content: "\44";
}

a.et-pb-arrow-next {
   margin-right: 10px!important;
}

.et-pb-arrow-next:before {
   content: "\45";
}

@media all and (min-width: 768px) {
   .et-pb-arrow-next {
      opacity: 1;
      right: 22px;
   }
   .et-pb-arrow-prev {
      opacity: 1;
      left: 22px;
   }
}
@media all and (max-width: 767px) {
   .et-pb-arrow-next {
      opacity: 1;
      right: 0;
   }
   .et-pb-arrow-prev {
      opacity: 1;
      left: 0;
   }

}

@media all and (max-width:980px){
      /*set the height of the slide image*/
   .et_pb_gallery_fullwidth .et_pb_gallery_image img {
   width: auto;
   height: 60vh;
   max-height: 1500px;
   object-fit: contain;
   }
}