/**
 * Styles for the Custom YouTube Embed Facade (Click-to-Load).
 * Optimized for CLS stability and dynamic aspect ratio.
 */
.nk-youtube-embed {
    margin: 1em 0;
}

.nk-youtube-wrapper {
    position: relative;
    display: block; 
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    
    /* This uses the 4:3 aspect ratio (360/480 = 0.75 or 75%) of the default thumbnail (hqdefault.jpg) 
       to prevent immediate collapse for older browsers or initial renders.
       You might want to use the 16:9 aspect ratio (9/16 = 0.5625 or 56.25%) of widescreen thumbnails 
       to prevent immediate collapse for older browsers or initial renders. */
    padding-bottom: 56.25%;
    /* padding-bottom: 75%; */
    height: 0; 
}

/* * The thumbnail must be absolutely positioned to fit inside the padding-defined container.
 * We must revert to absolute positioning here.
 */
.nk-youtube-thumbnail {
    position: absolute; 
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%; /* Fills the padded space */
    object-fit: contain; /* Ensures the image fills the space reserved by padding */
    z-index: 1;
    
    /* The aspect-ratio property on the image is now less critical than the padding 
       but is kept as a final measure. */
    aspect-ratio: attr(width) / attr(height); 
}

/* IMPORTANT: The JS will dynamically OVERWRITE this padding-bottom value 
   when the user clicks to match the true aspect ratio (if different from 4:3). */
.nk-youtube-wrapper.is-loaded {
    /* Height and padding are now controlled by inline JS styles (e.g., 56.25% for 16:9) */
}

.nk-youtube-wrapper.is-loaded iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fills the dynamically set padding */
    border: none;
    z-index: 3;
}

.nk-youtube-wrapper.is-loaded .nk-youtube-thumbnail,
.nk-youtube-wrapper.is-loaded .nk-youtube-play {
    display: none;
}

/* Custom Play Button Styles */
.nk-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;

    background: red;
    border: none;
    cursor: pointer; 
    border-radius: 50% / 10%;
    color: #FFFFFF;
    
    font-size: 48px; 
    height: 1.5em; 
    width: 2em;
    
    margin: 0; 
    padding: 0;
    text-align: center;
    text-indent: 0.1em;
    transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.nk-youtube-play:hover {
    background: darkorange;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Background Rectangle/Rounded Shape */
.nk-youtube-play::before {
    background: inherit;
    border-radius: 5% / 50%;
    bottom: 9%;
    content: "";
    left: -5%;
    position: absolute;
    right: -5%;
    top: 9%;
}

/* Triangle Icon */
.nk-youtube-play::after {
    display: block;
    border-style: solid;
    border-width: 0.5em 0 0.5em 0.866em;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    content: ' ';
    font-size: 0.8em; 
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    margin: 0; 
    height: 0;
    width: 0;
}