/* Features Video Uniform Size - All videos same dimensions */

@media screen and (min-width: 768px) {
  /* Set fixed dimensions for all video containers */
  .feature-video-container {
    position: relative !important;
    width: 100% !important;
    /* Fixed aspect ratio container */
    aspect-ratio: 16/9 !important;
    /* Fixed height as fallback */
    height: auto !important;
    min-height: 180px !important;
    max-height: 280px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #f0f0f0 !important;
  }

  /* Remove any stretching - all containers same size */
  .feature-video-container {
    align-self: center !important; /* Center vertically in grid cell */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Video fills container uniformly */
  .feature-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Specific fixed heights for each breakpoint */
@media screen and (min-width: 1440px) {
  .feature-video-container {
    height: 240px !important;
    max-height: 240px !important;
    min-height: 240px !important;
    aspect-ratio: unset !important; /* Use fixed height instead */
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .feature-video-container {
    height: 220px !important;
    max-height: 220px !important;
    min-height: 220px !important;
    aspect-ratio: unset !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .feature-video-container {
    height: 200px !important;
    max-height: 200px !important;
    min-height: 200px !important;
    aspect-ratio: unset !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .feature-video-container {
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    aspect-ratio: unset !important;
  }
}

/* Ensure all video containers are identical */
@media screen and (min-width: 768px) {
  /* Force uniform dimensions */
  .feature-item .feature-video-container {
    flex: 0 0 auto !important; /* Don't grow or shrink */
    width: 100% !important; /* Fill grid column width */
  }

  /* Override any height: 100% rules */
  .feature-video-container {
    height: 220px !important; /* Default uniform height */
  }

  /* Center video container vertically if feature item is taller */
  .feature-item {
    align-items: center !important; /* Center all items vertically */
  }
}

/* Calculate width based on aspect ratio if needed */
@media screen and (min-width: 768px) {
  .feature-video-container {
    /* Width is determined by grid column */
    width: 100% !important;
    /* Height is fixed for uniformity */
    display: block !important;
    position: relative !important;
  }
}

/* Ensure video maintains aspect ratio within fixed container */
@media screen and (min-width: 768px) {
  .feature-video {
    /* Cover the container while maintaining aspect ratio */
    object-fit: cover !important;
    /* Center the video if it's cropped */
    object-position: 50% 50% !important;
  }
}

/* Override conflicting styles with high specificity */
.interactive-features .feature-list .feature-item .feature-video-container {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  aspect-ratio: unset !important;
}

/* Alternative: Use JavaScript-calculated dimensions */
@media screen and (min-width: 768px) {
  .features-video-synced .feature-video-container {
    height: var(--video-height, 220px) !important;
    min-height: var(--video-height, 220px) !important;
    max-height: var(--video-height, 220px) !important;
  }
}

/* Visual consistency adjustments */
@media screen and (min-width: 768px) {
  .feature-video-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow 0.3s ease !important;
  }

  .feature-item:hover .feature-video-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Debug - Uncomment to see video container boundaries */
/*
@media screen and (min-width: 768px) {
  .feature-video-container {
    outline: 2px solid red !important;
  }

  .feature-video-container::after {
    content: attr(data-height);
    position: absolute;
    top: 0;
    left: 0;
    background: yellow;
    color: black;
    padding: 2px 5px;
    font-size: 10px;
    z-index: 999;
  }
}
*/