/**
 * @file lazy-media-embed.css
 * @description Production stylesheet for <lazy-media-embed> Web Component.
 *              Enforces zero Cumulative Layout Shift (CLS), responsive aspect ratios,
 *              accessible keyboard focus rings, and high-contrast play interactions.
 * @version 1.0.0
 */

/* ==========================================================================
   Root Host & Container Layout (Zero-CLS)
   ========================================================================== */

lazy-media-embed,
.lazy-media-wrapper {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0d1117;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  contain: layout paint;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Specific Provider Dimension Enforcements */
lazy-media-embed[provider="soundcloud" i],
.lazy-media-wrapper[provider="soundcloud" i] {
  aspect-ratio: auto;
  height: 166px;
  min-height: 166px;
}

lazy-media-embed[provider="spotify" i],
.lazy-media-wrapper[provider="spotify" i] {
  aspect-ratio: auto;
  height: 352px;
  min-height: 352px;
}

/* Accessible Focus Ring for Keyboard Users */
lazy-media-embed:focus-visible,
.lazy-media-wrapper:focus-visible {
  outline: 3px solid #00f0ff;
  outline-offset: 3px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* Subtle elevation lift on desktop hover */
@media (hover: hover) and (pointer: fine) {
  lazy-media-embed:hover,
  .lazy-media-wrapper:hover {
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 240, 255, 0.15);
  }
}

/* ==========================================================================
   Facade Layer (Poster & Fallbacks)
   ========================================================================== */

.lazy-media-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b0e14;
}

.lazy-media-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lazy-media-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lazy-media-wrapper:hover .lazy-media-poster {
    transform: scale(1.03);
    filter: brightness(1.05);
  }
}

/* Provider Fallback Backgrounds when poster is omitted */
.lazy-media-fallback-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.youtube-bg {
  background: radial-gradient(circle at center, #1f232b 0%, #0a0c10 100%);
}

.soundcloud-bg {
  background: linear-gradient(135deg, #ff5500 0%, #331500 100%);
}

.spotify-bg {
  background: linear-gradient(135deg, #1db954 0%, #0a1f10 100%);
}

/* ==========================================================================
   Overlay & Play Button
   ========================================================================== */

.lazy-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
  transition: background 0.3s ease;
  z-index: 2;
}

.lazy-media-wrapper:hover .lazy-media-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Badges for Audio Embeds */
.lazy-media-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.soundcloud-badge {
  background: rgba(255, 85, 0, 0.85);
}

.spotify-badge {
  background: rgba(29, 185, 84, 0.85);
}

/* SVG Play Button */
.lazy-media-play-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lazy-play-icon {
  display: block;
}

.lazy-play-bg {
  fill: #ff0000;
  opacity: 0.92;
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.lazy-play-arrow {
  fill: #ffffff;
}

/* Provider-specific play button colors */
.soundcloud-facade .lazy-play-bg {
  fill: #ff5500;
}

.spotify-facade .lazy-play-bg {
  fill: #1db954;
}

.lazy-media-wrapper:hover .lazy-media-play-btn,
.lazy-media-wrapper:focus-visible .lazy-media-play-btn {
  transform: scale(1.15);
}

.lazy-media-wrapper:hover .lazy-play-bg {
  opacity: 1;
  fill: #ff2222;
}

.soundcloud-facade:hover .lazy-play-bg {
  fill: #ff6611;
}

.spotify-facade:hover .lazy-play-bg {
  fill: #1ed760;
}

/* ==========================================================================
   Title & Accessible Captions
   ========================================================================== */

.lazy-media-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
}

.lazy-media-title {
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lazy-media-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   Mounted Iframe Styling
   ========================================================================== */

.lazy-media-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  display: block;
}

/* ==========================================================================
   Host Container Overrides (Portfolio Video & Production Cards)
   ========================================================================== */

.video-thumbnail lazy-media-embed,
.production-header lazy-media-embed {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  border: none;
}

/* ==========================================================================
   Reduced Motion Preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  lazy-media-embed,
  .lazy-media-wrapper,
  .lazy-media-poster,
  .lazy-media-play-btn,
  .lazy-play-bg {
    transition: none !important;
    transform: none !important;
  }
}