/* ==========================================================================
   Widget: Vídeos (cards verticais 9:16, o vídeo só carrega ao clicar em play)
   ========================================================================== */

.mr-vid {
	position: relative;
	padding: 6rem 1.5rem 6.5rem;
	background: var(--mr-lavender-soft);
	font-family: var(--mr-font-body);
}

/* ---------- Cabeçalho ---------- */
.mr-vid__header { max-width: var(--mr-max-w); margin: 0 auto 3rem; text-align: center; }
.mr-vid__eyebrow { display: block; margin-bottom: .7rem; }

.mr-vid .mr-vid__title {
	margin: 0 0 .7rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2rem, 4vw, 4rem);
	font-style: italic;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	line-height: 1.1;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-vid .mr-vid__title em,
.mr-vid .mr-vid__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }

.mr-vid .mr-vid__lead { max-width: 56ch; margin: 0 auto; font-size: 1rem; line-height: 1.45; color: var(--mr-text-muted); }

/* ---------- Cards ---------- */
.mr-vid__grid {
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 320px));
	justify-content: center;
	gap: 2rem 1.75rem;
}

.mr-vid .mr-vid__card { margin: 0; }

.mr-vid__media {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--mr-purple);
	border-radius: 1.6rem;
	box-shadow: 0 14px 44px rgba(83, 32, 107, .18);
	isolation: isolate;
	transition: transform .25s, box-shadow .25s;
}
.mr-vid__media[data-kind]:hover { transform: translateY(-4px); box-shadow: 0 20px 54px rgba(83, 32, 107, .26); }

.mr-vid .mr-vid__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* degradê para dar leitura às etiquetas e ao botão */
.mr-vid__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(40, 14, 54, .45) 0%, rgba(40, 14, 54, 0) 24%, rgba(40, 14, 54, 0) 62%, rgba(40, 14, 54, .55) 100%);
	pointer-events: none;
}

.mr-vid__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: .28rem .8rem;
	border-radius: 100px;
	background: var(--mr-purple);
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.mr-vid__duration {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	padding: .22rem .65rem;
	border-radius: 100px;
	background: rgba(26, 26, 26, .62);
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
}

/* ---------- Botão de play ---------- */
/* o botão cobre o card inteiro; as regras de todos os estados anulam o estilo de botão do tema (rosa no hover) */
.mr-vid .mr-vid__play,
.mr-vid .mr-vid__play:hover,
.mr-vid .mr-vid__play:focus,
.mr-vid .mr-vid__play:active {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	line-height: 0;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.mr-vid__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #fff;
	color: var(--mr-purple);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, .28), 0 10px 30px rgba(0, 0, 0, .28);
	transition: transform .2s, background .2s, color .2s;
}
.mr-vid__play-icon svg { display: block; width: 28px; height: 28px; margin-left: 4px; }
.mr-vid .mr-vid__play:hover .mr-vid__play-icon,
.mr-vid .mr-vid__play:focus-visible .mr-vid__play-icon { transform: scale(1.08); background: var(--mr-purple); color: #fff; }
.mr-vid .mr-vid__play:focus-visible { outline: 3px solid var(--mr-lavender); outline-offset: -6px; }

/* ---------- Vídeo tocando ---------- */
.mr-vid__media.is-playing .mr-vid__shade,
.mr-vid__media.is-playing .mr-vid__tag,
.mr-vid__media.is-playing .mr-vid__duration,
.mr-vid__media.is-playing .mr-vid__play { display: none; }
.mr-vid .mr-vid__player { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; max-width: none; border: 0; background: #000; object-fit: cover; }

/* ---------- Texto do card ---------- */
.mr-vid__info { padding: 1.1rem .4rem 0; }
.mr-vid .mr-vid__card-title {
	margin: 0 0 .4rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-vid .mr-vid__card-text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--mr-text-muted); }

/* ---------- Onda ---------- */
.mr-vid__wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; pointer-events: none; color: #fff; }
.mr-vid__wave svg { display: block; width: 100%; height: 72px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-vid { padding: 4.5rem 0 5rem; }
	.mr-vid__header { padding: 0 1.25rem; margin-bottom: 2.25rem; }

	/* os cards viram uma fileira que desliza de lado, cada um "encaixa" ao parar */
	.mr-vid__grid {
		display: flex;
		justify-content: flex-start;
		gap: 1.1rem;
		padding: .5rem 1.25rem 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 1.25rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mr-vid__grid::-webkit-scrollbar { display: none; }
	.mr-vid .mr-vid__card { flex: 0 0 min(76vw, 320px); scroll-snap-align: start; }
}

@media (max-width: 640px) {
	.mr-vid__play-icon { width: 64px; height: 64px; }
	.mr-vid__play-icon svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.mr-vid__media { transition: none; }
}