/* ATENÇÃO ao publicar mudanças neste arquivo:
 * o nginx do servidor usa `open_file_cache_valid 60s` e o deploy recria os arquivos
 * com inodes novos. Durante até 60s a origem ainda serve os BYTES ANTIGOS. Se a
 * página for aberta nessa janela, a Cloudflare grava o conteúdo velho sob a URL
 * nova com `max-age=31536000` — e o purge depende do dono da conta.
 * Use sempre `deploy.sh`: ele espera a origem ficar consistente antes de liberar.
 *
 * Slider do topo — carrossel do post em destaque.
 *
 * Base sem JS: rolagem horizontal com scroll-snap. Já é navegável e arrastável no
 * toque antes de qualquer script rodar. O JS acrescenta setas, miniaturas,
 * autoplay e o anel de progresso.
 *
 * Medidas tiradas da referência (viewport 1440): card 1400x520 raio 10px ·
 * título 44/600 em coluna de 620px · resumo 16/28 · meta 14/500 ·
 * setas 55px a 28px para fora · miniaturas 60px, 3px de respiro do rodapé.
 */

/* O blockGap de 30px do theme.json vira margin-block-start em TODO filho de um
   grupo de fluxo. Aqui isso quebra três coisas de uma vez:
   - o trilho ganha 30px de margem e o bloco da consulta fica mais alto que o card,
     então tudo que é posicionado pela base do slider erra o alvo;
   - as setas (top: 50%) descem 30px e saem do centro;
   - o recorte desce junto.
   O slider não usa espaçamento entre filhos: todos são camadas sobre o card. */
.rb-slider { position: relative; }
.rb-slider > *,
.rb-slider .wp-block-query,
.rb-slider .wp-block-query > *,
.rb-slider__track,
.rb-slider__track > *,
.rb-slider__track .rb-slide { margin-block: 0; }

/* ---------------------------------------------------------------- trilho */

.rb-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: 10px;
	scrollbar-width: none;
}
.rb-slider__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rb-slider__track { scroll-behavior: auto; }
}

.rb-slider__track > .wp-block-post {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* ---------------------------------------------------------------- slide */

.rb-slide {
	position: relative;
	display: block;
	aspect-ratio: 1400 / 520;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}

.rb-slide .rb-slide__thumb,
.rb-slide .rb-slide__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* véu de leitura — a referência usa preto a 40% no rodapé; aqui é um pouco mais
   forte, porque o texto branco precisa passar em contraste sobre QUALQUER foto */
.rb-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* Com o texto centrado, o véu precisa escurecer a FAIXA ESQUERDA, não o rodapé.
	   A referência conta com a foto ser escura ali; aqui a garantia é nossa, para o
	   branco passar em contraste sobre qualquer imagem que o editor subir. */
	background:
		linear-gradient(to right, rgb(25 25 25 / 74%) 0%, rgb(25 25 25 / 52%) 38%, rgb(25 25 25 / 12%) 66%, transparent 82%),
		linear-gradient(to top, rgb(25 25 25 / 30%) 0%, transparent 55%);
}

/* Organização medida nos CINCO slides da referência, card de 520px.
   O bloco é ANCORADO NO TOPO num ponto fixo — não centralizado. Centralizar faz
   cada slide se posicionar conforme a altura do próprio texto, e um título de 1
   linha sobe enquanto o de 2 desce. Na referência o selo fica sempre no mesmo
   lugar e só o que vem DEPOIS de um texto mais curto se move.

   selo 129 (24,8% de 520) · título 172 · resumo 293 · meta 363, terminando em 391.
   Espaços: selo→título 14 · título→resumo 7 · resumo→meta 14.
   O recuo à esquerda é 90px e a coluna de texto tem 620px. */
.rb-slide__body {
	position: absolute;
	z-index: 3;
	/* o blockGap do theme.json encolheria a caixa; ver a nota no topo do arquivo */
	margin-block: 0;
	inset-block-start: 24.8%;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: min(800px, 72%);
	padding: 0 40px 0 90px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: #fff;
}

.rb-slide__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 14px; flex: none; }

