/* =====================================================================
   Faixa da câmera (patterns/camera-spot.php): a primeira linha da loja para quem vem do vídeo. Duas células da grade
   logo abaixo do cabeçalho, sem espaçador: o vídeo (mídia, sem texto por cima) e a compra. Até 899px, uma embaixo
   da outra, com o vídeo quadrado, para o botão caber na primeira tela do celular.
   ===================================================================== */

.gvsx-camspot[hidden] { display: none; }
.gvsx-camspot { --gvsx-pair: minmax(0, 1.6fr) minmax(0, 1fr); }

.gvsx-camspot__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 0 !important; background: #050806; }
.gvsx-camspot__poster, .gvsx-camspot__poster img, .gvsx-camspot__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.gvsx-camspot__poster img, .gvsx-camspot__video { object-fit: cover; display: block; }
/* os cortes (camera-spot*.mp4) e os pôsteres já vêm sem as tarjas do teaser: 2,39:1 no computador, quadrado no celular */
.gvsx-camspot__video { opacity: 0; transition: opacity var(--gvsx-dur-3) var(--gvsx-ease-out); }
.gvsx-camspot.is-playing .gvsx-camspot__video { opacity: 1; }

.gvsx-camspot__info { display: grid; align-content: center; justify-items: start; gap: 1rem; }
.gvsx-camspot__title { margin: 0; max-width: 17ch; font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem); text-wrap: balance; color: var(--gvsx-text); }
.gvsx-camspot__pc { margin: 0; font-size: 0.95rem; font-weight: 500; line-height: 1.5; color: var(--gvsx-text-2); }
.gvsx-camspot__pc .gvsx-score { margin-right: 0.35rem; vertical-align: 0.1em; }
.gvsx-camspot__buy { display: grid; gap: 0.75rem; width: 100%; max-width: 26rem; margin-top: 0.25rem; }
.gvsx-camspot__price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.gvsx-camspot__price b { font-family: var(--gvsx-font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--gvsx-text); }
.gvsx-camspot__price span { font-size: 0.95rem; color: var(--gvsx-text-2); }
.gvsx-camspot__cta { width: 100%; justify-content: center; }
.gvsx-camspot__proof { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--gvsx-text-2); max-width: 26rem; }
.gvsx-camspot__proof > .gvsx-i { flex: none; margin-top: 0.15em; color: var(--gvsx-text-3); }
.gvsx-camspot__proof b { font-weight: 600; color: var(--gvsx-text); }
.gvsx-camspot__proof span .gvsx-i { color: var(--gvsx-star); vertical-align: -0.15em; margin-right: 0.2em; }
.gvsx-camspot__lead { margin: -0.25rem 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--gvsx-text-2); }
.gvsx-camspot__terms { margin: -0.35rem 0 0; font-size: 0.85rem; color: var(--gvsx-text-2); }
.gvsx-camspot__pay { margin: -0.35rem 0 0; font-size: 0.82rem; text-align: center; color: var(--gvsx-text-3); }
.gvsx-camspot__note { margin: -0.4rem 0 0; max-width: 26rem; font-size: 0.82rem; line-height: 1.45; color: var(--gvsx-text-3); }
.gvsx-camspot__n { display: none; }
/* com movimento reduzido o vídeo não toca: o pôster fica e o botão abre o vídeo no diálogo */
.gvsx-camspot__play { display: none; }
@media (prefers-reduced-motion: reduce) {
	.gvsx-camspot__play { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid rgb(244 247 245 / 0.18); border-radius: var(--gvsx-radius-m); background: var(--gvsx-scrim); color: var(--gvsx-media-text); font-weight: 600; text-decoration: none; }
	.gvsx-camspot__play:focus-visible { outline: 2px solid var(--gvsx-accent); outline-offset: 2px; }
}

/* no computador a coluna da compra é mais alta que o 16:9: a célula do vídeo estica até o fim da linha */
@media (min-width: 900px) { .gvsx-camspot__screen { aspect-ratio: auto; align-self: stretch; min-height: 22rem; } }
@media (max-width: 599px) { .gvsx-camspot__w { display: none; } .gvsx-camspot__n { display: inline; } }
@media (max-width: 899px) {
	.gvsx-camspot__screen { aspect-ratio: 1 / 1; max-height: 52svh; }
	.gvsx-camspot__info { gap: 0.8rem; }
	.gvsx-camspot__buy { max-width: none; }
}
@media (max-width: 899px) and (min-width: 600px) { .gvsx-camspot__screen { aspect-ratio: 16 / 10; max-height: none; } }