/**
 * Acabamento da descrição do produto.
 *
 * Tudo aqui pendura em `.blz-desc`, o container que o próprio plugin escreve na
 * descrição. Isso é de propósito: escopar no container do tema
 * (`.woocommerce-Tabs-panel--description` e parentes) só funciona em tema que
 * emita exatamente aquela classe, e tema com layout próprio não emite. O
 * resultado era a folha carregar e não casar com nada.
 *
 * Nenhuma cor é declarada. É tudo cinza neutro, que funciona igual em tema claro
 * e escuro. Para a cor da marca, redefina a variável no seu tema
 * (Personalizar → CSS adicional):
 *
 *     .blz-desc { --blz-accent: #22d3ee; }
 *
 * @package Blazerd_AI_Description_Generator
 */

.blz-desc {
	--blz-rule: rgba(128, 128, 128, 0.28);
	--blz-fill: rgba(128, 128, 128, 0.08);
	--blz-accent: currentColor;
	line-height: 1.7;
}

/* ============================================
   TÍTULOS
   ============================================ */

.blz-desc > h2:first-child,
.blz-desc > *:first-child {
	margin-top: 0;
}

.blz-desc h2 {
	margin: 0 0 0.35em;
	line-height: 1.25;
}

/* A linha de plataformas ou a frase de efeito, logo abaixo do título.
   Só quando o negrito é a linha INTEIRA: um <strong> que abre uma frase e
   continua nela ("<strong>O bot mais seguro</strong>. Feito com...") não é
   subtítulo, e virá-lo em bloco parte a frase em duas linhas na loja. O
   wpautop do WordPress fecha o parágrafo antes de o CSS decidir. */
.blz-desc h2 + p > strong:only-child {
	display: block;
	margin-bottom: 1.1em;
	opacity: 0.8;
	font-weight: 600;
}

/* Cada seção começa com respiro e uma linha de apoio. */
.blz-desc h3 {
	margin: 2.4em 0 1em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--blz-rule);
	line-height: 1.3;
}

.blz-desc h4 {
	margin: 1.6em 0 0.4em;
	line-height: 1.35;
}

.blz-desc h3 + h4 {
	margin-top: 0;
}

/* ============================================
   TEXTO E LISTAS
   ============================================ */

.blz-desc p {
	margin: 0 0 1em;
	max-width: 78ch;
}

/* O termo técnico destacado no parágrafo de abertura ganha a cor da marca. Só
   nos parágrafos que são filhos diretos do container: dentro de um cartão, um
   negrito colorido brigaria com o número do selo. */
.blz-desc > p strong {
	color: var(--blz-accent, inherit);
}

.blz-desc ul,
.blz-desc ol {
	margin: 0.6em 0 1.2em;
	padding-left: 1.4em;
	max-width: 78ch;
}

.blz-desc li {
	margin-bottom: 0.45em;
	padding-left: 0.2em;
}

.blz-desc li::marker {
	opacity: 0.6;
	font-weight: 600;
}

.blz-desc li:last-child {
	margin-bottom: 0;
}

/* ============================================
   CARTÕES DE RECURSO
   ============================================

   Estes ficam fora do escopo de .blz-desc de propósito: se um dia a marcação
   dos cartões for colada em outro lugar — outra aba, um bloco do tema —, ela
   continua com a aparência certa. As classes têm prefixo próprio, então não há
   risco de atropelar nada do tema.
   ============================================ */

.blz-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0 0 1.4em;
	--blz-rule: rgba(128, 128, 128, 0.28);
	--blz-fill: rgba(128, 128, 128, 0.08);
}

.blz-card {
	background: var(--blz-fill, rgba(128, 128, 128, 0.08));
	border: 1px solid var(--blz-rule, rgba(128, 128, 128, 0.28));
	border-radius: 14px;
	padding: 22px;
}

