/* ===========================================================================
   c-itemgrid - vitrine de armas e armaduras
   =========================================================================== */

.c-itemgrid__cabeca {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e-3);
	margin-bottom: var(--e-5);
}

.c-itemgrid__verTudo { flex: 0 0 auto; }

.c-itemgrid__vazio {
	padding: var(--e-3);
	border: 1px dashed var(--linha-forte);
	border-radius: var(--raio);
	color: var(--ink-3);
}

.c-itemgrid__vazio code {
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
	color: var(--ouro);
}

/* ---------------------------------------------------------------- lista ---- */

.c-itemgrid__lista {
	display: grid;
	/* auto-fill em vez de numero fixo de colunas: a grade se adapta sozinha de
	   telefone a monitor largo, sem media query por faixa. */
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: var(--e-3);
	/* As celulas tem alturas diferentes (item de 1, 2 ou 3 slots). Alinhar pelo
	   fim deixa todos os nomes na mesma linha de base visual. */
	align-items: end;
}

.c-itemgrid__celula {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	text-align: center;
}

/* ----------------------------------------------------------------- slot ---- */

/* O fundo e o slot 32x32 do inventario, repetido na vertical. Um item de 3
   slots mostra 3 quadros, exatamente como no jogo. */
.c-itemgrid__slot {
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	padding: 4px;
	border-radius: var(--raio-sm);
	background-image: url("/assets/items/slot.png");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 64px 64px;
	image-rendering: pixelated;
	transition: transform var(--transicao), filter var(--transicao);
}

.c-itemgrid__slot[data-altura="1"] { height: 64px; }
.c-itemgrid__slot[data-altura="2"] { height: 128px; }
.c-itemgrid__slot[data-altura="3"] { height: 192px; }

.c-itemgrid__celula:hover .c-itemgrid__slot {
	transform: translateY(-3px);
	filter: drop-shadow(0 6px 16px rgba(217, 180, 90, 0.22));
}

/* Os icones sao 32px de largura; dobrar mantem a arte nitida em vez de
   interpolada, que e o ponto do image-rendering: pixelated. */
.c-itemgrid__icone {
	width: 64px;
	height: auto;
	image-rendering: pixelated;
}

/* ----------------------------------------------------------------- texto --- */

.c-itemgrid__nome {
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
}

.c-itemgrid__tipo {
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------- responsivo ---- */

@media (max-width: 768px) {
	.c-itemgrid__cabeca {
		flex-direction: column;
		align-items: flex-start;
	}

	.c-itemgrid__lista {
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
		gap: var(--e-2);
	}

	.c-itemgrid__slot { width: 48px; background-size: 48px 48px; padding: 3px; }
	.c-itemgrid__slot[data-altura="1"] { height: 48px; }
	.c-itemgrid__slot[data-altura="2"] { height: 96px; }
	.c-itemgrid__slot[data-altura="3"] { height: 144px; }
	.c-itemgrid__icone { width: 48px; }
}

/* Em telefone estreito segura 3-4 colunas de slots em vez de 2 largas demais. */
@media (max-width: 480px) {
	.c-itemgrid__lista {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}
}