/* =========================================================================
   TÍTULO DE SEÇÃO
   Vale para todas as seções da home. Dourado nos títulos é uma das três
   aplicações permitidas do dourado da marca, junto com o logo e os botões
   principais (seção 7).
   ========================================================================= */

/*
 * Alinhado à esquerda, a pedido dela.
 *
 * Era centralizado, com uma faísca de cada lado. A faísca da esquerda saiu
 * junto: ela empurraria o texto 0.9rem para dentro, e o título deixaria de
 * bater com a borda dos cards logo abaixo — que é justamente o alinhamento
 * que se ganha ao tirar do centro. A da direita fica, como arremate.
 */
.secao-titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gold);
	text-align: left;
}

/* Faísca de quatro pontas depois do título, o mesmo motivo que existe solto
   na marca dela. Some em tela estreita, onde rouba espaço do texto. */
@media (min-width: 700px) {
	.secao-titulo::after {
		content: '';
		display: inline-block;
		width: 5px;
		height: 5px;
		margin-inline: 0.9rem;
		background: var(--gold-deep);
		transform: rotate(45deg);
		vertical-align: middle;
	}
}

/* =========================================================================
   PARCEIROS

   Grade que se ajusta sozinha ao número de streamers publicados. Ela começa
   com cinco e quer acrescentar mais depois, então nada aqui presume uma
   quantidade fixa.
   ========================================================================= */

.parceiros {
	/*
	 * Menos respiro em cima que embaixo.
	 *
	 * Ela apontou o vão grande entre o fim dos Destaques e o título de
	 * Parceiros: as duas seções somavam o respiro de baixo de uma com o de
	 * cima da outra, e dava quase o dobro do que se vê nas outras junções.
	 */
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(3rem, 7vw, 5rem);
}

/*
 * Trilho do carrossel, e não mais uma grade.
 *
 * Quem rola é o navegador, como nos outros dois carrosséis do site: no
 * celular isso dá o arrastar com o dedo de graça, com a física do sistema.
 * O JavaScript só empurra o trilho quando as setas são usadas ou quando
 * chega a vez de andar sozinho.
 *
 * Os blocos têm largura fixa em vez de fração da tela: com cinco parceiros
 * eles cabem todos e o carrossel fica parado; quando ela passar de cinco, os
 * que sobrarem entram pela direita sem que nada precise ser ajustado aqui.
 */
.parceiros__frame {
	position: relative;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	/* A esteira é mais larga que a tela por definição: o que passa das bordas
	   fica escondido aqui. */
	overflow: hidden;
}

.parceiros__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/*
	 * width: max-content é o que faz a esteira funcionar.
	 *
	 * Sem isto o flex encolhe os blocos para caberem na largura da tela, e
	 * deslizar 50% não deslizaria coisa alguma. Com max-content a fileira
	 * tem a largura real das duas cópias somadas, e metade dela é exatamente
	 * o ponto onde a segunda começa.
	 */
	width: max-content;
	gap: clamp(1.25rem, 3vw, 2rem);
	animation: parceiros-esteira var(--parceiros-duracao, 30s) linear infinite;
}

/* Parar o mouse em cima congela a fileira, para dar tempo de ler um nome ou
   clicar numa rede sem perseguir o bloco. */
.parceiros__frame:hover .parceiros__lista,
.parceiros__frame:focus-within .parceiros__lista {
	animation-play-state: paused;
}

/*
 * Desliza até a metade e recomeça.
 *
 * Na metade exata a segunda cópia está no lugar onde a primeira começou, então
 * o reinício é invisível — é o que dá a volta infinita sem salto.
 */
@keyframes parceiros-esteira {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - clamp(1.25rem, 3vw, 2rem) / 2)); }
}

/* Quem pediu menos movimento no sistema recebe a fileira parada. */
@media (prefers-reduced-motion: reduce) {
	.parceiros__lista { animation: none; }
}

/* Largura fixa por bloco: é ela que dá à esteira uma largura real para
   deslizar, em vez de os blocos se espremerem na tela. */
.parceiros__lista > li {
	flex: 0 0 clamp(160px, 20vw, 200px);
}

.parceiros__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2rem) 1rem;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

/*
 * A estrela da marca dela, marca-d'água atrás do card.
 *
 * Bem apagada de propósito: é assinatura, não decoração. Se competir com a
 * foto do parceiro, ela vira ruído em cima da pessoa que o card apresenta.
 */
.parceiros__item::before {
	content: '';
	position: absolute;
	right: -18%;
	bottom: -22%;
	width: 76%;
	aspect-ratio: 1;
	background: url('../img/estrela-marca.png') no-repeat center / contain;
	opacity: 0.05;
	pointer-events: none;
}

.parceiros__item > * {
	position: relative; /* acima da marca-d'água */
}

.parceiros__item:hover {
	border-color: var(--border);
	transform: translateY(-3px);
}

.parceiros__item:hover::before {
	opacity: 0.08;
}

/* Círculo maior, a pedido dela: o anterior ficava pequeno demais para
   reconhecer o rosto de quem é o parceiro. */
.parceiros__foto {
	width: clamp(104px, 12vw, 132px);
	height: clamp(104px, 12vw, 132px);
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--gold-deep);
}

.parceiros__nome {
	margin: 0.9rem 0 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.25;
}

/* Etiquetas dos jogos que o parceiro cobre. Mesmas cores do resto do site,
   em tamanho menor porque aqui elas são detalhe e não manchete. */
.parceiros__jogos {
	list-style: none;
	margin: 0.7rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
}

.parceiros__jogos .etiqueta {
	font-size: 0.5625rem;
	padding: 0.2rem 0.5rem;
	letter-spacing: 0.06em;
}

/* Até três redes, com o ícone saindo do próprio endereço. */
.parceiros__redes {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.parceiros__rede {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-muted);
	transition: color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background-color var(--speed) var(--ease);
}

.parceiros__rede svg {
	width: 45%;
	height: 45%;
	display: block;
}

.parceiros__rede:hover,
.parceiros__rede:focus-visible {
	color: #0B0B0E;
	background: var(--gold);
	border-color: var(--gold-bright);
}