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


	Gallery Style


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


/* Gallery Filter */


.gallery-filter {


  margin-bottom: 44px;


}


.gallery-filter button {


  background-color: transparent;


  border: medium none;


  display: inline-block;


  line-height: 23px;


  margin: 0 17px;


  padding: 0;


  position: relative;


  text-transform: uppercase;


  vertical-align: top;


}


.gallery-filter button.active {


  color: #ff0000;


}


.gallery-filter button::before, .gallery-filter button::after {


  background-color: #333;


  border-radius: 50%;


  content: "";


  height: 1px;


  opacity: 0;


  position: absolute;


  width: 100%;


}


.gallery-filter button::before {


  left: 0;


  top: 0;


}


.gallery-filter button::after {


  bottom: 0;


  right: 0;


}


.gallery-filter button:hover::before, .gallery-filter button:hover::after {


  width: 15px;


  opacity: 1;


}


.gallery-filter button.active::before, .gallery-filter button.active::after {


  background-color: #ff0000;


  width: 15px;


  opacity: 1;


}


/* Mobile active category title - hidden on desktop */


.prodotti-section-3 .gallery-mobile-active-title {


  display: none;


}





/* Gallery Grid */


.gallery-grid{}


.gallery-item {


  margin-bottom: 30px;


}


.gallery-image {


  display: block;


  position: relative;


}


.gallery-image:hover {


  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2);


}


.gallery-image::before {


  background-color: #ff0000;


  bottom: 0;


  content: "";


  left: 0;


  opacity: 0;


  position: absolute;


  right: 0;


  top: 0;


}


.gallery-image::after {


  border: 1px solid #fff;


  bottom: 22px;


  content: "";


  left: 22px;


  opacity: 0;


  position: absolute;


  right: 22px;


  top: 22px;


}


.gallery-image:hover::before {


  opacity: 0.8;


}


.gallery-image:hover::after {


  opacity: 1;


}


.gallery-image img {


  width: 100%;


}


.gallery-image .content {


  left: 50%;


  margin-top: 30px;


  opacity: 0;


  position: absolute;


  text-align: center;


  top: 50%;


  transform: translateX(-50%) translateY(-50%);


  -webkit-transition: all 0.3s ease 0s;


  transition: all 0.3s ease 0s;


  z-index: 9;


}


.gallery-image:hover .content {


  margin-top: 0;


  opacity: 1;


}


.gallery-image .content i {


  color: #ffffff;


  display: inline-block;


  font-size: 24px;


}


.gallery-image .content h4 {


  color: #fff;


  font-size: 18px;


  font-weight: 600;


  line-height: 16px;


  margin: 6px 0 0;


}



/*--------------------------------------------------------------
  Media page progressive photos and YouTube embeds
--------------------------------------------------------------*/
.media-page-area .media-card-heading h4,
.media-page-area .media-card-subtitle h4 {
  overflow-wrap: anywhere;
}

.media-page-area .media-card-heading {
  min-height: 28px;
}

.media-page-area .media-card-subtitle {
  min-height: 24px;
  padding-top: 8px;
}

/* Desktop/tablet preserve the original fixed 300px clipped gallery card.
   Mobile overrides this below so loaded cards end with the real image height. */
.media-photo-card.img-hover-zoom {
  position: relative;
  height: 300px;
  min-height: 300px;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
}

.media-photo-card.is-media-pending,
.media-photo-card.is-media-loaded,
.media-photo-card.is-media-error {
  min-height: 300px;
}

.media-photo-card.is-touch-zoomed {
  cursor: zoom-out;
}

.media-photo-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: media-placeholder-sweep 1.25s ease-in-out infinite;
  pointer-events: none;
}

.media-photo-card.is-media-loaded::before,
.media-photo-card.is-media-error::before {
  display: none;
}

.media-photo-card .media-card-heading,
.media-photo-card .media-progressive-image,
.media-photo-card > noscript img {
  position: relative;
  z-index: 1;
}

