/* "Discover eSSESSMENT" video over the eSSESSMENT page (/essessment?video=discover). Prefixes dvm-, dv-. */
.dvm { width: min(1200px, 100vw - 32px, (100dvh - 128px) * 16 / 9); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.dvm::backdrop { background: rgba(10, 10, 12, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dvm:focus { outline: none; }
.dvm[open] { animation: dvm-in 0.3s ease; }
.dvm[open]::backdrop { animation: dvm-fade 0.3s ease; }
@keyframes dvm-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes dvm-fade { from { opacity: 0; } }
.dvm-x { position: absolute; right: 0; top: -52px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; transition: background-color 0.15s ease; }
.dvm-x:hover { background: rgba(255, 255, 255, 0.28); }
.dvm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.dv-frame { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--band); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.6); }
.dv-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* The film module (#film), after Model cards: the same gray panel and white card, sized by the same rules
   ess2.css gives #model-cards-skin. Prefix dvf-. */
@media (min-width: 640px) {
  #film .ie-v.mcx-v { display: block; height: auto !important; aspect-ratio: auto; min-height: 0; padding: 32px; align-self: center; }
  #film .ie-v.mcx-v > .mcx-c { box-sizing: border-box; width: 100%; max-width: none; margin: 0; aspect-ratio: 608 / 354; transform: none; }
}
@media (max-width: 639px) {
  #film .ie-v.mcx-v { order: 1; height: auto; aspect-ratio: auto; padding: 12px; }
  #film .ie-v.mcx-v > .mcx-c { box-sizing: border-box; width: 100%; max-width: none; margin: 0; transform: none; aspect-ratio: 608 / 354; }
  #film .mx-all { order: 2; justify-self: start; margin: 10px 0 0 25px; font-size: 16px; }
}
#film .dvf-c { position: relative; display: block; padding: 12px; border: 0; cursor: pointer; }
#film .dvf-c img { display: block; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.dvf-p { position: absolute; left: 32px; bottom: 32px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(14, 14, 16, 0.86); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, background-color 0.2s ease; }
.dvf-p svg { width: 26px; height: 26px; margin-left: 3px; fill: #fff; }
#film .dvf-c:hover .dvf-p { background: #b51f2a; transform: scale(1.06); }
.dvf-b { border: 0; background: none; cursor: pointer; }
@media (max-width: 639px) { .dvf-p { left: 20px; bottom: 20px; width: 48px; height: 48px; } .dvf-p svg { width: 20px; height: 20px; } #film .dvf-c { padding: 8px; } #film .dvf-c img { border-radius: 10px; } }

/* Homepage explainer card: the same play button as the eSSESSMENT film card (.dvf-p), in place of the
   design's small player bar; any click on the card opens the video over the page. */
#explainer-tour .ivd-ctl { display: none !important; }
#explainer-tour .ivd-v { cursor: pointer; }
#explainer-tour .ivd-v::after { content: ""; position: absolute; left: 32px; bottom: 32px; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: rgba(14, 14, 16, 0.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23fff'/%3E%3C/svg%3E") 54% 50% / 26px no-repeat; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, background-color 0.2s ease; }
#explainer-tour .ivd-v:hover::after { background-color: #b51f2a; transform: scale(1.06); }
@media (max-width: 639px) { #explainer-tour .ivd-v::after { left: 20px; bottom: 20px; width: 48px; height: 48px; background-size: 20px; } }