/**
 * YouTube Facade Styles
 *
 * PageSpeed Optimization Phase 2.4:
 * Styles for the YouTube facade pattern (thumbnail + play button)
 *
 * @package ROITheme
 * @since 1.0.6
 */

/* ========================================
   FACADE CONTAINER
   Inherits video-wrapper base styles
   ======================================== */

.youtube-facade {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

/* ========================================
   THUMBNAIL
   ======================================== */

.youtube-facade__thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ========================================
   PLAY BUTTON
   ======================================== */

.youtube-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.youtube-facade__play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.youtube-facade__play:hover .youtube-facade__play-bg {
    fill: #f00;
    fill-opacity: 1;
}

.youtube-facade__play:focus {
    outline: none;
}

.youtube-facade__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* ========================================
   IFRAME (after activation)
   ======================================== */

.youtube-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* ========================================
   LOADING STATE
   ======================================== */

.youtube-facade--loading .youtube-facade__play {
    display: none;
}

.youtube-facade--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: youtube-facade-spin 0.8s linear infinite;
}

@keyframes youtube-facade-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   FIX: Legacy wrapper with padding-top
   Removes duplicate aspect-ratio from parent
   containers that use the old padding-top trick
   (prevents double spacing above videos)
   ======================================== */

div[style*="padding-top"]:has(> .youtube-facade) {
    padding-top: 0 !important;
}