/* Kansino Stay
   l- = layout, m- = module, t- = thema (kleur), is- = state.
   Alles met tabs ingesprongen, zoals de rest van de projecten.
   Kleuren staan bovenaan zodat we de tweede editie makkelijk kunnen omkleuren. */

:root {
	--room: #fff8ea;
	--ink: #251847;
	--blauw: #3152e6;
	--rood: #ff4d67;
	--geel: #f7d44a;
	--koraal: #ff806e;
	--lucht: #7494ff;
	--roze: #ff9ec4;
	--display: Shrikhand, Georgia, serif;
	--tekst: 'DM Sans', Verdana, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--room);
	color: var(--ink);
	font-family: var(--tekst);
}

body.is-locked {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

/* --- layout: header --- */

.l-header {
	height: 90px;
	padding: 0 4vw;
	display: flex;
	align-items: center;
	gap: 35px;
	border-bottom: 2px solid var(--ink);
}

.l-header-nav {
	margin-left: auto;
	display: flex;
	gap: 28px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

/* --- module: logo en knop --- */

.m-logo {
	font: 34px var(--display);
	color: var(--blauw);
}

.m-logo span {
	color: var(--rood);
}

.m-logo small {
	display: block;
	font: 8px var(--tekst);
	letter-spacing: .25em;
	text-align: center;
	color: var(--ink);
}

.m-btn {
	padding: 14px 21px;
	border: 0;
	border-radius: 50px;
	background: var(--ink);
	color: #fff;
	font: 800 11px var(--tekst);
	cursor: pointer;
}

/* --- layout: hero --- */

.l-hero {
	min-height: 700px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	overflow: hidden;
}

.l-hero-text {
	padding: 75px 5vw;
}

.l-hero-text > p:first-child {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
}

.l-hero-media {
	position: relative;
	margin: 40px 4vw 40px 0;
	border-radius: 220px 220px 18px 18px;
	background: url('../media/nachtstad-kansino.jpg') center / cover;
}

.l-hero h1,
.m-section-title h2,
.l-final h2,
.l-doc h1 {
	margin: 45px 0;
	font: clamp(65px, 9vw, 130px)/.78 var(--display);
	letter-spacing: -.04em;
	color: var(--blauw);
}

.l-hero h1 span {
	color: var(--rood);
}

.m-lead {
	max-width: 560px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.65;
}

.m-postcard {
	position: absolute;
	bottom: 30px;
	left: -45px;
	padding: 18px 28px;
	background: var(--geel);
	font-weight: 800;
	transform: rotate(-5deg);
}

.m-sun {
	position: absolute;
	right: 45%;
	top: 35px;
	z-index: 1;
	font-size: 65px;
	color: var(--rood);
}

/* --- module: 18+ balk --- */

.m-legal {
	padding: 25px 6vw;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 25px;
	align-items: center;
	background: var(--blauw);
	color: #fff;
}

.m-legal div {
	font: 42px var(--display);
	color: var(--geel);
}

.m-legal p {
	margin: 0;
	line-height: 1.5;
}

/* --- layout: stadskaarten --- */

.l-picks {
	padding: 100px 6vw;
}

.m-section-title {
	display: flex;
	align-items: end;
	justify-content: space-between;
}

.m-section-title span {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.m-section-title h2 {
	font-size: 60px;
}

.m-section-title h2 i {
	color: var(--rood);
}

.m-pick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 430px;
	margin: 40px 0;
	border: 2px solid var(--ink);
	border-radius: 28px;
	overflow: hidden;
}

.m-pick:nth-child(even) .m-pick-media {
	order: 2;
}

.m-pick-media {
	position: relative;
	background-size: cover;
	background-position: center;
}

.m-pick-media b {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--room);
}

/* foto per stad; scheelt inline styles in de HTML */
.m-pick-media--scheveningen {
	background-image: url('../media/scheveningen-strandavond.jpg');
}

.m-pick-media--amsterdam {
	background-image: url('../media/amsterdam-gracht-nacht.jpg');
}

.m-pick-media--breda {
	background-image: url('../media/breda-kloosterplein.jpg');
}

.m-pick > div:last-child {
	padding: 55px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.m-pick > div > span {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.m-pick h3 {
	margin: 12px 0;
	font: 50px var(--display);
}

.m-pick p {
	font-size: 17px;
	line-height: 1.65;
}

.m-pick a {
	font-size: 11px;
	font-weight: 800;
}

/* themakleuren van de kaarten */
.t-coral {
	background: var(--koraal);
}

.t-blue {
	background: var(--lucht);
}

.t-pink {
	background: var(--roze);
}

/* --- layout: zo werkt de gids --- */

.l-how {
	padding: 100px 7vw;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7vw;
	align-items: center;
	background: var(--geel);
}

.l-how-media {
	height: 560px;
	border-radius: 50%;
	background: url('../media/ochtend-terras.jpg') center / cover;
}

.l-how > div > p:first-child {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
}

.l-how h2 {
	font: 55px var(--display);
	color: var(--blauw);
}

.m-steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.m-steps span {
	padding: 18px;
	border: 2px solid;
	border-radius: 18px;
	font-weight: 800;
}

.m-steps b {
	display: block;
	color: var(--rood);
}

.m-explain {
	line-height: 1.7;
}

/* --- layout: slot --- */

.l-final {
	position: relative;
	padding: 120px 5vw;
	text-align: center;
}

.l-final h2 {
	font-size: 65px;
}

.l-final p {
	font-size: 18px;
}

.m-flower {
	font-size: 80px;
	color: var(--rood);
}

/* --- layout: footer --- */

.l-footer {
	padding: 55px 5vw;
	display: grid;
	grid-template-columns: 1fr 1.5fr 1.5fr;
	gap: 30px;
	background: var(--ink);
	color: #fff;
}

.l-footer p,
.l-footer small {
	font-size: 12px;
	color: #cfc5e5;
}

.l-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 11px;
	font-weight: 800;
}

.l-footer small {
	grid-column: 1 / -1;
}

/* --- module: cookiebalk --- */

.m-consent {
	position: fixed;
	z-index: 9;
	bottom: 18px;
	left: 50%;
	width: min(780px, calc(100% - 30px));
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 2px solid var(--ink);
	border-radius: 20px;
	background: var(--roze);
	transform: translateX(-50%);
}

.m-consent.is-gone {
	display: none;
}

.m-consent span {
	margin-right: auto;
	font-size: 12px;
}

.m-consent button {
	padding: 9px 12px;
	border: 2px solid var(--ink);
	border-radius: 18px;
	background: var(--room);
	font: 800 12px var(--tekst);
	cursor: pointer;
}

.m-consent button:last-child {
	background: var(--ink);
	color: #fff;
}

/* --- module: leeftijdscheck --- */

.m-agecheck {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(37, 24, 71, .93);
}

.m-agecheck.is-done {
	display: none;
}

.m-agecheck-box {
	width: min(600px, 100%);
	padding: 34px 34px 30px;
	border: 3px solid var(--ink);
	border-radius: 26px;
	background: var(--room);
}

.m-agecheck-box h2 {
	margin: 0 0 14px;
	font: 40px var(--display);
	color: var(--blauw);
}

.m-agecheck-box p {
	margin: 0 0 22px;
	line-height: 1.6;
	font-weight: 600;
}

.m-agecheck-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.m-agecheck-actions .m-btn:last-child {
	background: transparent;
	border: 2px solid var(--ink);
	color: var(--ink);
}

.m-agecheck-actions .m-btn:focus-visible {
	outline: 3px solid var(--rood);
	outline-offset: 3px;
}

/* --- layout: tekstpagina's --- */

.l-doc {
	min-height: 100vh;
	max-width: 850px;
	margin: auto;
	padding: 80px 28px;
}

.l-doc small {
	display: block;
	margin-top: 65px;
	font-weight: 800;
}

.l-doc h1 {
	font-size: 68px;
	line-height: .95;
}

.l-doc p {
	margin: 25px 0;
	font-size: 18px;
	line-height: 1.8;
}

/* --- klein scherm --- */

@media (max-width: 760px) {
	.l-header-nav,
	.l-header .m-btn {
		display: none;
	}

	.l-hero {
		grid-template-columns: 1fr;
	}

	.l-hero-media {
		height: 500px;
		margin: 0 5vw 50px;
	}

	.m-legal,
	.l-how,
	.l-footer {
		grid-template-columns: 1fr;
	}

	.m-section-title {
		display: block;
	}

	.m-pick {
		grid-template-columns: 1fr;
	}

	.m-pick-media {
		min-height: 330px;
	}

	.m-pick:nth-child(even) .m-pick-media {
		order: 0;
	}

	.m-pick > div:last-child {
		padding: 32px;
	}

	.m-steps {
		grid-template-columns: 1fr;
	}

	.m-consent {
		flex-wrap: wrap;
	}

	.m-consent span {
		width: 100%;
	}

	.m-agecheck-actions {
		flex-direction: column;
	}
}