/*
 * Páginas de servicio: vídeos con portada (archivo o iframe).
 *
 * Dos tipos de reglas:
 * - Maqueta (posición de la portada, del botón de play y del reproductor): con una clase, para que los estilos
 *   genéricos de un tema (img { height: auto }, iframe { max-width: 100% }…) no la rompan.
 * - Aspecto (fondo, tamaño, forma y color del botón…): dentro de :where(), que no suma especificidad, así que
 *   cualquier regla del tema con una clase (.ps-media__play { … }) tiene prioridad sin !important.
 * Sin capas CSS (@layer): así tampoco les ganan los estilos genéricos de un tema que sí use capas.
 *
 * Clases: .ps-media (la caja; --ps-proporcion lleva la proporción del vídeo o de la portada), con
 * .ps-media--video o .ps-media--iframe, .ps-media--vertical o .ps-media--horizontal, e .is-activo cuando
 * ya se está reproduciendo; .ps-media__boton, .ps-media__portada, .ps-media__play y .ps-media__reproductor.
 */

/* ---------------------------------------------------------------- Maqueta */

.ps-media__boton {
	position: absolute;
	inset: 0;
	display: block;
}

.ps-media__portada {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Botón de play: siempre en el centro de la caja. */
.ps-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* El reproductor ocupa toda la caja. */
.ps-media__reproductor {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
}

/* El borde del foco, por dentro (la caja recorta lo que sale). */
.ps-media .ps-media__boton:focus-visible {
	outline-offset: -4px;
}

.ps-media__plantilla {
	display: none;
}

/* ---------------------------------------------------------------- Aspecto (lo cambia el tema) */

:where(.ps-media) {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: var(--ps-proporcion, 16 / 9);
	background: #1d1d1d;
}

:where(.ps-media__boton) {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

:where(.ps-media__portada) {
	margin: 0;
}

:where(.ps-media__play) {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	transition: background-color 0.2s;
}

:where(.ps-media__play svg) {
	display: block;
	width: 45%;
	height: 45%;
}

:where(.ps-media__boton:hover .ps-media__play, .ps-media__boton:focus-visible .ps-media__play) {
	background: rgba(0, 0, 0, 0.85);
}

:where(.ps-media__boton:focus-visible) {
	outline: 3px solid #fff;
}

:where(.ps-media__reproductor) {
	display: block;
	margin: 0;
	border: 0;
	background: #000;
}

:where(video.ps-media__reproductor) {
	object-fit: contain;
}

/* Imagen (cuando la sección muestra una imagen en vez de un vídeo). */
:where(.ps-media__imagen) {
	display: block;
	max-width: 100%;
	height: auto;
}