/*
 * Porta de entrada da coleção.
 *
 * O painel é a primeira tela da coleção. Por isso ele ocupa espaço de
 * verdade: cada porta é um retângulo grande, com a imagem de um item real
 * atrás e a contagem à vista. Uma lista de palavras com número não convida
 * ninguém a entrar — a imagem é o convite.
 */

.tnc-gateway {
	margin: 0 auto 2.5rem;
	max-width: 72rem;
}

.tnc-gateway__intro {
	border-bottom: 2px solid var(--tnc-accent, #187181);
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.tnc-gateway__title {
	font-family: var(--tnc-font-display, inherit);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	letter-spacing: -0.015em;
	margin: 0;
}

.tnc-gateway__lead {
	color: rgba(0, 0, 0, 0.65);
	font-size: 1.05rem;
	margin: 0.4rem 0 0;
}

.tnc-gateway__group {
	margin-bottom: 2.25rem;
}

.tnc-gateway__group-title {
	color: rgba(0, 0, 0, 0.55);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	margin: 0 0 0.9rem;
	text-transform: uppercase;
}

.tnc-gateway__doors {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tnc-gateway__door a {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--tnc-radius-lg, 14px);
	display: block;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tnc-gateway__door a:hover,
.tnc-gateway__door a:focus-visible {
	border-color: var(--tnc-accent, #187181);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.tnc-gateway__door-image {
	aspect-ratio: 4 / 3;
	background: #ededed;
	display: block;
	overflow: hidden;
}

.tnc-gateway__door-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.tnc-gateway__door-label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 0.7rem 0.85rem 0.1rem;
}

.tnc-gateway__door-count {
	color: rgba(0, 0, 0, 0.55);
	display: block;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	padding: 0 0.85rem 0.8rem;
}

/* Porta sem imagem (década, por exemplo): o número é que ocupa o lugar dela. */
.tnc-gateway__door--plain a {
	align-items: baseline;
	display: flex;
	gap: 0.6rem;
	justify-content: space-between;
	padding: 0.9rem 1rem;
}

.tnc-gateway__door--plain .tnc-gateway__door-label,
.tnc-gateway__door--plain .tnc-gateway__door-count {
	padding: 0;
}

.tnc-gateway__all {
	margin: 0.5rem 0 0;
}

/*
 * Com a porta aberta, a lista do Tainacan fica fora da tela — mas continua
 * no DOM e continua funcionando: o aplicativo monta, e um clique numa porta
 * recarrega a página com o recorte, quando então a lista assume.
 *
 * Não é display:none porque o aplicativo precisa montar para que a faixa de
 * modos de ver encontre o controle nativo.
 */
.tnc-gateway-open [data-module="faceted-search"],
.tnc-gateway-open .tnc-view-modes-slot {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.tnc-gateway__door a {
		transition: none;
	}

	.tnc-gateway__door a:hover,
	.tnc-gateway__door a:focus-visible {
		transform: none;
	}
}

@media (max-width: 40rem) {
	.tnc-gateway__doors {
		grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	}
}