/* BackgroundVideo — fill + play/pause control.
   The root .bg (global.css) is already absolute-filled and overflow-clipped by
   its host (e.g. .mstg-photo .bg inherits the rail's rounded corners). Here we
   make the <video> cover that box and pin the control to the lower-left. */

.bg-vid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Controls: lower-left, above the video */
.bg-vid-ctrls {
    position: absolute;
    left: 0;
    bottom: 1rem;
    z-index: 2;
    width: auto;
}

.bg-vid .vid-btn {
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0.4rem;
    line-height: 1; /* was 0 — policy: never < 1 */
    color: var(--white);
    transition: color var(--g-trn-sp, 0.2s) var(--g-trn-tf, ease) 0s;
}

.bg-vid .vid-btn .bg-vid-ico {
    width: 1.75rem;
    height: 1.75rem;
}

/* Icon reflects state: pause shown while playing, play shown while paused */
.bg-vid .vid-btn .bg-vid-ico-play {
    display: none;
}

.bg-vid .vid-btn.is-paused .bg-vid-ico-pause {
    display: none;
}

.bg-vid .vid-btn.is-paused .bg-vid-ico-play {
    display: block;
}