/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */


 /** Blog Page **/

img.attachment-medium_large.size-medium_large.wp-post-image {
  max-height: 50vh;
}

article img {
  transition: filter 0.8s ease, transform 0.8s ease;
}

article:hover img {
  filter: grayscale(100%);
  transform: scale(1.05); /* leichter Zoom */
}

/** Abstand Kategorie **/
[data-archive=default] article.card-content>* {
  margin-block:0 var(--card-element-spacing, 0px)
}

[data-cards=boxed] article.entry-card {
  box-shadow:none;
}

/** Button Farbe Ketegorie **/
.meta-categories a {
  background: none !important;
  color: #696969;
}




/** Main Page **/
 .film-post {
   max-width: 100%;
   margin: 0;
 }

 /* Container für Video und Bilder */
 .media-wrapper {
   display: flex;
   position: relative;
   align-items: flex-start;
   height: auto;
 }

 /* Video links mit höherem z-index */
 .video-container {
   width: 60%;
   z-index: 2;
   position: relative;
   margin-top: 3%;
 }

 .film-video {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: 0;
 }

 /* Bilderspalte liegt UNTER dem Video (z-index: 1) */
 .image-stack {
   width: 40%;
   margin-left: -5%; /* Überlappung */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   transform: translateY(2%); /* leicht nach unten */
 }

 /* Bilder nicht verzerren, leicht unterschiedlich groß + horizontal versetzt */
 .image {
   height: auto;
   object-fit: cover;
   border-radius: 0;
   box-shadow: 0 4% 8% rgba(0, 0, 0, 0.1);
 }

.media-wrapper img{
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

 .image-top {
     width: 70%;
     transform: translateX(4%);
 }

 .image-bottom {
     width: 98%;
     transform: translateX(-11%);
 }

 /* Text unter dem Video, leicht eingerückt */
 .text-block {
   width: 58%;
   padding-left: 1.5%;
   margin-top: -3%;
   position: absolute;
   z-index: 5;
 }

 .text-block h4 {
   text-transform: uppercase;
   font-family: "IBM Plex Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   font-size: 3vw;
   margin-top: 4%;
   margin-bottom: 0;

 }

 .text-block p {
     font-family: "Poppins", sans-serif;
     font-weight: 200;
     font-style: normal;
     line-height: 0;
     font-size:1.5vw;
     margin: 0;
 }

 /* Responsiv */
 @media (max-width: 768px) {
   .media-wrapper {
     flex-direction: column;
   }

   .video-container,
   .image-stack,
   .text-block {
     width: 100%;
     margin-left: 0;
     transform: none;
   }

   .image-stack {
     flex-direction: row;
     gap: 4%;
     margin-top: 5%;
     z-index: 1;
   }

   .image {
     width: 48%;
     max-height: none;
     transform: none;
   }

   .image-top {
     width: 50%;
     transform: translateX(0%);
   }

     .image-bottom {
     width: 50%;
     transform: translateX(0%);
     }

   .text-block {
     margin-top: 4%;
     padding-left: 0;
   }
 }
