/*  VYNILYN — the video playlist tiles (homepage and the Videos page).

    Lifted out of the base64 fusion_code block that lived on the homepage, because the Videos page
    was built on 2026-09-27 with seven of these tiles and NONE of the styling: the clone copied the
    tile columns and not the <style> block, so those tiles rendered with no play button at all.
    One file, loaded on both pages, cannot drift the way two copies would.

    Carries two corrections Ben asked for on 2026-09-27:

    1. The play button sits at 43% rather than dead centre. Most of these thumbnails carry a
       burned-in blue title bar across the bottom third, and a centred button crowded it.
    2. A gap under the thumbnail before the yellow caption on narrow screens. Measured at 375px:
       the gap between image bottom and title top was 0px on ALL SEVEN tiles — Avada drops the
       title's own 14px top margin to 0 at mobile widths, so it is restored here.
*/

.vy-playtile { position: relative; display: block; }
.vy-playtile img { display: block; width: 100%; }

/* The circle and the triangle must share the same vertical anchor or the triangle drifts out of
   the circle. Both are at 43%, not 50%, to clear the burned-in bar. */
.vy-playtile:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 43%;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    border: 3px solid rgba(255, 255, 255, .92);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    transition: background .2s;
}
.vy-playtile:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 43%;
    margin: -15px 0 0 -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
    z-index: 3;
}
.vy-playtile:hover:after { background: rgba(0, 0, 0, .78); }

.vy-plkind {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
    font-weight: 400;
}

.vy-hidden-section { display: none !important; }

/* Avada zeroes the caption's top margin at mobile widths, leaving the yellow title touching the
   image. Measured 0px on all seven tiles at 375px. */
@media (max-width: 800px) {
    .vy-playtile { margin-bottom: 14px; }
}