/* =========================================================================
   Click-to-play YouTube placeholder (lite-youtube pattern).
   Pairs with defer-youtube.js. Keeps CLS at zero by using aspect-ratio and
   by fully replacing the original iframe in-place.
   ========================================================================= */

.sunnah-lyt {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #182844;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
}

.sunnah-lyt__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 200ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sunnah-lyt__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 200ms ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.sunnah-lyt:hover .sunnah-lyt__poster,
.sunnah-lyt:focus-visible .sunnah-lyt__poster {
    filter: brightness(0.92);
    transform: scale(1.02);
}

.sunnah-lyt:hover .sunnah-lyt__play,
.sunnah-lyt:focus-visible .sunnah-lyt__play {
    transform: scale(1.06);
}

.sunnah-lyt:focus-visible {
    outline: 2px solid var(--color-teal, #009191);
    outline-offset: 2px;
}

.sunnah-lyt__iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sunnah-lyt__poster,
    .sunnah-lyt__play {
        transition: none;
    }
}