/* NICHO Trabalho · KIT E · Mosaico */

/* Topo: cartão branco + foto ---------------------------------------------------- */
.nx-mo-art-top {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 24px;
}

.nx-mo-art-head {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 44px 48px;
	border-radius: 20px;
	background: #fff;
}

/* sem foto, o cartão ocupa a largura toda, com o texto no centro (sem buraco à direita) */
.nx-mo-art-top--single .nx-mo-art-head {
	grid-column: 1 / -1;
}

@media (min-width: 861px) {
	.nx-mo-art-top--single .nx-mo-art-head {
		align-items: center;
		text-align: center;
	}

	.nx-mo-art-top--single .nx-mo-art-head__pills {
		justify-content: center;
	}

	.nx-mo-art-top--single .nx-mo-art-head__dek {
		max-width: 760px;
	}
}

/* Sem lateral (sumário oculto e sem anúncio): o texto no centro; sem foto, o cartão do título com a mesma largura do texto */
@media (min-width: 1181px) {
	.nx-mo-art--solo .nx-mo-art__main,
	.nx-mo-art-top--single.nx-mo-art-top--solo .nx-mo-art-head {
		grid-column: 3 / span 8;
	}
}

.nx-mo-art-head__title {
	font-family: var(--nx-display);
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-wrap: balance;
}

.nx-mo-art-head__dek {
	font-size: 19px;
	line-height: 1.6;
	color: var(--nx-muted);
}

.nx-mo-art-head__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nx-mo-art-head__pills span {
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--nx-tint-14);
	font-size: 14px;
	font-weight: 600;
}

.nx-mo-art-head__by {
	font-size: 14px;
	color: var(--nx-muted);
}

.nx-mo-art-head__by a,
.nx-mo-art-head__by strong {
	font-weight: 700;
	color: var(--nx-ink);
}

.nx-mo-art-head__by .nx-mo-art-head__how {
	font-weight: 600;
	color: var(--nx-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nx-mo-art-cover {
	grid-column: span 5;
	position: relative;
	min-height: 470px;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--nx-tint-12);
}

/* Texto | lateral ---------------------------------------------------------------- */
.nx-mo-art {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
	padding-bottom: 40px;
}

.nx-mo-art__main {
	grid-column: span 8;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* cada parte do texto num cartão branco */
.nx-mo-art-card {
	padding: 28px 32px;
	border-radius: 20px;
	background: #fff;
}

/* seção: número em círculo ao lado do título; o resto embaixo */
.nx-mo-art-card--section {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.nx-mo-art-card--section > * {
	grid-column: 1 / -1;
}

.nx-mo-art-card--section > .nx-mo-art-card__num {
	grid-column: 1;
	grid-row: 1;
}

.nx-mo-art-card--section > h2:first-of-type {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0 0 16px;
}

.nx-mo-art-card__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: var(--nx-dark);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

/* anúncio no meio do texto (artigo_texto) */
.nx-mo-art__main .nx-ad--inline {
	align-items: flex-start;
	padding: 8px 0 24px;
}

/* Ferramenta: caixa escura */
.nx-mo-art-tool {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 32px;
	border-radius: 20px;
	background: var(--nx-dark);
	color: #fff;
}

.nx-mo-art-tool__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	color: #C9CCD3;
}

.nx-mo-art-tool__label {
	font-size: 13px;
	font-weight: 700;
	color: color-mix(in oklab, var(--nx-accent) 62%, #fff);
}

.nx-mo-art-tool__text strong {
	font-family: var(--nx-display);
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.nx-mo-art-tool__btn {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--nx-accent);
	color: var(--nx-on-accent) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.nx-mo-art-tool__btn:hover {
	background: var(--nx-accent-hover);
	color: var(--nx-on-accent-hover) !important;
}

.nx-mo-art__note {
	padding: 20px 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nx-muted);
}

/* Lateral: "Neste guia" (acompanha a leitura) + anúncio */
.nx-mo-art__side {
	grid-column: span 4;
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nx-mo-toc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: 20px;
	background: #fff;
}

.nx-mo-toc__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nx-muted);
}

.nx-mo-toc a {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nx-ink);
	text-decoration: none;
}

.nx-mo-toc a:hover,
.nx-mo-toc a.is-active {
	color: var(--nx-accent-ink);
}

.nx-mo-art__side .nx-ad {
	padding: 0;
}

.nx-mo-toc-inline {
	display: none;
}

/* "Continue lendo" */
.nx-mo-art-h2 {
	font-size: 36px;
}

/* Responsivo --------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.nx-mo-art-head__title {
		font-size: 42px;
	}

	/* lateral sai; o índice vira caixa que abre e fecha no texto */
	.nx-mo-art__main {
		grid-column: 1 / -1;
	}

	.nx-mo-art__side {
		display: none;
	}

	.nx-mo-toc-inline {
		display: block;
		padding: 18px 22px;
		border-radius: 20px;
		background: #fff;
	}

	.nx-mo-toc-inline summary {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--nx-muted);
		cursor: pointer;
	}

	.nx-mo-toc-inline nav {
		display: flex;
		flex-direction: column;
		margin-top: 8px;
	}

	.nx-mo-toc-inline a {
		padding: 9px 0;
		border-bottom: 1px solid var(--nx-line);
		font-size: 15px;
		font-weight: 600;
		color: var(--nx-ink);
		text-decoration: none;
	}

	.nx-mo-toc-inline a:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 860px) {
	/* 12 colunas com 16px de espaço não cabem no celular: vira 1 coluna */
	.nx-mo-art-top,
	.nx-mo-art {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.nx-mo-art-top {
		padding-top: 4px;
		padding-bottom: 12px;
	}

	.nx-mo-art-head,
	.nx-mo-art-cover {
		grid-column: 1 / -1;
	}

	.nx-mo-art-head {
		gap: 14px;
		padding: 26px 22px;
	}

	.nx-mo-art-head__title {
		font-size: 32px;
		line-height: 1.06;
	}

	.nx-mo-art-head__dek {
		font-size: 17px;
	}

	.nx-mo-art-cover {
		min-height: 230px;
	}

	.nx-mo-art {
		padding-bottom: 28px;
	}

	.nx-mo-art__main {
		gap: 12px;
	}

	.nx-mo-art-card {
		padding: 22px 20px;
	}

	.nx-mo-art-card--section {
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 12px;
	}

	.nx-mo-art-card__num {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.nx-mo-art-tool {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 24px 22px;
	}

	.nx-mo-art-h2 {
		font-size: 28px;
	}
}

/* Celular: título menor e menos espaço entre título, anúncio e texto (aparece mais texto na 1ª tela) */
@media (max-width: 640px) {
	.nx-article .nx-mo-art-head__title {
		font-size: 24px;
		line-height: 1.2;
	}
	.nx-article .nx-mo-art-head {
		gap: 12px;
	}
	.nx-article :is(.nx-ad, .nx-ad--inline, [data-av-wrapper], div[id$="_wrapper"][align="center"], .code-block, .google-auto-placed) {
		margin-top: 6px !important;
		margin-bottom: 6px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}