/*
    video-facade.css - the four skins for the click-to-play video poster.

    This file is the whole reason the facade is an output filter rather than
    an edit to 23 template files. Every design on the platform draws its video
    posters from here, so a fifth skin is a block of CSS at the bottom of this
    file plus a fifth option in the admin picker. No design is reopened, and
    none of the 97 has to know a skin was added.

    Markup, written once by wfa_video_facade() in functions.php and identical
    for every skin:

        .wfa-vf                   the outer box, and the positioning context
          .wfa-vf__frame          owns the aspect ratio and the clipping
            .wfa-vf__poster       the <img>
            .wfa-vf__btn          the click target, overlaid on the poster. A
                                  real <button>, so keyboard and screen
                                  readers work for free.
              .wfa-vf__play       the play badge
          .wfa-vf__label          the video title

    The button is inside the frame and covers it, rather than wrapping it.
    That is not a style choice. The frame carries the aspect ratio and is
    where the player gets dropped on click, so wrapped the other way round,
    hiding the button on play took the frame with it and the player rendered
    555 by 0. It also keeps the <iframe> from ending up inside a <button>,
    which is invalid and which browsers may quietly reparent.

    The label sits outside the frame on purpose. That is what lets s3 put the
    title underneath the picture, in the page's own type, while s2 and s4
    position it back over the poster. Skins that overlay it also clip it, by
    taking the radius and the overflow on .wfa-vf rather than on the frame.

    A skin is one class on .wfa-vf and nothing else:

        wfa-vf--s1   Classic     square, YouTube's own red badge, no title
        wfa-vf--s2   Rounded     soft corners, white badge, title on a scrim
        wfa-vf--s3   Minimal     square, outlined badge, title below the image
        wfa-vf--s4   Cinematic   soft corners, full scrim, large title, zoom

    Everything above the skin blocks is shared and should stay skin-neutral.
    A rule that only matters to one skin belongs in that skin's block, so the
    next person adding one can read a single section and know what to write.

    Sizing. The ratio arrives as the --wfa-vf-ar custom property, taken from
    the width and height the design put on its own iframe and defaulting to
    16/9. The box therefore reserves the right space before the poster
    arrives, so this cannot reintroduce the layout shift that
    wfa_img_dimensions() was added to remove. Designs that leaned on fitvids
    to size their embeds keep working too, because the ratio no longer
    depends on a script noticing an iframe.
*/

/* ---------------------------------------------------------------- shared */

.wfa-vf {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.wfa-vf__btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: #fff;
    font: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.wfa-vf__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--wfa-vf-ar, 16 / 9);
    overflow: hidden;
    background: #000;
}

/*  No aspect-ratio support: the old padding-top box. The modern property is
    preferred where it is understood because it survives a parent that sets
    an explicit height, which the padding trick does not. */
@supports not (aspect-ratio: 16 / 9) {

    .wfa-vf__frame {
        height: 0;
        padding-top: 56.25%;
    }
}

.wfa-vf__poster {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    /*  Designs set `img { max-width: 100% }`, and the equal-height scripts in
        several of them write an inline height onto every image in a row.
        Neither should reach inside the facade. */
    max-width: none;
    max-height: none;
}

/*  The badge centers its icon rather than each skin positioning it with a
    hand-computed margin, which is how it was done until 2026-08-25 and how
    it went wrong: the margins were measured against the SVG's box, while the
    triangle inside that box is not centered in it either, so the two offsets
    added up. On s4 that put the triangle 6.5px right of center in a 52px
    badge, which is where it was reported from. Flex centering cannot drift,
    and a skin now only says how big the icon is. */
.wfa-vf__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

.wfa-vf__play svg {
    display: block;
    flex: none;
}

.wfa-vf__label {
    display: block;
    line-height: 1.3;
}

.wfa-vf__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/*  While the real player is being swapped in. Two frames on a fast
    connection, several seconds on a slow one, and without it the poster
    simply disappears and the box goes black with no explanation. */
.wfa-vf.is-loading .wfa-vf__play {
    opacity: .45;
}

/*  The frame keeps its aspect ratio, so the box does not move when the
    player takes over. Only what was covering it goes away. */
.wfa-vf.is-playing .wfa-vf__btn,
.wfa-vf.is-playing .wfa-vf__poster {
    display: none;
}

.wfa-vf__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {

    .wfa-vf__poster,
    .wfa-vf__play {
        transition: none !important;
    }

    .wfa-vf__poster {
        transform: none !important;
    }
}

/* --------------------------------------------------------- s1  Classic */
/*  YouTube's own badge on a square box, with no title. For designs whose
    layout already prints the title beside the video, where a second copy on
    the poster reads as a mistake. */

.wfa-vf--s1 .wfa-vf__play {
    width: 68px;
    height: 48px;
}

.wfa-vf--s1 .wfa-vf__play svg {
    width: 68px;
    height: 48px;
}

