/* Índice do blog (home.php). Componentes globais em style.css; cores e tipos em tokens.css.
   Cada card leva a ilustração da marca do post sobre uma forma do símbolo (meia-lua, quarto de círculo, círculo),
   no lugar do bloco bege vazio de antes. */

/* ---------- topo ---------- */
.m-indice__topo { position: relative; overflow: hidden; background: var(--cor-off-white-2); padding-block: 88px 72px; }
.m-indice__topo .m-wrap { position: relative; z-index: 1; }
.m-indice__titulo {
	margin: 0; color: var(--cor-contraste); font-weight: var(--tipo-titulo-peso); line-height: 1.05;
	font-size: clamp(40px, 5vw, calc(var(--tipo-display-tamanho) * 1.375)); letter-spacing: var(--tracking-titulo);
}
.m-indice__lua { width: 320px; height: 160px; right: 6%; bottom: 0; }
.m-indice__quarto { width: 120px; height: 120px; right: calc(6% + 320px); bottom: 0; }

/* ---------- lista ---------- */
.m-indice__lista { padding-block: 72px 112px; }
.m-indice__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }

.m-artigo { display: grid; gap: 20px; align-content: start; min-width: 0; }
.m-artigo__img {
	position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3;
	background: var(--cor-off-white-2);
}
.m-artigo__img::before { content: ""; position: absolute; }
.m-artigo__img img { position: relative; display: block; width: auto; height: auto; max-width: 78%; max-height: 82%; object-fit: contain; }
/* a forma de fundo muda de card para card, como nas peças da marca */
.m-artigo--cor0 .m-artigo__img::before { left: 15%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--cor-principal); bottom: -30%; }
.m-artigo--cor1 .m-artigo__img::before { left: 0; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: 0 100% 0 0; background: var(--cor-composicao); }
.m-artigo--cor2 .m-artigo__img::before { right: 0; top: 0; width: 30%; height: 60%; border-radius: 999px 0 0 999px; background: var(--cor-apoio-2); }

.m-artigo__texto { display: grid; gap: 10px; justify-items: start; }
.m-artigo__titulo { margin: 0; font-weight: var(--tipo-titulo-peso); font-size: 22px; line-height: 1.25; }
.gpc .m-artigo__titulo a { color: var(--cor-contraste); text-decoration: none; }
.gpc .m-artigo__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.m-artigo__resumo { margin: 0; }
.m-artigo__data { margin: 0; font-size: var(--tipo-legenda-tamanho); line-height: var(--tipo-legenda-entrelinha); color: var(--cor-contraste); }

/* o primeiro post ocupa a linha inteira: ilustração grande à esquerda */
.m-artigo--destaque { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.m-artigo--destaque .m-artigo__img { aspect-ratio: 16 / 10; border-radius: 0 999px 999px 0; }
.m-artigo--destaque .m-artigo__img::before { left: 22%; width: 56%; bottom: -36%; }
.m-artigo--destaque .m-artigo__titulo { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: var(--tracking-titulo); }

/* ---------- paginação ---------- */
.m-indice__paginas { margin-top: 64px; }
.m-indice__paginas .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m-indice__paginas .page-numbers {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px 0 14px; border-radius: 0 999px 999px 0;
	border: 1.5px solid var(--cor-contraste); color: var(--cor-contraste); text-decoration: none; font-weight: var(--tipo-chamada-peso);
}
.m-indice__paginas .page-numbers.current { background: var(--cor-contraste); color: var(--cor-branco); }
.m-indice__vazio { margin: 0; max-width: 40em; }

/* ---------- arquivos (archive.php) e busca (search.php): mesma composição do índice ---------- */
.m-indice__topo .m-trilha { margin: 0 0 18px; }
.m-indice__desc { margin-top: 14px; }
.m-indice__desc p { margin: 0; }
.m-indice--busca .m-busca { margin-top: 28px; }
.m-indice__conta { margin: 18px 0 0; font-size: var(--tipo-legenda-tamanho); line-height: var(--tipo-legenda-entrelinha); color: var(--cor-contraste); }
.m-indice__volta { margin: 56px 0 0; }
.gpc .m-indice__volta a { color: var(--cor-contraste); text-underline-offset: 3px; }
/* card sem ilustração (todos os da busca): só texto, com um traço por cima */
.m-artigo--sem-img { padding-top: 20px; border-top: 1.5px solid var(--cor-contraste); }
/* a busca é uma lista de uma coluna, na largura de leitura */
.m-indice--busca .m-indice__grade { grid-template-columns: minmax(0, 46em); gap: 40px; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
	.m-indice__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m-artigo--destaque { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
	.m-indice__topo { padding-block: 56px 112px; }
	.m-indice__lua { width: 200px; height: 100px; right: 16px; }
	.m-indice__quarto { width: 80px; height: 80px; right: 216px; }
	.m-indice__lista { padding-block: 48px 72px; }
	.m-indice__grade { grid-template-columns: 1fr; gap: 48px; }
	.m-artigo--destaque { grid-template-columns: 1fr; gap: 20px; }
	.m-artigo--destaque .m-artigo__img { aspect-ratio: 4 / 3; border-radius: 0 0 999px 0; }
	.m-artigo__titulo { font-size: 20px; }
}