/*
 * O atalho [arma] dentro do texto de uma notícia.
 *
 * A imagem do guia é o conteúdo inteiro aqui: nada de moldura pesada nem de
 * legenda repetindo o nome que já está escrito dentro da própria arte dela.
 */

.arma-atalho {
	margin: clamp(1.25rem, 3vw, 2rem) 0;
}

/*
 * Uma arma por linha não faz sentido quando ela cita três seguidas, e três
 * espremidas não fazem sentido quando é só uma. A grade se ajusta sozinha:
 * cada imagem pede 260px e a linha cabe quantas couberem.
 */
.armas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(10px, 2vw, 16px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Sozinha, a arma ocupa a largura inteira do texto, como qualquer foto que ela
 * insere pelo editor.
 *
 * Nasceu com teto de 460px, com medo de que a arte fosse mais alta que larga e
 * uma arma sozinha empurrasse o texto para longe. Não é o caso: ela monta as
 * artes das armas em 1080x1080, o mesmo formato das outras. Então o teto só
 * fazia a mesma imagem aparecer menor aqui do que apareceria colada no editor,
 * e foi o que ela veio dizer: "to upando elas 1080x1080 como as demais e ela
 * fica menor (...) queria que ela expandisse o mesmo tamanho que uma foto
 * normal".
 *
 * Duas ou mais continuam dividindo a linha: é para isso que serve escrever os
 * dois nomes no mesmo atalho. Quem quiser as duas grandes escreve um atalho
 * para cada.
 */
.armas__lista--solta {
	grid-template-columns: minmax(0, 1fr);
}

.arma-card {
	margin: 0;
	min-width: 0;
}

/*
 * Tira o losango dourado que o tema põe em toda lista dentro do texto.
 *
 * O conteudo.css desenha um quadradinho de 6px girado 45 graus antes de cada
 * item de lista, e recua o item em 1.4rem para abrir espaço. É bonito numa
 * lista de frases e sem sentido numa grade de imagens — ela viu e descreveu
 * certinho: "fica com um losango amarelo do lado".
 *
 * Precisa do .post__conteudo na frente para ganhar a disputa: a regra do tema é
 * .post__conteudo ul > li::before, e um seletor só com a classe da grade
 * perderia por especificidade.
 */
.post__conteudo .armas__lista > li {
	padding-left: 0;
}

.post__conteudo .armas__lista > li::before {
	content: none;
}

.arma-card img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
}

/*
 * O aviso que só quem pode editar enxerga. Discreto de propósito: é um bilhete
 * para ela, não parte do desenho da página.
 */
.arma-atalho__aviso {
	margin: 1rem 0;
	padding: 10px 14px;
	border: 1px dashed var(--border-soft);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-muted);
	font-size: 0.9rem;
}