/*
	Insights: o índice e a categoria (`home.php`, `category.php`), o texto
	(`single.php`), a busca e a 404.

	A abertura é o componente das internas (`interna.css`), com o fundo
	`chapas`. O porquê de cada seção está no cabeçalho dos templates.
*/

/* A classe do núcleo na paginação (`the_posts_pagination`). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- a lista ---------- */

.insights-lista {
	padding-block: var(--pic-esp-5) var(--pic-esp-6);
}

.insights-lista__topo {
	display: grid;
	gap: var(--pic-esp-3);
	margin-bottom: var(--pic-esp-5);
}

.insights-lista__intro {
	max-width: 40rem;
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 200;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--pic-texto);
	text-wrap: pretty;
}

.insights-lista__filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.insights-lista__filtro a {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--pic-linha);
	border-radius: 99px;
	font-size: 0.85rem;
	color: var(--pic-texto-2);
	text-decoration: none;
	transition: border-color 0.3s, color 0.3s;
}

.insights-lista__filtro a:hover,
.insights-lista__filtro a:focus-visible {
	border-color: var(--pic-borda);
	color: var(--pic-texto);
}

.insights-lista__filtro a[aria-current] {
	border-color: color-mix(in srgb, var(--pic-azul) 60%, var(--pic-linha));
	color: var(--pic-texto);
}

.insights-lista__vazio {
	color: var(--pic-texto-2);
}

.insights-lista__itens,
.insight-mais__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	Na tela larga: a lista à esquerda, o palco preso à direita. O palco tem a
	altura de uma chapa e para no fim da lista — `sticky` dentro da grade.
*/
@media (min-width: 60rem) {
	.insights-lista__grade--palco {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: clamp(3rem, 7vw, 7rem);
		align-items: start;
	}
}

/* ---------- uma linha ---------- */

.insight-linha {
	border-top: 1px solid var(--pic-linha);
}

.insight-linha:last-child {
	border-bottom: 1px solid var(--pic-linha);
}

.insight-linha__corpo {
	display: grid;
	gap: var(--pic-esp-3);
	padding-block: var(--pic-esp-4);
}

/* A imagem da linha: na tela estreita, quadrada e inteira, antes do texto. */
.insight-linha__imagem {
	display: block;
	overflow: clip;
	border-radius: 6px;
	aspect-ratio: 1;
	max-width: 26rem;
	background: var(--pic-elevado);
}

.insight-linha__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 60rem) {
	.insights-lista__grade--palco .insight-linha__imagem {
		display: none;
	}

	.insight-linha__corpo {
		padding-block: var(--pic-esp-5);
	}
}

.insight-linha__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
	margin: 0 0 var(--pic-esp-2);
	font-size: 0.82rem;
	color: var(--pic-texto-3);
}

.insight-linha__meta > span + span:not(.insight-linha__n + span)::before {
	content: "·";
	margin-right: 0.8rem;
	color: var(--pic-borda);
}

.insight-linha__n {
	font-variant-numeric: tabular-nums;
	color: var(--pic-ciano);
}

