/**
 * @file
 * Provides colorbox integration, adjust like everything else.
 *
 * @requires coder shutup
 * phpcs:ignoreFile -- Colorbox has no classes, just IDs, with inline styles.
 * Since 2.17, body classes is deprecated for local classes in the #colorbox,
 * and is removed in 3.x.
 */

.b-colorbox--iframe,
.b-colorbox--iframe * {
  box-sizing: border-box;
  max-width: 100%;
}

/* stylelint-disable */
.b-colorbox--iframe #cboxBottomCenter,
.b-colorbox--iframe #cboxBottomRight,
.b-colorbox--iframe #cboxBottomLeft,
.b-colorbox--iframe #cboxTopCenter,
.b-colorbox--iframe #cboxTopRight,
.b-colorbox--iframe #cboxTopLeft,
.b-colorbox--iframe #cboxMiddleLeft,
.b-colorbox--iframe #cboxMiddleRight {
  display: none !important;
}

.b-colorbox--iframe #cboxWrapper,
.b-colorbox--iframe #cboxContent {
  border-radius: 0;
  background: none;
}

.b-colorbox--iframe #cboxWrapper,
.b-colorbox--iframe #cboxContent,
.b-colorbox--iframe #cboxLoadedContent {
  overflow: visible !important;
}

.b-colorbox .media--ratio {
  height: 0 !important;
  padding-bottom: 56%;
}
/* stylelint-enable */

.b-colorbox iframe {
  border: 8px solid #37465b;
  border-radius: 0;
  background-clip: padding-box;
}

.b-colorbox img[srcset],
.b-colorbox picture img {
  display: block;
  width: auto;
  max-width: none;
  max-height: 100%;
  margin: auto;
}

.b-colorbox .media--instagram {
  min-width: 320px;
}

/* VEF Instagram to avoid being cropped due to anti-mainstream iframe ratio.
Be sure to not affect dynamic Instagram oEmbed. They are different beasts. */
.b-colorbox .media--instagram .cboxIframe {
  max-width: 320px;
}