/*
  ============================================================
  cgdp-video — Portable CSS
  Extracted verbatim from cancer.gov's compiled stylesheet.
  Covers every rule that applies to the exact HTML below:

  .cgdp-embed-media-wrapper
    .cgdp-embed-video.cgdp-embed-video--medium.align-center
      .cgdp-video
        figure.cgdp-video__figure
          .cgdp-video__media
            .video-preview__container
              img
              .video-preview__play-button > svg > path.play-button--bg
              p.cgdp-video__title
          figcaption.cgdp-video__caption > p
        .cgdp-video__audio-described-link
          svg.usa-icon
          p > a.usa-link
  ============================================================
*/


/* ── 1. Outer media wrapper ──────────────────────────────── */

.cgdp-embed-media-wrapper {
  clear: both;
  margin-top: 0;
  max-width: 88ex;
}


/* ── 2. Embed size/alignment container ───────────────────── */

/* Base (mobile-first): full width */
.cgdp-embed-video.cgdp-embed-video--medium {
  flex: 0 1 auto;
  margin: 1.5rem auto;
  text-align: center;
  text-align: left;
  width: 100%;
}

/* align-left / align-right inner div resets */
.cgdp-embed-video.cgdp-embed-video--medium.align-left > div,
.cgdp-embed-video.cgdp-embed-video--medium.align-right > div {
  align-items: flex-start;
  display: block;
  text-align: left;
}

/* align-left: float left on tablet+ */
.cgdp-embed-video.cgdp-embed-video--medium.align-left {
  float: none;
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: left;
}

@media (min-width: 40em) {
  .cgdp-embed-video.cgdp-embed-video--medium.align-left {
    float: left;
    margin-bottom: 1rem;
    margin-right: 2rem;
  }
}

/* align-right: float right on tablet+ */
.cgdp-embed-video.cgdp-embed-video--medium.align-right {
  float: none;
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: right;
  text-align: left;
}

@media (min-width: 40em) {
  .cgdp-embed-video.cgdp-embed-video--medium.align-right {
    float: right;
    margin-bottom: 1rem;
    margin-left: 2rem;
  }

  /* Desktop: medium variant takes 2/3 of the column */
  .cgdp-embed-video.cgdp-embed-video--medium {
    flex: 0 1 auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    width: 66.6666666667%;
  }
}


/* ── 3. <figure> wrapper ─────────────────────────────────── */

.cgdp-video__figure {
  margin: 0;
}


/* ── 4. Responsive 16:9 video container ──────────────────── */

.cgdp-video__media {
  background-color: #06162d;
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
  padding-bottom: 56.25%;  /* 9/16 = 56.25% → 16:9 ratio */
  padding-top: 0;
  position: relative;
  width: 100%;
}

/* Embedded media fills the box absolutely */
.cgdp-video__media embed,
.cgdp-video__media iframe,
.cgdp-video__media object,
.cgdp-video__media video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* ── 5. Thumbnail preview container ─────────────────────── */

.cgdp-video .video-preview__container:focus,
.cgdp-video .video-preview__container:hover {
  cursor: pointer;
}

/* Dark gradient bar at top (title readability) */
.cgdp-video .video-preview__container::before {
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2) 60%, transparent);
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

/* Thumbnail <img> */
.cgdp-video .video-preview__container > img {
  height: auto;
  left: 0;
  margin-top: -9.4%;   /* negative pull fills the padded 16:9 box */
  position: absolute;
  top: 0;
  width: 100%;
}

/* Title text overlaid on thumbnail */
.cgdp-video .video-preview__container p {
  color: #fff;
  margin: .5em 0;
  overflow: hidden;
  padding: 0 15px;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 95%;
  z-index: 10;
}


/* ── 6. Play button SVG ──────────────────────────────────── */

.cgdp-video .video-preview__play-button {
  height: 48px;
  left: calc(50% - 34px);  /* 68px wide, centered */
  position: absolute;
  top: calc(50% - 24px);   /* 48px tall, centered */
  width: 68px;
}

/* YouTube-red fill on hover/focus */
.cgdp-video .video-preview__container:focus .play-button--bg,
.cgdp-video .video-preview__container:hover .play-button--bg {
  fill: red;
  fill-opacity: 1;
  transition: all .1s cubic-bezier(0, 0, .2, 1);
}

/* Focus ring on play button when keyboard-focused */
.cgdp-video .video-preview__container:focus:focus .video-preview__play-button,
.cgdp-video .video-preview__container:hover:focus .video-preview__play-button {
  outline: .25rem solid #3395ca;
  outline-offset: 2px;
}


/* ── 7. <figcaption> caption block ───────────────────────── */

.cgdp-video__caption {
  border-left: .25rem solid #298085;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: .89rem;
  line-height: 1.6;
  padding: .5rem 1rem;
}

.cgdp-video__caption p {
  margin-top: 0;
}

.cgdp-video__caption p:not(:only-child) {
  margin-bottom: .5rem;
}

.cgdp-video__caption p:last-child {
  margin-bottom: 0;
}


/* ── 8. Audio-described link bar ─────────────────────────── */

.cgdp-video__audio-described-link {
  align-items: center;
  border-left: .25rem solid #298085;
  display: flex;
  padding: .5rem 1rem;
}

.cgdp-video__audio-described-link p {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: .82rem;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 0;
}

.cgdp-video__audio-described-link svg {
  font-size: 2.03rem;
  margin-right: .5rem;
}


/* ── 9. USWDS icon (svg.usa-icon) ────────────────────────── */

.usa-icon {
  fill: currentColor;
  display: inline-block;
  height: 1em;
  position: relative;
  width: 1em;
}


/* ── 10. USWDS link (a.usa-link) ─────────────────────────── */

.usa-link {
  color: #01679d;
  text-decoration: underline;
}

.usa-link:visited {
  color: #54278f;
}

.usa-link:hover {
  color: #004971;
}

.usa-link:active {
  color: #00314b;
}

.usa-link:focus {
  outline: .25rem solid #2491ff;
  outline-offset: 0;
}