/**
 * @file
 * YouTube Facade Styles
 *
 * Styles for the YouTube facade pattern that improves page load performance
 * by deferring the loading of YouTube iframes until user interaction.
 */

/* Facade container */
.youtube-facade {
  position: relative;
  cursor: pointer;
  background-color: #000;
  overflow: hidden;
}

/* Thumbnail image */
.youtube-facade__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

/* Play button container */
.youtube-facade__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Play button SVG */
.youtube-facade__play-button svg {
  display: block;
  width: 68px;
  height: 48px;
}

/* Play button background - Red YouTube color */
.youtube-facade__play-button-bg {
  fill: #f00;
  transition: fill 0.1s ease-in-out;
}

/* Hover and focus states */
.youtube-facade:hover .youtube-facade__play-button,
.youtube-facade:focus .youtube-facade__play-button {
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.youtube-facade:hover .youtube-facade__play-button-bg,
.youtube-facade:focus .youtube-facade__play-button-bg {
  fill: #cc0000;
}

.youtube-facade:hover .youtube-facade__thumbnail,
.youtube-facade:focus .youtube-facade__thumbnail {
  opacity: 0.85;
}

/* Focus visible for accessibility */
.youtube-facade:focus {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}

.youtube-facade:focus:not(:focus-visible) {
  outline: none;
}

.youtube-facade:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}

/* Loaded state - when iframe is displayed */
.youtube-facade--loaded {
  cursor: default;
}

.youtube-facade--loaded iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
  .youtube-facade__play-button svg {
    width: 54px;
    height: 38px;
  }
}