/**
 * YouTube Embed CSS
 * Базові стилі для YouTube контейнерів
 * 
 * @version 1.0.0
 * @author  Your Name
 */

/* Основний контейнер відео */
.video-container {
    position: relative;
    max-width: 500px;
    width: 100%;
    margin: 0 auto 15px;
}

/* YouTube embed контейнер */
.embed-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Співвідношення сторін 16:9 */
    background-color: #f0f0f0;
    cursor: pointer;
    overflow: hidden;
}

/* Превью зображення */
.embed-youtube .youtube-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Ефект hover для превью */
.embed-youtube:hover .youtube-thumbnail {
    opacity: 0.8;
}

/* Кнопка відтворення */
.embed-youtube .embed-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background-color: rgba(255, 0, 0, 0.8);
    border-radius: 6px;
    transition: all 0.2s ease;
    z-index: 2;
}

/* Іконка відтворення */
.embed-youtube .embed-youtube-play:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-left: 15px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

/* Ефект hover для кнопки */
.embed-youtube:hover .embed-youtube-play {
    background-color: rgba(255, 0, 0, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* YouTube iframe після завантаження */
.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 768px) {
    .embed-youtube .embed-youtube-play {
        width: 60px;
        height: 42px;
    }
    
    .embed-youtube .embed-youtube-play:before {
        border-left-width: 12px;
        border-top-width: 8px;
        border-bottom-width: 8px;
    }
}

/* Додаткові стилі для accessibility */
.embed-youtube:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.embed-youtube[tabindex="0"]:focus .embed-youtube-play {
    background-color: rgba(255, 0, 0, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Стилі для завантаження */
.embed-youtube.loading {
    background: #000 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23fff" stroke-width="2" stroke-dasharray="31.416" stroke-dashoffset="31.416"><animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/></circle></svg>') no-repeat center center;
    background-size: 30px 30px;
}

/* Заховуємо контент під час завантаження */
.embed-youtube.loading .youtube-thumbnail,
.embed-youtube.loading .embed-youtube-play {
    opacity: 0;
}

/* Плавна поява після завантаження */
.embed-youtube .youtube-thumbnail,
.embed-youtube .embed-youtube-play {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}