/*
 * Homepage v2 — layout voor de paginatemplate page-templates/homepage-v2.php.
 *
 * Alles hangt aan de themavariabelen (kleuren, radii, kolomgaten, typografie),
 * zodat een wijziging in de customizer ook hier doorwerkt. Alleen de vier
 * tokens hieronder bestaan niet in het thema en worden lokaal gezet.
 */

.bnb-v2 {
	--bnb-hairline: var(--primary-07-color);
	--bnb-link-transition: color .35s ease;
	--bnb-max: 1440px;
	--bnb-section-space: clamp(4.5em, 8vw, 8em);

	background: var(--page-background-color);
	color: var(--dark-gray-color);
	font-family: var(--body-font);
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
	line-height: 1.5;
	overflow-x: clip;
}

/* Het thema hangt paginabreedte en -marges aan .site-content; deze pagina
   regelt zijn eigen breedte per sectie, dus die marge moet eruit. */
.bnb-v2,
.bnb-v2 > * {
	max-width: none;
}

.bnb-v2 .bnb-section {
	padding: var(--bnb-section-space) var(--content-padding) 0;
}

.bnb-v2 .bnb-section:last-of-type {
	padding-bottom: var(--bnb-section-space);
}

.bnb-v2 .bnb-inner {
	max-width: var(--bnb-max);
	margin: 0 auto;
}

.bnb-v2 p {
	text-wrap: pretty;
}

.bnb-v2 a {
	color: var(--dark-color);
	text-decoration: none;
	transition: var(--bnb-link-transition);
}

.bnb-v2 a:hover {
	color: var(--accent-color);
}

/* Kop met italic-helft: het thema zet deze variabelen al op body. */
.bnb-v2 h1 em,
.bnb-v2 h2 em,
.bnb-v2 h3 em,
.bnb-v2 blockquote em {
	font-family: var(--em-heading-font);
	font-style: var(--em-heading-font-style);
	font-weight: var(--em-heading-font-weight);
	letter-spacing: var(--em-heading-letter-spacing);
	text-transform: var(--em-heading-text-transform);
}

.bnb-v2 .bnb-supertitle {
	display: block;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-extrasmall);
	color: var(--accent-color);
}

.bnb-v2 .bnb-card-title {
	margin: 0;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	letter-spacing: var(--heading-letter-spacing);
	line-height: 1.2;
	color: var(--dark-color);
	text-wrap: pretty;
}

.bnb-v2 .bnb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 3.5em;
}

.bnb-v2 .bnb-grid-normal { gap: var(--column-gap-normal); }
.bnb-v2 .bnb-grid-medium { gap: var(--column-gap-medium); }

/* Uitgelichte apparaten: op een groot scherm alle vier naast elkaar. Met
   auto-fit en een minimum van 280px passen er tot ruim 1260px viewport maar
   drie op een rij, en komt de vierde alleen te staan. */
@media (min-width: 1100px) {
	.bnb-v2 #uitgelicht .bnb-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Kop links, knop rechts op dezelfde onderlijn. */
.bnb-v2 .bnb-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 2em 3em;
	align-items: end;
	justify-content: space-between;
}

/* --- Hero ------------------------------------------------------------- */

.bnb-v2 .bnb-hero {
	padding: var(--content-padding);
}

.bnb-v2 .bnb-hero-inner {
	position: relative;
	max-width: var(--bnb-max);
	margin: 0 auto;
	border-radius: var(--section-hard-rounded);
	overflow: hidden;
	min-height: clamp(480px, 74vh, 680px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bnb-v2 .bnb-hero-images {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.bnb-v2 .bnb-hero-images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-v2 .bnb-scrim {
	position: absolute;
	inset: 0;
	background: var(--dark-60-color);
}

.bnb-v2 .bnb-hero-content {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.25em;
	text-align: center;
	padding: clamp(3em, 6vw, 5em) clamp(20px, 5vw, 4em);
	color: var(--light-color);
}

/* --- Assortiment ------------------------------------------------------ */

.bnb-v2 .bnb-intro {
	max-width: 720px;
}

.bnb-v2 .bnb-intro p {
	margin: 1.25em 0 0;
	max-width: 52ch;
	color: var(--dark-gray-color);
}

/* --- Waarom wij (tan band) -------------------------------------------- */

.bnb-v2 .bnb-band {
	max-width: var(--bnb-max);
	margin: 0 auto;
	background: var(--accent-color);
	color: var(--dark-color);
	border-radius: var(--section-hard-rounded);
	padding: clamp(3.5em, 6vw, 7em) clamp(24px, 4vw, 4em);
}

.bnb-v2 .bnb-band-head {
	max-width: 780px;
}

/* Binnen de tan band is de inkt donker: de accentkleur zou wegvallen. */
.bnb-v2 .bnb-band-grid {
	--accent-color: var(--dark-color);
	--dark-gray-color: var(--dark-color);
	color: var(--dark-color);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--column-gap-medium);
	margin-top: 3.5em;
}

/* --- Kaarten (producten en reviews) ----------------------------------- */

.bnb-v2 .bnb-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	background: var(--light-color);
	border-radius: var(--card-hard-rounded-shape);
	padding: 1.8125em;
	line-height: 1.8;
}

.bnb-v2 .bnb-card p {
	margin: 0;
	line-height: 1.8;
}

/* Productfoto's volledig tonen, niet bijsnijden: drie zijn vierkant, de Royal
   is een staande PNG. Een vierkant vak met object-fit: contain laat elk
   apparaat in zijn geheel zien; de beige achtergrond vult de rest. */
.bnb-v2 .bnb-card-media {
	border-radius: var(--image-medium-rounded);
	overflow: hidden;
	background: var(--beige-color);
	aspect-ratio: 1 / 1;
}

.bnb-v2 .bnb-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	box-sizing: border-box;
}

