.landing-page {
	margin: 0;
}

.split {
	position: relative;
	display: flex;
	min-height: 100vh;
	width: 100%;
}

.split-half {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* padding-top mag nooit onder de eigen hoogte van de logobalk (2.5rem afstand +
	   3.4rem hoogte = 5.9rem) plus een minimale marge zakken, anders overlapt het
	   geanimeerde logo de h1 - ongeacht wat de (breedte-afhankelijke) fluid-waarde zegt. */
	padding-top: max(var(--space-section-top), 7.4rem);
	padding-right: 2rem;
	padding-bottom: var(--space-section-bottom);
	padding-left: 2rem;
}

.split-half--boutique {
	background-color: var(--color-boutique-bg);
	color: var(--color-boutique-text);
}

.split-half--budget {
	background-color: var(--color-budget-bg);
	color: var(--color-budget-accent);
	/* Titel x1.2 t.o.v. de 45px uit variables.css (was clamp(1.40625rem, 0.165rem + 2.206vw,
	   2.8125rem)), hier hard uitgerekend i.p.v. calc(var(--size-title-landing-budget) * 1.2):
	   die laatste refereert naar zichzelf op dezelfde selector, wat een ongeldige circulaire
	   custom property oplevert (niet "pak de geërfde waarde") - vandaar de mini-tekst. */
	--size-title-landing-budget: clamp(1.6875rem, 0.198rem + 2.647vw, 3.375rem); /* 54px op groot scherm */
}

.split-half__inner {
	width: 100%;
	max-width: 640px;
	max-height: 900px;
	margin: 0 auto;
	text-align: left;
}

/* Heading: boutique = Sangbleu medium/40px, budget = FaktPro semibold/45px. Nu een kortere
   zin i.p.v. een paar grote woorden, dus kleinere font-size met een losser regelhoogte dan
   de oude, strak-op-elkaar-staande display-grootte - behalve budget, die juist naar een
   regelhoogte van 1 mag (Fakt Pro heeft van zichzelf al genoeg witruimte in de regel). */
/* Vaste (merk-onafhankelijke) hoogte + onderin uitgelijnd, zodat de kortere titel altijd
   even hoog eindigt als de langere - zie --title-block-height in variables.css. Op mobiel
   (de titels staan daar nooit naast elkaar) weer uitgeschakeld, zie de mediaquery onderaan. */
.split-half__title {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--title-block-height);
	text-transform: uppercase;
	margin: 0 0 var(--space-block);
}

.split-half--boutique .split-half__title {
	font-family: var(--font-boutique-serif);
	font-weight: 500;
	font-size: var(--size-title-landing-boutique);
	line-height: 1.15;
}

.split-half--budget .split-half__title {
	font-family: var(--font-budget-sans);
	font-weight: 600;
	font-size: var(--size-title-landing-budget);
	line-height: 1;
}

.split-half__room {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin-bottom: var(--space-block);
}

