/* youtube-background.css */

/* #youtube-video-background-container is styled by Tailwind in index.html */

/* This is the NEW wrapper that actually does the clipping and has the debug background */
#youtube-player-wrapper {
  position: absolute !important; /* Should fill #youtube-video-background-container */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* THIS IS THE KEY CLIPPING ELEMENT */
  pointer-events: none !important;
  /* The inline style for debug background (green tint) is on this div in index.html */
}

/* The #youtube-player-target-for-api div is just a placeholder, gets replaced. */
/* We style the IFRAME that gets injected. Its ID might change, so we select it via its parent. */
/* However, player.getIframe() in JS is more reliable, and we are setting styles directly there. */
/* This CSS is more for fallback or base styling if JS fails. */
#youtube-player-wrapper iframe { /* Or, if the API gives the iframe id="youtube-player-target-for-api" */
                               /* then iframe#youtube-player-target-for-api would also work */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Centers */
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  /* JS sets width and height */
}

.hero-section {
  position: relative;
  overflow: hidden;
}