/* ============================================================
   YouTube Video Block — Pinnacle Sports
   Aesthetic: premium broadcast graphic. Offset color-block frame,
   scoreboard-style title strip, kinetic play button.
   ============================================================ */

.ps-youtube-block {
    --ps-yt-radius: 14px;
    --ps-yt-offset: 10px;
    --ps-yt-ease: cubic-bezier(.2, .7, .2, 1);
}

.ps-youtube-block .container {
    position: relative;
}

/* Frame: rounded poster surface with an offset --primary block behind it.
   The offset shadow stays visible after the iframe replaces the button. */
.ps-youtube-block .ps-yt-frame {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #0b0b0b;
    border-radius: var(--ps-yt-radius);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        var(--ps-yt-offset) var(--ps-yt-offset) 0 0 var(--primary),
        0 22px 46px -18px rgba(0, 0, 0, .35),
        0 6px 14px -6px rgba(0, 0, 0, .25);
    transition: box-shadow .45s var(--ps-yt-ease), transform .45s var(--ps-yt-ease);
}

.ps-youtube-block .ps-yt-frame:hover,
.ps-youtube-block .ps-yt-frame:focus-within {
    box-shadow:
        calc(var(--ps-yt-offset) + 4px) calc(var(--ps-yt-offset) + 4px) 0 0 var(--primary),
        0 30px 60px -18px rgba(0, 0, 0, .42),
        0 8px 18px -6px rgba(0, 0, 0, .28);
    transform: translate(-2px, -2px);
}

/* Click-to-play surface */
.ps-yt-lite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    display: block;
}

.ps-yt-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ps-yt-ease), filter .5s var(--ps-yt-ease);
    will-change: transform;
}

/* Subtle dark wash that lifts on hover so the image gets brighter when engaged */
.ps-yt-lite::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
    transition: opacity .5s var(--ps-yt-ease);
}

.ps-yt-lite:hover .ps-yt-poster,
.ps-yt-lite:focus-visible .ps-yt-poster { transform: scale(1.055); }
.ps-yt-lite:hover::after,
.ps-yt-lite:focus-visible::after { opacity: .55; }

/* Focus ring — visible against any thumbnail */
.ps-yt-lite:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 4px;
}

/* Title overlay: scoreboard-style top strip with an accent dot */
.ps-yt-title {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    padding: 22px 26px 38px;
    color: #fff;
    font-family: var(--font1);
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.25;
    background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ps-yt-title::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--secondary);
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

/* Play button — kinetic, brand-colored, with pulsing ring */
.ps-yt-play {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 2;
    width: clamp(72px, 9vw, 104px);
    aspect-ratio: 68 / 48;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform .35s var(--ps-yt-ease);
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

.ps-yt-play svg { width: 100%; height: 100%; display: block; }
.ps-yt-play-bg { fill: var(--primary); opacity: 1; }

.ps-yt-play::before {
    content: "";
    position: absolute;
    inset: -14%;
    border-radius: 999px;
    border: 2px solid var(--primary);
    opacity: 0;
    transform: scale(.85);
    transition: transform .55s var(--ps-yt-ease), opacity .45s var(--ps-yt-ease);
}

.ps-yt-lite:hover .ps-yt-play,
.ps-yt-lite:focus-visible .ps-yt-play { transform: translate(-50%, -50%) scale(1.08); }

.ps-yt-lite:hover .ps-yt-play::before,
.ps-yt-lite:focus-visible .ps-yt-play::before { opacity: .55; transform: scale(1.18); }

.ps-yt-lite:active .ps-yt-play { transform: translate(-50%, -50%) scale(.96); }

/* The replaced iframe — sits inside the same frame */
.ps-yt-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

/* Caption */
.ps-yt-caption {
    margin: 22px auto 0;
    max-width: 720px;
    text-align: center;
    font-family: var(--font2);
    font-size: 14px;
    font-style: italic;
    letter-spacing: .04em;
    color: #6b6b6b;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .ps-youtube-block { --ps-yt-offset: 7px; }
    .ps-yt-title { padding: 18px 20px 32px; letter-spacing: .1em; }
}

@media (max-width: 767px) {
    .ps-youtube-block {
        --ps-yt-offset: 5px;
        --ps-yt-radius: 10px;
    }
    .ps-yt-title { font-size: 13px; padding: 14px 16px 28px; gap: 9px; }
    .ps-yt-title::before { width: 8px; height: 8px; }
    .ps-yt-caption { font-size: 13px; margin-top: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ps-youtube-block .ps-yt-frame,
    .ps-yt-poster,
    .ps-yt-lite::after,
    .ps-yt-play,
    .ps-yt-play::before {
        transition: none !important;
    }
    .ps-youtube-block .ps-yt-frame:hover,
    .ps-youtube-block .ps-yt-frame:focus-within {
        transform: none;
    }
    .ps-yt-lite:hover .ps-yt-poster,
    .ps-yt-lite:focus-visible .ps-yt-poster { transform: none; }
    .ps-yt-lite:hover .ps-yt-play,
    .ps-yt-lite:focus-visible .ps-yt-play { transform: translate(-50%, -50%); }
}