.split-half__room-image {
	width: var(--size-room-image);
	height: var(--size-room-image);
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

/* Tekst: boutique = Sangbleu regular, budget = FaktPro semibold */
.split-half__text p {
	font-size: var(--size-body);
	line-height: 1.4;
	margin: 0 0 1.25rem;
}

.split-half--boutique .split-half__text p {
	font-family: var(--font-boutique-serif);
	font-weight: 400;
}

.split-half--budget .split-half__text p {
	font-family: var(--font-budget-sans);
	font-weight: 600;
}

.split-half__footer {
	display: flex;
	align-items: flex-end;
	column-gap: 4rem;
	row-gap: 1rem;
	flex-wrap: wrap;
}

.split-half__price {
	display: flex;
	flex-direction: column;
	line-height: 1;
	gap: 0.05em;
}

/* FROM: semibold all caps, PER NIGHT: regular all caps (beide merken) */
.split-half__price-label,
.split-half__price-unit {
	font-size: var(--size-label);
	line-height: 0.967; /* 29px bij 30px font-size */
	text-transform: uppercase;
}

.split-half__price-label {
	font-weight: 600;
}

.split-half__price-unit {
	font-weight: 400;
}

/* Prijsbedrag: boutique = Degular bold, budget = FaktPro bold */
.split-half__price-amount {
	font-size: var(--size-price);
	font-weight: 700;
	line-height: 0.9; /* 63px bij 70px font-size, beide merken */
	margin: 0;
}

.split-half--budget .split-half__price-amount {
	margin-top: 0.05em;
}

.split-half--boutique .split-half__price-label,
.split-half--boutique .split-half__price-amount,
.split-half--boutique .split-half__price-unit {
	font-family: var(--font-boutique-display);
}

.split-half--budget .split-half__price-label,
.split-half--budget .split-half__price-amount,
.split-half--budget .split-half__price-unit {
	font-family: var(--font-budget-sans);
}

/* Knop: boutique = Degular semibold/23px, budget = FaktPro bold/20px */
.split-half__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2.25rem;
	border-radius: 999px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.split-half--boutique .split-half__cta {
	background-color: var(--color-boutique-accent);
	color: var(--color-boutique-text);
	font-family: var(--font-boutique-display);
	font-weight: 600;
	font-size: var(--size-button-boutique);
	line-height: 1.217; /* 28px bij 23px font-size */
}

.split-half--budget .split-half__cta {
	background-color: var(--color-budget-accent);
	color: #ffffff;
	font-family: var(--font-budget-sans);
	font-weight: 700;
	font-size: var(--size-button-budget);
	line-height: 1.2; /* 24px bij 20px font-size */
	/* Fakt Pro oogt hoger geplaatst dan Degular in dezelfde knop: 2px lager, met dezelfde
	   padding-som (dus zelfde knophoogte) door evenveel van onder af te halen. */
	padding-top: calc(1rem + 2px);
	padding-bottom: calc(1rem - 2px);
}

/* Wordmark bovenin: elke SVG bevat het volle "BONBON"-woordmerk. Elke helft toont
   'm op dubbele breedte en knipt de helft die niet bij dat merk hoort af.

   Belangrijk: elke helft wordt LOS geankerd aan de echte paginanaad (het midden
   van .split, dat position:relative heeft) via right:50% / left:50%. Zo blijft de
   naad altijd exact op 50% staan, ook als de twee helften tijdens hover ongelijke
   breedtes krijgen - in plaats van de twee helften samen als één blok te centreren
   (dat verschuift bij ongelijke breedtes, wat het vorige probleem veroorzaakte). */
.split-logo {
	position: absolute;
	top: 2.5rem;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
}

.split-logo__half {
	position: absolute;
	top: 0;
	height: 3.4rem;   /* 1.6rem logo + 0.9rem padding boven/onder */
	width: 6.34rem;   /* rust: precies 1 "BON" zichtbaar */
	overflow: hidden;
	transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: auto;
}

.split-logo__half--boutique {
	right: 50%; /* rechterrand van boutique-helft = de naad, vast op 50% */
	background-color: var(--color-boutique-text);
	border-radius: 999px 0 0 999px;
}

.split-logo__half--budget {
	left: 50%; /* linkerrand van budget-helft = de naad, vast op 50% */
	background-color: var(--color-budget-accent);
	border-radius: 0 999px 999px 0;
}

/* Crop-box laat een mini-gap (0.1rem) staan bij de naad, in elke breedte-staat
   (dus ook tijdens de hover-animatie blijft de naad strak). */
.split-logo__crop {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
}

.split-logo__half--boutique .split-logo__crop {
	left: 0;
	right: 0.1rem;
}

.split-logo__half--budget .split-logo__crop {
	left: 0.1rem;
	right: 0;
}

/* Het logo staat vast "geankerd" aan de naadkant van zijn eigen crop-box (rechts voor
   boutique, links voor budget) - dat is een punt dat nooit verschuift, wat de
   breedte ook doet. We schuiven de afbeelding met transform: translateX() tussen
   rust (alleen eigen "BON" zichtbaar) en hover (heel "BONBON", startend vanaf de naad). */
.split-logo__image {
	position: absolute;
	top: 0.9rem;
	height: 1.6rem;
	width: auto; /* volle "BONBON"-breedte, evenredig aan de hoogte */
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.split-logo__half--boutique .split-logo__image {
	right: 0; /* anker = naad */
	transform: translateX(4.44rem); /* rust: toont alleen de eerste "BON" */
}

.split-logo__half--budget .split-logo__image {
	left: 0; /* anker = naad */
	transform: translateX(-4.44rem); /* rust: toont alleen de tweede "BON" */
}

/* Hover op de paginahelft (niet het logo zelf): eigen kant schuift open tot het volle
   woordmerk zichtbaar is, met een klein beetje ruimte tussen de naad en de tekst.
   De andere kant schuift met dezelfde beweging vóórbij de naad, de eigen kant op,
   tot 'm volledig door de andere helft aan het zicht onttrokken wordt (geen fade,
   puur schuiven). */
.split:has(.split-half--boutique:hover) .split-logo__half--boutique {
	width: 14.78rem;
}

.split:has(.split-half--boutique:hover) .split-logo__half--boutique .split-logo__image {
	transform: translateX(-4rem); /* volle woordmerk, met flink wat ademruimte t.o.v. de naad */
}

.split:has(.split-half--boutique:hover) .split-logo__half--budget {
	width: 0; /* helemaal weg, geen randje/border-radius meer zichtbaar */
}

.split:has(.split-half--boutique:hover) .split-logo__half--budget .split-logo__image {
	transform: translateX(-9rem); /* schuift volledig voorbij de naad, de boutique-kant op */
}

.split:has(.split-half--budget:hover) .split-logo__half--budget {
	width: 14.78rem;
}

.split:has(.split-half--budget:hover) .split-logo__half--budget .split-logo__image {
	transform: translateX(4rem); /* volle woordmerk, met flink wat ademruimte t.o.v. de naad */
}

.split:has(.split-half--budget:hover) .split-logo__half--boutique {
	width: 0; /* helemaal weg, geen randje/border-radius meer zichtbaar */
}

.split:has(.split-half--budget:hover) .split-logo__half--boutique .split-logo__image {
	transform: translateX(9rem); /* schuift volledig voorbij de naad, de budget-kant op */
}

/* Mobiel: helften onder elkaar (boutique boven, budget onder), elk ~50svh zodat beide
   in één telefoonscherm passen. Past de inhoud niet, dan groeit de helft mee en scrolt de pagina. */
@media (max-width: 900px) {
	.split {
		flex-direction: column;
		min-height: 100svh;

		/* Mobiele type-schaal: meeschalend met de schermbreedte (ontwerp = desktop x ~0.35-0.45) */
		--size-title-landing-boutique: clamp(0.875rem, 4.5vw, 1.7rem);
		/* Zelfde verhouding, maar x1.125 (45px/40px desktop-verhouding budget t.o.v. boutique) */
		--size-title-landing-budget: clamp(0.984rem, 5.0625vw, 1.9125rem);
		--size-price: clamp(1.6rem, 7.9vw, 2.96rem);
		--size-body: clamp(0.72rem, 2.9vw, 1.1rem);
		--size-button-boutique: clamp(0.7rem, 2.7vw, 1rem);
		--size-button-budget: clamp(0.66rem, 2.5vw, 0.94rem);
		--size-label: clamp(0.72rem, 3.4vw, 1.28rem);
	}

	.split-half {
		flex: 1 1 auto;
		min-height: 50vh;
		min-height: 50svh;
		padding: 0.5rem 1rem;
	}

	/* Titel x1.2 t.o.v. de mobiele --size-title-landing-budget hierboven (was
	   clamp(0.984rem, 5.0625vw, 1.9125rem)), zelfde hard uitgerekende aanpak als op desktop. */
	.split-half--budget {
		--size-title-landing-budget: clamp(1.181rem, 6.075vw, 2.295rem);
	}

	/* Op mobiel is er geen hover, dus laten we het animerende split-logo hier gewoon weg */
	.split-logo {
		display: none;
	}

	/* Layout: titel bovenaan; daaronder foto links, tekst rechts; tekst, prijs en knop staan
	   daarna netjes onder elkaar, allemaal links uitgelijnd (prijs krijgt dezelfde kolommen
	   als tekst i.p.v. alleen de rechterkolom, zodat 'm niet los naast een lege plek staat). */
	.split-half__inner {
		display: grid;
		grid-template-columns: 21% minmax(0, 1fr) 32%;
		grid-template-areas:
			"title title title"
			"image text  text"
			"image price price"
			".     cta   cta";
		column-gap: 0.6rem;
		align-items: start;
		max-width: 36rem;
		max-height: none;
	}

	.split-half__room,
	.split-half__text,
	.split-half__footer {
		display: contents;
	}

	.split-half__title {
		grid-area: title;
		min-height: 0; /* de halves staan hier onder elkaar, niet naast elkaar - geen reservering nodig */
		margin: 0 0 1rem;
	}

	.split-half__room-image {
		grid-area: image;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		border-radius: 0.5rem;
	}

	.split-half__text p {
		grid-area: text;
		margin: 0 0 0.5rem;
	}

	.split-half__price {
		grid-area: price;
	}

	.split-half__cta {
		grid-area: cta;
		justify-self: start;
		margin-top: 0.9rem;
		padding: 0.9em 1.4em;
	}

	/* Zelfde 2px-verschuiving als op desktop, maar dan op basis van de mobiele padding
	   hierboven (anders wint deze door de hogere specificiteit van .split-half--budget
	   alsnog de desktop-waarde, en wordt de knop op mobiel te hoog). */
	.split-half--budget .split-half__cta {
		padding-top: calc(0.9em + 2px);
		padding-bottom: calc(0.9em - 2px);
	}
}