/* ============================================================
   NECTECH — artigos.css
   CSS da listagem (/artigos, home.php), do arquivo de categoria
   (category.php) e do artigo individual (single.php).

   Enfileirado condicionalmente pelo functions.php em
   is_home() || is_category() || is_singular('post').

   Consome os primitivos globais .nec-* (components.css) para
   wrap/section/eyebrow/h2/botões. Nada de global é alterado aqui
   → NÃO exige bump de $ver (segue 2.3); basta purge do WP Rocket.

   Nota de reconciliação (Fase 10): .artigo-card é o gêmeo visual do
   .home-article-card (home.css). A unificação dos dois em um
   primitivo .nec-article-card entra no refator retroativo do
   home.css para .nec-*, já previsto na Fase 10.

   Literais sem token (conscientes, como no resto do projeto):
   #EEF1F4 (placeholder de imagem) e #8A97A6 (rótulo muted).

   ⚠️ Regra do projeto: blocos @media SEMPRE ao final do arquivo
   (media query não altera especificidade).
   ============================================================ */


/* ============================================================
   1 · CABEÇALHO DA LISTAGEM
   ============================================================ */
.artigos-head > .nec-wrap { padding-bottom: clamp(32px, 4vw, 56px); }
.artigos-head__title { margin: 0; }
.artigos-head__sub { max-width: 680px; }


/* ----------- Filtro por categoria -------------------------- */
.artigos-filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(28px, 3.5vw, 40px);
}
.artigos-filtro__item {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	background: var(--branco);
	color: var(--cinza-letter);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 18px;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.artigos-filtro__item:hover {
	color: var(--laranja-prime);
	border-color: var(--laranja-prime);
}
.artigos-filtro__item.is-active {
	background: var(--azul-secund);
	border-color: var(--azul-secund);
	color: var(--branco);
}
.artigos-filtro__item.is-active:hover {
	background: var(--laranja-prime);
	border-color: var(--laranja-prime);
	color: var(--branco);
}


/* ============================================================
   2 · GRID DE ARTIGOS
   minmax(min(300px,100%),1fr): a coluna nunca fica mais larga
   que a tela (lição de responsividade da revisão da Equipe).
   ============================================================ */
.artigos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}


/* ----------- Card de artigo (.artigo-card) -----------------
   Especificidade 0,2,0 no fundo: o Astra pinta o <article>
   (mesmo problema resolvido nos cards da Equipe).
   ------------------------------------------------------------ */
.artigos-grid .artigo-card {
	display: flex;
	flex-direction: column;
	background: var(--branco);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: box-shadow var(--transition);
}
.artigos-grid .artigo-card:hover { box-shadow: 0 14px 34px rgba(13, 31, 53, 0.14); }

.artigo-card__media {
	position: relative;
	display: block;
	height: 190px;
	background: #EEF1F4;                 /* literal — Fase 10 */
	overflow: hidden;
}
.artigo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.artigo-card:hover .artigo-card__img { transform: scale(1.04); }

.artigo-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cinza-letter);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.artigo-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--laranja-prime);
	color: var(--branco);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 11px;
}

.artigo-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.artigo-card__read {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cinza-letter);
	margin-bottom: 12px;
}
.artigo-card__title {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.artigo-card__title a { color: var(--azul-secund); text-decoration: none; }
.artigo-card__title a:hover { color: var(--laranja-prime); }

.artigo-card__excerpt {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cinza-letter);
	flex: 1 1 auto;
}
.artigo-card__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--laranja-prime);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: gap var(--transition-fast);
}
.artigo-card__link:hover { gap: 12px; }


/* ============================================================
   3 · PAGINAÇÃO (saída do the_posts_pagination)
   ============================================================ */
