/*
 * Home (Bold Builder) — de homepage als builder-inhoud, bijgestuurd naar het
 * ontwerp templates/home-bold-builder/HomeBoldBuilder.dc.html.
 *
 * Wordt geladen op elke pagina waarvan de inhoud de marker "bnb-home" bevat.
 * Elke sectie draagt el_class="bnb-home" en wordt op el_id aangesproken
 * (#waarom.bnb-home enz.) — bewust geen broer-selectors: in de front-end-
 * editor van Bold Builder staan de secties niet meer naast elkaar. Zo blijft
 * de pagina in de builder bewerkbaar en raakt deze opmaak niets anders.
 */

/* --- Hero: hoger, donkerder scrim, twee losse pilknoppen ----------------- */


#hero.bnb-home:before {
	background: var(--dark-60-color) !important;
	opacity: 1 !important;
}

#hero.bnb-home .bt_bb_headline_subheadline {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* Dual buttons: het thema plakt ze aan elkaar; het ontwerp wil twee pillen
   met 1em ertussen en de pijl rechts. Geldt ook voor de contactband. */
#hero.bnb-home .bt_bb_dual_buttons,
#contact.bnb-home .bt_bb_dual_buttons {
	gap: 1em;
	flex-wrap: wrap;
}

#hero.bnb-home .bt_bb_dual_buttons .bt_bb_button a,
#contact.bnb-home .bt_bb_dual_buttons .bt_bb_button a {
	border-radius: var(--hard-rounded) !important;
}

#hero.bnb-home .bt_bb_dual_buttons .bt_bb_button .bt_bb_icon_holder,
#contact.bnb-home .bt_bb_dual_buttons .bt_bb_button .bt_bb_icon_holder {
	order: 2;
	margin-right: 0;
	margin-left: 0.8rem;
}

/* --- Tan band: tellers als "30+" op één regel, onderschrift in kapitalen -- */

#waarom.bnb-home .bt_bb_counter_holder {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; /* niet baseline: de cijferrol heeft geen bruikbare baseline */
	text-align: center;
	font-size: var(--large-title-size);
	height: auto; /* de plugin klemt de holder op 1.2em met overflow hidden; met het
	                 onderschrift eronder én baseline-uitlijning verdween het getal erdoor */
	overflow: visible;
}

#waarom.bnb-home .bt_bb_counter_holder .bt_bb_counter {
	align-self: center;
	height: 1.2em;
	line-height: 1.2;
	overflow: hidden;
}

#waarom.bnb-home .bt_bb_counter_holder .bt_bb_counter_content {
	display: contents;
}

#waarom.bnb-home .bt_bb_counter_holder .bt_bb_counter_content .bt_bb_counter_text {
	order: 2;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	letter-spacing: var(--heading-letter-spacing);
	color: var(--dark-color);
	white-space: pre;
	line-height: 1.2;
}

#waarom.bnb-home .bt_bb_counter_holder .bt_bb_counter_content .bt_bb_counter_text_below {
	order: 3;
	flex: 0 0 100%;
	margin-top: 0.75rem;
	font-size: 0.875rem; /* niet in em: de holder staat op de grote titelmaat */
	line-height: 1.5;
	color: var(--dark-color);
}

#waarom.bnb-home .bt_bb_counter_holder .bt_bb_counter_content .bt_bb_counter_text_below em {
	font-family: var(--supertitle-font);
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
}

/* --- Productkaarten: kaartpadding, kop en tekst zoals in het ontwerp ------ */

#uitgelicht.bnb-home .bt_bb_column.bt_bb_padding_double > .bt_bb_column_content {
	padding: 1.8125em;
}

#uitgelicht.bnb-home .bt_bb_headline.bt_bb_size_small .bt_bb_headline_tag {
	font-size: var(--small-title-size);
	line-height: 1.2;
}

#uitgelicht.bnb-home .bt_bb_text p {
	line-height: 1.8;
}

/* Prijsregel en Details-knop onderaan, naast elkaar: de kaartinhoud als
   raster met twee kolommen, alles over de volle breedte behalve die twee. */
