/**
 * =========================================================
 * SAVE GAME - CARD UNIVERSAL DE JOGOS
 * =========================================================
 */


/* =========================================================
   VARIÁVEIS / CONTAINER
   ========================================================= */

.game-mini-card {
	--sg-roxo: #8758f5;
	--sg-roxo-hover: #7547e8;

	--sg-texto: #161616;
	--sg-texto-secundario: #606269;

	--sg-fundo: #ffffff;
	--sg-fundo-suave: #f7f7f8;
	--sg-borda: #e4e4e7;

	width: 100%;
	max-width: 760px;

	margin: 24px auto;
	padding: 0;
}


.game-mini-card *,
.game-mini-card *::before,
.game-mini-card *::after {
	box-sizing: border-box;
}


/* =========================================================
   CARD PRINCIPAL
   ========================================================= */

.game-mini-card__box {
	position: relative;

	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);

	width: 100%;
	min-height: 0;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	background: var(--sg-fundo);

	border: 1px solid var(--sg-borda);
	border-radius: 12px;

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}


/* Remove possíveis espaços criados pelo tema */

.game-mini-card__box > p:empty {
	display: none !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Faixa roxa */

.game-mini-card__box::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;

	width: 4px;
	height: 100%;

	background: var(--sg-roxo);
}


/* =========================================================
   IMAGENS
   ========================================================= */

.game-mini-card__image {
	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	background: var(--sg-fundo-suave);
}


.game-mini-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover;
}


/* =========================================================
   IMAGEM DESKTOP
   ========================================================= */

.game-mini-card__image--desktop {
	display: block;

	width: 145px;
	height: 100%;
	min-height: 100%;

	border-right: 1px solid var(--sg-borda);
}


.game-mini-card__image--desktop img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   IMAGEM MOBILE
   ========================================================= */

.game-mini-card__image--mobile {
	display: none;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.game-mini-card__content {
	min-width: 0;
	min-height: 0;

	margin: 0 !important;
	padding: 16px 19px;
}


/* =========================================================
   GÊNERO
   ========================================================= */

.game-mini-card__genre {
	margin: 0 0 5px !important;
	padding: 0 !important;

	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;

	color: var(--sg-roxo);

	text-transform: uppercase;
	letter-spacing: 0.05em;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.game-mini-card__title {
	margin: 0 0 13px !important;
	padding: 0 !important;

	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;

	color: var(--sg-texto);
}


.game-mini-card__title strong {
	font-weight: 700;
}


/* =========================================================
   INFORMAÇÕES
   ========================================================= */

.game-mini-card__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 10px 22px;

	margin: 0 !important;
	padding: 0 !important;
}


.game-mini-card__item {
	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 13px;
	line-height: 1.4;

	color: var(--sg-texto-secundario);
}


.game-mini-card__item strong {
	display: block;

	margin: 0 0 2px !important;
	padding: 0 !important;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;

	color: var(--sg-texto);
}


/* Proteção contra margens do tema */

.game-mini-card__item p,
.game-mini-card__item div {
	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.game-mini-card__item a {
	display: inline;

	margin: 0;
	padding: 0;

	font-weight: 600;

	color: var(--sg-roxo);

	text-decoration: none;
}


.game-mini-card__item a:hover {
	color: var(--sg-roxo-hover);

	text-decoration: underline;
}


/* =========================================================
   RODAPÉ
   ========================================================= */

.game-mini-card__footer {
	grid-column: 1 / -1;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 5px;

	min-height: 0;

	margin: 0 !important;
	padding: 8px 14px !important;

	background: var(--sg-fundo-suave);

	border-top: 1px solid var(--sg-borda);

	font-size: 11px;
	line-height: 1.3;

	color: var(--sg-texto-secundario);
}


.game-mini-card__footer a {
	display: inline-flex;
	align-items: center;

	gap: 5px;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--sg-texto);

	text-decoration: none;
}


.game-mini-card__footer a:hover {
	color: var(--sg-roxo);
}


.game-mini-card__footer img {
	display: block;

	width: 16px;
	height: 16px;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain;

	border-radius: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

	.game-mini-card {
		max-width: 100%;
	}


	.game-mini-card__box {
		grid-template-columns: 125px minmax(0, 1fr);
	}


	.game-mini-card__image--desktop {
		width: 125px;
	}


	.game-mini-card__content {
		padding: 15px 17px;
	}


	.game-mini-card__meta {
		gap: 10px 18px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

	.game-mini-card {
		width: 100%;
		max-width: 100%;

		margin: 20px auto;
		padding: 0;
	}


	.game-mini-card__box {
		display: block;

		width: 100%;
		min-height: 0;

		margin: 0 !important;
		padding: 0 !important;

		border-radius: 10px;
	}


	/* Faixa roxa superior */

	.game-mini-card__box::before {
		width: 100%;
		height: 3px;
	}


	/* =====================================================
	   IMAGEM DESKTOP
	   ===================================================== */

	.game-mini-card__image--desktop {
		display: none !important;
	}


	/* =====================================================
	   IMAGEM MOBILE
	   ===================================================== */

	.game-mini-card__image--mobile {
		display: block;

		width: 100%;
		height: 125px;

		margin: 0 !important;
		padding: 0 !important;

		border: 0;
		border-bottom: 1px solid var(--sg-borda);
	}


	.game-mini-card__image--mobile img {
		display: block;

		width: 100%;
		height: 100%;

		margin: 0 !important;

		object-fit: cover;
		object-position: center;
	}


	/* =====================================================
	   CONTEÚDO
	   ===================================================== */

	.game-mini-card__content {
		min-height: 0;

		margin: 0 !important;
		padding: 14px 15px 15px !important;
	}


	.game-mini-card__genre {
		margin: 0 0 5px !important;

		font-size: 9px;
	}


	.game-mini-card__title {
		margin: 0 0 13px !important;

		font-size: 19px;
	}


	/* =====================================================
	   INFORMAÇÕES
	   ===================================================== */

	.game-mini-card__meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 11px 15px;

		margin: 0 !important;
		padding: 0 !important;
	}


	.game-mini-card__item {
		margin: 0 !important;
		padding: 0 !important;

		font-size: 11.5px;
		line-height: 1.35;
	}


	.game-mini-card__item strong {
		margin: 0 0 3px !important;

		font-size: 10px;
		line-height: 1.3;
	}


	/* =====================================================
	   RODAPÉ
	   ===================================================== */

	.game-mini-card__footer {
		justify-content: center;

		min-height: 0;

		margin: 0 !important;
		padding: 8px 10px !important;

		font-size: 10px;

		text-align: center;
	}

}


/* =========================================================
   CELULARES MUITO PEQUENOS
   ========================================================= */

@media (max-width: 360px) {

	.game-mini-card__content {
		padding: 13px !important;
	}


	.game-mini-card__meta {
		grid-template-columns: 1fr;

		gap: 9px;
	}


	.game-mini-card__image--mobile {
		height: 115px;
	}

}