.artigos-paginacao {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--border);
}
.artigos-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.artigos-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border);
	background: var(--branco);
	color: var(--azul-secund);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.artigos-paginacao a.page-numbers:hover {
	color: var(--laranja-prime);
	border-color: var(--laranja-prime);
}
.artigos-paginacao .page-numbers.current {
	background: var(--laranja-prime);
	border-color: var(--laranja-prime);
	color: var(--branco);
}
.artigos-paginacao .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #8A97A6;                      /* literal (muted) — Fase 10 */
}
.artigos-paginacao .page-numbers.prev,
.artigos-paginacao .page-numbers.next { letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; }


/* ============================================================
   4 · ESTADO VAZIO
   ============================================================ */
.artigos-vazio {
	border: 1px solid var(--border);
	border-top: 4px solid var(--laranja-prime);
	background: var(--branco);
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
	text-align: center;
}
.artigos-vazio__title {
	margin: 0 0 14px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--azul-secund);
}
.artigos-vazio__text {
	margin: 0 auto 28px;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cinza-letter);
}
.artigos-vazio__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}


/* ============================================================
   5 · BREADCRUMB (single)
   ============================================================ */
.artigo-breadcrumb {
	background: var(--branco);
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	color: var(--cinza-letter);
}
.artigo-breadcrumb > .nec-wrap {
	padding-top: 18px;
	padding-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.artigo-breadcrumb a { color: var(--cinza-letter); text-decoration: none; }
.artigo-breadcrumb a:hover { color: var(--laranja-prime); }
.artigo-breadcrumb__sep { color: #8A97A6; }   /* literal (muted) — Fase 10 */
.artigo-breadcrumb__atual { color: var(--azul-secund); font-weight: 700; }


/* ============================================================
   6 · HERO DO ARTIGO (single)
   ============================================================ */
.artigo-hero { background: var(--branco); }
.artigo-hero > .nec-wrap {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(28px, 3.5vw, 44px);
}
.artigo-hero__tag {
	display: inline-block;
	background: var(--laranja-prime);
	color: var(--branco);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 13px;
	margin-bottom: 20px;
	transition: background var(--transition-fast);
}
.artigo-hero__tag:hover { background: var(--laranja-dark); color: var(--branco); }

.artigo-hero__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--azul-secund);
}
.artigo-hero__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8A97A6;                      /* literal (muted) — Fase 10 */
}
.artigo-hero__meta-sep { color: var(--border); }

.artigo-hero__media { margin: clamp(28px, 3.5vw, 44px) 0 0; }
.artigo-hero__img { display: block; width: 100%; height: auto; }


/* ============================================================
   7 · CORPO DO ARTIGO (saída do editor do WordPress)
   Estiliza o que o autor escreve em Posts → Adicionar novo.
   Especificidade 0,2,0 nos filhos para vencer o tema pai.
   ============================================================ */
.artigo-conteudo { background: var(--branco); }
.artigo-conteudo > .nec-wrap {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

.artigo-body {
	font-size: 17px;
	line-height: 1.75;
	color: var(--cinza-letter);
}
.artigo-body > *:first-child { margin-top: 0; }
.artigo-body > *:last-child  { margin-bottom: 0; }

.artigo-body p { margin: 0 0 24px; }

.artigo-body h2 {
	margin: clamp(40px, 5vw, 56px) 0 18px;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--azul-secund);
}
.artigo-body h3 {
	margin: clamp(32px, 4vw, 40px) 0 14px;
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--azul-secund);
}
.artigo-body h4 {
	margin: 28px 0 12px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--laranja-prime);
}

.artigo-body a {
	color: var(--laranja-prime);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.artigo-body a:hover { color: var(--laranja-dark); }

.artigo-body strong { color: var(--azul-secund); font-weight: 700; }

.artigo-body ul,
.artigo-body ol { margin: 0 0 24px; padding-left: 22px; }
.artigo-body li { margin-bottom: 10px; }
.artigo-body ul li::marker { color: var(--laranja-prime); }
.artigo-body ol li::marker { color: var(--laranja-prime); font-weight: 700; }

.artigo-body blockquote {
	margin: clamp(32px, 4vw, 40px) 0;
	padding: 4px 0 4px 26px;
	border-left: 4px solid var(--laranja-prime);
	font-size: 19px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--azul-secund);
}
.artigo-body blockquote p:last-child { margin-bottom: 0; }

