/*
 * Ambassadeurs, Partners, Trainingen en Reviews als Bold Builder-inhoud,
 * bijgestuurd naar de ontwerpen uit templates/ in het Claude Design-systeem.
 * Laadt op pagina's waarvan de inhoud een van de markers bnb-amb, bnb-pt,
 * bnb-tr of bnb-rv bevat; elke sectie draagt de marker in el_class.
 */

/* --- Gedeeld: kop met zijbeelden (zoals de FAQ) -------------------------- */

.bnb-hero-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Het thema zet de beelden op 50% met een specifiekere selector; die hier
   overtroeven, anders lopen de foto's onder de tekst door. */
.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_image .bt_bb_port:before,
.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_right_image .bt_bb_port:after {
	width: 25%;
	mix-blend-mode: normal;
}

.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_image .bt_bb_port:before { background-position: right center; }
.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_right_image .bt_bb_port:after { background-position: left center; }

@media (max-width: 991px) {
	.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_image .bt_bb_port:before,
	.bt_bb_section.bnb-hero-side.bt_bb_with_overlay_right_image .bt_bb_port:after { width: 18%; }
	.bnb-hero-side .bt_bb_row_holder { padding-left: 18%; padding-right: 18%; }
	.bnb-hero-side .bt_bb_headline_subheadline { font-size: 15px; }
}

@media (max-width: 600px) {
	.bnb-hero-side .bt_bb_headline.bt_bb_size_extralarge .bt_bb_headline_tag {
		font-size: 1.75rem !important;
		line-height: 1.2;
	}
}

/* --- Gedeeld: fotokop en contactband met scrim --------------------------- */

.bnb-hero-photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

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

.bnb-cta-photo > .bt_bb_port {
	padding-top: clamp(3em, 6vw, 5em) !important;
	padding-bottom: clamp(3em, 6vw, 5em) !important;
}

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

.bnb-cta-photo .bt_bb_dual_buttons { gap: 1em; flex-wrap: wrap; }
.bnb-cta-photo .bt_bb_dual_buttons .bt_bb_button a { border-radius: var(--hard-rounded) !important; }
.bnb-cta-photo .bt_bb_dual_buttons .bt_bb_button .bt_bb_icon_holder { order: 2; margin-right: 0; margin-left: 0.8rem; }

/* --- Gedeeld: hoofdstuk-/naamlinks --------------------------------------- */

.bnb-chapters p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 2.5em;
	margin: 0;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-small);
}

.bnb-chapters a {
	color: var(--accent-color);
	text-decoration: none;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--accent-50-color);
}

.bnb-chapters a:hover { color: var(--dark-color); border-bottom-color: var(--dark-color); }

/* --- Gedeeld: vinklijst (Partners, Trainingen) --------------------------- */

.bnb-usp ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dark-color);
}

.bnb-usp li {
	display: flex;
	gap: 1em;
	align-items: baseline;
	padding: 1em 0;
	border-top: 1px solid var(--primary-07-color, rgba(59, 59, 59, .07));
}

.bnb-usp li:last-child { border-bottom: 1px solid var(--primary-07-color, rgba(59, 59, 59, .07)); }

.bnb-usp li:before {
	content: "\e908";
	font-family: IBM;
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--accent-color);
}

/* Staat er al een vinkje als element in het item (de oude paginatemplates
   deden dat), dan niet nog eens. */
.bnb-usp li > [data-ico-ibm] { display: none; }

/* --- Gedeeld: citaat in Playfair met attributie in kapitalen ------------- */

.bnb-rv-card blockquote,
.bnb-rv-featured blockquote,
.bnb-pt-text blockquote {
	margin: 0;
	padding: 0;
	border: 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);
}

.bnb-rv-card blockquote:before,
.bnb-rv-featured blockquote:before,
.bnb-pt-text blockquote:before { content: none; }

.bnb-pt-text blockquote {
	padding-left: 1.5em;
	border-left: 1px solid var(--accent-color);
	max-width: 44ch;
}

.bnb-rv-author,
p.bnb-rv-author {
	margin: 1.25em 0 0;
	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);
}

/* --- Ambassadeurs ------------------------------------------------------- */

.bnb-amb .bnb-amb-media .bt_bb_column_content { position: relative; }

.bnb-amb .bnb-amb-media .bt_bb_image { display: block; }

.bnb-amb .bnb-amb-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--image-hard-rounded);
	background: var(--light-color);
}

.bnb-amb .bnb-amb-logo img { object-fit: contain; padding: 14%; }

.bnb-amb .bnb-amb-num {
	position: absolute;
	left: 1.5em;
	top: 1.5em;
	z-index: 2;
	margin: 0;
}

.bnb-amb .bnb-amb-num p {
	width: 4.5em;
	height: 4.5em;
	margin: 0;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--light-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--supertitle-font);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: 1px;
}

.bnb-amb .bnb-amb-text .bt_bb_text p { max-width: 58ch; line-height: 1.8; }

