/*
 * Blog, arquivos e busca — as listagens.
 * Templates: home.html, index.html, archive.html, search.html
 * Pattern: patterns/blog-destaques.php (o hero das listagens)
 *
 * O post único mora em templates/post.css. Ele reusa daqui a capa e o chip do hero (as
 * duas listas de seletores acima) e o card .almar-post-card, que a seção "Leia também"
 * repete sem uma linha de CSS nova.
 */

/* ==========================================================================
   1. Hero das listagens — carrossel dos 3 destaques
   ========================================================================== */

.almar-blog-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 70vh;
	background-color: var(--wp--preset--color--fundo-principal);
}

/*
 * Sobe por baixo do cabeçalho sticky, como o hero da Home (sections/hero.css).
 * Os dois níveis do seletor são obrigatórios: o layout do core emite
 * `.wp-container-… > * { margin-block-start: 0 }` com a mesma especificidade de uma
 * classe única, e quem vence seria decidido pela ordem das folhas.
 *
 * Para a margem negativa colapsar, o <main> das listagens não tem padding-top — ele
 * mora no .almar-arquivo__conteudo, depois do hero.
 */
.wp-site-blocks .almar-blog-hero {
	margin-block-start: calc(-1 * var(--almar-altura-cabecalho));
}

/* O <ul> do core/post-template é o palco: os slides se empilham dentro dele. */
.almar-blog-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.almar-blog-hero__slides > li {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	margin: 0;
	opacity: 0;
	/*
	 * visibility, e não só opacity: cada slide tem links (a capa, o título, o "Leia
	 * mais"). Sem isso o Tab entraria nos slides invisíveis. O delay devolve a
	 * visibilidade só depois do fade, para o slide que sai não sumir de uma vez.
	 */
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

/* Sem JS, o primeiro destaque fica visível — e estático. */
.almar-blog-hero__slides > li:first-child {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease-in-out, visibility 0s;
}

/* Com JS, quem manda é a classe .is-active. */
.almar-blog-hero__slides[data-carousel-ready] > li:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

.almar-blog-hero__slides[data-carousel-ready] > li.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease-in-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.almar-blog-hero__slides > li {
		transition: none;
	}
}

/*
 * A capa do hero do post (templates/post.css) é a mesma coisa: uma imagem destacada que
 * vira o fundo da seção. As regras moram aqui, e o post só acrescenta a classe dele à
 * lista — duplicá-las seria manter dois lugares em sincronia por nada.
 */
.almar-blog-hero__capa,
.almar-post-hero__capa {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.almar-blog-hero__capa a,
.almar-blog-hero__capa img,
.almar-post-hero__capa img {
	display: block;
	width: 100%;
	height: 100%;
}

.almar-blog-hero__capa img,
.almar-post-hero__capa img {
	object-fit: cover;
}

/* Gradiente de leitura: escurece o pé e a esquerda, onde o texto pousa. */
.almar-blog-hero__slides > li::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			0deg,
			rgb(6 26 43 / 0.95) 0%,
			rgb(6 26 43 / 0.6) 45%,
			rgb(6 26 43 / 0.15) 100%
		),
		linear-gradient(
			90deg,
			rgb(6 26 43 / 0.7) 0%,
			rgb(6 26 43 / 0.2) 60%,
			rgb(6 26 43 / 0) 100%
		);
}

.almar-blog-hero__conteudo {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--almar-largura-total);
	margin-inline: auto;
	padding-inline: var(--almar-margem-lateral);
	padding-block: max(112px, calc(var(--almar-altura-cabecalho) + 24px)) 88px;
}

.almar-blog-hero__meta {
	margin-block-end: 24px;
}

