/* ==========================================================
   METIS VIDEO CARDS
   CSS globale per le card video MetisTeatro.
   Funziona con:
   .metis-video-gallery > .metis-video[data-video-id] > .preview + .caption-overlay
   ========================================================== */

.metis-video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.metis-video-gallery .metis-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.metis-video-gallery .metis-video .preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .35s ease;
  z-index: 1;
}

.metis-video-gallery .metis-video:hover .preview {
  transform: scale(1.05);
}

.metis-video-gallery .metis-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

.metis-video-gallery .metis-video .caption-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  background: linear-gradient(to top,
      rgba(0,0,0,.85),
      rgba(0,0,0,.35),
      rgba(0,0,0,0));
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
}

.metis-video-gallery .metis-video .caption-overlay span {
  color: #e91e63;
  font-weight: 700;
}

.metis-video-gallery .metis-video.video-loaded .preview,
.metis-video-gallery .metis-video.video-loaded .caption-overlay {
  display: none;
}

.gallery-header {
  background: #e91e63;
  color: #fff;
  text-align: center;
  padding: 18px 24px;
  font-size: 1.35rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.25;
  margin: 42px 0 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
}

.gallery-header .highlight {
  color: #111;
  font-weight: 400;
}

@media (min-width:1025px){
  .metis-video-gallery .metis-video .caption-overlay{
    font-size:14px;
    line-height:1.22;
    padding:14px 16px;
  }
}

@media (max-width:768px){

  .metis-video-gallery{
    grid-template-columns:1fr;
    gap:24px;
  }

  .metis-video-gallery .metis-video .caption-overlay{
    font-size:16px;
    padding:14px;
  }

  .gallery-header{
    font-size:1.25rem;
    padding:14px 16px;
    margin:36px 0 22px;
  }

}


/* Facebook embedded videos */
.metis-video-gallery .metis-video.full-width .video-inner{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  background:#000;
}

.metis-video-gallery .metis-video.full-width .video-inner iframe{
  position:absolute!important;
  top:0;
  left:0;
  width:100%!important;
  height:100%!important;
  border:0;
}

.metis-video-gallery .metis-video.full-width .caption-overlay{
  z-index:4;
}