/* O selo com o número. */
.blz-card__n {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin: 0 0 12px;
	border-radius: 9px;
	background: var(--blz-fill, rgba(128, 128, 128, 0.08));
	border: 1px solid var(--blz-rule, rgba(128, 128, 128, 0.28));
	color: var(--blz-accent, currentColor);
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

/* Dentro do cartão o título não tem margem de cima: o selo já deu o respiro. */
.blz-card h4,
.blz-desc .blz-card h4 {
	margin: 0 0 8px;
	font-size: 1.05em;
	line-height: 1.35;
}

.blz-card p,
.blz-desc .blz-card p {
	margin: 0 0 0.7em;
	max-width: none;
	font-size: 0.95em;
}

.blz-card ul,
.blz-card ol,
.blz-desc .blz-card ul,
.blz-desc .blz-card ol {
	margin: 0.5em 0 0.7em;
	max-width: none;
	font-size: 0.95em;
}

.blz-card p:last-child,
.blz-card ul:last-child,
.blz-card ol:last-child {
	margin-bottom: 0;
}

/* ============================================
   ETIQUETAS
   ============================================

   Uma lista de termos curtos — protocolos, idiomas, plataformas — vira uma
   fileira de etiquetas. O conteúdo continua sendo uma <ul> comum: se a folha
   não carregar, o cliente vê uma lista, não um amontoado.
   ============================================ */

.blz-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1.2em 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.blz-desc .blz-pills li,
.blz-pills li {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--blz-rule, rgba(128, 128, 128, 0.28));
	border-radius: 999px;
	background: var(--blz-fill, rgba(128, 128, 128, 0.08));
	color: var(--blz-accent, inherit);
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.4;
}

.blz-pills li::marker {
	content: '';
}

/* ============================================
   PASSOS
   ============================================ */

.blz-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin: 1.2em 0 1.4em;
	padding: 0;
	list-style: none;
	counter-reset: blz-step;
	max-width: none;
}

.blz-desc .blz-steps li,
.blz-steps li {
	margin: 0;
	padding: 22px;
	border: 1px solid var(--blz-rule, rgba(128, 128, 128, 0.28));
	border-radius: 14px;
	background: var(--blz-fill, rgba(128, 128, 128, 0.08));
	text-align: center;
	counter-increment: blz-step;
}

.blz-steps li::marker {
	content: '';
}

/* O 01, 02, 03 é contado pelo CSS: o texto do item continua sendo só o texto. */
.blz-steps li::before {
	content: counter(blz-step, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	color: var(--blz-accent, currentColor);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	opacity: 0.45;
}

/* ============================================
   TABELA DE ESPECIFICAÇÕES
   ============================================ */

.blz-desc table {
	width: 100%;
	margin: 1.2em 0 1.6em;
	border-collapse: collapse;
	border: 1px solid var(--blz-rule);
	border-radius: 14px;
	overflow: hidden;
}

.blz-desc table td,
.blz-desc table th {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--blz-rule);
	font-size: 0.95em;
	text-align: left;
	vertical-align: top;
}

.blz-desc table tr:last-child td,
.blz-desc table tr:last-child th {
	border-bottom: 0;
}

.blz-desc table td:first-child,
.blz-desc table th:first-child {
	width: 38%;
	font-weight: 600;
	opacity: 0.75;
}

/* ============================================
   CHAMADA FINAL
   ============================================ */

.blz-cta {
	margin: 2.6em 0 0;
	padding: 34px 24px;
	border: 1px solid var(--blz-rule, rgba(128, 128, 128, 0.28));
	border-radius: 16px;
	background: var(--blz-fill, rgba(128, 128, 128, 0.08));
	text-align: center;
}

.blz-desc .blz-cta h3,
.blz-cta h3 {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 1.35em;
	line-height: 1.3;
}

.blz-desc .blz-cta p,
.blz-cta p {
	max-width: 560px;
	margin: 0 auto;
}

/* ============================================
   VÍDEO
   ============================================ */

.blz-desc .product-video {
	margin-bottom: 1.8em;
}

/* Dois ou mais vídeos — um por idioma, tipicamente — ficam lado a lado. Abaixo
   de 300px de coluna a grade quebra sozinha para uma por linha. */
.blz-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin: 0 0 1.8em;
}

.blz-videos .product-video,
.blz-desc .blz-videos .product-video {
	margin: 0;
	border-radius: 14px;
}

.blz-video__label {
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	opacity: 0.7;
	text-transform: uppercase;
}

/* ============================================
   TELAS ESTREITAS
   ============================================ */

@media (max-width: 782px) {
	/* Largura fixa em % vira largura cheia no celular. */
	.blz-desc .product-video {
		width: 100% !important;
	}

	.blz-videos {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.blz-desc h3 {
		margin-top: 1.8em;
	}

	.blz-cards {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.blz-card {
		padding: 18px;
	}
}