/* NM Base — CSS do child theme.
   Usa as custom properties injetadas por functions.php (--nm-primaria, --nm-fundo,
   --nm-texto, --nm-destaque). Nao usar hex fixo aqui: e isso que faz um cliente
   novo ser so troca de cor no Customizer. */

body {
	color: var(--nm-texto);
	background-color: var(--nm-fundo);
}

a {
	color: var(--nm-primaria);
}

/* A1: o texto sobre as cores do cliente NAO e fixo em branco. O PHP calcula a
   luminancia da cor escolhida e devolve --nm-sobre-destaque / --nm-sobre-primaria
   com claro ou escuro, o que mantem contraste legivel em qualquer paleta.
   Medido antes do fix: branco sobre amarelo de padaria dava 1.42:1, contra o
   minimo WCAG AA de 4.5:1. */
.nm-cta,
button[type="submit"] {
	background-color: var(--nm-destaque);
	color: var(--nm-sobre-destaque, #fff);
}

/* Layout base das secoes */

.nm-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.nm-hero,
.nm-servicos,
.nm-sobre,
.nm-depoimentos,
.nm-contato {
	padding: 60px 0;
}

.nm-hero {
	background-color: var(--nm-primaria);
	color: var(--nm-sobre-primaria, #fff);
	text-align: center;
}

.nm-hero-titulo {
	font-size: 2.5rem;
	margin: 0 0 16px;
	color: inherit;
}

.nm-hero-subtitulo {
	font-size: 1.15rem;
	margin: 0 0 24px;
	opacity: 0.9;
}

.nm-cta {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
}

/* A5: colunas acompanham a quantidade de servicos preenchidos. Antes eram 3
   fixas, e 1 servico deixava 2/3 da largura em branco (medido). */
.nm-servicos-grid {
	display: grid;
	gap: 32px;
}

.nm-servicos-grid--1 {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

.nm-servicos-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.nm-servicos-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.nm-servico h3 {
	color: var(--nm-primaria);
	margin-bottom: 8px;
}

.nm-sobre {
	background-color: color-mix(in srgb, var(--nm-primaria) 6%, var(--nm-fundo));
	text-align: center;
}

.nm-sobre .nm-container {
	max-width: 760px;
}

.nm-depoimento {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	font-style: italic;
}

.nm-depoimento cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-weight: 600;
}

.nm-contato-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* Sem formulario configurado nao ha 2a coluna pra preencher. */
.nm-contato-grid--sem-form {
	grid-template-columns: 1fr;
}

.nm-contato-dados p {
	margin: 0 0 10px;
}

.nm-redes a {
	margin-right: 16px;
}

.nm-pagina-titulo,
.nm-post-titulo {
	color: var(--nm-primaria);
}

/* Modelo "portfolio" (em analise) */

.nm-tecnologias,
.nm-projetos,
.nm-trajetoria {
	padding: 60px 0;
}

.nm-tecnologias-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.nm-tecnologias-lista li {
	border: 1px solid var(--nm-primaria);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.85rem;
	color: var(--nm-primaria);
}

.nm-projetos h2,
.nm-trajetoria h2 {
	color: var(--nm-primaria);
	text-align: center;
	margin-bottom: 32px;
	/* Sem isso o h2 herda o tamanho grande do tema pai e desequilibra o
	   ritmo vertical da secao -- mesmo problema medido no h3 dos cards. */
	font-size: 1.8rem;
}

.nm-projetos-grid {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 28px;
	align-items: stretch;
}

.nm-projetos-grid--1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.nm-projetos-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nm-projetos-grid--3 { grid-template-columns: repeat(3, 1fr); }

.nm-projeto {
	display: flex;
	flex-direction: column;
	border: 1px solid color-mix(in srgb, var(--nm-texto) 15%, transparent);
	border-radius: 12px;
	padding: 24px;
}

.nm-projeto h3 {
	/* Medido no navegador do Nicolas: 29px herdado do tema pai quebrava o
	   titulo em 3-4 linhas numa coluna de ~240px. 1.15rem cabe em 1-2. */
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--nm-primaria);
	margin: 0 0 10px;
}

.nm-projeto-cliente {
	font-size: 0.8rem;
	opacity: 0.7;
	/* empurra pro rodape do card, entao os 3 cards da fileira terminam
	   alinhados mesmo com resumo de tamanho diferente */
	margin-top: auto;
	padding-top: 12px;
}

.nm-trajetoria-lista {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.nm-trajetoria-item {
	border-left: 3px solid var(--nm-destaque);
	padding-left: 20px;
}

.nm-trajetoria-item h3 {
	font-size: 1.15rem;
	color: var(--nm-primaria);
	margin: 0;
}

.nm-trajetoria-meta {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 2px 0 10px;
}

/* Ritmo alternado claro/escuro entre secoes, mesmo padrao que o
   site-portfolio real usa (sec / sec--alt / sec--dark em HomeBody.astro,
   ver MODELOS-DE-REFERENCIA.md) -- documentado antes, nunca implementado
   ate o Nicolas apontar que o vao entre tecnologias e projetos parecia
   vazio/quebrado. Sem essa quebra visual, 120px de padding empilhado le
   como erro, nao como respiro. */
.nm-tecnologias {
	padding-bottom: 40px;
}

.nm-projetos {
	padding-top: 40px;
	padding-bottom: 56px;
	background-color: color-mix(in srgb, var(--nm-primaria) 5%, var(--nm-fundo));
}

.nm-trajetoria {
	padding-top: 56px;
}

@media (max-width: 768px) {
	.nm-projetos-grid--1,
	.nm-projetos-grid--2,
	.nm-projetos-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Responsivo: empilha tudo abaixo de 768px */
@media (max-width: 768px) {
	.nm-servicos-grid,
	.nm-servicos-grid--1,
	.nm-servicos-grid--2,
	.nm-servicos-grid--3,
	.nm-contato-grid {
		grid-template-columns: 1fr;
	}

	.nm-hero-titulo {
		font-size: 1.8rem;
	}
}