.insight-linha__titulo {
	margin: 0;
	font-size: clamp(1.6rem, 3.1vw, 2.5rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/*
	O título é o link. Sob o ponteiro (ou o foco), o traço do site corre sob
	cada linha do título — `clone` dá a cada linha o seu traço; sem ele, um
	traço só atravessaria o bloco e cairia no meio da segunda linha.
*/
.insight-linha__titulo a {
	color: var(--pic-texto);
	text-decoration: none;
	background: var(--pic-grad-institucional) no-repeat 0 100% / 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 0.08em;
	transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-linha__titulo a:hover,
.insight-linha__titulo a:focus-visible {
	background-size: 100% 1px;
}

/* O cartão inteiro é alvo: a área do link cobre a linha. */
.insight-linha__corpo {
	position: relative;
}

.insight-linha__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.insight-linha__resumo {
	max-width: 38rem;
	margin: var(--pic-esp-2) 0 0;
	color: var(--pic-texto-2);
}

/* A linha que está no palco fica acesa por inteiro; as outras, um tom abaixo. */
@media (min-width: 60rem) {
	.insights-lista[data-js] .insight-linha__titulo a {
		color: var(--pic-cinza-2);
		transition: color 0.5s, background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.insights-lista[data-js] .insight-linha.e-atual .insight-linha__titulo a,
	.insights-lista[data-js] .insight-linha__titulo a:hover,
	.insights-lista[data-js] .insight-linha__titulo a:focus-visible {
		color: var(--pic-texto);
	}
}

/* ---------- a variante compacta: busca e "continue lendo" ---------- */

.insight-linha--compacta .insight-linha__corpo {
	grid-template-columns: 5.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--pic-esp-3);
	padding-block: var(--pic-esp-3);
}

@media (min-width: 48rem) {
	.insight-linha--compacta .insight-linha__corpo {
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: var(--pic-esp-4);
	}
}

.insight-linha--compacta .insight-linha__corpo:not(:has(.insight-linha__imagem)) {
	grid-template-columns: minmax(0, 1fr);
}

.insight-linha--compacta .insight-linha__titulo {
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
}

.insight-linha--compacta .insight-linha__imagem {
	transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-linha--compacta:hover .insight-linha__imagem {
	scale: 1.03;
}

/* ---------- o palco ---------- */

.insights-lista__palco {
	display: none;
}

@media (min-width: 60rem) {
	.insights-lista__palco {
		position: sticky;
		top: calc(var(--pic-cab-altura) + var(--pic-esp-4));
		display: grid;
		gap: var(--pic-esp-2);
		margin-top: var(--pic-esp-5);
	}
}

.insights-lista__chapa {
	position: relative;
	overflow: clip;
	width: min(100%, 100svh - var(--pic-cab-altura) - 9rem);
	aspect-ratio: 1;
	border-radius: 6px;
	background: var(--pic-elevado);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		0 2rem 4rem rgba(3, 3, 8, 0.55);
}

/*
	A troca: a imagem nova abre de baixo para cima por cima da antiga, e
	assenta de uma escala maior. A antiga só some quando a nova terminou de
	cobri-la — sem o atraso, o fundo apareceria no meio da troca.
*/
.insights-lista__quadro {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0s linear 0.9s;
}

.insights-lista__quadro.e-ativa {
	z-index: 2;
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.insights-lista__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.1;
	transition: scale 0s linear 0.9s;
}

.insights-lista__quadro.e-ativa .insights-lista__img {
	scale: 1;
	transition: scale 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.insights-lista__chapa .pic-luz {
	z-index: 3;
	--pic-luz-ciclo: 14s;
	--pic-luz-atraso: 3s;
}

/* Sozinho, o palco respira: 3% em 20 s, ida e volta. */
@media (prefers-reduced-motion: no-preference) {
	.insights-lista__chapa {
		animation: pic-palco-respira 20s ease-in-out infinite alternate;
	}
}

@media (prefers-reduced-motion: reduce) {
	.insights-lista__quadro,
	.insights-lista__quadro.e-ativa,
	.insights-lista__img,
	.insights-lista__quadro.e-ativa .insights-lista__img {
		transition: none;
		scale: 1;
	}
}

@keyframes pic-palco-respira {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.02);
	}
}

.insights-lista__contador {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--pic-texto-3);
}

.insights-lista__contador [data-insights-n] {
	color: var(--pic-ciano);
}

/* ---------- paginação ---------- */

.insights-paginas {
	margin-top: var(--pic-esp-5);
}

.insights-paginas .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.insights-paginas .page-numbers {
	min-width: 2.6rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--pic-linha);
	border-radius: 99px;
	text-align: center;
	color: var(--pic-texto-2);
	text-decoration: none;
}

.insights-paginas a.page-numbers:hover,
.insights-paginas a.page-numbers:focus-visible {
	border-color: var(--pic-borda);
	color: var(--pic-texto);
}

.insights-paginas .current {
	border-color: color-mix(in srgb, var(--pic-azul) 60%, var(--pic-linha));
	color: var(--pic-texto);
}

/* ---------- o texto: abertura ---------- */

/* O título de um texto é frase inteira, não título curto: um corpo abaixo. */
.single-post .interna-abertura__frase {
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.08;
	text-wrap: balance;
}

/* ---------- o texto: progresso ---------- */

/*
	A linha fina sob o cabeçalho, na tela estreita: quanto do texto já foi
	lido. `--pic-leitura` (0 a 1) é escrita por `insights.js`; sem ele, a
	linha não aparece.
*/
.insight-progresso {
	position: fixed;
	z-index: 40;
	top: var(--pic-cab-altura);
	left: 0;
	right: 0;
	height: 2px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
}

.insight-progresso span {
	display: block;
	height: 100%;
	background: var(--pic-grad-institucional);
	transform-origin: 0 50%;
	transform: scaleX(var(--pic-leitura, 0));
}

[data-leitura-ativa] .insight-progresso {
	opacity: 1;
}

@media (min-width: 64rem) {
	.insight-progresso {
		display: none;
	}
}

/* ---------- o texto: corpo ---------- */

.insight-corpo {
	padding-block: var(--pic-esp-5) var(--pic-esp-5);
}

.insight-corpo__env {
	display: grid;
	gap: var(--pic-esp-4);
}

@media (min-width: 64rem) {
	.insight-corpo__env {
		grid-template-columns: minmax(12rem, 17rem) minmax(0, 44rem);
		justify-content: space-between;
		gap: clamp(3rem, 6vw, 7rem);
		align-items: start;
	}

	.insight-corpo__env:not(:has(.insight-sumario)) {
		grid-template-columns: minmax(0, 44rem);
		justify-content: center;
	}
}

/*
	O sumário: os subtítulos do texto, presos à esquerda. O fio à esquerda
	deles se preenche com o quanto já foi lido, e o subtítulo da seção atual
	acende. É o "onde estou" de um texto longo — o mesmo papel do título
	preso dos capítulos de um case.
*/
.insight-sumario {
	display: none;
}

@media (min-width: 64rem) {
	.insight-sumario {
		position: sticky;
		top: calc(var(--pic-cab-altura) + var(--pic-esp-4));
		display: block;
		max-height: calc(100svh - var(--pic-cab-altura) - var(--pic-esp-5));
		overflow: auto;
		scrollbar-width: none;
	}
}

.insight-sumario .pic-rotulo {
	margin-bottom: var(--pic-esp-2);
}

.insight-sumario__lista {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.1rem;
	list-style: none;
}

.insight-sumario__lista::before,
.insight-sumario__lista::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--pic-linha);
}

