/* ==========================================================================
   VIDEO PLAYER
   --------------------------------------------------------------------------
   1. YouTube popup player
      Links with the class "kk-play" load their YouTube video into the
      .kk-player box inside an Impreza popup, instead of leaving the site.
      Behaviour: assets/js/components/video-player.js

   2. Impreza Video element
      Lets embedded iframes size themselves by aspect ratio.
   ========================================================================== */


/* --- 1. YouTube popup player --------------------------------------------- */

/* Landscape by default (16:9). */
.kk-player {
	position: relative;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* Portrait (9:16) for YouTube Shorts, or links inside .kk-portrait.
   Capped at 80% of the viewport height so it fits on screen. */
.kk-player.is-portrait {
	width: auto;
	max-width: 100%;
	height: 80vh;
	aspect-ratio: 9 / 16;
}

.kk-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* --- 2. Impreza Video element -------------------------------------------- */

/* Overrides the theme's padding-based sizing so the iframe keeps a clean
   16:9 ratio at any width. */
.w-video.has_iframe iframe {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

/* Self-hosted videos: size the <video> itself, not an inherited ratio (iOS Safari). */
.w-video.ratio_initial:not(.has_iframe) {
  aspect-ratio: auto;
}
.w-video.ratio_initial:not(.has_iframe) video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Portrait videos: show the whole frame, capped to the screen height. */
.w-video.is-portrait {
  max-width: min(100%, calc(80vh * 9 / 16));
}
.w-video.ratio_initial.is-portrait video {
  aspect-ratio: 9 / 16;
}