.media-photo-card .media-progressive-image,
.media-photo-card > noscript img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: initial;
  object-position: initial;
}

.media-photo-card .media-progressive-image {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.media-photo-card .media-progressive-image.is-loaded {
  opacity: 1 !important;
  visibility: visible;
}

/* Same zoom strength and clipping as the original website rule. */
.media-photo-card:hover .media-progressive-image.is-loaded,
.media-photo-card:focus-within .media-progressive-image.is-loaded,
.media-photo-card.is-touch-zoomed .media-progressive-image.is-loaded {
  transform: scale(1.5);
  z-index: 2;
}

.media-photo-card.is-media-error {
  background: transparent;
}

.media-video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #111;
}

.media-video-frame.is-video-pending::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: media-placeholder-sweep 1.25s ease-in-out infinite;
  pointer-events: none;
}

.media-video-frame.is-video-loaded::before,
.media-video-frame.is-video-error::before {
  display: none;
}

.media-video-thumbnail,
.media-youtube-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border: 0;
}

.media-video-thumbnail {
  z-index: 2;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.media-youtube-frame {
  z-index: 4;
  opacity: 0;
  background: #000;
  transition: opacity 0.3s ease;
}

.media-video-frame.is-video-loaded .media-youtube-frame {
  opacity: 1;
}

.media-video-frame.is-video-loaded .media-video-thumbnail,
.media-video-frame.is-video-loaded .media-video-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.media-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.92);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.media-video-play::after {
  position: absolute;
  top: 50%;
  left: 52%;
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
  transform: translate(-50%, -50%);
}

.media-video-frame.is-video-delayed::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
}

.media-video-frame.is-video-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.media-video-fallback-link {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 16px;
  color: #fff;
  text-align: center;
}

.media-video-fallback-link:hover,
.media-video-fallback-link:focus {
  border-color: #ff0000;
  color: #ff0000;
}

.media-youtube-frame-noscript {
  z-index: 5;
  opacity: 1;
}

@keyframes media-placeholder-sweep {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-photo-card::before,
  .media-video-frame.is-video-pending::before {
    animation: none;
  }

  .media-progressive-image,
  .media-video-thumbnail,
  .media-youtube-frame,
  .media-video-play {
    transition: none;
  }
}

@media (max-width: 767px) {
  /* On phones, remove the fixed desktop height after loading so no empty
     tail remains below shorter images. Keep 300px only as the loading area. */
  .media-photo-card.img-hover-zoom {
    height: auto;
    min-height: 0;
  }

  .media-photo-card.is-media-pending {
    min-height: 300px;
  }

  .media-photo-card.is-media-loaded,
  .media-photo-card.is-media-error {
    min-height: 0;
  }

  .media-photo-card .media-progressive-image.is-loaded {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .media-video-play {
    width: 58px;
    height: 42px;
  }

  .media-video-play::after {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 13px;
  }
}

/* Media pages only: wider mobile content and uniform vertical card spacing.
   This does not affect other pages or desktop/tablet layouts. */
@media (max-width: 767px) {
  .media-page-area > .container {
    width: 100% !important;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Keep the visual gap between every stacked photo/video card identical. */
  .media-page-area .gallery-grid > .gallery-item {
    margin-bottom: 30px !important;
  }

  /* Remove variable default heading margins from video descriptions.
     The card's 30px margin now controls the gap to the following iframe. */
  .media-page-area .media-video-card .media-card-subtitle {
    min-height: 0;
    margin: 0;
    padding-top: 10px;
  }

  .media-page-area .media-video-card .media-card-subtitle h4 {
    margin: 0;
    line-height: 1.4;
  }
}

/* Legacy fallback scoped only to Media video cards. Modern browsers keep the
   aspect-ratio rule above; older browsers receive the same 16:9 geometry. */
@supports not (aspect-ratio: 16 / 9) {
  .media-video-frame {
    height: 0;
    padding-bottom: 56.25%;
  }

  .media-video-frame.is-video-error .media-video-fallback-link {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 30px);
    transform: translate(-50%, -50%);
  }
}