.bnb-v2 .bnb-card-foot {
	margin-top: auto;
	padding-top: 1em;
	border-top: 1px solid var(--bnb-hairline);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.bnb-v2 .bnb-card .bnb-card-title {
	font-size: var(--small-title-size);
}

.bnb-v2 .bnb-quote {
	margin: 0;
	font-family: var(--em-heading-font);
	font-style: italic;
	font-weight: var(--em-heading-font-weight);
	font-size: var(--extrasmall-title-size);
	line-height: 1.6;
	color: var(--dark-color);
	text-wrap: pretty;
}

.bnb-v2 .bnb-quote-author {
	margin-top: auto;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-extrasmall);
	color: var(--dark-gray-color);
}

.bnb-v2 .bnb-quote-mark:before {
	font-size: 34px;
	line-height: 1;
	color: var(--accent-color);
}

/* --- Ons verhaal ------------------------------------------------------ */

.bnb-v2 .bnb-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--column-gap-large);
	align-items: center;
}

.bnb-v2 .bnb-split > * {
	min-width: 0;
}

.bnb-v2 .bnb-story-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--column-gap-normal);
	align-items: end;
}

.bnb-v2 .bnb-story-images img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--image-hard-rounded);
}

.bnb-v2 .bnb-story-images img:first-child { aspect-ratio: 3 / 4; }
.bnb-v2 .bnb-story-images img:last-child { aspect-ratio: 1 / 1; }

.bnb-v2 .bnb-story-text p {
	margin: 1.25em 0 0;
	max-width: 46ch;
	line-height: 1.8;
}

.bnb-v2 .bnb-pullquote {
	margin: 2em 0 0;
	padding-left: 1.5em;
	border-left: 1px solid var(--accent-color);
	font-family: var(--em-heading-font);
	font-style: italic;
	font-weight: var(--em-heading-font-weight);
	font-size: var(--extrasmall-title-size);
	line-height: 1.6;
	color: var(--dark-color);
}

.bnb-v2 .bnb-story-cta {
	margin-top: 2.5em;
}

/* --- Reviews: vertrouwd door ------------------------------------------ */

.bnb-v2 .bnb-trusted {
	margin-top: clamp(3em, 5vw, 5em);
	padding-top: 2.5em;
	border-top: 1px solid var(--bnb-hairline);
	text-align: center;
}

.bnb-v2 .bnb-trusted .bnb-supertitle {
	font-size: var(--title-subtitle-size-small);
}

.bnb-v2 .bnb-trusted-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 3em;
	margin-top: 1.5em;
	font-family: var(--em-heading-font);
	font-style: italic;
	font-size: var(--extrasmall-title-size);
	color: var(--dark-color);
}

/* --- Vragen ------------------------------------------------------------ */

.bnb-v2 .bnb-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--column-gap-large);
	align-items: start;
}

.bnb-v2 .bnb-faq > * {
	min-width: 0;
}

.bnb-v2 .bnb-faq-intro p {
	margin: 1.25em 0 2em;
	max-width: 34ch;
	line-height: 1.8;
}

/* --- Blog -------------------------------------------------------------- */

.bnb-v2 .bnb-post {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.bnb-v2 .bnb-post img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--post-shape-round);
}

.bnb-v2 .bnb-post .bnb-card-title {
	font-size: var(--extrasmall-title-size);
}

.bnb-v2 .bnb-post-meta {
	font-size: 14px;
	color: var(--dark-gray-color);
}

/* --- Call to action ---------------------------------------------------- */

.bnb-v2 .bnb-cta {
	padding: var(--bnb-section-space) var(--content-padding);
}

.bnb-v2 .bnb-cta-inner {
	position: relative;
	max-width: var(--bnb-max);
	margin: 0 auto;
	border-radius: var(--section-hard-rounded);
	overflow: hidden;
	padding: clamp(4em, 7vw, 7em) clamp(24px, 4vw, 3em);
	text-align: center;
}

.bnb-v2 .bnb-cta-inner > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-v2 .bnb-cta-content {
	position: relative;
	color: var(--light-color);
}

.bnb-v2 .bnb-cta-button {
	display: flex;
	justify-content: center;
	margin-top: 2.25em;
}

/* --- Zwevende WhatsApp-knop -------------------------------------------- */

.bnb-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: .75em;
	background: var(--light-color);
	color: var(--dark-color);
	border-radius: var(--hard-rounded);
	padding: .9em 1.5em;
	box-shadow: var(--woo-product-hover-shadow);
	font-size: 15px;
	line-height: 1;
}

.bnb-whatsapp:before {
	font-size: 22px;
	color: var(--accent-color);
}

@media (max-width: 782px) {
	.bnb-whatsapp {
		right: 16px;
		bottom: 16px;
	}
}

/* Het thema geeft elke blockquote een grote, vervaagde aanhalingsglyph en 3,5em
   inspringing. Dit ontwerp zet de aanhalingstekens zelf, dus die opmaak eruit. */
.bnb-v2 blockquote {
	padding: 0;
	min-height: 0;
	margin-bottom: 0;
}

.bnb-v2 blockquote:before {
	content: none;
}