/**
 * Widget BRZ Media Marquee.
 *
 * Carrega depois do brz-marquee.css, declarado em 'styles' no manifesto:
 * a faixa, o trilho, o grupo, o separador e o esmaecimento são de lá. Aqui
 * mora só o que é de mídia.
 *
 * A caixa tem altura fixa e proporção por item, e a largura sai dessas
 * duas. O contrário quebraria a faixa: <video> não tem largura conhecida
 * até o loadedmetadata chegar, e o trilho seria medido sobre um layout que
 * ainda vai mudar.
 */

.brz-media-marquee {
	--brz-media-height: 260px;
	--brz-media-radius: 0px;
	--brz-media-overlay: transparent;
	--brz-media-caption-color: currentColor;

	--brz-media-play-color: #fff;
	--brz-media-play-bg: rgba( 0, 0, 0, 0.55 );
	--brz-media-play-size: 3.5rem;
}

.brz-media-marquee__item {
	align-items: center;
	flex-direction: column;
	gap: 0.6em;
}

/* Caixa de mídia
   -------------- */

.brz-media-marquee__box {
	background-color: rgba( 0, 0, 0, 0.06 );
	background-color: color-mix( in srgb, currentColor 8%, transparent );
	block-size: var( --brz-media-height );
	border-radius: var( --brz-media-radius );
	display: block;
	inline-size: auto;
	overflow: hidden;
	position: relative;
}

.brz-media-marquee__box--16-9 { aspect-ratio: 16 / 9; }
.brz-media-marquee__box--1-1  { aspect-ratio: 1 / 1; }
.brz-media-marquee__box--9-16 { aspect-ratio: 9 / 16; }
.brz-media-marquee__box--4-5  { aspect-ratio: 4 / 5; }
.brz-media-marquee__box--4-3  { aspect-ratio: 4 / 3; }

.brz-media-marquee__box img,
.brz-media-marquee__video {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.brz-media-marquee__overlay {
	background-color: var( --brz-media-overlay );
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.brz-media-marquee__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

/* O a:hover do tema tem um elemento a mais que a classe e pintaria a
   legenda herdada. */

.brz-media-marquee__link:hover {
	color: inherit;
}

.brz-media-marquee__caption {
	color: var( --brz-media-caption-color );
	display: block;
	font-size: 0.875rem;
	line-height: 1.3;
	text-align: center;
}

/* Selo de play
   ------------

   É um <button> de verdade, não um ícone decorativo: quem abre o lightbox
   tem de ser alcançável por teclado e anunciado como controle. O rótulo
   fica em texto escondido visualmente. */

.brz-media-marquee__play {
	align-items: center;
	background-color: var( --brz-media-play-bg );
	block-size: var( --brz-media-play-size );
	border: 0;
	border-radius: 999px;
	color: var( --brz-media-play-color );
	cursor: pointer;
	display: flex;
	inline-size: var( --brz-media-play-size );
	inset-block-start: 50%;
	inset-inline-start: 50%;
	justify-content: center;
	padding: 0;
	position: absolute;
	transform: translate( -50%, -50% );
	transition: transform 0.3s ease, background-color 0.3s ease;
	z-index: 2;
}

/* O triângulo é desenhado com borda: um caractere ▶ herda métrica de fonte
   e nunca fica centrado do mesmo jeito em dois sistemas. */

.brz-media-marquee__play::before {
	border-block: 0.5em solid transparent;
	border-inline-end: 0;
	border-inline-start: 0.8em solid currentColor;
	content: "";
	display: block;
	margin-inline-start: 0.2em;
}

.brz-media-marquee__play:hover,
.brz-media-marquee__play:focus-visible {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.brz-media-marquee__play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Texto escondido do olho, presente para o leitor de tela. Redeclarado
   aqui porque o widget não pode depender de o tema trazer a classe. */

.brz-media-marquee .screen-reader-text {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* Movimento reduzido
   ------------------

   Vídeo tocando é movimento. O autoplay some aqui pelo JS; esta camada
   garante que nada volte a se mexer se a preferência mudar com a página
   aberta. */

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

	.brz-media-marquee__play,
	.brz-media-marquee__play:hover {
		transform: translate( -50%, -50% );
		transition: none;
	}
}

/* Lightbox
   --------

   Montado pelo JS e anexado ao body, fora do widget: dentro da faixa ele
   herdaria o overflow hidden do trilho e a rotação da faixa.

   Fica com hidden no HTML, não com display:none no CSS. Assim, sem o JS,
   o elemento nem existe — e com o JS, alternar hidden é o suficiente. */

.brz-media-lightbox {
	align-items: center;
	background-color: rgba( 0, 0, 0, 0.9 );
	display: flex;
	inset: 0;
	justify-content: center;
	padding: clamp( 1rem, 4vw, 4rem );
	position: fixed;
	z-index: 999999;
}

.brz-media-lightbox[hidden] {
	display: none;
}

.brz-media-lightbox__stage {
	aspect-ratio: 16 / 9;
	max-block-size: 100%;
	max-inline-size: min( 100%, 1600px );
	inline-size: 100%;
}

.brz-media-lightbox__frame,
.brz-media-lightbox__video {
	background-color: #000;
	block-size: 100%;
	border: 0;
	display: block;
	inline-size: 100%;
}

.brz-media-lightbox__close {
	background-color: rgba( 255, 255, 255, 0.12 );
	block-size: 3rem;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	inline-size: 3rem;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	position: absolute;
}

.brz-media-lightbox__close::before,
.brz-media-lightbox__close::after {
	background-color: currentColor;
	block-size: 2px;
	content: "";
	inline-size: 1.25rem;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
}

.brz-media-lightbox__close::before {
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.brz-media-lightbox__close::after {
	transform: translate( -50%, -50% ) rotate( -45deg );
}

.brz-media-lightbox__close:hover,
.brz-media-lightbox__close:focus-visible {
	background-color: rgba( 255, 255, 255, 0.25 );
}

.brz-media-lightbox .screen-reader-text {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* Trava a rolagem do fundo enquanto o diálogo está aberto. */

.brz-media-lightbox-open {
	overflow: hidden;
}