/* Features Video Fill Fix - Ensure video fills entire container */

/* Override any conflicting height restrictions */
@media screen and (min-width: 768px) {
  /* Make sure the feature item establishes a height context */
  a.feature-item,
  .feature-item {
    position: relative !important;
  }

  /* Video container should stretch to match row height */
  .feature-video-container {
    position: relative !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    display: block !important;
    align-self: stretch !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
    border-radius: 8px !important;
  }

  /* Video fills container completely */
  .feature-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Remove any aspect ratio constraints */
  .feature-video-container,
  .feature-video {
    aspect-ratio: unset !important;
  }
}

/* Ensure minimum heights for proper video display */
@media screen and (min-width: 1440px) {
  a.feature-item,
  .feature-item {
    min-height: 300px !important;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  a.feature-item,
  .feature-item {
    min-height: 260px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  a.feature-item,
  .feature-item {
    min-height: 230px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  a.feature-item,
  .feature-item {
    min-height: 200px !important;
  }
}

/* Fix for Safari and WebKit browsers */
@media screen and (min-width: 768px) {
  .feature-video-container {
    -webkit-align-self: stretch !important;
  }

  .feature-video {
    -webkit-transform: translateZ(0) !important; /* Hardware acceleration */
  }
}

/* Ensure video container fills during hover transition */
@media screen and (min-width: 768px) {
  a.feature-item:hover .feature-video-container,
  .feature-item:hover .feature-video-container {
    height: 100% !important;
  }
}