.wfa-vf--s1 .wfa-vf__play-bg {
    fill: #212121;
    fill-opacity: .8;
    transition: fill .18s ease, fill-opacity .18s ease;
}

.wfa-vf--s1 .wfa-vf__btn:hover .wfa-vf__play-bg,
.wfa-vf--s1 .wfa-vf__btn:focus-visible .wfa-vf__play-bg {
    fill: #f00;
    fill-opacity: 1;
}

.wfa-vf--s1 .wfa-vf__label {
    display: none;
}

/* --------------------------------------------------------- s2  Rounded */
/*  The default. Soft corners, a white badge, and the title along the bottom
    on a gradient so it stays legible over a bright poster. The radius and
    the clipping are on .wfa-vf so the gradient is clipped with it. */

.wfa-vf--s2 {
    border-radius: 14px;
    overflow: hidden;
}

.wfa-vf--s2 .wfa-vf__play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.wfa-vf--s2 .wfa-vf__play svg {
    width: 28px;
    height: 28px;
}

.wfa-vf--s2 .wfa-vf__play svg path {
    fill: #111;
}

.wfa-vf--s2 .wfa-vf__btn:hover .wfa-vf__play,
.wfa-vf--s2 .wfa-vf__btn:focus-visible .wfa-vf__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.wfa-vf--s2 .wfa-vf__label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 44px 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 45%, rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none;
    /*  Customers write the titles, and they run long: one on
        darataylor.com/videos is 88 characters and wrapped to two lines that
        climbed straight off the top of the gradient and sat on the picture.
        Two lines then an ellipsis, with the gradient tall enough to hold
        both. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------- s3  Minimal */
/*  Nothing over the picture but a thin ring, and the title underneath in the
    page's own type and color. This is the one skin where the box is taller
    than the video, which is why the label is not positioned. */

.wfa-vf--s3 .wfa-vf__play {
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
}

.wfa-vf--s3 .wfa-vf__play svg {
    width: 24px;
    height: 24px;
}

.wfa-vf--s3 .wfa-vf__play svg path {
    fill: #fff;
}

.wfa-vf--s3 .wfa-vf__btn:hover .wfa-vf__play,
.wfa-vf--s3 .wfa-vf__btn:focus-visible .wfa-vf__play {
    background: rgba(255, 255, 255, .18);
}

.wfa-vf--s3 .wfa-vf__label {
    padding: 10px 0 0;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
}

/* ------------------------------------------------------- s4  Cinematic */
/*  A scrim that lifts on hover, with the title set large across the bottom.
    The poster scales very slightly so the movement reads as deliberate
    rather than as a rendering glitch. */

.wfa-vf--s4 {
    border-radius: 14px;
    overflow: hidden;
}

.wfa-vf--s4 .wfa-vf__poster {
    filter: brightness(.62);
    transition: transform .5s ease, filter .35s ease;
}

/*  On the frame, not on the button. The poster is the button's sibling now,
    so a descendant selector rooted at the button no longer reaches it, and
    :focus-within is what stands in for the keyboard case. */
.wfa-vf--s4 .wfa-vf__frame:hover .wfa-vf__poster,
.wfa-vf--s4 .wfa-vf__frame:focus-within .wfa-vf__poster {
    transform: scale(1.04);
    filter: brightness(.78);
}

.wfa-vf--s4 .wfa-vf__play {
    top: auto;
    bottom: 18px;
    left: 18px;
    transform: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.wfa-vf--s4 .wfa-vf__play svg {
    width: 22px;
    height: 22px;
}

.wfa-vf--s4 .wfa-vf__play svg path {
    fill: #111;
}

.wfa-vf--s4 .wfa-vf__btn:hover .wfa-vf__play,
.wfa-vf--s4 .wfa-vf__btn:focus-visible .wfa-vf__play {
    transform: scale(1.08);
}

.wfa-vf--s4 .wfa-vf__label {
    position: absolute;
    right: 18px;
    bottom: 24px;
    left: 86px;
    z-index: 2;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    pointer-events: none;
    /*  Same reason as s2, and tighter here: the type is larger and the badge
        is taking the bottom left corner, so a long title has less room
        before it reaches the top of the frame. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {

    .wfa-vf--s2 .wfa-vf__play {
        width: 52px;
        height: 52px;
    }

    .wfa-vf--s2 .wfa-vf__play svg {
        width: 22px;
        height: 22px;
    }

    .wfa-vf--s2 .wfa-vf__label {
        padding: 26px 12px 10px;
        font-size: 13px;
    }

    .wfa-vf--s4 .wfa-vf__play {
        bottom: 12px;
        left: 12px;
        width: 44px;
        height: 44px;
    }

    .wfa-vf--s4 .wfa-vf__play svg {
        width: 19px;
        height: 19px;
    }

    .wfa-vf--s4 .wfa-vf__label {
        right: 12px;
        bottom: 15px;
        left: 66px;
        font-size: 15px;
    }
}