.gbp-post-field {
	line-height: 1.6;
}

.gbp-post-field img {
	max-width: 100%;
	height: auto;
	display: block;
}

.gbp-post-field--empty {
	color: #999;
	font-style: italic;
}

.gbp-post-field--placeholder {
	padding: 20px;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	text-align: center;
	color: #666;
}

/* Video (player): responsive 16:9 box. */
.gbp-post-field__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.gbp-post-field__video iframe,
.gbp-post-field__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Video (background / cover): fills its box like a background video.
   Height comes from the widget's Background Video Height control
   (480px default below). Iframes can't object-fit, so the frame is
   oversized to whichever dimension covers, using container-query
   units against the wrapper; browsers without cq support letterbox
   gracefully. Pointer events pass through — it's decoration. */
.gbp-post-field__video-bg {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	container-type: size;
}

.gbp-post-field__video-bg iframe,
.gbp-post-field__video-bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

.gbp-post-field__video-bg video {
	object-fit: cover;
}

@supports (width: 1cqw) {
	.gbp-post-field__video-bg iframe {
		/* Cover a 16:9 frame: at least full width/height, grown along
		   whichever axis the box's aspect ratio demands. */
		width: max(100cqw, 177.78cqh);
		height: max(100cqh, 56.25cqw);
	}
}