/**
 * =========================================================
 * SAVE GAME - CARD UNIVERSAL DE JOGOS
 * =========================================================
 *
 * DESKTOP
 * - Imagem à esquerda
 * - Informações à direita
 *
 * MOBILE
 * - Imagem específica acima
 * - Informações abaixo
 *
 * Prefixo exclusivo:
 * .savegame-game-card
 * =========================================================
 */


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

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

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

	--sg-card-fundo: #ffffff;
	--sg-card-fundo-secundario: #f7f7f8;

	--sg-card-borda: #e4e4e7;

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

	margin: 24px auto;
	padding: 0;
}


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


/* =========================================================
   NORMALIZAÇÃO DO WORDPRESS
   ========================================================= */

.savegame-game-card br {
	display: none !important;
}


.savegame-game-card p {
	margin: 0 !important;
	padding: 0 !important;
}


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

.savegame-game-card__box {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

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

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

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


/* =========================================================
   FAIXA ROXA
   ========================================================= */

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

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

	width: 4px;
	height: 100%;

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

	pointer-events: none;
}


/* =========================================================
   ÁREA PRINCIPAL - DESKTOP
   ========================================================= */

.savegame-game-card__main {
	display: grid;

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

	grid-template-areas:
		"media content";

	align-items: stretch;

	width: 100%;
	max-width: 100%;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 0;

	overflow: hidden;
}


/* =========================================================
   IMAGEM - BASE
   ========================================================= */

.savegame-game-card__media {
	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: var(--sg-card-fundo-secundario);

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

	line-height: 0;
}


.savegame-game-card__media img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	border: 0;

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

/* =========================================================
   CONTROLE DAS IMAGENS
   ========================================================= */

.savegame-game-card__media--desktop {
	display: block;

	grid-area: media;

	width: 100%;
	min-width: 0;
}


.savegame-game-card__media--mobile {
	display: none;
}

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

.savegame-game-card__content {
	grid-area: content;

	width: 100%;
	min-width: 0;
	max-width: 100%;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 17px 20px;

	overflow: hidden;
}


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

.savegame-game-card__genre {
	margin: 0 0 5px;
	padding: 0;

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

	color: var(--sg-card-roxo);

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


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

.savegame-game-card__title {
	margin: 0 0 15px;
	padding: 0;

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

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


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

.savegame-game-card__meta {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	grid-auto-rows: max-content;

	align-items: start;
	align-content: start;

	gap: 12px 20px;

	width: 100%;
	max-width: 100%;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

.savegame-game-card__item {
	display: flex;

	flex-direction: column;
	justify-content: flex-start;

	gap: 3px;

	min-width: 0;
	max-width: 100%;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 0;

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

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

	overflow-wrap: anywhere;
}


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

	margin: 0;
	padding: 0;

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

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


.savegame-game-card__item span {
	display: block;

	margin: 0;
	padding: 0;
}


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

.savegame-game-card__item a {
	display: inline-block;

	width: fit-content;
	max-width: 100%;

	margin: 0;
	padding: 0;

	font-weight: 600;

	color: var(--sg-card-roxo);

	text-decoration: underline;
	text-underline-offset: 2px;
}


.savegame-game-card__item a:hover {
	color: var(--sg-card-roxo-hover);
}


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

.savegame-game-card__footer {
	display: flex;

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

	gap: 6px;

	width: 100%;

	height: auto;
	min-height: 0;

	margin: 0;
	padding: 9px 14px;

	background: var(--sg-card-fundo-secundario);

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

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

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


.savegame-game-card__footer > span {
	display: block;

	margin: 0;
	padding: 0;
}


.savegame-game-card__footer a {
	display: inline-flex;

	align-items: center;

	gap: 5px;

	margin: 0;
	padding: 0;

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

	text-decoration: none;
}


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


.savegame-game-card__footer strong {
	margin: 0;
	padding: 0;
}


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

	width: 18px;
	height: 18px;

	margin: 0;
	padding: 0;

	object-fit: contain;

	border-radius: 4px;
}


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

@media (max-width: 768px) and (min-width: 561px) {

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


	.savegame-game-card__main {
		grid-template-columns:
			145px minmax(0, 1fr);
	}


	.savegame-game-card__media--desktop {
		width: 100%;
	}


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


	.savegame-game-card__meta {
		gap: 11px 16px;
	}

}


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

@media (max-width: 560px) {

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

		margin: 20px auto;
		padding: 0;
	}


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

	.savegame-game-card__box {
		border-radius: 10px;
	}


	/* Faixa roxa passa para o topo */

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


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

	.savegame-game-card__main {
		display: flex;

		flex-direction: column;
		align-items: stretch;

		width: 100%;
		max-width: 100%;

		height: auto;
		min-height: 0;

		margin: 0;
		padding: 0;

		overflow: hidden;
	}


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

	.savegame-game-card__media--desktop {
		display: none !important;
	}


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

	.savegame-game-card__media--mobile {
		display: block !important;

		flex: none;

		width: 100%;
		height: 190px;

		margin: 0;
		padding: 0;

		overflow: hidden;

		background: var(--sg-card-fundo-secundario);

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

		line-height: 0;
	}


	.savegame-game-card__media--mobile img {
		display: block;

		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;

		border: 0;

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


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

	.savegame-game-card__content {
		flex: none;

		width: 100%;
		min-width: 0;
		max-width: 100%;

		height: auto;
		min-height: 0;

		margin: 0;
		padding: 15px 16px 16px;

		overflow: visible;
	}


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

	.savegame-game-card__genre {
		margin: 0 0 5px;
		padding: 0;

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


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

	.savegame-game-card__title {
		margin: 0 0 14px;
		padding: 0;

		font-size: 20px;
		line-height: 1.2;
	}


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

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

		grid-auto-rows: max-content;

		align-items: start;
		align-content: start;

		gap: 12px 16px;

		width: 100%;
		max-width: 100%;

		height: auto;
		min-height: 0;
	}


	.savegame-game-card__item {
		gap: 3px;

		min-width: 0;
		max-width: 100%;

		height: auto;
		min-height: 0;

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

		overflow-wrap: anywhere;
	}


	.savegame-game-card__item strong {
		font-size: 10px;
		line-height: 1.3;
	}


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

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

		height: auto;
		min-height: 0;

		padding: 9px 10px;

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

		text-align: center;
	}

}


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

@media (max-width: 360px) {

	.savegame-game-card__content {
		padding: 14px;
	}


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

		gap: 10px;
	}


	.savegame-game-card__media--mobile {
		height: 175px;
	}

}