/*
 * SKYTEC 2 — dicas.css (agente FRONT-2): hub "Dicas de costura" (home.php do tema).
 * Abertura editorial, atalhos em números, filtros, 1 destaque + grade 3×3 (.sk-blog-grid),
 * minitutoriais em vídeo, Cursos (trilhas com foto, progresso costurado, mini-teste) e Calculadoras.
 * Depende de paginas.css (cartão .pg-dica, .pg-cta, .pg-numeros).
 */

.pg-hub .pg-abre { padding-bottom: var(--e-6); }
.pg-hub .pg-numeros { width: 100%; max-width: 52rem; margin: var(--e-3) auto 0; }
.pg-hub .pg-numero { padding-block: var(--e-3); }

/* ---------- Filtros ---------- */
.pg-filtros { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); margin-bottom: var(--e-5); }
.pg-filtros .skx-pilulas { justify-content: center; }
/* sem pílula sobrando: 3 × 2 no tablet, 2 × 3 no celular, todas do mesmo tamanho */
@media (max-width: 1279px) {
	.pg-filtros .skx-pilulas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 46rem; }
	.pg-filtros .skx-pilula { justify-content: center; text-align: center; padding: var(--e-1) var(--e-2); line-height: 1.25; }
}
@media (max-width: 639px) {
	.pg-filtros .skx-pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pg-filtros-status { color: var(--cor-texto-3); font-size: var(--t-pequeno); min-height: 1.6em; }

/* ---------- Destaque (1 grande) ---------- */
.pg-destaque { display: flex; margin-bottom: var(--vao); }
.pg-destaque[hidden] { display: none; }
.pg-destaque-link {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: var(--e-6);
	width: 100%;
	padding: var(--e-2);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	background: radial-gradient(70% 90% at 100% 0%, rgba(47, 140, 255, 0.1), transparent 60%), var(--cor-cartao);
	box-shadow: var(--sombra-2);
	color: inherit;
	text-decoration: none;
	transition: transform var(--d-entrada) var(--curva-saida), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.pg-destaque-capa { display: block; overflow: hidden; border-radius: var(--r-3); }
.pg-destaque-capa .skx-capa { aspect-ratio: 16 / 10; border-radius: var(--r-3); transition: transform var(--d-cena) var(--curva-saida); }
.pg-destaque-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-3) 0; }
.pg-destaque-titulo { font-family: var(--fonte-titulo); font-size: var(--t-h3); font-weight: var(--peso-titulo); line-height: var(--a-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.pg-destaque-texto p { color: var(--cor-texto-2); font-size: var(--t-corpo-g); }
.pg-destaque-meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); color: var(--cor-texto-3); }
.pg-destaque-meta .skx-rotulo { color: var(--cor-texto-3); }
.pg-destaque-texto .skx-botao { margin-top: var(--e-1); }
@media (hover: hover) {
	.pg-destaque-link:hover { transform: translateY(-6px); border-color: var(--cor-azul); box-shadow: var(--brilho-azul); }
	.pg-destaque-link:hover .skx-capa { transform: scale(1.03); }
}
@media (max-width: 1023px) {
	.pg-destaque-link { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
	.pg-destaque-texto { padding: var(--e-1) var(--e-1) var(--e-2); }
	.pg-destaque-titulo { font-size: var(--t-h3); }
}

/* ---------- Grade 3×3 (.sk-blog-grid: os cursos do plugin procuram esta classe) ---------- */
.pg-dicas-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-dicas-grade > [hidden] { display: none; }
/* com filtro: até 3 cartões, sempre centralizados e do mesmo tamanho dos outros */
.pg-dicas-grade.is-filtrada {
	grid-template-columns: repeat(var(--n, 3), calc((100% - 2 * var(--vao)) / 3));
	justify-content: center;
}
.pg-dicas-grade.is-filtrada > :not([hidden]) { animation: skx-revela var(--d-entrada) var(--curva-saida) both; animation-delay: calc(var(--j, 0) * var(--cascata)); }
.pg-dicas-vazio { text-align: center; color: var(--cor-texto-2); }
@media (max-width: 1023px) {
	.pg-dicas-grade,
	.pg-dicas-grade.is-filtrada { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
	/* no celular o cartão fica deitado: capa à esquerda, texto à direita (menos rolagem) */
	.pg-dicas-grade .pg-dica-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e-2); align-items: center; padding: var(--e-1); }
	.pg-dicas-grade .pg-dica-corpo { padding: var(--e-1) var(--e-1) var(--e-1) 0; gap: 4px; }
	.pg-dicas-grade .pg-dica-titulo { font-size: var(--t-corpo-g); min-height: 0; }
	.pg-dicas-grade .pg-dica-frase { display: none; }
	.pg-dicas-grade .pg-dica-ler { padding-top: var(--e-1); }
	.pg-dicas-grade .skx-rotulo { font-size: 0.9375rem; letter-spacing: 0.04em; }
}