/* O chip do hero do post (templates/post.css) é o mesmo — mesma razão da capa, acima. */
.almar-blog-hero__chip,
.almar-post-hero__chip {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid rgb(244 241 236 / 0.25);
	border-radius: 999px;
	background-color: rgb(6 26 43 / 0.55);
	color: var(--wp--preset--color--branco-quente);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.almar-blog-hero__chip a,
.almar-post-hero__chip a {
	color: inherit;
	text-decoration: none;
}

.almar-blog-hero__chip a:hover,
.almar-post-hero__chip a:hover {
	color: var(--wp--preset--color--teal-destaque);
	text-decoration: none;
}

.almar-blog-hero .wp-block-post-title {
	max-width: 30rem;
	margin-block: 0 32px;
}

.almar-blog-hero .wp-block-post-title a {
	color: var(--wp--preset--color--branco-quente);
	text-decoration: none;
	transition: color 0.3s ease;
}

.almar-blog-hero .wp-block-post-title a:hover {
	color: var(--wp--preset--color--teal-destaque);
}

/*
 * Pontos de navegação — criados pelo assets/js/hero-carousel.js.
 *
 * O box-sizing é explícito porque este <div> nasce do JS, fora de qualquer bloco: o
 * WordPress só normaliza o box-sizing dentro do markup dos blocos, e sem esta linha o
 * padding lateral se somava aos 100% de largura, jogando o primeiro ponto para fora da
 * tela no mobile.
 */
.almar-carrossel__pontos {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: var(--almar-largura-total);
	padding-inline: var(--almar-margem-lateral);
}

.almar-carrossel__ponto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--branco-quente);
	border-radius: 999px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.almar-carrossel__ponto:hover,
.almar-carrossel__ponto:focus-visible {
	background-color: var(--wp--preset--color--branco-quente);
}

.almar-carrossel__ponto[aria-current="true"] {
	background-color: var(--wp--preset--color--teal-destaque);
	border-color: var(--wp--preset--color--teal-destaque);
	transform: scale(1.3);
}

/* Blog vazio: o hero não tem slide nenhum, só o recado. */
.almar-blog-hero .wp-block-query-no-results {
	position: relative;
	z-index: 2;
	max-width: var(--almar-largura-total);
	margin-inline: auto;
	padding-inline: var(--almar-margem-lateral);
	padding-block: max(112px, calc(var(--almar-altura-cabecalho) + 24px)) 88px;
}

@media (max-width: 767px) {
	.almar-blog-hero {
		min-height: 80vh;
	}

	.almar-blog-hero__conteudo {
		padding-block-end: 64px;
	}

	.almar-carrossel__pontos {
		bottom: 28px;
	}
}

@media (min-width: 2080px) {
	.almar-blog-hero {
		min-height: 78vh;
	}

	.almar-blog-hero__conteudo {
		padding-block: max(140px, calc(var(--almar-altura-cabecalho) + 48px)) 104px;
	}
}

/* ==========================================================================
   2. Intro centralizada (título, ondas, apoio, busca)
   ========================================================================== */

.almar-arquivo .almar-arquivo__intro {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

/*
 * No blog a intro é só a busca — o título e a frase de apoio saíram, e o campo largo é o
 * que costura o carrossel à grade. Nos arquivos e na busca o título continua: lá ele diz
 * de que recorte a lista é ("Categoria: Cases", "Resultados de pesquisa para…").
 */
.almar-arquivo__intro .wp-block-search {
	max-width: 720px;
	margin-inline: auto;
}

/* ==========================================================================
   2b. Seletor de categorias — pílulas de filtro sob a busca
   ========================================================================== */

/*
 * Vive dentro da .almar-arquivo__intro: o blockGap de 16px da intro já dá o respiro
 * entre a busca e as pílulas. Só a listagem do blog (home.html) chama o pattern hoje.
 */
.almar-categorias {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Mesmo idiom de rótulo (label-caps) do chip do hero e das datas dos cards. */
.almar-categorias__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid rgb(6 26 43 / 0.15);
	border-radius: 999px;
	color: var(--wp--preset--color--fundo-principal);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.almar-categorias__chip:hover,
.almar-categorias__chip:focus-visible {
	border-color: var(--wp--preset--color--teal-destaque);
	color: var(--wp--preset--color--teal-destaque);
	text-decoration: none;
}

/* Ativa: mesmo preenchimento teal da página atual na paginação (seção 5). */
.almar-categorias__chip.is-active,
.almar-categorias__chip[aria-current="page"] {
	border-color: var(--wp--preset--color--teal-destaque);
	background-color: var(--wp--preset--color--teal-destaque);
	color: var(--wp--preset--color--branco-quente);
}

@media (prefers-reduced-motion: reduce) {
	.almar-categorias__chip {
		transition: none;
	}
}

/* ==========================================================================
   3. Grade de cards
   ========================================================================== */

.almar-arquivo .almar-arquivo__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1280px) {
	.almar-arquivo .almar-arquivo__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.almar-arquivo .almar-arquivo__grade {
		grid-template-columns: 1fr;
	}
}

.almar-post-card__capa {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--cinza-elegante);
}

.almar-post-card__capa img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/*
 * Hover em CSS, sem depender do GSAP: afordância de clique não pode sumir junto com
 * a camada de animação. Mesmo molde do card de case (sections/cases.css).
 */
