/*
 * Vimeo-Vorschau, Videoplayer und Videobeschriftungen
 * ANTRILOPE – unabhängig von Joomla
 */

/* Zweispaltige Videogalerie mit Vimeo-Vorschau */

.video-hint {
  font-size: 12px;
  color: #adadad;
  margin: -14px 0 30px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 50px 28px;
}

.video-stage {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #0c0c0c;
}

.video-stage iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.68);
  transition: filter .3s,transform .5s;
}

.video-stage:hover .video-poster {
  filter: brightness(.85);
  transform: scale(1.025);
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 76px;
  height: 76px;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: #101010a3;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .25s,scale .25s;
}

.video-play:hover {
  background: #eee;
  color: #141414;
  scale: 1.04;
}

.video-play svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  margin-left: 5px;
}

.video-caption h2 {
  font-weight: 500;
  font-size: 16px;
  margin: 15px 0 2px;
  line-height: 1.4;
}

.video-caption p {
  font-size: 12px;
  color: #a9a9a9;
  margin: 0 0 4px;
}

.video-caption a {
  font-size: 11px;
  color: #9b9b9b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.video-caption a:hover {
  color: white;
}