/*
 * Stilsett for VM-Banner (Løsning 8.1: "Spillerkort"-design med semantiske klasser)
 * Inspirert av Mark Noble-kortet.
 */

/* Importerer fonten som brukes i designet */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

.vm-card-banner {
	font-family: "DM Sans", "Inter", sans-serif;
	width: 95%;
	max-width: 700px; /* Gjort bredere for banner-følelse */
	height: 230px;
	border-radius: 30px;
	box-shadow: 0 15px 30px rgba(58, 20, 31, .1);
	position: relative;
	background-color: #FFEDF3; /* --card-color */
	display: flex;
	flex-shrink: 1;
	margin: 2rem auto; /* Gir litt luft */
	overflow: hidden; /* Holder elementene inne på mobil */
}

.vm-card-info {
	padding: 4rem 0 0 2.75rem;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
	z-index: 5; /* Info over bilde på mobil */
}

.vm-card-title {
	font-size: 3.5rem;
	font-weight: 700;
	color: #724252; /* --primary-text-color */
	line-height: 1;
}

.vm-card-subtitle {
	font-size: 1.125rem;
	font-weight: 400;
	color: #AA8792; /* --primary-text-color-light */
	display: block;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.vm-card-stats {
	border-radius: 20px;
	background-color: #3A141F; /* --accent-color */
	box-shadow: 15px 15px 30px rgba(58, 20, 31, .1);
	width: 350px;
	position: absolute;
	left: -40px;
	bottom: -30px;
	display: flex;
	justify-content: space-between;
	padding: 1.25rem 2.5rem;
	z-index: 10;
}

.vm-card-stat-label {
	font-size: .75rem; 
	color: #EECFD9; /* --secondary-text-color */
	text-transform: uppercase;
}

.vm-card-stat-value {
	margin-top: .375rem;
	font-size: 2.25rem;
	font-weight: 700;
	color: #EECFD9; /* --secondary-text-color */
}

.vm-card-image {
	display: flex;
	position: relative;
	width: 280px;
	flex-shrink: 0; /* Forhindrer at bilde-containeren krymper */
}

.vm-card-image img {
	display: block;
	position: absolute;
	/* Justert for trofé-bildet, som er høyere enn Noble */
	height: 330px; /* Høyere enn kortet */
	width: auto;
	left: -50px;
	bottom: 0;
}

/* * RESPONSIVT DESIGN FOR MOBIL 
 * (Dette er avgjørende for at det skal fungere som banner)
 */
@media (max-width: 700px) {
	.vm-card-banner {
		/* Stabler alt vertikalt */
		flex-direction: column;
		height: auto;
		max-width: 380px; /* Smalere "kort" på mobil */
		padding-bottom: 1rem; /* Plass til skyggen på stats */
	}

	.vm-card-image {
		/* Flytter bildet til toppen */
		order: -1; 
		width: 100%;
		height: 250px; /* Gir en fast høyde til bildet */
	}

	.vm-card-image img {
		position: relative; /* Fjerner absolutt posisjonering */
		height: 100%; /* Fyller høyden */
		width: auto;
		left: 0;
		bottom: 0;
		margin: 0 auto; /* Sentrerer bildet */
	}

	.vm-card-info {
		padding: 2rem 1.5rem 0 1.5rem; /* Mer balansert padding */
		text-align: center;
		width: 100%;
	}

	.vm-card-title {
		font-size: 2.5rem;
	}

	.vm-card-subtitle {
		font-size: 1rem;
	}

	.vm-card-stats {
		position: relative; /* Fjerner absolutt posisjonering */
		width: 90%;
		left: 0;
		bottom: 0;
		margin: 1.5rem auto 0 auto;
		padding: 1rem 1.5rem;
		box-shadow: 0 10px 20px rgba(58, 20, 31, .15);
	}
    
    .vm-card-stat-value {
        font-size: 1.75rem;
    }
}