.almar-post-card {
	transition: transform 0.35s ease;
}

.almar-post-card:hover,
.almar-post-card:focus-within {
	transform: translateY(-6px);
}

.almar-post-card:hover .almar-post-card__capa img,
.almar-post-card:focus-within .almar-post-card__capa img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.almar-post-card,
	.almar-post-card__capa img {
		transition: none;
	}

	.almar-post-card:hover,
	.almar-post-card:focus-within,
	.almar-post-card:hover .almar-post-card__capa img,
	.almar-post-card:focus-within .almar-post-card__capa img {
		transform: none;
	}
}

.almar-post-card .wp-block-post-date {
	color: var(--wp--preset--color--cinza-elegante);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.almar-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--fundo-principal);
	text-decoration: none;
	transition: color 0.3s ease;
}

.almar-post-card:hover .wp-block-post-title a,
.almar-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--teal-destaque);
}

.almar-post-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* ==========================================================================
   4. "Leia mais" — core/read-more com a seta do tema
   ========================================================================== */

/*
 * Escopado no ancestral (e não no `.wp-block-read-more` solto) para vencer o estilo de
 * link que o theme.json emite em `:root :where(a…)` sem depender da ordem das folhas.
 *
 * A seta é a mesma máscara CSS do botão CTA (block-styles.css): o ícone acompanha o
 * currentColor, sem precisar de um arquivo por cor.
 */
.almar-arquivo .wp-block-read-more,
.almar-blog-hero .wp-block-read-more,
.almar-relacionados .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--fundo-principal);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
}

.almar-blog-hero .wp-block-read-more {
	color: var(--wp--preset--color--branco-quente);
}

.almar-arquivo .wp-block-read-more::after,
.almar-blog-hero .wp-block-read-more::after,
.almar-relacionados .wp-block-read-more::after {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("../../icons/arrow-forward.svg") no-repeat center / contain;
	mask: url("../../icons/arrow-forward.svg") no-repeat center / contain;
	transition: transform 0.3s ease;
}

.almar-arquivo .wp-block-read-more:hover,
.almar-arquivo .wp-block-read-more:focus-visible,
.almar-blog-hero .wp-block-read-more:hover,
.almar-blog-hero .wp-block-read-more:focus-visible,
.almar-relacionados .wp-block-read-more:hover,
.almar-relacionados .wp-block-read-more:focus-visible,
.almar-post-card:hover .wp-block-read-more {
	color: var(--wp--preset--color--teal-destaque);
	text-decoration: none;
}

.almar-arquivo .wp-block-read-more:hover::after,
.almar-arquivo .wp-block-read-more:focus-visible::after,
.almar-blog-hero .wp-block-read-more:hover::after,
.almar-blog-hero .wp-block-read-more:focus-visible::after,
.almar-relacionados .wp-block-read-more:hover::after,
.almar-relacionados .wp-block-read-more:focus-visible::after,
.almar-post-card:hover .wp-block-read-more::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.almar-arquivo .wp-block-read-more::after,
	.almar-blog-hero .wp-block-read-more::after,
	.almar-relacionados .wp-block-read-more::after {
		transition: none;
	}

	.almar-post-card:hover .wp-block-read-more::after,
	.almar-arquivo .wp-block-read-more:hover::after,
	.almar-blog-hero .wp-block-read-more:hover::after,
	.almar-relacionados .wp-block-read-more:hover::after {
		transform: none;
	}
}

/* ==========================================================================
   5. Paginação
   ========================================================================== */

.almar-arquivo__paginacao {
	align-items: center;
	gap: 8px;
}

.almar-arquivo__paginacao .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
}

.almar-arquivo__paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border-radius: 999px;
	color: var(--wp--preset--color--fundo-principal);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.almar-arquivo__paginacao a.page-numbers:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--teal-destaque) 15%, transparent);
	color: var(--wp--preset--color--fundo-principal);
	text-decoration: none;
}

.almar-arquivo__paginacao .page-numbers.current {
	background-color: var(--wp--preset--color--teal-destaque);
	color: var(--wp--preset--color--branco-quente);
}

.almar-arquivo__paginacao .wp-block-query-pagination-previous,
.almar-arquivo__paginacao .wp-block-query-pagination-next {
	color: var(--wp--preset--color--fundo-principal);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.almar-arquivo__paginacao .wp-block-query-pagination-previous:hover,
.almar-arquivo__paginacao .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--teal-destaque);
	text-decoration: none;
}