.rb-slide__title {
	margin: 0 0 7px;
	max-inline-size: 620px;
	font-size: clamp(26px, 3.1vw, 44px);
	font-weight: 600;
	/* 1.3 é a entrelinha da referência: 2 linhas de 44px medem 114px */
	line-height: 1.3;
	color: #fff;
	flex: none;
}
.rb-slide__title a { color: inherit; text-decoration: none; }
.rb-slide__title a:hover,
.rb-slide__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.rb-slide__excerpt {
	margin: 0 0 14px;
	flex: none;
	max-inline-size: 620px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: #fff;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.rb-slide__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
	flex: none;
	line-height: 2;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	color: var(--wp--preset--color--base);
}
.rb-slide__meta a { color: inherit; font-weight: 600; }
.rb-slide__meta > * { display: inline-flex; align-items: center; gap: 6px; }
.rb-slide__meta > * + *::before {
	content: ""; width: 4px; height: 4px; border-radius: 1px;
	background: currentColor; opacity: .7; margin-inline-end: 10px;
}

/* O chip dentro do slide é sempre sobre foto: fundo branco sólido.
   ATENÇÃO — este arquivo é enfileirado DEPOIS do style.css, e `.rb-slide .rb-cat`
   (0,2,0) vence de `.rb-cat:hover` (0,2,0) pelo desempate de ordem. Sem o par
   abaixo, o fundo continuava branco enquanto o hover aplicava `color:#fff`:
   texto branco sobre branco, ilegível. A regra de hover precisa nascer AQUI,
   com a mesma especificidade do fundo que ela corrige. */
