/**
 * Lite YouTube Embed Facade Styles
 * Provides a responsive 16:9 container, beautiful cover thumbnail, and an interactive hover play button.
 */

.lite-youtube-facade {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    background-color: #000000;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--rounded-lg, 1rem);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;
}

.lite-youtube-facade:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Thumbnail image wrapper */
.lite-youtube-facade .lite-yt-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.5s ease;
}

.lite-youtube-facade:hover .lite-yt-thumbnail {
    filter: brightness(0.85);
    transform: scale(1.02);
}

/* Play button and overlay */
.lite-youtube-facade .lite-yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lite-youtube-facade:hover .lite-yt-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
}

/* Play button background styling */
.lite-youtube-facade .lite-yt-play-btn-bg {
    fill: rgba(33, 33, 33, 0.85);
    transition: fill 0.3s ease;
}

.lite-youtube-facade:hover .lite-yt-play-btn-bg {
    fill: #ff0000; /* YouTube classic red on hover */
}

/* The actual iframe loaded on demand */
.lite-youtube-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--rounded-lg, 1rem);
    z-index: 3;
    background-color: #000000;
}

/* Ensure Gutenberg YouTube block wrappers and oEmbed containers span full width of the entry content column */
.wp-block-embed-youtube,
.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed.is-provider-youtube,
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}