/* VC4 blue version: the Videos page hero, ported from the reference site (Dave's videos.html, "block: hero-screen,
   a tilted screen with the featured video, click to play", with its play button and the shared glass status chip
   from assets/site.css). blue/hero-videos.js wires the play button and the pointer lean. Styles are the reference's
   own, with its colour tokens (assets/theme.css + assets/themes/s2c.css) written out and its fonts set in Lato as
   on the rest of the blue site. Everything is scoped to .b-vid-hero / .b-vid- so nothing else on the site changes. */

/* ---------- Hero frame: calm background (blue.css .b-calm), copy on the left, screen on the right ---------- */
html[data-blue] .b-vid-hero { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 901px) {
    html[data-blue] .b-vid-hero { min-height: min(calc(100svh - 80px), 704px); }
}
html[data-blue] .b-vid-hero > .container { width: 100%; box-sizing: border-box; }
html[data-blue] .b-vid-hero .b-vid-copy { flex: 0 1 auto; max-width: 500px; }

/* Hero text on the light background: teal eyebrow (as on the reference), navy copy, readable buttons */
html[data-blue] .b-vid-hero .oversize-label { color: #138E96 !important; }
html[data-blue] .b-vid-hero .section-sub { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-vid-hero .section-sub strong { color: #02263F; }
/* both buttons read white on orange as they are: "Book a Demo" carries the site-wide gradient from blue.css */

/* ---------- The screen: tilted toward the copy, flat while the video plays ---------- */
.b-vid-scr { position: absolute; top: 0; bottom: 0; right: max(56px, calc((100vw - 1400px) / 2 + 56px)); width: min(50%, 660px); z-index: 3;
    display: flex; align-items: center; justify-content: center; perspective: 1800px; }
.b-vid-scr-in { position: relative; width: 100%; transform-style: preserve-3d;
    transform: rotateY(calc(-12deg + var(--rx, 0) * 8deg)) rotateX(calc(4deg - var(--ry, 0) * 5deg)); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.b-vid-scr-in.playing { transform: none; }
.b-vid-f { position: relative; border-radius: 22px; padding: 10px; background: linear-gradient(160deg, #0B3554, #02263F);
    box-shadow: 0 50px 90px -40px rgba(2, 38, 63, .65), 0 0 0 1px rgba(2, 38, 63, .1); }
.b-vid-f::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -38px; height: 40px;
    background: radial-gradient(50% 50% at 50% 0, rgba(2, 38, 63, .28), transparent 70%); filter: blur(6px); transform: translateZ(-40px); }
.b-vid-v { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #02263F center / cover no-repeat; }
.b-vid-v video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000000; }
.b-vid-hud { position: absolute; left: -26px; bottom: -26px; transform: translateZ(60px); }
.b-vid-hud .hud { pointer-events: none; }
.b-vid-chip { position: absolute; right: -14px; top: -16px; transform: translateZ(80px); font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    background: #FFFFFF; color: #02263F; padding: 9px 12px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(2, 38, 63, .35); display: inline-flex; gap: 8px; align-items: center; z-index: 1; }
.b-vid-chip i { width: 7px; height: 7px; border-radius: 50%; background: #EB552C; }

/* ---------- Play button, with its ring pulsing out ---------- */
.b-vid-pbtn { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; background: #EB552C; color: #FFFFFF;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 34px -8px rgba(235, 85, 44, .7); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.b-vid-pbtn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); animation: bVidRing 2.4s ease-out infinite; }
@keyframes bVidRing { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.b-vid-pbtn svg { margin-left: 4px; }
.b-vid-pbtn:hover { transform: scale(1.08); }

/* ---------- Glass status chip (the reference's shared .hud) ---------- */
.b-vid-hud .hud { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 14px; padding: 10px 14px; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(2, 38, 63, .3); font: 400 13px/1.3 'Lato', sans-serif; color: #02263F; transition: box-shadow .5s ease; }
.b-vid-hud .hud .ok { width: 30px; height: 30px; border-radius: 50%; background: #DCE7E9; display: grid; place-items: center; color: #138E96; flex: none;
    transition: background .4s, color .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.b-vid-hud .hud small { display: block; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .12em; color: #138E96; text-transform: uppercase; margin-bottom: 4px; }
.b-vid-hud .hud b { font-weight: 700; }
.b-vid-hud .hud .tx { display: block; }

/* keep the START HERE chip clear of the viewport edge (it pokes out 14px past the frame) */
@media (max-width: 1100px) { .b-vid-scr { width: 46%; right: 40px; } }
@media (min-width: 901px) and (max-width: 1100px) { html[data-blue] .b-vid-hero .b-vid-copy { max-width: calc(54vw - 100px); } }
@media (max-width: 900px) {
    .b-vid-scr { position: relative; top: auto; right: auto; width: 100%; box-sizing: border-box; max-width: 620px; margin: 40px auto 0; padding: 0 clamp(16px, 4vw, 40px) 70px; order: 2; }
    .b-vid-scr-in { transform: rotateX(3deg); }
    .b-vid-hud { left: 8px; bottom: -48px; }
    .b-vid-chip { right: 8px; }
}
@media (max-width: 560px) {
    .b-vid-f { padding: 6px; border-radius: 16px; } .b-vid-v { border-radius: 11px; }
    .b-vid-hud .hud { font-size: 12px; padding: 8px 12px; } .b-vid-hud .hud .ok { width: 26px; height: 26px; }
}