.artigo-body img,
.artigo-body .wp-block-image img { display: block; height: auto; }
.artigo-body figure { margin: clamp(32px, 4vw, 40px) 0; }
.artigo-body figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #8A97A6;                      /* literal (muted) — Fase 10 */
	text-align: center;
}

.artigo-body table {
	width: 100%;
	border-collapse: collapse;
	margin: clamp(32px, 4vw, 40px) 0;
	font-size: 15px;
}
.artigo-body th,
.artigo-body td {
	border: 1px solid var(--border);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}
.artigo-body th {
	background: var(--azul-secund);
	color: var(--branco);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.artigo-body hr {
	margin: clamp(40px, 5vw, 56px) 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.artigo-body code {
	background: #EEF1F4;                 /* literal — Fase 10 */
	padding: 2px 6px;
	font-size: 15px;
}

.artigo-body__pages {
	margin-top: 32px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cinza-letter);
}


/* ============================================================
   8 · CTA DE CONVERSÃO (single)
   ============================================================ */
.artigo-cta { background: var(--branco); }
.artigo-cta > .nec-wrap { padding-bottom: clamp(48px, 6vw, 88px); }
.artigo-cta__inner {
	border: 1px solid var(--border);
	border-top: 4px solid var(--laranja-prime);
	background: var(--branco);
	padding: clamp(32px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.artigo-cta__text { flex: 1 1 340px; min-width: 0; }
.artigo-cta__eyebrow { margin-bottom: 14px; }
.artigo-cta__title {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.8vw, 30px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--azul-secund);
}
.artigo-cta__sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cinza-letter);
	max-width: 62ch;
}
.artigo-cta__actions {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* SVG do WhatsApp travado: sem dimensão explícita ele cresce quando o
   botão vira full-width no mobile (lição da revisão da Equipe). */
.artigo-cta .nec-btn svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }


/* ============================================================
   9 · ARTIGOS RELACIONADOS (single)
   ============================================================ */
.artigo-relacionados__head {
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
.artigo-relacionados__link {
	color: var(--azul-secund);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.artigo-relacionados__link:hover { color: var(--laranja-prime); }


/* ============================================================
   10 · FOCO VISÍVEL (a11y)
   ============================================================ */
.artigos-filtro__item:focus-visible,
.artigos-paginacao a:focus-visible,
.artigo-card a:focus-visible,
.artigo-breadcrumb a:focus-visible,
.artigo-hero__tag:focus-visible,
.artigo-body a:focus-visible,
.artigo-relacionados__link:focus-visible {
	outline: 2px solid var(--laranja-prime);
	outline-offset: 2px;
}


/* ============================================================
   11 · RESPONSIVO
   ⚠️ Sempre ao final do arquivo: @media não altera especificidade,
   e se vier antes das regras base perde para elas.
   ============================================================ */
@media (max-width: 900px) {
	.artigo-relacionados__head { align-items: flex-start; }
	.artigo-cta__inner { justify-content: flex-start; }
}

@media (max-width: 768px) {
	.artigos-filtro { gap: 8px; }
	.artigos-filtro__item { font-size: 12px; padding: 9px 14px; }

	.artigo-hero__media { margin-top: 28px; }

	.artigo-body { font-size: 16px; line-height: 1.7; }
	.artigo-body blockquote { font-size: 17px; padding-left: 20px; }

	/* Tabela do editor: rolagem horizontal em vez de estourar o body. */
	.artigo-body table { display: block; overflow-x: auto; white-space: nowrap; }

	.artigo-cta__inner { flex-direction: column; align-items: stretch; gap: 24px; }
	.artigo-cta__actions { width: 100%; }
	.artigo-cta__actions .nec-btn { flex: 1 1 100%; }

	.artigos-vazio__actions .nec-btn { flex: 1 1 100%; }

	.artigos-paginacao .page-numbers { min-width: 40px; height: 40px; padding: 0 11px; }
}