/* Small play button plus a lightbox, shared by the corporate preview, /campaigns/ and
   /maintenance/. Replaces three large inline players that dominated their sections.

   The trigger is deliberately tiny: a 50px circle that sits inside an existing box next to the
   copy it belongs to. The video itself only appears once somebody asks for it, which also means
   nothing downloads a 7MB file on page load. */

.vplay-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.vplay {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #44b276;
    color: #fff;
    box-shadow: 0 6px 18px rgba(68,178,118,.35);
    transition: transform .16s ease-out, background .16s ease-out, box-shadow .16s ease-out;
}
.vplay svg { width: 18px; height: 18px; margin-left: 2px; /* optical centring of a triangle */ }
.vplay:hover { background: #258653; transform: scale(1.06); box-shadow: 0 10px 24px rgba(68,178,118,.42); }
.vplay:active { transform: scale(.97); }
.vplay:focus-visible { outline: 3px solid #258653; outline-offset: 3px; }

.vplay-label { font-size: 14.5px; font-weight: 700; color: #101828; line-height: 1.35; }
.vplay-label small { display: block; font-size: 12.5px; font-weight: 500; color: #667085; margin-top: 2px; }

/* ---------- lightbox ---------- */
.vmodal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8,12,10,.82);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.vmodal[hidden] { display: none !important; }
.vmodal video {
    width: min(960px, 100%);
    max-height: 84vh;
    display: block;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.vmodal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease-out;
}
.vmodal-close:hover { background: rgba(255,255,255,.26); }
.vmodal-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 600px) {
    .vmodal { padding: 14px; }
    .vmodal-close { top: 8px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .vplay { transition: none; }
}

/* ---------- full-width hero player ----------
   Used on /campaigns/ and /maintenance/, where the demo is a headline feature rather than a
   footnote. The poster fills the column with one large play button over it; clicking swaps in a
   real <video> at the same size and starts it, so playback happens in place rather than in a
   lightbox. The small .vplay button above is for the corporate page, where the video sits inside
   a card and must not dominate it. */
.vhero { max-width: 1100px; margin: 0 auto; }
.vhero-btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid rgba(16,24,40,.10);
    border-radius: 18px;
    overflow: hidden;
    background: #0b1220;
    cursor: pointer;
    box-shadow: 0 22px 60px rgba(11,18,32,.16);
}
.vhero-btn img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease-out, filter .25s ease-out; }
.vhero-btn:hover img { transform: scale(1.02); filter: brightness(.94); }
.vhero-btn:focus-visible { outline: 3px solid #258653; outline-offset: 4px; }

.vhero-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #44b276;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 34px rgba(0,0,0,.35);
    transition: transform .18s ease-out, background .18s ease-out;
}
.vhero-play svg { width: 32px; height: 32px; margin-left: 4px; }
.vhero-btn:hover .vhero-play { background: #258653; transform: translate(-50%, -50%) scale(1.07); }
.vhero-btn:active .vhero-play { transform: translate(-50%, -50%) scale(.98); }

.vhero video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 18px;
    background: #000; box-shadow: 0 22px 60px rgba(11,18,32,.16); }
.vhero-cap { margin-top: 12px; font-size: 13.5px; color: #667085; text-align: center; }

@media (max-width: 600px) {
    .vhero-play { width: 64px; height: 64px; }
    .vhero-play svg { width: 24px; height: 24px; }
    .vhero-btn { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .vhero-btn img, .vhero-play { transition: none; }
}