/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Outfit:wght@100..900&display=swap');

:root {
    --clr-primary:          #003566;
    --clr-primary-darker:   #001D3D;
    --clr-secondary:        #FFD60A; 
    --clr-secondary-darker: #FFC300;
    
    --base-margin: 20px;
    --base-radius: 10px;
}

@media only screen and (min-width : 768px)
{
	:root {
		--base-margin: 30px;
		--base-radius: 15px;
	}
}

@media only screen and (min-width : 992px)
{
	:root {
		--base-margin: 40px;
		--base-radius: 20px;
	}
}

/* ================================================================================================================== */
/* TYPO */
/* ================================================================================================================== */

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Outfit', Arial, sans-serif; 
    font-size: 17px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #fff;
    background-color: #000814;
}

@media only screen and (min-width : 768px)
{
    html, body { font-size: 18px; line-height: 1.6em; } 
}

@media only screen and (min-width : 992px)
{
    html, body { font-size: 19px; line-height: 1.6em; } 
}

h1 { font-weight: 600; color: var(--clr-secondary); font-family: 'Bricolage Grotesque', 'Outfit', Arial, sans-serif; }
h1 small { font-weight: 200; font-family: 'Sora', Arial, sans-serif; }

h1, h2, h3, h4, h5 { text-wrap: balance; }
h1, h2, h3, h4, h5, p { margin: 0 0 calc(var(--base-margin)*0.5) 0; color: white; }
p.doorlink { margin: 10px 0 0 0; font-size: 1.3em;  }
p.metalijn { text-align: center; color: var(--clr-secondary); padding: 5px 0 0;  }

/* ================================================================================================================== */
/* GENERAL SETTINGS */
/* ================================================================================================================== */

a { color: var(--clr-secondary); }
a:hover { color: var(--clr-secondary-darker); }

.socials {
	margin: 0;
	padding: 0;
	display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.socials li { margin: 0; padding: 0; list-style-type: none; display: inline-block; text-align: center; }

.socials a {
	display: inline-block;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 42px;
	font-size: 20px;
	background-color: var(--clr-secondary-darker);
	border-radius: 50%;
	color: var(--clr-primary-darker);
	margin: 0 0 0 0;
}

@media only screen and (min-width: 769px) 
{ 
	.socials a {
		width: 50px;
		height: 50px;
		line-height: 52px;
		font-size: 25px;
	}
}

@media only screen and (min-width: 1200px) 
{ 
	.socials a {
		width: 55px;
		height: 55px;
		line-height: 58px;
		font-size: 30px;
	}
}

.socials a:hover {
	background-color: var(--clr-primary-darker);
	color: var(--clr-secondary-darker);
}

/* ================================================================================================================== */
/* GENERAL kaart */
/* ================================================================================================================== */

.kaart {
	background-color: var(--clr-primary);
	border-radius: var(--base-radius);
	color: white;
	position: relative;
	overflow: hidden;
	display: flex;
}

.kaart .wrapimg img { max-width: 100%; }
.kaart .wraptxt, .kaart .wrapvid { padding: calc(var(--base-margin) * 0.8); }
.kaart .wraptxt *:last-child { margin-bottom: 0; }

.kaart.kaart-hero .wraptxt { padding: calc(var(--base-margin) * 1.5); }

.kaart.kaart-hero {
    position: relative;
    border-radius:var(--base-radius);
    background-color: var(--clr-primary);
    color: white;
}

.kaart.kaart-hero .wrapper {
	display: grid;
    align-items: start;
    position: relative;
}

.kaart.kaart-hero .wrapimg, 
.kaart.kaart-hero .wrapimg img {
	border-top-left-radius: var(--base-radius);
	border-top-right-radius: var(--base-radius);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

@media only screen and (min-width: 992px) 
{ 
	.kaart.kaart-hero .wrapimg {
		border-top-left-radius: 0px;
		border-top-right-radius: var(--base-radius);
		border-bottom-left-radius: 0px;
		border-bottom-right-radius:var(--base-radius);
		order: 2;
		height: 100%;
	}
	
	.kaart.kaart-hero .wrapimg img {
		border-top-left-radius: 0px;
		border-top-right-radius: var(--base-radius);
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: var(--base-radius);
        object-fit: cover;
        height: 100%;
	}

	.kaart.kaart-hero .wrapper {
		grid-template-columns: auto min(40%, 500px);
    	align-items: center;
    	align-content: center;
	}
	
	.kaart.kaart-video .wrapper {
		display: grid;
		grid-template-columns: min(60%, 500px) auto;
    	align-items: center;
    	align-content: center;
	}
}


section {
	background-color: #000814;
	padding: 4em 0; 
}

section.odd {
	background-color: var(--clr-primary-darker);
}

/* ================================================================================================================== */
/* SECTION HERO */
/* ================================================================================================================== */

section.hero {
	min-height: 65vh;
	background-image: url('../img/background.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	text-align: center;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section.hero img {
	max-height: 150px;
	max-width: 90%;
}

/* ================================================================================================================== */
/* SECTION INFO */
/* ================================================================================================================== */

section.info {
	padding: 3em 0;
	background-color: var(--clr-primary-darker);
}


/* ================================================================================================================== */
/* SECTION PEOPLE */
/* ================================================================================================================== */

.playerlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--base-margin);
	margin: var(--base-margin) 0; 
}

@media only screen and (min-width : 1200px)
{ 
	.playerlist { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.kaart.kaart-person { padding-top: 80px; background-color: transparent; }
.kaart.kaart-person .wrapper { background-color: var(--clr-primary); border-radius: var(--base-radius); }
.kaart-person .wraptxt { margin: 0; padding-top: 0; }
.kaart-person .title { text-align: center; font-size: 1.1em; line-height: 1.3em; font-weight: 600; color: var(--clr-secondary); font-family: 'Bricolage Grotesque', 'Outfit', Arial, sans-serif; margin: 0; }
.kaart-person .descr { text-wrap: balance; text-align: center; font-size: 0.9em; line-height: 1.2em; font-style: italic; min-height: 50px; }
.kaart-person .wrapimg { position: relative; padding: 2em 3.5em 2em 1em; overflow: hidden; margin-top: -80px;  }
.kaart-person img.profile { border-radius: 50%; }
.kaart-person img.posed { 
	position: absolute; 
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	padding: 1em;
}

@media only screen and (min-width : 992px)
{ 
	.kaart-person .title { font-size: 1.4em; line-height: 1.3em; }
	.kaart.kaart-person { padding: 0; margin: 0; }
	.kaart.kaart-person .wrapper { display: grid; grid-template-columns: 50% 50%; gap: 0; }
	.kaart-person .wraptxt { padding: calc(var(--base-margin) * 0.8); }
    .kaart-person .wrapimg { padding: 2em 3em 2em 1em; margin-top: 0; }
    .kaart-person img.posed { right: -1em; }
}

@media only screen and (min-width : 1200px)
{ 
	.kaart.kaart-person { padding-top: 80px; }
	.kaart.kaart-person .wrapper { display: unset; }
	.kaart-person .wraptxt { padding-top: 0; }
    .kaart-person .wrapimg { padding: 2em 4.5em 2em 2em; margin-top: -80px; }
    .kaart-person img.posed { right: 0; }
}