@font-face {
	font-family: DINNextRegular;
	src: local("DINNextLTPro-Regular"), local("DINNextLTPro Regular"), url(/wp-content/themes/raindrop/library/fonts/DINNext/DINNextLTPro-Regular.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: fallback
}

@font-face {
	font-family: DINNextMedium;
	src: local("DINNextLTPro-Medium"), local("DINNextLTPro Medium"), url(/wp-content/themes/raindrop/library/fonts/DINNext/DINNextLTPro-Medium.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: fallback
}

.video-page-header { /* hidden */
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

.video-page-content pint-content-width {
	--margin: 5vw;
	display: block;
	max-width: calc(100% - var(--margin) * 6);
}

.video-page-content {
	padding-block: 10vw;
}

/* Reduced padding for pages with portrait videos */
.video-page-content:has(video-wrapper[data-orientation="portrait"]) {
	padding-block: 3vw;
}

.video-page-content p {
	text-align: center;
	font-size: 16px;
	line-height: 140%;
	color: #111821;
	width: 100%;
	max-width: 100%;
}

.video-page p:last-child {
  margin-block-end: 0
}

video-wrapper {
	--margin: 2.5vw;
  display: block;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
	width: 100%;
  height: auto;
  margin: var(--margin) auto;
}

video-wrapper[data-orientation="portrait"] {
  padding-bottom: 177.78%; /* 9:16 aspect ratio for portrait */
}

/* Desktop portrait videos - limit the height aggressively */
@media (min-width: 768px) {
  video-wrapper[data-orientation="portrait"] {
    height: 80vh; /* Fixed height on desktop */
    padding-bottom: 0; /* Remove percentage-based height */
    width: calc(80vh * 9 / 16); /* Calculate width to maintain 9:16 ratio */
  }
}

/* Mobile portrait videos - allow natural sizing but limit height */
@media (max-width: 767px) {
  video-wrapper[data-orientation="portrait"] {
    max-height: calc(100dvh - 10vw); /* Account for page padding */
    padding-bottom: min(177.78%, calc(100dvh - 10vw));
  }
}

video-wrapper iframe,
video-wrapper object,
video-wrapper embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-page-content-wrapper {
	background: white;
	border-radius: 24px;
	padding: 40px;
}

@media (width < 768px) {
  .video-page-content {
    padding-block: 33vmin;
  }
	video-wrapper {
		margin: 0;
		max-width: 100%;
	}
	.video-page-content pint-content-width {
		--margin: 20px;
		max-width: 100%;
  }
	.video-page-content-wrapper {
		border-radius: 16px;
		padding: 20px;
	}
}