/* Features Video Hover Effect - Hide video container until hover */

/* For all desktop/laptop screens - hide video by default */
@media screen and (min-width: 768px) {
  /* Hide video container by default */
  .feature-video-container {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
  }

  /* Show video container on feature item hover */
  a.feature-item:hover .feature-video-container,
  .feature-item:hover .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Optional: Add a placeholder or background when video is hidden */
  .feature-video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
    z-index: -1;
  }

  /* Ensure video itself is ready when container appears */
  .feature-video {
    opacity: 1 !important;
    transition: transform 0.3s ease !important;
  }

  /* Optional: Scale effect on hover */
  a.feature-item:hover .feature-video,
  .feature-item:hover .feature-video {
    transform: scale(1.02) !important;
  }
}

/* For very small screens (tablets in portrait), show video by default */
@media screen and (max-width: 767px) {
  .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Smooth transition for the entire feature item */
@media screen and (min-width: 768px) {
  a.feature-item,
  .feature-item {
    transition: background-color 0.3s ease !important;
  }

  /* Adjust grid to collapse video column when hidden */
  a.feature-item:not(:hover),
  .feature-item:not(:hover) {
    /* Optionally redistribute space when video is hidden */
    /* Uncomment below to give more space to text/title when not hovering */
    /* grid-template-columns: 1.2fr 0fr 3fr !important; */
  }
}

/* Alternative: Fade and slide effect */
@media screen and (min-width: 768px) {
  .feature-video-container {
    transform: translateY(10px) !important;
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.3s ease !important;
  }

  a.feature-item:hover .feature-video-container,
  .feature-item:hover .feature-video-container {
    transform: translateY(0) !important;
  }
}

/* Ensure proper stacking context */
@media screen and (min-width: 768px) {
  .feature-video-container {
    position: relative !important;
    z-index: 1 !important;
  }

  .feature-description,
  .feature-title {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* For touch devices, show on tap/touch */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
  /* On touch devices, toggle visibility on tap */
  a.feature-item:active .feature-video-container,
  .feature-item:active .feature-video-container,
  a.feature-item:focus .feature-video-container,
  .feature-item:focus .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
  }
}