/* ---------- Minitutoriais em vídeo (mudos, 9:16, iguais aos da Início) ---------- */
.pg-tutoriais {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e-4) var(--vao);
	align-items: stretch;
	max-width: 66rem;
	margin-inline: auto;
}
.pg-tutorial { display: flex; flex-direction: column; gap: var(--e-2); }
.pg-tutorial-texto { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); flex: 1; text-align: center; }
.pg-tutorial h3 { font-size: var(--t-h4); }
.pg-tutorial p { color: var(--cor-texto-2); }
.pg-tutorial .skx-link { margin-top: auto; }
@media (max-width: 1023px) {
	.pg-tutoriais { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); max-width: 40rem; }
	.pg-tutorial { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--e-3); }
	.pg-tutorial-texto { align-items: flex-start; text-align: left; }
	.pg-tutorial .skx-link { margin-top: 0; }
}

/* ---------- Cursos: trilhas ---------- */
.pg-trilhas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-trilha { display: flex; }
.pg-trilha-caixa {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	box-shadow: var(--sombra-1);
	transition: border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.pg-trilha-foto { aspect-ratio: 16 / 10; padding: var(--e-2); }
.pg-trilha-corpo { display: flex; flex-direction: column; flex: 1; gap: var(--e-1); padding: var(--e-3) var(--e-1) var(--e-1); }
.pg-trilha-nome { font-size: var(--t-h4); }
.pg-trilha-primeiro { color: var(--cor-texto-2); min-height: 3.2em; }
.pg-trilha-primeiro strong { color: var(--cor-texto); font-weight: 600; }
.pg-trilha .skx-botao { margin-top: var(--e-2); width: 100%; min-height: var(--alvo); font-size: var(--t-rotulo); }
.pg-trilha.is-comecou .pg-trilha-caixa { border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
@media (hover: hover) { .pg-trilha-caixa:hover { border-color: var(--cor-linha-2); } }
@media (max-width: 1023px) { .pg-trilhas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
	.pg-trilhas { grid-template-columns: minmax(0, 1fr); }
	.pg-trilha-foto { aspect-ratio: 2 / 1; padding: var(--e-1); }
}

/* progresso costurado: trilho tracejado cinza, costura azul por cima, um nó por módulo */
.pg-progresso { margin-top: auto; padding-top: var(--e-2); }
.pg-progresso-trilho { position: relative; height: 18px; margin-inline: 8px; }
.pg-progresso-trilho::before,
.pg-progresso-fio {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--cor-linha-2) 0 8px, transparent 8px 14px);
}
.pg-progresso-fio {
	background: repeating-linear-gradient(90deg, var(--cor-azul) 0 8px, transparent 8px 14px);
	filter: drop-shadow(0 0 4px var(--cor-brilho));
	clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
	transition: clip-path var(--d-historia) var(--curva-saida);
}
.pg-progresso-no {
	position: absolute;
	top: 1px;
	left: calc(var(--k) * 100%);
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	border: 2px solid var(--cor-linha-2);
	background: var(--cor-cartao);
	transition: background-color var(--d-padrao) var(--curva-troca) var(--atraso, 0ms), border-color var(--d-padrao) var(--curva-troca) var(--atraso, 0ms);
}
.pg-progresso-no.is-feito { border-color: var(--cor-azul-claro); background: var(--cor-azul); box-shadow: 0 0 10px var(--cor-brilho); }
.pg-progresso-texto { display: flex; justify-content: space-between; gap: var(--e-1); margin-top: var(--e-1); color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.pg-progresso-texto .skx-numero { color: var(--cor-azul-claro); font-size: var(--t-pequeno); }

/* ---------- Mini-teste ---------- */
.pg-teste {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--e-6);
	align-items: center;
	margin-top: var(--e-6);
	padding: var(--e-5);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	background: radial-gradient(80% 120% at 100% 0%, rgba(47, 140, 255, 0.12), transparent 60%), var(--cor-azul-fundo);
}
.pg-teste .skx-capa { aspect-ratio: 16 / 10; }
.pg-teste-intro { display: flex; flex-direction: column; gap: var(--e-2); }
.pg-teste-intro p { color: var(--cor-texto-2); }
.pg-teste form { display: flex; flex-direction: column; gap: var(--e-2); }
.pg-teste fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.pg-teste legend { margin-bottom: var(--e-2); font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); line-height: 1.25; }
.pg-opcao {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 64px;
	padding: var(--e-1) var(--e-3);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-2);
	background: var(--cor-cartao);
	cursor: pointer;
	transition: border-color var(--d-micro) var(--curva-troca), background-color var(--d-micro) var(--curva-troca);
}
.pg-opcao { position: relative; }
/* o rádio invisível cobre a opção inteira (alvo grande); a bolinha é desenhada */
.pg-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pg-opcao-marca { position: relative; flex: none; width: 26px; height: 26px; border: 2px solid var(--cor-linha-2); border-radius: 50%; transition: border-color var(--d-micro) var(--curva-troca); }
.pg-opcao-marca::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cor-azul); transform: scale(0); transition: transform var(--d-padrao) var(--curva-mola); }
.pg-opcao input:checked + .pg-opcao-marca { border-color: var(--cor-azul-claro); }
.pg-opcao input:checked + .pg-opcao-marca::after { transform: scale(1); }
.pg-opcao:has(input:checked) { border-color: var(--cor-azul); background: var(--cor-azul-fundo); }
.pg-opcao:has(input:focus-visible) { box-shadow: var(--foco); }
.pg-opcao.is-certa { border-color: var(--cor-azul-claro); box-shadow: var(--brilho-azul); }
@media (hover: hover) { .pg-opcao:hover { border-color: var(--cor-azul); } }
.pg-teste-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pg-teste-retorno {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--d-padrao) var(--curva-troca);
}
.pg-teste-retorno > div { overflow: hidden; }
.pg-teste-retorno.is-visivel { grid-template-rows: 1fr; }
.pg-teste-retorno p { padding: var(--e-2) var(--e-3); border-radius: var(--r-2); border-left: 3px solid var(--cor-azul); background: var(--cor-cartao); color: var(--cor-texto-2); }
.pg-teste-retorno strong { color: var(--cor-texto); }
@media (max-width: 1023px) {
	.pg-teste { grid-template-columns: minmax(0, 1fr); padding: var(--e-3); gap: var(--e-4); }
	.pg-teste .skx-capa { max-width: 26rem; }
}
@media (max-width: 639px) {
	.pg-teste-acoes .skx-botao { width: 100%; }
}

