/* The strip itself is styled by the "Campaign LP - design" snippet, alongside
   the rest of the page. What is left here is only what GLightbox needs bent. */

/* One box, sized by whichever of width or height runs out first, so a 9:16
   video is never taller than the viewport - including on a phone held
   sideways. The 150px reserve is the top close button and the bottom arrow
   band. aspect-ratio derives the height, keeping one source of truth. (Two
   declarations: the vh one is the fallback for engines without dvh.) */
.glightbox-container .ginner-container{
	max-width:none!important;
	height:auto!important;
	margin:auto!important;
	aspect-ratio:9/16;
	width:min(94vw,420px,calc((100vh - 150px) * 0.5625))!important;
	width:min(94vw,420px,calc((100dvh - 150px) * 0.5625))!important;
}

/* GLightbox styles the 'external' slide as a scrollable white panel meant for
   embedded web pages: max-height:75vh below 769px, min-width:100%, background
   #fff. All three are wrong for a video - the 75vh cap alone left the iframe
   ~53px short of its box on a phone, which YouTube then pillarboxed. */
.glightbox-container .gslide-external{
	max-height:none!important;min-width:0!important;
	background:#000!important;overflow:hidden!important;
}
.glightbox-container .gslide-media{
	display:block!important;width:100%!important;height:100%!important;
	min-height:0!important;box-shadow:none!important;
}
.glightbox-container .gslide-inner-content{height:100%}
.glightbox-container .gslide-media iframe{
	width:100%!important;height:100%!important;
	border:0;border-radius:16px;background:#000;
}

/* GLightbox parks the arrows at top:-100% below 769px, so on a phone the only
   way to change slide is a swipe - and a swipe that starts on the video lands
   inside a cross-origin iframe and never reaches the page. Bring them back as a
   pair in the reserved band under the video, where a thumb can reach them. */
.glightbox-clean .gprev,
.glightbox-clean .gnext{
	top:auto!important;bottom:20px!important;
	width:46px!important;height:46px!important;
	border-radius:50%!important;
	background-color:rgba(255,255,255,.16)!important;
}
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover{background-color:rgba(255,255,255,.3)!important}
/* RTL: "previous" is the card to the right, "next" the card to the left - so
   swap the sides, and mirror the chevrons to match. Moving them without
   flipping leaves a left-pointing arrow on the right that goes backwards. */
.glightbox-clean .gprev{left:auto!important;right:calc(50% - 92px)!important}
.glightbox-clean .gnext{right:auto!important;left:calc(50% - 92px)!important}
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg{transform:scaleX(-1)}