/* ═══════════════════════════════════════════════════════
   MonkeyWilder YouTube Fix  v4.0.0
   Styles for .mw-yt-wrap fallback tiles only.
   The yaw-video-embed tiles have their own inline styles.
   ═══════════════════════════════════════════════════════ */

/* ── Outer wrapper: responsive 16:9 ─────────────────── */
.mw-yt-wrap {
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 1.4em auto;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
    aspect-ratio: 16 / 9;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16/9) {
    .mw-yt-wrap::before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }
}

/* ── Thumbnail + play button layer ───────────────────── */
.mw-yt-player {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.mw-yt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .22s ease;
    border: none;
}

.mw-yt-player:hover .mw-yt-thumb,
.mw-yt-player:focus .mw-yt-thumb {
    filter: brightness(.78);
}

/* ── Play button ─────────────────────────────────────── */
.mw-yt-btn {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 56px;
    cursor: pointer;
    transition: transform .15s ease;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .6));
    pointer-events: none;   /* clicks pass through to .mw-yt-player */
}

.mw-yt-player:hover .mw-yt-btn,
.mw-yt-player:focus .mw-yt-btn {
    transform: scale(1.12);
}

.mw-yt-btn-bg   { fill: #ff0000; transition: fill .15s; }
.mw-yt-player:hover .mw-yt-btn-bg { fill: #cc0000; }
.mw-yt-btn-icon { fill: #fff; }

/* ── Injected iframe fills the slot div ──────────────── */
.mw-yt-wrap .mw-yt-slot,
.mw-yt-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Hover state for existing yaw-yt-* tiles ─────────── */
[id^="yaw-yt-"] {
    cursor: pointer !important;
    outline: none;
}
[id^="yaw-yt-"]:hover img,
[id^="yaw-yt-"]:focus img {
    filter: brightness(.8);
}
/* Hover: slightly scale the circular play button div inside yaw tile */
[id^="yaw-yt-"]:hover > div[style*="border-radius:50%"],
[id^="yaw-yt-"]:focus > div[style*="border-radius:50%"] {
    transform: translate(-50%, -50%) scale(1.1) !important;
    transition: transform .15s ease;
}

/* ── Accessibility: focus ring ───────────────────────── */
.mw-yt-player:focus-visible,
[id^="yaw-yt-"]:focus-visible {
    outline: 3px solid #ff0000;
    outline-offset: 3px;
}