/* DE Video (blog). The frame reserves the video's shape before any player loads, so the block never changes
   height and nothing after it moves. Player markup is stretched to fill the frame instead of sizing it. */
[data-de26].de26-blog-video {
  display: block;
  padding: 0;
}
[data-de26] .de26-blog-video__frame {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--de26-radius-default);
  background: var(--de26-black);
}
[data-de26].de26-blog-video--9-16 .de26-blog-video__frame { aspect-ratio: 9 / 16; }
[data-de26].de26-blog-video--1-1 .de26-blog-video__frame { aspect-ratio: 1 / 1; }
/* Tall shapes cap their width so a vertical video is not taller than the screen; the caption follows the frame. */
[data-de26].de26-blog-video--9-16 :is(.de26-blog-video__frame, .de26-blog-video__caption, .de26-blog__placeholder) {
  max-width: 400px;
  margin-inline: auto;
}
[data-de26].de26-blog-video--1-1 :is(.de26-blog-video__frame, .de26-blog-video__caption, .de26-blog__placeholder) {
  max-width: 560px;
  margin-inline: auto;
}

/* Everything in the frame, including what the Vidyard script injects (it writes inline sizes), fills it. */
[data-de26] .de26-blog-video__frame > :not(.de26-sr-only),
[data-de26] .de26-blog-video__play > img,
[data-de26] .de26-blog-video__frame .vidyard-player-container,
[data-de26] .de26-blog-video__frame [class*="vidyard-div-"],
[data-de26] .de26-blog-video__frame [class*="vidyard-inner-container-"],
[data-de26] .de26-blog-video__frame .vidyard-lightbox-thumbnail,
[data-de26] .de26-blog-video__frame .vidyard-lightbox-centering,
[data-de26] .de26-blog-video__frame .vidyard-lightbox-image,
[data-de26] .de26-blog-video__frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}
[data-de26] .de26-blog-video__frame img {
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

/* YouTube: the poster is a button; nothing loads from YouTube until it is pressed. */
[data-de26] .de26-blog-video__play,
[data-de26] .de26-blog-video__play:hover,
[data-de26] .de26-blog-video__play:focus {
  display: block;
  cursor: pointer;
  background: var(--de26-black);
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-transform: none;
}
/* The play glyph sits above the poster image. */
[data-de26] .de26-blog-video__play::before,
[data-de26] .de26-blog-video__play::after {
  z-index: 1;
}
[data-de26] .de26-blog-video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--de26-azure);
  box-shadow: 0 0 0 4px var(--de26-white);
}
[data-de26] .de26-blog-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--de26-white);
}
[data-de26] .de26-blog-video__play:hover::before { background: var(--de26-space); }
/* Focus: the frame clips anything outside it, and a poster or player covers anything painted under it, so the ring
   is an overlay above the frame's contents: a Space band at the edge and a white band inside it, visible on any
   surface. It shows for the play button and for a player iframe holding keyboard focus (marked by the script). */
[data-de26] :is(.de26-blog-video__frame, .de26-blog-video__dialog-frame) iframe.de26-blog-video__focused,
[data-de26] .de26-blog-video__play:focus-visible {
  outline: 3px solid var(--de26-space);
  outline-offset: -3px;
}
[data-de26] .de26-blog-video__frame:has(.de26-blog-video__play:focus-visible, iframe.de26-blog-video__focused)::after,
[data-de26] .de26-blog-video__dialog-frame:has(iframe.de26-blog-video__focused)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--de26-space), inset 0 0 0 6px var(--de26-white);
  pointer-events: none;
}
[data-de26] .de26-blog-video__play img { pointer-events: none; }

/* Caption: a bar joins the frame and shares its corners, or plain text sits under it. */
[data-de26] .de26-blog-video__caption {
  display: block;
  margin: 0;
  padding: var(--de26-gap-1x) 0 0;
  font-family: var(--de26-font-body);
  font-size: var(--de26-body-2);
  font-weight: 400;
  line-height: 1.5;
  color: var(--de26-fg);
  letter-spacing: inherit;
  text-wrap: wrap;
  overflow-wrap: anywhere;
}
[data-de26].de26-blog-video--cap-plain-white .de26-blog-video__caption { color: var(--de26-white); }
[data-de26]:is(.de26-blog-video--cap-white-bar, .de26-blog-video--cap-dark-bar) .de26-blog-video__caption {
  padding: var(--de26-gap-2x) var(--de26-gap-3x);
  border-radius: 0 0 var(--de26-radius-default) var(--de26-radius-default);
}
[data-de26].de26-blog-video--cap-white-bar .de26-blog-video__caption {
  background: var(--de26-white);
  border: 1px solid var(--de26-border);
  border-top: 0;
}
[data-de26].de26-blog-video--cap-dark-bar .de26-blog-video__caption {
  background: var(--de26-space);
  color: var(--de26-white);
}
[data-de26]:is(.de26-blog-video--cap-white-bar, .de26-blog-video--cap-dark-bar) .de26-blog-video__frame:has(+ .de26-blog-video__caption) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Editor only: why the video is missing. */
[data-de26] .de26-blog-video__notice {
  margin: 0 0 var(--de26-gap-1x);
  font-family: var(--de26-font-body);
  font-size: var(--de26-caption);
  line-height: 1.5;
  color: var(--de26-fg);
  overflow-wrap: anywhere;
}

/* Lightbox (YouTube): a modal dialog with the player at the video's shape. */
[data-de26] .de26-blog-video__dialog {
  width: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: var(--de26-gap-2x);
  border: 0;
  border-radius: var(--de26-radius-default);
  background: var(--de26-black);
  overflow: visible;
}
[data-de26] .de26-blog-video__dialog::backdrop {
  background: var(--de26-black);
  opacity: 0.8;
}
[data-de26] .de26-blog-video__dialog-frame {
  position: relative;
  isolation: isolate;
  width: min(1000px, 90vw, calc((100vh - 140px) * 16 / 9));
  aspect-ratio: 16 / 9;
}
[data-de26].de26-blog-video--9-16 .de26-blog-video__dialog-frame {
  width: min(400px, 90vw, calc((100vh - 140px) * 9 / 16));
  aspect-ratio: 9 / 16;
}
[data-de26].de26-blog-video--1-1 .de26-blog-video__dialog-frame {
  width: min(560px, 90vw, calc(100vh - 140px));
  aspect-ratio: 1 / 1;
}
[data-de26] .de26-blog-video__dialog-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
[data-de26] .de26-blog-video__close,
[data-de26] .de26-blog-video__close:hover,
[data-de26] .de26-blog-video__close:focus {
  display: block;
  margin: 0 0 var(--de26-gap-1x) auto;
  padding: var(--de26-gap-1x) var(--de26-gap-2x);
  border: 1px solid var(--de26-white);
  border-radius: var(--de26-radius-button);
  background: transparent;
  color: var(--de26-white);
  font-family: var(--de26-font-body);
  font-size: var(--de26-body-2);
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
}
[data-de26] .de26-blog-video__close:hover { background: var(--de26-space); }
[data-de26] .de26-blog-video__close:focus-visible {
  outline: 3px solid var(--de26-white);
  outline-offset: 2px;
}