#uitgelicht.bnb-home .bt_bb_column_content_inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* beeld · afstand · titel · tekst (rekt) · lijn · prijs + Details */
	grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
	align-items: start;
}

#uitgelicht.bnb-home .bt_bb_column_content_inner > * {
	grid-column: 1 / -1;
}

#uitgelicht.bnb-home .bt_bb_column_content_inner > .bt_bb_headline.bt_bb_size_extrasmall {
	grid-column: 1;
	align-self: center;
}

#uitgelicht.bnb-home .bt_bb_column_content_inner > .bt_bb_button.bt_bb_style_clean {
	grid-column: 2;
	align-self: center;
	justify-self: end;
	margin: 0;
}

#uitgelicht.bnb-home .bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_superheadline {
	color: var(--accent-color);
	opacity: 1;
}

/* --- Reviews: citaat in Playfair, attributie in kapitalen ---------------- */

#reviews.bnb-home .bt_bb_headline_tag[class] blockquote,
#reviews.bnb-home blockquote.bt_bb_headline_tag {
	padding: 0;
	min-height: 0;
	margin: 0;
}

#reviews.bnb-home blockquote.bt_bb_headline_tag:before {
	content: none;
}

#reviews.bnb-home .bt_bb_headline_subheadline {
	margin-top: 1.5em;
	font-family: var(--supertitle-font);
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-small);
	color: var(--accent-color);
}

/* --- Contactband: telefoonregel klein, in tan ---------------------------- */

#contact.bnb-home:before {
	background: var(--dark-60-color) !important;
	opacity: 1 !important;
}

/* Hero en contactband: de builder-spacing extra_large is te ruim voor een
   fotopaneel; het ontwerp houdt clamp(3em, 6vw, 5em) aan. */
#contact.bnb-home > .bt_bb_port {
	padding-top: clamp(3em, 6vw, 5em) !important;
	padding-bottom: clamp(3em, 6vw, 5em) !important;
}

/* Vier kaarten even hoog: de kaart (column_content) vult de kolom. */
#uitgelicht.bnb-home .bt_bb_column.bt_bb_padding_double {
	display: flex;
	flex-direction: column;
}

#uitgelicht.bnb-home .bt_bb_column.bt_bb_padding_double > .bt_bb_column_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#uitgelicht.bnb-home .bt_bb_column.bt_bb_padding_double > .bt_bb_column_content > .bt_bb_column_content_inner {
	flex: 1 1 auto;
}

/* --- Voorpagina: kop met twee foto's naast elkaar (zoals de template) ------
   De foto's komen via het overlay-mechanisme van het thema (50% links, 50%
   rechts); het thema legt daar standaard een beige tint over, hier een
   donkere scrim door de foto's zelf te dimmen. */
.bt_bb_section#hero.bnb-hero-split.bt_bb_with_overlay_image .bt_bb_port:before,
.bt_bb_section#hero.bnb-hero-split.bt_bb_with_overlay_right_image .bt_bb_port:after {
	width: 50%;
	mix-blend-mode: normal;
	filter: brightness(.45);
}

#hero.bnb-hero-split {
	background: var(--dark-color);
}

#hero.bnb-hero-split .bt_bb_promo {
	margin-top: 2.25em;
}

/* --- Kaarten binnen de kolomtussenruimte -----------------------------------
   Het kleurschema staat op de kolom-inhoud (inner_color_scheme), zodat het wit
   binnen de tussenruimte van de rij blijft en de buitenste kaarten niet 30px
   buiten de sectie steken. De afronding van de kolom (shape) zit in het thema
   op de kolom zelf; hier op de inhoud gezet. */
#uitgelicht.bnb-home .bt_bb_column.bt_bb_shape_hard-rounded > .bt_bb_column_content {
	border-radius: var(--row-hard-rounded);
	overflow: hidden;
}

#uitgelicht.bnb-home .bt_bb_column.bt_bb_shape_hard-rounded {
	overflow: visible;
}