/*
 Theme Name:   Divi Child Theme
 Description:  Child Theme for Divi
 Author:       iloweb e.U.
 Author URI:   https://www.iloweb.at
 Template:     Divi
 Version:      1.0.2
 Text Domain:  divi-child
*/

/* --- Short Video Hover Effekt --- */

/* 1. Der Container: Definiert den Bereich für den Hover-Effekt */
.short-container {
  position: relative; /* Wichtig für die Positionierung der inneren Elemente */
  cursor: pointer;
  overflow: hidden; /* Verhindert, dass Elemente über den Rand hinausragen */
}

/* 2. Das Video: Standardmässig versteckt und über dem Thumbnail positioniert */
.short-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Stellt sicher, dass das Video den Container ausfüllt */
  opacity: 0; /* Standardmässig unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sorgt für einen weichen Übergang */
  z-index: 1; /* Liegt unter dem Titel, aber über dem Thumbnail */
}

/* 3. Das Thumbnail: Standardmässig sichtbar */
.short-thumb .el-thumbnail { /* Wir zielen auf das Bild im Modul */
  margin-bottom: 0 !important; /* Entfernt Standard-Abstände */
  transition: transform 0.3s ease-in-out; /* Für einen leichten Zoom-Effekt */
}

/* 4. Der Titel: Immer sichtbar und unten positioniert */
.short-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); /* Weicher Schatten für Lesbarkeit */
  color: #ffffff;
  z-index: 2; /* Liegt über dem Video und Thumbnail */
  text-align: left; /* Oder center, je nach Wunsch */
}

/* 5. Der Hover-Effekt: Wenn man über den Container fährt... */
.short-container:hover .short-video {
  opacity: 1; /* ...wird das Video sichtbar */
}

.short-container:hover .short-thumb .el-thumbnail {
  transform: scale(1.1); /* ...zoomt das Thumbnail leicht heran (optionaler Effekt) */
}
.short-link {
	display: none;
}