.bnb-amb .bnb-amb-badge p {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1.5em;
	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-amb .bnb-amb-badge [data-ico-beauty]:before { font-size: 1.45rem; line-height: 1; }

/* --- Partners ------------------------------------------------------------ */

.bnb-pt .bnb-pt-tile img {
	display: block;
	width: 240px;
	max-width: 100%;
	height: 96px;
	padding: 1.25em 2em;
	object-fit: contain;
	background: var(--light-color);
	border-radius: var(--image-medium-rounded);
	margin: 0 auto;
}

.bnb-pt .bnb-pt-card > .bt_bb_column_content { position: sticky; top: 120px; }

@media (max-width: 991px) {
	.bnb-pt .bnb-pt-card > .bt_bb_column_content { position: static; }
}

.bnb-pt .bnb-pt-logo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	padding: 14%;
	background: var(--beige-color);
	border-radius: var(--image-medium-rounded);
}

.bnb-pt .bnb-pt-card .bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_superheadline { color: var(--accent-color); opacity: 1; }

.bnb-pt .bnb-pt-text .bt_bb_text p { max-width: 62ch; line-height: 1.8; }

/* --- Trainingen ---------------------------------------------------------- */

/* Stappen: het thema tekent de verbindingslijn vanaf het midden van de kolom
   (voor gecentreerde cirkels); met de cirkel links loopt hij dwars door de
   volgende cirkel. Hier van de rand van de cirkel tot vlak voor de volgende. */
.bnb-tr .bt_bb_steps .bt_bb_inner_step:after {
	left: 8em;
	width: calc(100% - 9em);
}

@media (max-width: 991px) {
	.bnb-tr .bt_bb_steps .bt_bb_inner_step:after { display: none; }
}

.bnb-tr .bnb-tr-card .bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_superheadline { color: var(--accent-color); opacity: 1; }

.bnb-tr .bnb-tr-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--image-hard-rounded);
}

.bnb-tr .bnb-tr-device .bt_bb_column_inner_content {
	position: relative;
	aspect-ratio: 1 / 1;
}

.bnb-tr .bnb-tr-device .bt_bb_column_inner_content_inner {
	position: absolute;
	inset: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bnb-tr .bnb-tr-device .bt_bb_image { height: 100%; display: flex; align-items: center; justify-content: center; }
.bnb-tr .bnb-tr-device img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.bnb-tr .bt_bb_text p { line-height: 1.8; }

/* --- Reviews ------------------------------------------------------------- */

.bnb-rv .bnb-rv-label .bt_bb_headline_superheadline {
	display: inline-block;
	padding: .5em 1em;
	border: 1px solid var(--dark-color);
	border-radius: var(--hard-rounded);
	color: var(--dark-color);
	opacity: 1;
}

.bnb-rv .bnb-rv-card .bt_bb_column_content_inner { display: flex; flex-direction: column; min-height: 100%; }
.bnb-rv .bnb-rv-card .bt_bb_text { margin-top: 1.25em; display: flex; flex-direction: column; flex: 1 1 auto; }
.bnb-rv .bnb-rv-card .bnb-rv-author { margin-top: auto; padding-top: 1.25em; }

.bnb-rv .bnb-rv-band .bnb-rv-featured blockquote {
	font-size: var(--medium-title-size);
	line-height: 1.3;
	letter-spacing: var(--heading-letter-spacing);
}

.bnb-rv .bnb-rv-band .bnb-rv-author { color: var(--dark-color); }

.bnb-rv .bnb-rv-band .bnb-rv-list .bt_bb_text p:first-child {
	margin: 0;
	font-family: var(--em-heading-font);
	font-size: var(--extrasmall-title-size);
	line-height: 1.6;
	color: var(--dark-color);
}

.bnb-rv .bnb-rv-band .bnb-rv-list .bt_bb_text { padding-bottom: 1.5em; }

/* Reviewkaarten: citaat zonder de decoratieve glyph van het thema */
#reviews.bnb-rv blockquote.bt_bb_headline_tag,
#variant-b.bnb-rv blockquote.bt_bb_headline_tag { padding: 0; margin: 0; min-height: 0; }
#variant-b.bnb-rv blockquote.bt_bb_headline_tag:before { content: none; }
#variant-b.bnb-rv .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);
}

/* --- Gedeeld: tellers (uit de builder-homepage) ------------------------- */

.bnb-counters .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;
}

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

.bnb-counters .bt_bb_counter_holder .bt_bb_counter_content {
	display: contents;
}

.bnb-counters .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;
}

.bnb-counters .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);
}

.bnb-counters .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);
}


/* Reviewkaarten: kleurschema op de kolom-inhoud (inner_color_scheme), zodat het
   wit binnen de tussenruimte blijft; de afronding van de kolom hier op de inhoud. */
.bnb-rv .bnb-rv-card.bt_bb_shape_hard-rounded > .bt_bb_column_content {
	border-radius: var(--row-hard-rounded);
	overflow: hidden;
}

.bnb-rv .bnb-rv-card.bt_bb_shape_hard-rounded {
	overflow: visible;
}

/* Drie reviewkaarten even hoog: de inhoud vult de kolom. */
.bnb-rv .bnb-rv-card.bt_bb_shape_hard-rounded {
	display: flex;
	flex-direction: column;
}

.bnb-rv .bnb-rv-card.bt_bb_shape_hard-rounded > .bt_bb_column_content {
	flex: 1 1 auto;
}

/* Reviewkaart zoals in het ontwerp: ruimte rondom (het thema geeft
   padding "double" alleen links en rechts) en de naam direct onder het citaat. */
.bnb-rv .bnb-rv-card.bt_bb_shape_hard-rounded > .bt_bb_column_content {
	padding: 2.5em;
}

.bnb-rv .bnb-rv-card .bnb-rv-author {
	margin-top: 0;
}