/**
 * VC Affiliates — integração com o tema Vida Celular.
 *
 * Mesmo problema do vc-reviews, em escala maior: affiliate-blocks.css tem 89
 * seletores de defesa ancorados em .post-content / .entry-content, e nenhuma
 * das duas classes existe neste tema — o corpo do artigo é .prose-vc. Todos
 * esses overrides são código morto aqui, e a tipografia de prose-vc.css passa
 * por cima dos componentes .vca-*.
 *
 * A parte visível do estrago vinha dos tokens --vc-* indefinidos: card sem
 * fundo nem borda, número do produto invisível e botão "Ver na loja" branco no
 * branco. Os tokens são definidos inline em functions.php (wp_add_inline_style
 * sobre o handle prose-vc) justamente para não dependerem deste arquivo.
 *
 * Este arquivo cuida do resto: neutraliza prose-vc dentro de .vca-block,
 * reafirma os componentes que perdiam por especificidade e ajusta proporções
 * que não funcionam na largura da coluna deste tema.
 *
 * Carrega depois de vca-blocks (ver functions.php).
 */

/* ==========================================================================
   1. Neutralização do prose-vc dentro dos blocos
   ==========================================================================
   .prose-vc .vca-block <el> = (0,2,1) vence .prose-vc <el> = (0,1,1). */

.prose-vc .vca-block {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--vc-foreground);
	max-width: none;
}

.prose-vc > .vca-products {
	margin: 2rem 0 2.5rem;
}

.prose-vc .vca-block p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.prose-vc .vca-block strong,
.prose-vc .vca-block b {
	color: inherit;
}

/* .prose-vc img aplica border-radius e box-shadow. A foto do produto já está
   dentro de um contêiner com raio e overflow hidden — o raio duplo cria um
   desencontro de curvas, e a sombra vaza para fora do recorte. */
.prose-vc .vca-block img {
	border-radius: 0;
	box-shadow: none;
}

/* Links de texto corrido ganham cor e border-bottom. Aqui os <a> são botões. */
.prose-vc .vca-block a,
.prose-vc .vca-block a:hover {
	border-bottom: none;
	font-weight: inherit;
}

.prose-vc .vca-block ul,
.prose-vc .vca-block ol,
.prose-vc .vca-block li {
	margin-bottom: 0;
	padding-left: 0;
	line-height: inherit;
}

/* ==========================================================================
   2. Componentes reafirmados
   ==========================================================================
   Os títulos do plugin são h2/h3/h4 e perdiam para .prose-vc h2/h3/h4 em
   font-size, font-family, margem e letter-spacing. */

.prose-vc .vca-block h2,
.prose-vc .vca-block h3,
.prose-vc .vca-block h4 {
	margin-top: 0;
	scroll-margin-top: 0;
}

.prose-vc .vca-product-card__name {
	margin: 0;
	font-family: var(--vc-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--vc-foreground);
}

.prose-vc .vca-product-card__list-title {
	margin: 0 0 0.5rem;
	font-family: var(--vc-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.prose-vc .vca-product-card__list-title--pro {
	color: var(--vc-primary);
}

.prose-vc .vca-product-card__list-title--con {
	color: #dc2626;
}

.prose-vc .vca-block__heading {
	margin: 0 0 1.25rem;
	font-family: var(--vc-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--vc-foreground);
}

@media (min-width: 768px) {
	.prose-vc .vca-block__heading {
		font-size: 1.5rem;
	}

	.prose-vc .vca-product-card__name {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   3. Proporções
   ==========================================================================
   O plugin reserva 16rem (256px) para a foto. A coluna do artigo neste tema
   tem ~700px, então a imagem comia mais de um terço da largura e empurrava
   prós/contras para uma faixa estreita — exatamente o desequilíbrio da tela. */

@media (min-width: 768px) {
	.prose-vc .vca-product-card__image-wrap {
		width: 12rem;
	}
}

/* Foto de produto vem recortada em fundo branco. object-fit: cover corta as
   bordas do produto; contain preserva a peça inteira. */
.prose-vc .vca-product-card__image {
	background: var(--vc-card);
	border: 1px solid var(--vc-border);
	padding: 0.75rem;
}

.prose-vc .vca-product-card__image img {
	object-fit: contain;
}

/* 12px ao lado de um corpo de texto de 20px fica desproporcional. */
.prose-vc .vca-product-card__list li {
	font-size: 0.8125rem;
	line-height: 1.5;
}

.prose-vc .vca-product-card__pros-cons {
	gap: 1.25rem;
}

/* ==========================================================================
   4. Rodapé do card
   ==========================================================================
   Preço e CTA dividem uma linha só. Em telas estreitas o botão espremia o
   preço; aqui ele quebra para baixo e ocupa a largura toda. */

.prose-vc .vca-product-card__price {
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.prose-vc .vca-product-card__cta {
	padding: 0.625rem 1.125rem;
	border-radius: 999px;
	box-shadow: 0 6px 14px -8px rgba(230, 62, 27, 0.9);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.prose-vc .vca-product-card__cta:hover {
	opacity: 1;
	background: #c93516;
	transform: translateY(-1px);
}

@media (max-width: 479px) {
	.prose-vc .vca-product-card__footer {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.prose-vc .vca-product-card__cta {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   5. "Guias de Compra" no fim do artigo
   ==========================================================================
   Com o single em coluna única, o card saiu da barra lateral (.vc-pos-artigo).
   A lista era vertical numa coluna de ~380px; em 896px vira grade para não
   deixar cada item com 4rem de miniatura e um oceano de branco ao lado. */

.vca-sidebar.vc-pos-artigo {
	margin-top: 3rem;
}

.vca-sidebar.vc-pos-artigo .sidebar-guides {
	margin-top: 0;
}

@media (min-width: 640px) {
	/* Divisores feitos com gap de 1px sobre o fundo do contêiner, e não com
	   border por item: o plugin consulta 5 guias, e com contagem ímpar
	   qualquer regra do tipo :nth-last-child(-n+2) apaga a borda errada. */
	.vca-sidebar.vc-pos-artigo .sidebar-guides__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		background: var(--vc-border-light, var(--vc-border));
	}

	.vca-sidebar.vc-pos-artigo .sidebar-guides__item {
		border-bottom: none;
		background: var(--vc-card);
	}

	.vca-sidebar.vc-pos-artigo .sidebar-guides__headline {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   6. Acessibilidade
   ==========================================================================
   O tema aplica `a { text-decoration: none !important }`, então o indicador
   de foco tem de vir de outline. */

.prose-vc .vca-product-card__cta:focus-visible,
.prose-vc .vca-product-card__toggle:focus-visible,
.prose-vc .vca-faq__question:focus-visible,
.sidebar-guides__item:focus-visible {
	outline: 2px solid var(--vc-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.prose-vc .vca-product-card__cta,
	.prose-vc .vca-product-card__toggle .vca-icon {
		transition: none;
	}

	.prose-vc .vca-product-card__cta:hover {
		transform: none;
	}
}