/* ==========================================================================
   Hero screen frame
   ==========================================================================
   Puts the hero media inside a screen, because a screen is what VYPA sells.
   The picture stops being a picture on a page and becomes something running
   on a display, which is the product.

   Modern panel, not a television set: a thin uniform bezel, no stand, no
   standby light. The first version had a 13px bezel and a neck-and-base
   stand, which together read as a CRT on a desk rather than the LED panels
   that actually hang in the shops on this network.

   Every orientation is framed, because screens come in all of them —
   landscape video, a portrait display in a retail aisle, a square one. The
   orientation modifiers exist only to cap the width: the bezel itself does
   not care about aspect ratio, but a portrait image at the landscape
   max-width would be taller than the hero.
   ========================================================================== */

.tv {
    position: relative;
    width: 95%;
    max-width: 720px;
    padding: 7px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2f343d 0%, #1b1f27 60%, #15181f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 22px 46px -20px rgba(10, 22, 60, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* A vertical display — the kind mounted in an aisle or a lobby. */
.tv--portrait {
    width: auto;
    max-width: 330px;
}

.tv--square {
    width: auto;
    max-width: 440px;
}

/* The panel. max-width is reset because the chassis decides the size now;
   black underneath so a transparent or slow-loading source still reads as a
   screen that is switched on rather than a hole in the page. */
.tv > img,
.tv > video {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 6px;
    background: #000000;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(0, 0, 0, 0.3);
}

/* Some hero images carry their own width and radius inline, which would
   otherwise size the picture independently of the chassis holding it. */
.tv > img[style],
.tv > video[style] {
    width: 100% !important;
    border-radius: 6px !important;
}

/* The picture must not animate on its own now that a chassis is holding it.
   .hero-right runs fadeUp over 1.2s and .hero-video / .hero-visual run the
   same keyframes over 1s, so both the frame and the picture inside it were
   sliding 30px, at different rates, one nested in the other. The screen
   arrived before its own bezel — a television whose picture is still
   catching up. Advertise looked right only because .hero-image happens to
   have no animation rule at all.

   The chassis carries it: only .hero-right moves, and the whole set moves
   as one object. */
.tv > img,
.tv > video {
    animation: none;
    transform: none;
    opacity: 1;
}

/* Glass. One soft diagonal across the upper corner — enough to suggest a
   reflective panel, not so much that it dims what is playing. */
.tv::before {
    content: "";
    position: absolute;
    inset: 7px 7px auto 7px;
    height: 42%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(112deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 34%,
        rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}

@media (max-width: 760px) {
    .tv {
        padding: 5px;
        border-radius: 10px;
    }

    .tv::before {
        inset: 5px 5px auto 5px;
    }
}

/* The sheen is decoration sitting on content; anyone who has asked for less
   contrast trickery should not have a gradient over the picture. */
@media (prefers-contrast: more) {
    .tv::before {
        display: none;
    }
}

/* The picture is the screen's content, not a player. Edge (and Chrome) float
   their own toolbar - picture-in-picture, "enhance video" - over any large
   video the pointer hovers, and picture-in-picture pulls the clip out of the
   frame entirely. The videos also carry disablepictureinpicture; taking them
   out of hit-testing stops the toolbar appearing at all. They have no
   controls, so nothing a visitor could click is lost. */
.tv video,
.hero-video,
.video-player {
    pointer-events: none;
}