.rb-slide .rb-cat { background: #fff; }
.rb-slide .rb-cat:hover,
.rb-slide .rb-cat:focus-visible {
	background: var(--cat-ink, var(--wp--preset--color--primary));
	border-color: var(--cat-ink, var(--wp--preset--color--primary));
	color: #fff;
}

/* ---------------------------------------------------------------- favoritar */

.rb-bookmark {
	display: inline-grid;
	place-items: center;
	width: 29px; height: 29px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--chip);
	background: #fff;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color .22s, color .22s;
}
.rb-bookmark:hover { background: var(--wp--preset--color--primary); color: #fff; }
.rb-bookmark[aria-pressed="true"] { background: var(--wp--preset--color--primary); color: #fff; }
.rb-bookmark[aria-pressed="true"] svg path { fill: currentColor; }

/* ---------------------------------------------------------------- setas */

.rb-slider__nav {
	position: absolute;
	z-index: 4;
	inset-block-start: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 55px; height: 55px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset__color--primary, var(--wp--preset--color--primary));
	cursor: pointer;
	transition: background-color .3s, color .3s, opacity .3s;
}
.rb-slider__nav:hover { background: var(--wp--preset--color--primary); color: #fff; }
.rb-slider__nav[disabled] { opacity: .35; cursor: default; }
.rb-slider__nav svg { width: 20px; height: 20px; }

/* As setas só ficam POR FORA do card quando há margem para isso. O container tem
   1400px + 20px de padding: em 1440 elas seriam cortadas pela borda da janela.
   Acima de 1500px sobra folga; abaixo, elas entram para dentro do card. */
.rb-slider__nav--prev { inset-inline-start: 16px; }
.rb-slider__nav--next { inset-inline-end: 16px; }

@media (min-width: 1500px) {
	.rb-slider__nav--prev { inset-inline-start: -28px; }
	.rb-slider__nav--next { inset-inline-end: -28px; }
}

/* ---------------------------------------------------------------- recorte + miniaturas */

.rb-slider__notch {
	position: absolute;
	z-index: 3;
	inset-block-end: -9px;
	inset-inline-end: 80px;
	width: 370px; height: 88px;
	pointer-events: none;
}
.rb-slider__notch path { fill: var(--wp--preset--color--base); }

.rb-slider__thumbs {
	position: absolute;
	z-index: 4;
	inset-block-end: 3px;
	/* medidos na referência: última miniatura a 162px da borda direita do card,
	   60px de diâmetro e 13,33px de vão — a fileira mede 206,67px */
	inset-inline-end: 162px;
	display: flex;
	align-items: center;
	gap: 13.33px;
	margin: 0; padding: 0;
	list-style: none;
}

/* Sem isto o <li> reserva espaço de linha de base abaixo do botão e a lista fica
   com 68px de altura para miniaturas de 60 — o que empurra a fileira 8px para
   cima da posição medida na referência. */
.rb-slider__thumbs li { display: flex; }

.rb-thumb {
	position: relative;
	width: 60px; height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}
.rb-thumb img {
	width: 100%; height: 100%;
	border-radius: 50%;
	object-fit: cover;
	/* A referência NÃO escurece as miniaturas inativas — todas ficam em opacidade 1
	   e o único indicador do slide atual é o anel de progresso. Medido no modelo. */
	opacity: 1;
	transition: transform .3s;
}
/* como não há diferença de brilho, o retorno ao passar o mouse é uma leve escala */
.rb-thumb:hover img { transform: scale(1.06); }

.rb-thumb__ring {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}
/* Medido na referência: anel de 56px de diâmetro sobre a miniatura de 60px, com
   3px de espessura (1,5 unidade num SVG com escala 2). O traço fica montado na
   borda da imagem, não fora dela. */
.rb-thumb__ring circle {
	fill: none;
	stroke-width: 3;
	stroke: transparent;
}
.rb-thumb[aria-current="true"] .rb-thumb__ring circle {
	stroke: var(--wp--preset--color--primary);
	stroke-linecap: round;
	stroke-dasharray: var(--rb-ring);
	stroke-dashoffset: var(--rb-ring);
}
.rb-thumb[aria-current="true"][data-playing="true"] .rb-thumb__ring circle {
	animation: rb-ring-fill var(--rb-delay, 5000ms) linear forwards;
}
@keyframes rb-ring-fill { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.rb-thumb .rb-thumb__ring circle { animation: none !important; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- telas menores */

/* Três faixas, cada uma com uma proporção que o TEXTO cabe:
   > 900px  — 1400/520 como a referência, texto centrado à esquerda
   681–900  — 3/2, texto ancorado no rodapé (centrar poria as miniaturas por cima)
   <= 680   — altura pelo conteúdo, mínimo de 440px
   O conteúdo precisa de ~222px + respiro; 4/5 num tablet dava um card de 910px. */

@media (max-width: 1100px) {
	/* padding simétrico: a centralização vertical depende disso */
	.rb-slide__body { padding: 24px 30px 24px 40px; inline-size: min(800px, 82%); }
}

@media (max-width: 900px) {
	.rb-slide { aspect-ratio: 3 / 2; }
	.rb-slide__body {
		inline-size: 100%;
		inset-block-start: 0;
		padding: 24px 24px 86px;
		justify-content: flex-end;
	}
	.rb-slide::after {
		background: linear-gradient(to top, rgb(25 25 25 / 88%) 0%, rgb(25 25 25 / 55%) 45%, transparent 100%);
	}
	/* sem espaço para o recorte: as miniaturas vão para o centro do rodapé */
	.rb-slider__notch { display: none; }
	.rb-slider__thumbs {
		inset-inline: 0;
		inset-block-end: 18px;
		justify-content: center;
		gap: 10px;
	}
	.rb-thumb { width: 44px; height: 44px; }
	.rb-slider__nav { width: 44px; height: 44px; }
}

@media (max-width: 680px) {
	.rb-slide { aspect-ratio: auto; min-height: 440px; }
	.rb-slide__title { font-size: 26px; }
	.rb-slide__excerpt { -webkit-line-clamp: 3; }
	/* o dedo arrasta: as setas viram peso morto e tampam a foto */
	.rb-slider__nav { display: none; }
}

@media (max-width: 420px) {
	.rb-slide__body { padding: 20px 18px 80px; }
	.rb-slide__title { font-size: 23px; }
	.rb-thumb { width: 38px; height: 38px; }
}

/* a lista de categorias traz margem própria; dentro do slide quem espaça é o grupo */
.rb-slide__cats .rb-cat-list { margin: 0; }

/* miniatura de post sem imagem destacada */
.rb-thumb--empty {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 45%, #fff),
		var(--wp--preset--color--primary));
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	display: grid;
	place-items: center;
	transition: opacity .3s;
}
.rb-thumb--empty:hover { opacity: 1; }

/* Título do slide em no máximo 2 linhas, como na referência.
   O clamp vai no <a>: o <h2> do post-title recusa o -webkit-box — ver
   a mesma armadilha nos cards do grid, comentada no style.css. */
.rb-slide__title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ------------------------------------------------------------ alvos de toque */

/* No dedo, favoritar (29px) e miniatura (38px) são pequenos demais para acertar.
   A área clicável cresce para 44px sem mexer no desenho: o pseudo-elemento
   estende o alvo, o visual continua igual. */
@media (pointer: coarse) {
	.rb-bookmark,
	.rb-thumb { position: relative; }

	.rb-bookmark::after,
	.rb-thumb::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -50%;
		inline-size: max(100%, 44px);
		block-size: max(100%, 44px);
	}

	/* vão um pouco maior para os alvos ampliados não se tocarem */
	.rb-slider__thumbs { gap: 14px; }
}