/* ==========================================================================
   Stroken op de apparaatpagina's (inc/stroken.php, inhoud-sync 44, 24 sep 2026)
   Witte strook met een ronde sticker (bt_bb_promo) die half over de rand hangt: de leasestrook
   (sticker links, prijs) en de trainingsstrook (sticker rechts). De stroken zijn gewone Bold
   Builder-inhoud, zodat Anne en Margreet tekst, bedragen en knoppen zelf kunnen aanpassen; dit
   blad zorgt alleen voor de vorm. Ontwerp: component Lease, variant compact, in het designsysteem.
   Geladen op elke pagina waarvan de inhoud "bnb-strook" bevat (functions.php).
   ========================================================================== */

/* 24 sep 2026: sectieruimte komt uit de builder (inc/ruimte.php); deze regel is vervallen. */

/* De rij: ruimte voor de sticker aan één kant, de sticker zelf absoluut en verticaal gecentreerd */
.bnb-strook .bt_bb_row > .bt_bb_row_holder {
	position: relative;
	margin: 0;
}
.bnb-strook--links .bt_bb_row > .bt_bb_row_holder { padding-left: 6.5em; }   /* de helft van 13em */
.bnb-strook--rechts .bt_bb_row > .bt_bb_row_holder { padding-right: 6.5em; }

.bnb-strook .bt_bb_column.bnb-strook__sticker {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 13em;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
	z-index: 2;
	line-height: 0;
}
.bnb-strook--links .bt_bb_column.bnb-strook__sticker { left: 0; }
.bnb-strook--rechts .bt_bb_column.bnb-strook__sticker { right: 0; }

.bnb-strook .bnb-strook__sticker .bt_bb_promo {
	display: block;
	width: 13em;
}
.bnb-strook .bnb-strook__sticker .bt_bb_promo .bt_bb_promo_text span {
	font-family: var(--supertitle-font);
	font-weight: var(--supertitle-font-weight);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--light-color);
}
.bnb-strook .bnb-strook__sticker .bt_bb_promo .bt_bb_promo_text em {
	display: block;
	font-family: var(--em-heading-font);
	font-style: var(--em-heading-font-style, italic);
	font-weight: var(--em-heading-font-weight, 400);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.9rem;
	line-height: 1.15;
	padding: .05em 0;
}
.bnb-strook .bnb-strook__sticker .bt_bb_promo .bt_bb_promo_icon .bt_bb_icon_holder {
	color: var(--light-color);
}

/* Het witte vlak */
.bnb-strook .bt_bb_column.bnb-strook__vlak {
	width: 100%;
	max-width: none;
	flex: 1 1 100%;
	padding: 0;
	margin: 0;
	background: var(--light-color);
	color: var(--dark-color);
	border-radius: var(--card-hard-rounded-shape, 20px);
}
.bnb-strook .bnb-strook__vlak > .bt_bb_column_content > .bt_bb_column_content_inner {
	padding: 2em 2.25em;
	min-height: 15em;
	display: flex;
	align-items: center;
}
.bnb-strook--links .bnb-strook__vlak > .bt_bb_column_content > .bt_bb_column_content_inner { padding-left: 8.75em; }
.bnb-strook--rechts .bnb-strook__vlak > .bt_bb_column_content > .bt_bb_column_content_inner { padding-right: 8.75em; }
.bnb-strook .bnb-strook__vlak .bt_bb_row_inner {
	width: 100%;
}
.bnb-strook .bnb-strook__vlak .bt_bb_row_inner > .bt_bb_row_inner_holder {
	align-items: center;
}

/* Links: kop, zin, pillen */
.bnb-strook .bt_bb_headline {
	margin: 0;
}
.bnb-strook .bnb-strook__zin p {
	margin: .9em 0 0;
	max-width: 44ch;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--dark-gray-color);
}
.bnb-strook .bnb-strook__pillen p {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 1.25em 0 0;
}
.bnb-strook__pil {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .5em 1.1em .5em .9em;
	border-radius: var(--hard-rounded, 50px);
	background: var(--alternate-color);
	color: var(--light-color);
	font-family: var(--supertitle-font);
	font-weight: 500;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bnb-strook__pil::before {
	content: "\e908";
	font-family: IBM;
	font-size: 12px;
	letter-spacing: 0;
}

/* Rechts: leaderregels in inkt (het thema zet de prijs via een inline variabele in tan, 1,9:1 op wit) */
.bnb-strook .bnb-strook__prijzen .bt_bb_price {
	margin-bottom: .55em;
}
.bnb-strook .bnb-strook__prijzen .bt_bb_price .bt_bb_price_text,
.bnb-strook .bnb-strook__prijzen .bt_bb_price .bt_bb_price_price {
	color: var(--dark-color);
}
.bnb-strook .bnb-strook__prijzen .bt_bb_price .bt_bb_price_text::after {
	background-color: var(--dark-color);
}
.bnb-strook .bnb-strook__voorbehoud p {
	margin: .5em 0 0;
	font-size: .75rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--dark-gray-color);
}
/* Knoppen: onder elkaar, links uitgelijnd; de tekst van de losse link staat gelijk met de tekst
   in de gevulde knop (24 sep 2026, Bart: "beter uitlijnen en meer witruimte tussen button en tekst"). */
