/**
 * Vídeos Sociais para Elementor
 * Layout da grade, cabeçalho e botões de CTA.
 */

.sve-bloco {
	width: 100%;
}

/* ---------- Cabeçalho ---------- */

.sve-cabecalho {
	margin-bottom: 32px;
}

.sve-titulo {
	margin: 0;
	line-height: 1.2;
}

.sve-subtitulo {
	margin: 8px 0 0;
	line-height: 1.5;
	opacity: 0.75;
}

/* ---------- Grade ---------- */

.sve-grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	align-items: start;
}

.sve-item {
	--sve-raio: 12px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/**
 * O embed do Instagram chega com min-width: 326px, largura fixa e margens
 * próprias, o que estoura a grade em 4 colunas. Estes overrides são
 * necessários — daí o !important.
 */
.sve-item .instagram-media {
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: var(--sve-raio) !important;
}

.sve-legenda {
	margin-top: 12px;
	line-height: 1.4;
	text-align: center;
}

/* Placeholder visível apenas no editor do Elementor. */
.sve-item-vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 440px;
	padding: 24px;
	text-align: center;
	border: 2px dashed #c3c4c7;
	border-radius: var(--sve-raio);
	background: #f6f7f7;
	color: #646970;
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- CTA ---------- */

.sve-cta {
	margin-top: 40px;
}

.sve-cta-texto {
	margin: 0 0 18px;
	line-height: 1.5;
}

.sve-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.sve-cabecalho[style*="left"] ~ .sve-cta .sve-botoes,
.sve-cta[style*="text-align: left"] .sve-botoes {
	justify-content: flex-start;
}

.sve-cta[style*="text-align: right"] .sve-botoes {
	justify-content: flex-end;
}

.sve-botao {
	--sve-cor-botao: #111111;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 50px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
	will-change: transform;
}

.sve-botao:hover,
.sve-botao:focus-visible {
	transform: translateY(-2px);
	text-decoration: none;
}

.sve-botao:active {
	transform: translateY(0);
}

.sve-icone {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Estilo: cores da própria rede social. */

.sve-estilo-marca.sve-botao-instagram {
	color: #ffffff;
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.sve-estilo-marca.sve-botao-instagram:hover {
	box-shadow: 0 8px 20px rgba(220, 39, 67, 0.35);
	color: #ffffff;
}

.sve-estilo-marca.sve-botao-tiktok {
	color: #ffffff;
	background: #000000;
}

.sve-estilo-marca.sve-botao-tiktok:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	color: #ffffff;
}

/* Estilo: sólido em cor única. */

.sve-estilo-solido {
	color: #ffffff;
	background: var(--sve-cor-botao);
}

.sve-estilo-solido:hover {
	opacity: 0.88;
}

/* Estilo: contorno. */

.sve-estilo-contorno {
	color: var(--sve-cor-botao);
	background: transparent;
	border-color: var(--sve-cor-botao);
}

.sve-estilo-contorno:hover {
	color: #ffffff;
	background: var(--sve-cor-botao);
}

/* Aviso mostrado apenas dentro do editor. */
.sve-aviso-editor {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background: #f6f7f7;
	color: #646970;
	font-size: 13px;
}

/* ---------- Responsivo ---------- */

@media ( max-width: 1024px ) {
	.sve-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width: 767px ) {
	.sve-grade {
		grid-template-columns: minmax(0, 1fr);
	}

	.sve-botoes {
		flex-direction: column;
	}

	.sve-botao {
		width: 100%;
	}
}

/* Respeita quem desativou animações no sistema. */
@media ( prefers-reduced-motion: reduce ) {
	.sve-botao {
		transition: none;
	}

	.sve-botao:hover,
	.sve-botao:focus-visible {
		transform: none;
	}
}