/* ==========================================================================
   Video thumbnail rollover — div-based layout
   Replaces the old ul.pure-videos / li structure.
   Matches original measurements: 1500px container, 5 columns (20% each),
   225px row height, 200x150 thumbnails, 50px title area.
   No rounded corners.
   ========================================================================== */

.pure-videos {
    padding: 0px;
    margin: 0 auto;
    max-width: 100%;
    width: 1500px;
    overflow: hidden; /* clearfix for floated .thumb-wrap children */
}

.thumb-wrap {
    float: left;
    text-align: center;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    width: 20%;
    height: 225px;
    box-sizing: border-box;
}

.thumb-wrap a {
    color: #4b4a4c;
    text-decoration: none;
}

.thumb-frame {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 0 auto; /* text-align: center on the parent won't center a block-level div */
    overflow: hidden;
    background: #ddd;
}

.thumb-base,
.thumb-overlay {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 150px;
    object-fit: cover;
    display: block;
}

.thumb-base {
    z-index: 1;
}

/* Both badge states are written into the markup by PHP on first paint,
   stacked via position: absolute / inset: 0 inside the position: relative
   .thumb-frame. "off" is visible, "on" is hidden by default. Nothing is
   inserted after load — JS only toggles which one is visible. */
.thumb-overlay {
    z-index: 2;
    pointer-events: none;
}

.thumb-overlay-off {
    opacity: 1;
}

.thumb-overlay-on {
    opacity: 0;
}

/* The original markup had a leading <br /> inside the title link, which
   pushed the caption text down by one blank line before it appeared.
   This padding-top replicates that same visual gap without needing a
   stray <br /> in the new markup. */
.thumb-title {
    height: 50px;
    padding-top: 16px;
    line-height: 1.2;
}

.thumb-title a {
    color: #4b4a4c;
}