/* ============================================
   FFF – Divi Gallery (module style)
   Add this class on the Divi Gallery module: fff-gallery
   Goals:
   - FFF clean cards (radius 4px)
   - remove Divi default zoom, use subtle FFF hover
   - better overlay icon
   - includes pagination styling
============================================ */


/* ------------------------------------------------------------
   1) Spacing between items (safe, works with Divi layout)
------------------------------------------------------------ */

.fff-gallery .et_pb_gallery_items{
  margin-left: -6px;
  margin-right: -6px;
}

.fff-gallery .et_pb_gallery_item{
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 12px !important;
}


/* ------------------------------------------------------------
   2) Card wrapper (the clickable image area)
------------------------------------------------------------ */

.fff-gallery .et_pb_gallery_image{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(12,18,28,0.10);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,23,42,0.08);
  transform: translateZ(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* Make the link fill the card */
.fff-gallery .et_pb_gallery_image > a{
  display: block;
  line-height: 0;
}

/* Image: neutralize Divi default effects */
.fff-gallery .et_pb_gallery_image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;

  transform: none !important;     /* kills Divi zoom baseline */
  transition: transform 0.18s ease, filter 0.18s ease;
  will-change: transform;
}

/* Hover: subtle lift + FFF border */
.fff-gallery .et_pb_gallery_item:hover .et_pb_gallery_image{
  transform: translateY(-2px);
  border-color: rgba(66,103,178,0.38);
  box-shadow: 0 16px 30px rgba(15,23,42,0.12);
}

/* Hover: very gentle zoom (FFF, not Divi’s aggressive one) */
.fff-gallery .et_pb_gallery_item:hover .et_pb_gallery_image img{
  transform: scale(1.03) !important;
  filter: saturate(1.02) contrast(1.02);
}

/* Keyboard accessibility */
.fff-gallery .et_pb_gallery_item a:focus-visible{
  outline: 2px solid rgba(66,103,178,0.35);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ------------------------------------------------------------
   3) Overlay (Divi uses a span icon)
------------------------------------------------------------ */

/* Divi overlay icon: make it coherent and not chunky */
.fff-gallery .et_overlay.et_pb_inline_icon{
  background: rgba(12,18,28,0.30) !important;
  border-radius: 4px;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.fff-gallery .et_overlay.et_pb_inline_icon:before{
  color: #ffffff !important;
  font-size: 22px !important;
  opacity: 0.95;
}

/* On hover: slightly more contrast, still soft */
.fff-gallery .et_pb_gallery_item:hover .et_overlay.et_pb_inline_icon{
  background: rgba(66,103,178,0.35) !important;
}


/* ------------------------------------------------------------
   4) Optional: unify heights (only if you want strict consistency)
   If your thumbnails are mixed ratios, this makes them uniform.
   Remove this block if you prefer natural image heights.
------------------------------------------------------------ */

.fff-gallery.is-uniform .et_pb_gallery_image{
  aspect-ratio: 16 / 9;
}

.fff-gallery.is-uniform .et_pb_gallery_image img{
  height: 100% !important;
  object-fit: cover;
}


/* ------------------------------------------------------------
   5) Pagination (FFF style)
------------------------------------------------------------ */

.fff-gallery .et_pb_gallery_pagination{
  border-top: 0;
  margin-top: 0.85rem;
  padding-top: 0;
  text-align: center;
}

.fff-gallery .et_pb_gallery_pagination ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.fff-gallery .et_pb_gallery_pagination ul::before,
.fff-gallery .et_pb_gallery_pagination ul::after{
  content: none !important;
}

.fff-gallery .et_pb_gallery_pagination li{
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.fff-gallery .et_pb_gallery_pagination a,
.fff-gallery .et_pb_gallery_pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  height: 34px;
  padding: 0 10px;

  font-size: 12px;
  line-height: 1;
  font-weight: 700;

  border-radius: 4px;
  border: 1px solid rgba(12,18,28,0.12);

  color: rgba(12,18,28,0.72);
  background: rgba(255,255,255,0.92);

  text-decoration: none !important;
  user-select: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

/* Active */
.fff-gallery .et_pb_gallery_pagination a.active,
.fff-gallery .et_pb_gallery_pagination a[aria-current="page"],
.fff-gallery .et_pb_gallery_pagination span.active{
  color: #ffffff;
  background: rgba(66,103,178,1);
  border-color: rgba(66,103,178,1);
}

/* Hover */
.fff-gallery .et_pb_gallery_pagination a:hover{
  color: #ffffff;
  background: rgba(174,32,18,1);
  border-color: rgba(174,32,18,1);
  transform: translateY(-1px);
}

/* Focus */
.fff-gallery .et_pb_gallery_pagination a:focus-visible{
  outline: 2px solid rgba(66,103,178,0.35);
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 680px){
  .fff-gallery .et_pb_gallery_item{
    margin-bottom: 10px !important;
  }

  .fff-gallery .et_pb_gallery_pagination a,
  .fff-gallery .et_pb_gallery_pagination span{
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    font-size: 11.5px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fff-gallery .et_pb_gallery_image,
  .fff-gallery .et_pb_gallery_image img,
  .fff-gallery .et_overlay.et_pb_inline_icon,
  .fff-gallery .et_pb_gallery_pagination a,
  .fff-gallery .et_pb_gallery_pagination span{
    transition: none !important;
  }
}