.maeveport-video-image-modal-section {
  width: 100%;
  min-height: 100vh; /* Or adjust if it should not always be 100vh */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent scrollbars from animation, internal to this component */
  padding: 50px 0; /* Padding for scroll testing */
  position: relative; /* For z-index stacking above the absolute background */
  z-index: 2; /* Ensure it's above the background panel */
  margin-top: -150px; /* Initial peek for desktop */
  /* top: -300px; */ /* Commented out: Static offset for peeking, now handled by parallax or reviewed later */
  /* margin-bottom: -300px; */ /* Commented out: Static offset compensation */
  /* transform: translateZ(0); */ /* Removed as likely not needed now */
}

/* Responsive adjustments for the peek effect - also commented out as data-speed will handle responsive movement */
/* Tablets (e.g., iPad Portrait) - screens <= 991.98px wide */
@media (max-width: 991.98px) {
  .maeveport-video-image-modal-section {
    margin-top: -100px; /* Tablet peek */
    /* top: -150px; */ /* Adjusted tablet peek */
    /* margin-bottom: -150px; */ /* Adjusted tablet peek compensation */
  }
}

/* Mobile (screens <= 767.98px wide) */
@media (max-width: 767.98px) {
  .maeveport-video-image-modal-section {
    margin-top: -50px; /* Mobile peek */
    /* top: -75px; */ /* Adjusted mobile peek */
    /* margin-bottom: -75px; */ /* Adjusted mobile peek compensation */
  }
}

.maeveport-video-image-modal-content-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Align items to stretch to match height */
  width: 100%; /* Full width to allow left/right alignment */
  max-width: 1400px; /* Increased max-width for larger screens */
  padding: 0 5%; /* Add padding to prevent edge touching */
  box-sizing: border-box;
  opacity: 0; /* Initial state for GSAP animation */
  transform: translateY(
    200px
  ); /* Increased initial Y offset for longer animation travel */
  will-change: transform, opacity; /* Added for performance */
}

.maeveport-video-image-modal-player-container {
  position: relative; /* For positioning custom play button */
  width: 60%; /* Example: video takes up 60% of content-wrapper */
  /* Maintain aspect ratio, e.g., 16:9 */
  padding-top: calc(60% * 0.5625); /* 16:9 aspect ratio ( (9/16) * width ) */
  background-color: #000; /* Fallback if video doesn't load */
  overflow: hidden;
}

.maeveport-video-image-modal-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maeveport-video-image-modal-custom-play-button {
  position: absolute;
  top: 0; /* Base for GSAP x/y positioning */
  left: 0; /* Base for GSAP x/y positioning */
  transform: translate(
    -50%,
    -50%
  ); /* Center the button on the x/y coordinates */
  width: 80px;
  height: 80px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  will-change: transform, opacity; /* Added for performance */
}

.maeveport-video-image-modal-custom-play-button svg {
  width: 100%;
  height: 100%;
}

/* Hide custom play button on smaller screens (tablets and mobile) by default */
@media (max-width: 1024px) {
  .maeveport-video-image-modal-custom-play-button {
    display: none !important; /* Important to override JS visibility if JS runs late */
  }
}

.maeveport-video-image-modal-image-container {
  position: relative;
  width: 35%; /* Example: image takes up 35% of content-wrapper */
  /* Height is determined by flex stretch from the video container */
  z-index: 5; /* Ensure image is above video if direct children, or adjust based on structure */
  overflow: hidden;
}

.maeveport-video-image-modal-image-container img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Modal Styles */
.maeveport-video-image-modal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Made slightly more transparent */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; /* For fade-in animation */
  transition: opacity 0.3s ease;
}

.maeveport-video-image-modal-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.maeveport-video-image-modal-modal-content {
  position: relative;
  background-color: #111; /* Dark background for modal content area */
  padding: 20px; /* Padding around the iframe */
  border-radius: 8px;
  width: 90vw; /* Use viewport width */
  max-width: 1100px; /* Increased max-width for bigger video */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Ensure iframe container within this respects padding */
  box-sizing: border-box;
}

.maeveport-video-image-modal-video-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: #000;
}

.maeveport-video-image-modal-video-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Ensure no border */
}

.maeveport-video-image-modal-close-modal {
  position: fixed; /* Fixed to viewport */
  top: 20px; /* Distance from top of viewport */
  right: 20px; /* Distance from right of viewport */
  font-size: 48px; /* Increased font size for a bigger 'X' */
  font-weight: 300; /* Make the 'X' character thinner (light weight) */
  color: white;
  /* background-color: rgba(51, 51, 51, 0.7); */ /* Removed background color */
  /* border-radius: 50%; */ /* Removed border-radius for circular shape */
  width: 50px; /* Increased button width */
  height: 50px; /* Increased button height */
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1; /* Adjust line-height for better vertical centering of the 'X' */
  cursor: pointer;
  transition: color 0.2s ease; /* Adjusted transition */
  z-index: 1001; /* Ensure it's above the overlay content */
}

.maeveport-video-image-modal-close-modal:hover {
  /* background-color: rgba(85, 85, 85, 0.9); */ /* Removed background hover */
  color: #ccc; /* Adjusted hover color */
}

/* Mobile specific styles (767px and below) */
@media (max-width: 767px) {
  .maeveport-video-image-modal-content-wrapper {
    flex-direction: column; /* Stack video if image is hidden */
    align-items: center;
    width: 90%; /* Adjust wrapper width for mobile */
    padding: 0; /* Reset padding for mobile */
  }

  .maeveport-video-image-modal-player-container {
    width: 100%; /* Video takes full width of its wrapper */
    padding-top: 56.25%; /* Maintain 16:9 for video */
    margin-bottom: 0; /* No margin as image is hidden */
  }

  .maeveport-video-image-modal-image-container {
    display: none !important; /* Image is hidden on mobile */
  }

  .maeveport-video-image-modal-modal-content {
    width: 95vw; /* Use viewport width on mobile too */
    padding: 10px;
  }

  .maeveport-video-image-modal-close-modal {
    top: 15px;
    right: 15px;
    width: 40px; /* Adjusted for smaller screens */
    height: 40px;
    font-size: 38px; /* Adjusted for smaller button */
  }
}

/* Fine-tuning for very small mobile screens (480px and below) */
@media (max-width: 480px) {
  .maeveport-video-image-modal-close-modal {
    top: 10px;
    right: 10px;
    font-size: 30px; /* Adjusted for very small screens */
    width: 35px;
    height: 35px;
  }
  .maeveport-video-image-modal-section {
    min-height: 80vh;
  }
}

/* Hide data source on front-end */
.maeveport-video-image-modal-data-source {
  display: none;
}