.bnb-strook .bnb-strook__prijzen .bt_bb_button {
	display: block;
	width: auto;
	margin: 0;
}
.bnb-strook .bnb-strook__prijzen .bt_bb_button + .bt_bb_button {
	margin-top: 1em;
}
.bnb-strook .bnb-strook__prijzen .bt_bb_button.bt_bb_style_clean a {
	padding-left: 20px; /* = de binnenmarge van de kleine gevulde/omlijnde knop */
}
/* Hover: het thema draait bij "dark-accent" de kleuren om (tan tekst op wit, te licht) en bij
   "dark-transparent" wordt de tekst transparant (onzichtbaar). Hier: gevuld -> inkt met wit,
   omlijnd -> inkt met wit, losse link -> tan. */
.bnb-strook .bt_bb_button.bt_bb_style_filled:hover a,
.bnb-strook .bt_bb_button.bt_bb_style_filled:focus a,
.bnb-strook .bt_bb_button.bt_bb_style_outline:hover a,
.bnb-strook .bt_bb_button.bt_bb_style_outline:focus a {
	background-color: var(--dark-color);
	color: var(--light-color);
	box-shadow: 0 0 0 1px var(--dark-color) inset;
}
.bnb-strook .bt_bb_button.bt_bb_style_filled:hover a .bt_bb_icon_holder,
.bnb-strook .bt_bb_button.bt_bb_style_outline:hover a .bt_bb_icon_holder {
	color: var(--light-color);
}
.bnb-strook .bt_bb_button.bt_bb_style_clean a:hover,
.bnb-strook .bt_bb_button.bt_bb_style_clean a:focus,
.bnb-strook .bt_bb_button.bt_bb_style_clean a:hover .bt_bb_icon_holder {
	color: var(--accent-color);
}

/* Onder 800px: sticker boven de strook, kolommen onder elkaar */
@media (max-width: 800px) {
	.bnb-strook--links .bt_bb_row > .bt_bb_row_holder,
	.bnb-strook--rechts .bt_bb_row > .bt_bb_row_holder {
		padding: 6.5em 0 0;
	}
	.bnb-strook .bt_bb_column.bnb-strook__sticker,
	.bnb-strook--links .bt_bb_column.bnb-strook__sticker,
	.bnb-strook--rechts .bt_bb_column.bnb-strook__sticker {
		left: 50%;
		right: auto;
		top: 0;
		transform: translateX(-50%);
	}
	.bnb-strook--links .bnb-strook__vlak > .bt_bb_column_content > .bt_bb_column_content_inner,
	.bnb-strook--rechts .bnb-strook__vlak > .bt_bb_column_content > .bt_bb_column_content_inner {
		padding: 8.25em 1.5em 2em;
	}
	.bnb-strook .bnb-strook__vlak .bt_bb_row_inner > .bt_bb_row_inner_holder > .bt_bb_column_inner + .bt_bb_column_inner {
		margin-top: 1.5em;
	}
}

/* --- "Zo gaat het in zijn werk" als moving cards (inc/stappen-kaarten.php, inhoud-sync 45) ----
   Drie kaarten met foto die bij het scrollen over elkaar schuiven (thema-element bt_bb_moving_cards,
   zoals op de demo), elk met een glazen paneel: blur, lichte rand, 35% inkt als grond zodat witte
   tekst op elke foto leesbaar blijft. Het stapnummer staat in de Libre Caslon-italic in tan. */
.bnb-stappenkaarten .bnb-stapkaart .bt_bb_moving_card_item_content {
	min-height: 30em;
	display: flex;
	align-items: center;
}
.bnb-stappenkaarten .bnb-stapkaart .bt_bb_row_inner {
	width: 100%;
}
.bnb-stappenkaarten .bnb-stapkaart__nummer .bt_bb_headline_tag {
	margin: 0 0 .1em;
	line-height: 1;
}
.bnb-stappenkaarten .bnb-stapkaart__paneel .bt_bb_headline:not(.bnb-stapkaart__nummer) .bt_bb_headline_content,
.bnb-stappenkaarten .bnb-stapkaart__tekst p {
	color: var(--light-color);
}
.bnb-stappenkaarten .bnb-stapkaart__nummer .bt_bb_headline_content {
	color: var(--accent-color); /* het nummer in tan, zoals de cijfers van de stappen */
}
.bnb-stappenkaarten .bnb-stapkaart__tekst p {
	line-height: 1.7;
	max-width: 36ch;
}
@media (max-width: 640px) {
	.bnb-stappenkaarten .bnb-stapkaart .bt_bb_moving_card_item_content {
		padding: 1.25em;
		min-height: 0;
	}
}