.youtube-play-block {
    width: 100%;
    position: relative;
    .video-textarea {
        position: absolute;
        top: var(--size--120);
        left: var(--size--container);
        color: var(--color-light);
        z-index: 5;
        h2 {
            font-size: 2.625rem;
            padding-bottom: var(--size--20);
        }
        p, ul {
            font-size: 1.5rem;          
        }
        ul {
            list-style: none;

            li {
                border-bottom: 1px solid var(--color-light);
                padding-bottom: var(--size--10);
                margin-bottom: var(--size--10);
            }
        }
    }

    .video-bottom-textarea {
        padding-top: var(--size--32);
        h2 {
            font-size: 2.625rem;
            line-height: 1;
        }
        p {
            font-size: 1.125rem;
        }
    }
}

.youtube-play-block .yt-play-btn {
    position: absolute;
    top: var(--size--40);
    left: var(--size--container);
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 5;
}

.youtube-play-block .media-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* 16:9 iframe container */
.youtube-play-block .yt-iframe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.youtube-play-block .yt-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Overlay to prevent native iframe controls */
.youtube-play-block .yt-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: auto;
}

/* Poster image overlay */
.youtube-play-block .yt-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.youtube-play-block .yt-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mute / unmute button */
.youtube-play-block .yt-mute-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, transform 0.15s ease;
    padding: 0;
}

.youtube-play-block .yt-mute-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.08);
}

.youtube-play-block .yt-mute-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.youtube-play-block .yt-mute-btn img {
    display: block;
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.youtube-play-block .yt-mute-btn svg {
    display: block;
    flex-shrink: 0;
}


/* Base hidden state for heading + list items inside the textarea block */
.video-textarea h2,
.video-textarea ul > li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Reveal once the parent fade-in-group has been marked faded-in */
.fade-in-group[data-faded="true"] .video-textarea h2,
.fade-in-group[data-faded="true"] .video-textarea ul > li {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger: heading first, then each li in sequence */
.fade-in-group[data-faded="true"] .video-textarea h2 {
    transition-delay: 0s;
}

.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(1) { transition-delay: 0.15s; }
.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(2) { transition-delay: 0.3s; }
.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(3) { transition-delay: 0.45s; }
.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(4) { transition-delay: 0.6s; }
.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(5) { transition-delay: 0.75s; }
.fade-in-group[data-faded="true"] .video-textarea ul > li:nth-child(6) { transition-delay: 0.9s; }




@media (min-width: 64rem) {
    .lg\:col-span-12 {
        grid-column: span 12 / span 12;
    }
    .lg\:col-span-11 {
        grid-column: span 11 / span 11;
    }
    .lg\:col-span-10 {
        grid-column: span 10 / span 10;
    }
    .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:col-start-12 {
        grid-column-start: 12;
    }
    .lg\:col-start-11 {
        grid-column-start: 11;
    }
    .lg\:col-start-10 {
        grid-column-start: 10;
    }
    .lg\:col-start-9 {
        grid-column-start: 9;
    }
    .lg\:col-start-8 {
        grid-column-start: 8;
    }
    .lg\:col-start-7 {
        grid-column-start: 7;
    }
    .lg\:col-start-6 {
        grid-column-start: 6;
    }
    .lg\:col-start-5 {
        grid-column-start: 5;
    }
    .lg\:col-start-4 {
        grid-column-start: 4;
    }
    .lg\:col-start-3 {
        grid-column-start: 3;
    }
    .lg\:col-start-2 {
        grid-column-start: 2;
    }
    .lg\:col-start-1 {
        grid-column-start: 1;
    }

    /* .youtube-play-block .lg\:col-span-9 {

    } */


}

/* Desktop / mobile visibility — mirrors fullspan-media */
@media (min-width: 1024px) {
    .youtube-play-block .media-desktop {
        display: block;
    }

    .youtube-play-block .media-mobile {
        display: none;
    }
}


@media (max-width: 1440px) {
    .youtube-play-block .yt-play-btn {
        width: 60px;
        height: 60px;
        svg {
            width: 100%;
            height: auto;
        }
    }
    .youtube-play-block .video-textarea {
        padding-top: 20px;
    }

}

@media (max-width: 1023px) {
    .youtube-play-block .media-desktop.hidden {
        display: none;
    }

    .youtube-play-block .media-mobile {
        display: block;
    }
}

@media screen and (max-width: 991px) {
  .youtube-play-block {
       & .video-textarea {
            h2 {
                font-size: 1.375rem;
            }
            p, ul {
                font-size: 1.125rem;
            }
            ul li {
                padding-bottom: var(--size--8);
                margin-bottom: var(--size--8); 
            }
        }
    }


    .youtube-play-block {

        .video-bottom-textarea {
            h2 {
                font-size: 1.375rem;
                line-height: 1;
                margin-bottom: var(--size--8); 
            }
            p {
                font-size: 1.125rem;
                line-height: 1.2;
            }
        }
    }

}

@media screen and (max-width: 767px) {
    .youtube-play-block .yt-poster img {
        height: auto;
    }
    .youtube-play-block .yt-play-btn {
        top: var(--size--20);
        left: var(--size--20); 
    }
    .youtube-play-block {
        .video-textarea {
            position: relative;
            top: unset;
            left: unset;
            color: var(--color-dark);
            width: fit-content;
            ul li {
                border-bottom: 1px solid var(--color-dark);
            }
        }
    }
    .youtube-play-block .yt-mute-btn {
        bottom: unset;
        margin-top: -50px;
    }
    .youtube-play-block .yt-play-btn {
        width: 3.75rem;
        height: 3.75rem;
    }

}

@media (max-width: 479px) {
    .youtube-play-block .site-container {
        padding-left: 0;
        padding-right: 0;
    }
    .youtube-play-block .video-bottom-textarea p {
        font-size: .9375rem;
    }

    .youtube-play-block {
        .video-textarea {
            padding-left: var(--size--container); 
            padding-right: var(--size--container);
        }
    }

    [data-barba-namespace="apopseis"] {
        .youtube-play-block .site-container {
            padding-left: var(--size--container);
            padding-right: var(--size--container);
        }
    }

    .youtube-play-block .yt-play-btn {
        width: 40px;
        height: 40px;
    }
    .youtube-play-block .yt-play-btn {
        top: 20px;
        left: 20px;
    }
}