/* YouTube Embed Component Styles
   Enhances the YouTube embed include with responsive design
   and smooth integration with the site's design system */

/* ========================================
   YOUTUBE EMBED CONTAINER
   ======================================== */

.youtube-embed {
  position: relative;
  margin: 2rem 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-embed figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover effects */
.youtube-embed:hover figure {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.youtube-embed iframe {
  border: none;
  background: var(--color-gray-900, #1a1a1a);
  transition: opacity 0.3s ease;
}

/* Loading state */
.youtube-embed iframe[src=""] {
  opacity: 0.7;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (max-width: 768px) {
  .youtube-embed {
    margin: 1.5rem 0;
  }
  
  .youtube-embed figure {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .youtube-embed:hover figure {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
  }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .youtube-embed,
  .youtube-embed figure,
  .youtube-embed iframe {
    transition: none;
  }
  
  .youtube-embed:hover figure {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .youtube-embed figure {
    border: 2px solid var(--color-text, #000);
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .youtube-embed figure {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .youtube-embed:hover figure {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* ========================================
   INTEGRATION WITH EXISTING COMPONENTS
   ======================================== */

/* When used within post content */
.post-content .youtube-embed {
  margin: 2.5rem 0;
}

/* When used within gallery or grid layouts */
.gallery .youtube-embed,
.columns .youtube-embed {
  margin: 1rem 0;
}

/* When used within hero sections */
.hero .youtube-embed {
  margin: 1rem 0;
}

.hero .youtube-embed figure {
  border-radius: 16px;
}

/* ========================================
   FOCUS STATES FOR ACCESSIBILITY
   ======================================== */

.youtube-embed iframe:focus {
  outline: 3px solid var(--color-primary, #007bff);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .youtube-embed {
    break-inside: avoid;
    margin: 1rem 0;
  }
  
  .youtube-embed::after {
    content: "YouTube Video: " attr(data-video-title);
    display: block;
    text-align: center;
    font-style: italic;
    margin-top: 0.5rem;
    color: var(--color-gray-600, #666);
  }
}