.insight-sumario__lista::after {
	background: var(--pic-grad-institucional);
	transform-origin: 50% 0;
	transform: scaleY(var(--pic-leitura, 0));
}

.insight-sumario__lista a {
	display: block;
	padding-block: 0.45rem;
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--pic-texto-3);
	text-decoration: none;
	transition: color 0.4s;
}

.insight-sumario__lista a:hover,
.insight-sumario__lista a:focus-visible,
.insight-sumario__lista a[aria-current] {
	color: var(--pic-texto);
}

/* O texto, na medida de leitura. */
.insight-texto > * {
	margin: 0;
}

.insight-texto > p {
	font-size: clamp(1.06rem, 1.5vw, 1.2rem);
	font-weight: 300;
	line-height: 1.7;
	color: var(--pic-texto);
}

.insight-texto > p + p,
.insight-texto > ul + p,
.insight-texto > ol + p,
.insight-texto > blockquote + p,
.insight-texto > figure + p {
	margin-top: 1.15em;
}

/* O primeiro parágrafo abre o texto num corpo maior — num insight, não num documento. */
.insight-texto:not(.insight-texto--documento) > p:first-child {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 200;
	line-height: 1.5;
}

.insight-texto > h2 {
	margin-top: var(--pic-esp-5);
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--pic-texto);
	text-wrap: balance;
	/* Só o respiro: a altura do cabeçalho já está no `scroll-padding-top` do `html` (base.css). */
	scroll-margin-top: var(--pic-esp-3);
}

.insight-texto > h2:first-child {
	margin-top: 0;
}

/* O fio curto em gradiente antes de cada subtítulo: o mesmo traço do site. */
.insight-texto > h2::before {
	content: "";
	display: block;
	width: 2.4rem;
	height: 1px;
	margin-bottom: var(--pic-esp-3);
	background: var(--pic-grad-institucional);
}

.insight-texto > h3 {
	margin-top: var(--pic-esp-4);
	margin-bottom: var(--pic-esp-2);
	font-size: 1.25rem;
	font-weight: 600;
}

.insight-texto > ul,
.insight-texto > ol {
	margin-top: 1.15em;
	padding-left: 1.3em;
	font-size: clamp(1.06rem, 1.5vw, 1.2rem);
	font-weight: 300;
	line-height: 1.7;
}

.insight-texto li + li {
	margin-top: 0.5em;
}

.insight-texto > blockquote {
	margin-block: var(--pic-esp-4);
	padding-left: var(--pic-esp-3);
	border-left: 1px solid var(--pic-azul);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 200;
	line-height: 1.35;
}

.insight-texto > figure {
	margin-block: var(--pic-esp-4);
}

.insight-texto img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.insight-texto a {
	color: var(--pic-ciano);
	text-underline-offset: 0.2em;
}

.insight-texto strong {
	font-weight: 600;
}

