/* ====== Media Feature Block ====== */
.media_feature_block {
    position: relative;
    padding: 100px 18% 100px; /* space for overlaps */ 
  }
  .media_feature_block.black-section {
    background-color: #000;
  }

.media_feature_block.with-top-shape {
    /* margin-top: 65px !important; */
}
.media_feature_block.with-watermark::before {
    content: '';
    position: absolute;
    background: url('/wp-content/uploads/2025/09/tcc-logo-watermark.svg') no-repeat right center / 100% 100%;
    right: 0;              
    top: 50%; 
    transform: translateY(-50%);
    /* background-size: contain;
    background-repeat: no-repeat; */
    /* width: 200%; */
    width: 80vw;           
    aspect-ratio: 1430 / 315;
    pointer-events: none;
}
.media_feature_block.black-section.with-watermark::before {
    filter: brightness(0) saturate(100%) invert(55%) sepia(7%) saturate(7%) hue-rotate(314deg) brightness(90%) contrast(80%);
}
.section-cap {
    position: absolute;
    left: 50%;
    right: 0;
    top: -67px;
    transform: translateX(-50%);
    height: 70px;
    color: #fff;
    pointer-events: none;
    z-index: 1;
    width: 100vw;
    max-width: none;
    padding: 0 !important;
}

.cap-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media only screen and (max-width:2000px){
  .section-cap {
    width: 2000px; 
  }
}

  /* Theme backgrounds already on parent: .white-section / .black-section */
  
  /* Container */
  .media_feature_block .media-feature-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  
  /* Shared card styles */
  .media_feature_block .top-image-container,
  .media_feature_block .top-image-video-container,
  .media_feature_block .middle-media .top-image-container,
  .media_feature_block .middle-media .top-image-video-container,
  .media_feature_block .bottom-media .top-image-container,
  .media_feature_block .bottom-media .top-image-video-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }
  
  .media_feature_block .top-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* --- Top big media --- */
  .media_feature_block .top-media {
    width: 80%;
    margin: 0 auto;
    /* aspect ratio-ish box; adjust as needed */
  }
  .media_feature_block .top-media .top-image-container,
  .media_feature_block .top-media .top-image-video-container {
    height: clamp(220px, 38vw, 505px);
  }
  
  /* --- Middle section (text left, media right) --- */
  .media_feature_block .middle-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(16px, 3.5vw, 48px);
    margin-top: -140px; /* pull up to overlap the top image */
  }
  
  /* Text block */
  .media_feature_block .text-container {
    flex: 0 0 46%;
    /* margin-left: 8%; */
    z-index: 2;
  }
  .media_feature_block .text-container h2 {
    margin: 0 0 45px;
    line-height: 1.15;
  }
  .media_feature_block .text-container p {
    margin: 10px 0 0;
    max-width: 34ch;
  }
  .media_feature_block.black-section .text-container h1,
  .media_feature_block.black-section .text-container h2,
  .media_feature_block.black-section .text-container h3,
  .media_feature_block.black-section .text-container h4,
  .media_feature_block.black-section .text-container h5,
  .media_feature_block.black-section .text-container h6,
  .media_feature_block.black-section .text-container p,
  .media_feature_block.black-section .text-container ul,
  .media_feature_block.black-section .text-container li,
  .media_feature_block.black-section .text-container a{
    color: #fff;
  }
  /* Optional soft background shape behind the text */
  .media_feature_block .text-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: -40px;
    width: 520px;
    height: 220px;
    background: radial-gradient(120% 70% at 0% 50%, rgba(0,0,0,.05), transparent 70%);
    border-radius: 999px;
    z-index: -1;
    pointer-events: none;
  }
  
  /* Middle (right) media card */
  .media_feature_block .middle-media {
    flex: 1 1 auto;
    /* margin-right: 5%; */
  }
  .media_feature_block .middle-media .top-image-container,
  .media_feature_block .middle-media .top-image-video-container {
    height: clamp(220px, 65vw, 700px);
  }
  
  /* Add play overlay for "video" cards (based on your .video-popup class) */
  /* .media_feature_block .video-popup::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    -webkit-mask: none;
  } */



  .media_feature_block .video-popup::before {
    content: "";
    font-weight: 400;
    display: block;
    width: 80px;
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(20px, 15px);
    background: url(/wp-content/uploads/2025/09/play-video-icon.svg) no-repeat !important;
    background-position: center !important;
  }
  



  /* --- Bottom media (offset left, underlaps the middle) --- */
  .media_feature_block .bottom-media {
    width: 50%;
    /* margin-top: -60px;       
    margin-left: 28%; */
    margin: -85px auto 0 19%;
  }
  .media_feature_block .bottom-media .top-image-container,
  .media_feature_block .bottom-media .top-image-video-container {
    height: clamp(180px, 24vw, 330px);
  }
  

  @media (max-width: 1366px) {
    .media_feature_block {
      padding: 100px 10% 100px;
    }
  }
  @media (max-width: 980px) {
    .media_feature_block .bottom-media .top-image-container, .media_feature_block .bottom-media .top-image-video-container {
      height: clamp(180px, 40vw, 330px);
    }
    .media_feature_block {
      padding: 50px 10% 50px;
    }
    .media_feature_block .top-media { width: 90%; margin-left: 5%; }
    .media_feature_block .middle-section {
      flex-direction: column;
      margin-top: 30px;
    }
    .media_feature_block .text-container { flex-basis: auto; margin: 0 5%; }
    .media_feature_block .middle-media { width: 90%; margin: 0 5%; }
    .media_feature_block .bottom-media { width: 90%; margin: 20px 5% 0; }
    .media_feature_block .text-container::before { display: none; }
  }
  
  @media (max-width: 540px) {
    .media_feature_block .middle-section {
      margin-top: 40px;
      gap: clamp(40px, 3.5vw, 48px);
    }
    .media_feature_block .text-container h2 {
      margin: 0 0 25px;
    }
    .media_feature_block .top-media {
      width: 100%;
      margin-left: 0;
    }
    .media_feature_block .middle-media, .media_feature_block .text-container{
      width: 100%;
      margin: 0;
    }
    .media_feature_block .bottom-media{
      width: 100%;
      margin: 20px 0 0;
    }
  }


  @media (prefers-reduced-motion: no-preference) {
    .media_feature_block .top-image-container,
    .media_feature_block .top-image-video-container {
      transition: transform .25s ease;
    }
    /* .media_feature_block .top-image-container:hover,
    .media_feature_block .top-image-video-container:hover {
      transform: translateY(-2px);
    } */
  }