/**
 * video-embeds — click-to-play video facade.
 *
 * Only what the facade needs to be correct: a fixed 16:9 box so nothing shifts
 * when the iframe replaces the poster, a poster that fills that box, an
 * overlaid play control, and a visible focus ring. The gradient panel is the
 * documented last-resort fallback for when no poster image could be resolved.
 */

.riseup-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #012e4a;
}

/* The whole box is the button, so the click target matches what you see. */
.riseup-video__trigger {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.riseup-video__poster {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	object-fit: cover;
}

/* No poster image available: a styled panel, never an empty box. */
.riseup-video--fallback .riseup-video__trigger {
	background-image: linear-gradient(135deg, #012e4a 0%, #0a6b8a 55%, #00b0b9 100%);
}

.riseup-video__title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 3em 1em 1em;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-align: center;
}

.riseup-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background-color: rgba(1, 46, 74, 0.72);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.riseup-video__play svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.2rem;
	fill: #fff;
}

.riseup-video__trigger:hover .riseup-video__play,
.riseup-video__trigger:focus .riseup-video__play,
.riseup-video__trigger:focus-visible .riseup-video__play {
	background-color: #00b0b9;
	transform: translate(-50%, -50%) scale(1.06);
}

.riseup-video__trigger:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* The injected player fills exactly the space the poster occupied. */
.riseup-video__frame {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.riseup-video__noscript {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.75em 1em;
	background-color: rgba(1, 46, 74, 0.85);
	color: #fff;
	font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {

	.riseup-video__play {
		transition: none;
	}

	.riseup-video__trigger:hover .riseup-video__play,
	.riseup-video__trigger:focus .riseup-video__play,
	.riseup-video__trigger:focus-visible .riseup-video__play {
		transform: translate(-50%, -50%);
	}
}