.tr-media {
	--tr-media-radius: 8px;

	width: 100%;
	font-family: inherit;
}

/* ── Imagen ─────────────────────────────────────────────────── */

.tr-media__image {
	display: block;
	width: 100%;
	height: 450px !important;
	object-fit: cover;
	border-radius: var(--tr-media-radius) !important;
	margin-top: 15px !important;
}

@media (max-width: 767px) {
	.tr-media__image {
		height: 280px !important;
	}
}

/* ── Vídeo ──────────────────────────────────────────────────── */

.tr-media__video-wrap {
	position: relative;
	width: 100%;
	margin-inline: auto;
	border-radius: var(--tr-media-radius);
	overflow: hidden;
	line-height: 0;
}

.tr-media__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tr-media-radius);
	background: #262522;
}

/*
 * Vídeo horizontal (estilo YouTube): ocupa todo el ancho disponible y
 * mantiene su relación de aspecto natural. Es el comportamiento por defecto.
 */
.tr-media__video-wrap.is-horizontal {
	max-width: 100%;
}

/*
 * Vídeo vertical (estilo TikTok): se muestra en formato retrato y centrado,
 * incluso en móvil. Limitamos el ancho para que no domine el bloque; la
 * altura la marca la propia relación de aspecto del vídeo.
 */
.tr-media__video-wrap.is-vertical {
	max-width: 360px;
}

@media (max-width: 767px) {
	.tr-media__video-wrap.is-vertical {
		max-width: 320px;
	}
}

/* ── Botón play / pausa ─────────────────────────────────────── */

.tr-media__play-btn {
	position: absolute !important;
	inset: 0 !important;
	margin: auto !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: rgba(38, 37, 34, 0.55) !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #ffffff !important;
	transition:
		transform 0.18s,
		opacity 0.2s,
		background 0.18s !important;
	box-shadow: 0 2px 12px rgba(38, 37, 34, 0.25) !important;
	padding: 0 !important;
}

.tr-media__play-btn:hover {
	transform: scale(1.08) !important;
	background: rgba(38, 37, 34, 0.72) !important;
}

.tr-media__play-btn svg {
	width: 34px !important;
	height: 34px !important;
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* Ocultamos el botón de play nativo del centro (Chrome/Safari) */
.tr-media__video::-webkit-media-controls-overlay-play-button {
	display: none !important;
}

/* ── Iconos play / pausa ────────────────────────────────────── */

.tr-media__play-icon {
	display: none !important;
}

/* Pausado: el botón se ve siempre y muestra el icono de play */
.tr-media__video-wrap:not(.is-playing) .tr-media__play-icon--play {
	display: block !important;
}

/* Reproduciendo: el botón muestra el icono de pausa (2 rayas) */
.tr-media__video-wrap.is-playing .tr-media__play-icon--pause {
	display: block !important;
}

/* ── Visibilidad del botón según estado ─────────────────────── */

/* Reproduciendo: el botón desaparece y solo reaparece con hover */
.tr-media__video-wrap.is-playing .tr-media__play-btn {
	opacity: 0 !important;
	pointer-events: none !important;
}

.tr-media__video-wrap.is-playing:hover .tr-media__play-btn {
	opacity: 1 !important;
	pointer-events: auto !important;
}