/* Product card (produto/case): medium = image + text + logo footer; mini = compact row. */

.produto-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--system-bg-box);
	color: var(--system-fg);
	text-decoration: none;
	transition: background-color 0.15s ease-out;

	&:hover,
	&:focus-visible {
		background-color: var(--system-bg-box-hover);
	}
}

.produto-card__main,
.produto-card__body,
.produto-card__heading {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.produto-card__main {
	flex: 1;
}

.produto-card__media {
	overflow: hidden;
	border-radius: var(--system-border-radius-xs);
	background-color: var(--system-bg-box-nested);

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.produto-card__title {
	color: var(--system-fg);
}

/* Rótulo em caixa alta sem classe de texto equivalente: exceção local. */
.produto-card__studios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--system-spacing-gap-3xs);
	margin: 0;
	color: var(--system-fg-secondary);
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.produto-card__studio-sep {
	color: var(--system-fg);
	opacity: 0.2;
}

.produto-card__desc {
	color: var(--system-fg-muted);
}

/* ── Medium ── */

.produto-card--medium {
	border-radius: var(--system-border-radius-md);

	& .produto-card__main {
		gap: 15px;
		padding: 10px 10px 30px;
	}

	& .produto-card__media {
		aspect-ratio: 235 / 141;
	}

	& .produto-card__body {
		gap: 20px;
		padding: 0 10px;
	}

	& .produto-card__heading {
		gap: 5px;
	}

	@media (max-width: 768px) {
		& .produto-card__main { padding-bottom: 20px; }
		& .produto-card__body { padding: 0 6px; }
	}
}

.produto-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background-color: var(--system-bg-box-nested);
}

.produto-card__logos {
	--logo-row-height: 25px;
	--logo-row-gap: 20px;
	display: flex;
	align-items: center;
	gap: var(--logo-row-gap);
	height: var(--logo-row-height);
	color: var(--system-fg);
	opacity: 0.15;
}

.produto-card__part-of {
	display: flex;
	align-items: center;
	height: 12px;

	& svg {
		width: auto;
		height: 100%;
	}

	& path {
		fill: currentColor;
	}
}

.produto-card__arrow {
	display: flex;
	color: var(--system-fg-subtle);
}

/* ── Mini ── */

.produto-card--mini {
	height: 133px;
	border-radius: var(--system-border-radius-sm);

	& .produto-card__main {
		flex-direction: row;
		gap: 15px;
		padding: 6px;
	}

	& .produto-card__media {
		flex-shrink: 0;
		width: 202px;
	}

	& .produto-card__body,
	& .produto-card__heading {
		flex: 1;
	}

	& .produto-card__body {
		padding: 5px;
	}

	& .produto-card__heading {
		justify-content: space-between;
	}

	& .produto-card__studios {
		color: var(--system-fg-primary);
	}
}