/* ==========================================================================
   RBF Shortcodes — Shared Front-End Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   [rbf_video]
   -------------------------------------------------------------------------- */

/* Outer figure resets */
.rbf-video-wrap {
	margin: 1.5em 0;
	padding: 0;
	border: 0;
}

/* Aspect-ratio container using the padding-bottom trick */
.rbf-video__outer {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
	/* Subtle shadow so the video lifts off the page */
	box-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}

/* The iframe fills the container */
.rbf-video__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Transparent overlay — covers the video area ABOVE YouTube's native
   control bar (~46px), blocking their centre play/pause animation.
   Clicks on the overlay send a postMessage play/pause command. */
.rbf-video__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 46px);
	z-index: 2;
	cursor: pointer;
}

/* Facade: thumbnail + controls bar */
.rbf-video__facade {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.rbf-video__controls {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: linear-gradient(transparent, rgba(0,0,0,.75));
}

.rbf-video__play-btn {
	background: #e63329;
	border: none;
	border-radius: 4px;
	width: 40px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background .15s;
}

.rbf-video__facade:hover .rbf-video__play-btn,
.rbf-video__play-btn:focus {
	background: #c0271e;
}

.rbf-video__play-btn svg {
	width: 14px;
	height: 14px;
	fill: #fff;
}

/* Optional caption */
.rbf-video__caption {
	margin: 0.5em 0 0;
	font-size: 0.85rem;
	color: #666;
	text-align: center;
	font-style: italic;
}