/*
	Cada parágrafo acende na altura da leitura — o mesmo `acende` dos
	capítulos de um case, por seletor porque o HTML vem do editor. Reserva no
	Firefox: `rolagem.js`.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.insight-texto > p,
		.insight-texto > h2,
		.insight-texto > ul,
		.insight-texto > ol,
		.insight-texto > blockquote {
			animation: pic-acende linear both;
			animation-timeline: view();
			animation-range: entry 100% cover 45%;
		}
	}
}

/* ---------- compartilhar ---------- */

.insight-partilha {
	margin-top: var(--pic-esp-5);
	padding-top: var(--pic-esp-4);
	border-top: 1px solid var(--pic-linha);
}

.insight-partilha__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--pic-esp-2) 0 0;
	padding: 0;
	list-style: none;
}

.insight-partilha__lista a,
.insight-partilha__lista button {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--pic-linha);
	border-radius: 99px;
	background: none;
	font: inherit;
	font-size: 0.9rem;
	color: var(--pic-texto);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.3s;
}

.insight-partilha__lista a:hover,
.insight-partilha__lista a:focus-visible,
.insight-partilha__lista button:hover,
.insight-partilha__lista button:focus-visible {
	border-color: color-mix(in srgb, var(--pic-azul) 60%, var(--pic-linha));
}

/* ---------- quem escreve ---------- */

.insight-autor {
	padding-block: var(--pic-esp-5);
	border-top: 1px solid var(--pic-linha);
}

.insight-autor__env {
	display: grid;
	gap: var(--pic-esp-4);
	align-items: center;
}

@media (min-width: 48rem) {
	.insight-autor__env {
		grid-template-columns: 14rem minmax(0, 40rem);
		justify-content: center;
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}

.insight-autor__retrato {
	width: min(14rem, 60vw);
	margin: 0;
	overflow: clip;
	border-radius: 6px;
	aspect-ratio: 2 / 3;
	background: var(--pic-elevado);
}

.insight-autor__retrato img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insight-autor__nome {
	margin: var(--pic-esp-1) 0 0;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.insight-autor__cargo {
	margin: 0.3rem 0 var(--pic-esp-3);
	font-size: 0.9rem;
	color: var(--pic-ciano);
}

.insight-autor__bio {
	max-width: 38rem;
	margin: 0;
	color: var(--pic-texto-2);
}

.insight-autor__bio + .insight-autor__bio {
	margin-top: 0.9em;
}

.insight-autor__ir,
.insight-mais__todos {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: var(--pic-esp-3);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pic-texto);
	text-decoration: none;
}

.insight-autor__ir::after,
.insight-mais__todos::after {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: var(--pic-grad-institucional);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-autor__ir:hover::after,
.insight-autor__ir:focus-visible::after,
.insight-mais__todos:hover::after,
.insight-mais__todos:focus-visible::after {
	width: 4.4rem;
}

/* ---------- continue lendo ---------- */

.insight-mais {
	padding-block: var(--pic-esp-5) var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.insight-mais__titulo {
	margin: 0 0 var(--pic-esp-3);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

/* ---------- busca e 404 ---------- */

.insights-busca {
	padding-block: var(--pic-esp-4) var(--pic-esp-6);
}

.pic-busca {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 40rem;
	margin-bottom: var(--pic-esp-4);
}

.pic-busca__campo {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--pic-borda);
	border-radius: 2px;
	background: var(--pic-elevado);
	font: inherit;
	color: var(--pic-texto);
}

.pic-busca__campo::placeholder {
	color: var(--pic-cinza-4);
}

.pic-busca__campo:focus-visible {
	outline: 2px solid var(--pic-ciano);
	outline-offset: 2px;
}

.pic-caminhos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--pic-esp-4);
	padding: 0;
	list-style: none;
}

.pic-caminhos__lista a {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--pic-linha);
	border-radius: 99px;
	color: var(--pic-texto);
	text-decoration: none;
	transition: border-color 0.3s;
}

.pic-caminhos__lista a:hover,
.pic-caminhos__lista a:focus-visible {
	border-color: color-mix(in srgb, var(--pic-azul) 60%, var(--pic-linha));
}

/* ---------- página de texto (`page.php`) ---------- */

.pagina-vazia {
	padding: var(--pic-esp-3);
	border: 1px dashed var(--pic-borda);
	border-radius: 2px;
	color: var(--pic-texto-2);
}

.pagina-vazia a {
	margin-left: 0.4rem;
	color: var(--pic-ciano);
}