/* ---------- Calculadoras ---------- */
/* flex (não grade): painel 5/12 + lista 7/12 é de propósito; alturas iguais pelo stretch */
.pg-calc {
	display: flex;
	gap: var(--vao);
	align-items: stretch;
}
.pg-calc-painel { flex: 5 1 0; min-width: 0; }
.pg-ferramentas { flex: 7 1 0; min-width: 0; }
.pg-calc-painel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-3) var(--e-4);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	background: var(--cor-cartao);
}
.pg-calc-painel .skx-capa { aspect-ratio: 16 / 10; margin-bottom: var(--e-1); }
.pg-calc-painel h2 { font-size: var(--t-h3); }
.pg-calc-painel p { color: var(--cor-texto-2); }
.pg-calc-nota { display: flex; gap: var(--e-1); align-items: flex-start; margin-top: auto; padding-top: var(--e-2); color: var(--cor-texto-3) !important; font-size: var(--t-pequeno); }
.pg-calc-nota svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--cor-azul-claro); }
.pg-ferramentas {
	display: grid;
	grid-template-rows: repeat(5, minmax(0, 1fr));
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-4);
	background: var(--cor-cartao);
	overflow: hidden;
}
.pg-ferramenta {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
	border-bottom: 1px solid var(--cor-linha);
	transition: background-color var(--d-micro) var(--curva-troca);
}
.pg-ferramenta:last-child { border-bottom: 0; }
.pg-ferramenta .skx-numero { font-size: var(--t-h3); color: var(--cor-azul-claro); }
.pg-ferramenta h3 { font-size: var(--t-h4); }
.pg-ferramenta p { color: var(--cor-texto-2); }
.pg-ferramenta svg { width: 24px; height: 24px; color: var(--cor-azul-claro); }
@media (hover: hover) { .pg-ferramenta:hover { background: var(--cor-cartao-2); } }
@media (max-width: 1023px) {
	.pg-calc { flex-direction: column; max-width: 40rem; margin-inline: auto; }
	.pg-calc-painel, .pg-ferramentas { flex: none; }
	.pg-calc-painel { align-items: center; text-align: center; }
	.pg-calc-nota { text-align: left; }
}
@media (max-width: 639px) {
	.pg-ferramenta { grid-template-columns: 3rem minmax(0, 1fr); padding: var(--e-2); }
	.pg-ferramenta > svg { display: none; }
	.pg-ferramenta .skx-numero { font-size: var(--t-h4); }
}