/* =========================================================================
   FVKB ontwerplaag 10: Ons verhaal als partituur
   ========================================================================= */

.fvkb-tijdlijn { --balk-x: 20px; --balk-w: 50px; --sp: 12px; gap: 0 !important; padding: 8px 0 0 !important; }
.fvkb-tl-uitleg { margin: 0 0 8px calc(20px + 50px + 56px) !important; max-width: 620px; }
.fvkb-tl-uitleg, .fvkb-tl-uitleg p { font-size: 16px !important; color: #3E4166 !important; }

/* Bovenste balk van de notenbalk en de slotmaat onderaan */
.fvkb-tl-kop { position: absolute; left: calc(var(--balk-x) - 6px); top: 0; width: calc(var(--balk-w) + 12px); height: 4px; border-radius: 2px; background: #0E1240; z-index: 2; }
.fvkb-slotmaat { position: relative; height: 12px; width: var(--balk-w); margin-left: var(--balk-x); flex: none; }
.fvkb-slotmaat span { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: #0E1240; }
.fvkb-slotmaat span + span { top: 6px; height: 6px; }

/* Hoofdstuk: jaar links, verhaal rechts */
.fvkb-hoofdstuk { display: grid !important; grid-template-columns: 240px minmax(0, 1fr); gap: 48px !important; padding: 56px 0 72px calc(var(--balk-x) + var(--balk-w) + 56px) !important; }
.fvkb-hoofdstuk::before, .fvkb-hoofdstuk::after { content: none !important; }
.fvkb-hoofdstuk > .e-con:first-of-type { width: auto !important; gap: 6px !important; align-self: start; }
.fvkb-hoofdstuk > .e-con:first-of-type .elementor-widget-heading:first-child .elementor-heading-title { font-family: "Unbounded", sans-serif; font-size: 56px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.03em; color: #2B3BD6 !important; }
.fvkb-hoofdstuk > .e-con:first-of-type:has(> .elementor-widget-heading + .elementor-widget-heading) .elementor-widget-heading:first-child .elementor-heading-title { font-size: 40px !important; }
.fvkb-hoofdstuk > .e-con:first-of-type .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title { font-family: "Figtree", sans-serif; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0; color: #3E4166 !important; }
.fvkb-hoofdstuk__tekst { width: auto !important; max-width: 860px; gap: 18px !important; }
.fvkb-hoofdstuk__tekst h2.elementor-heading-title, .fvkb-hoofdstuk__tekst .elementor-widget-heading:first-child .elementor-heading-title { font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.12 !important; letter-spacing: -.02em; }
.fvkb-hoofdstuk__tekst .elementor-widget-text-editor { font-size: 19px !important; color: #3E4166; }
.fvkb-hoofdstuk__tekst .elementor-widget-image img { height: 360px !important; width: 100% !important; object-fit: cover; border-radius: 12px; }

/* Maatstreep boven elk hoofdstuk, noot met hulplijn op de notenbalk */
.fvkb-maatstreep { position: absolute; left: var(--balk-x); top: 0; width: var(--balk-w); height: 2px; background: #0E1240; z-index: 2; }
.fvkb-noot-plek { position: absolute; left: calc(var(--balk-x) + var(--l, 2) * var(--sp)); top: 84px; width: 0; height: 0; z-index: 3; }
.fvkb-noot-plek::after { content: ""; position: absolute; left: 12px; top: -1.5px; height: 3px; width: calc(var(--balk-w) - var(--l, 2) * var(--sp) + 28px); background: #DAD7CD; transition: background-color .4s; }
.fvkb-noot { position: absolute; left: -13px; top: -10px; width: 27px; height: 20px; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--k, #0E1240); background: #F7F6F2; transform: rotate(-24deg); transition: background-color .4s, box-shadow .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.fvkb-hoofdstuk { --k: #0E1240; }
.fvkb-noot-gloed { --k: #E8643C; }
.fvkb-noot-koper { --k: #D9A43A; }
.fvkb-noot-ultra { --k: #2B3BD6; }
.fvkb-hoofdstuk.is-gespeeld .fvkb-noot-plek::after { background: #D9A43A; }
.fvkb-hoofdstuk.is-gespeeld .fvkb-noot { background: var(--k); box-shadow: 0 0 0 6px rgba(217, 164, 58, .25); }
.fvkb-hoofdstuk:hover .fvkb-noot { box-shadow: 0 0 0 6px rgba(43, 59, 214, .18); }
.js-defile .fvkb-noot:not(.in-beeld) { transform: rotate(-24deg) scale(0); }

@media (max-width: 900px) {
	.fvkb-hoofdstuk { grid-template-columns: minmax(0, 1fr); gap: 16px !important; padding: 40px 0 48px 52px !important; }
	.fvkb-hoofdstuk > .e-con:first-of-type .elementor-widget-heading:first-child .elementor-heading-title { font-size: 40px !important; }
	.fvkb-hoofdstuk__tekst .elementor-widget-image img { height: 240px !important; }
}
@media (max-width: 767px) {
	.fvkb-tijdlijn { --balk-x: 0px; --balk-w: 29px; --sp: 7px; }
	.fvkb-tl-uitleg { margin-left: 52px !important; }
	.fvkb-noot-plek { top: 52px; }
	.fvkb-noot-plek::after { left: 9px; width: calc(var(--balk-w) - var(--l, 2) * var(--sp) + 14px); }
	.fvkb-noot { left: -10px; top: -8px; width: 20px; height: 15px; border-width: 2.5px; }
}

/* Onderweg: lijn onder de lijst, zoals in het ontwerp */
.e-con:has(> .fvkb-plek) { border-bottom: 1px solid #3E4166; }

/* Wie de maat aangeeft: het vaandel hangt aan de bovenrand van de kaart */
.elementor-element-7242620 .fvkb-kaart { padding: 0 28px 28px !important; gap: 12px !important; }
.js-defile .fvkb-noot.in-beeld { transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1), background-color .4s, box-shadow .4s; }

/* Pioniers als labels met een klein vaandel */
.fvkb-pioniers .elementor-icon-list-items { display: flex !important; flex-wrap: wrap; gap: 10px !important; margin: 0 !important; }
.fvkb-pioniers .elementor-icon-list-item { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 14px !important; border-radius: 6px; background: #FFFFFF; border: 1px solid #DAD7CD; }
.fvkb-pioniers .elementor-icon-list-item::after { display: none !important; }
.fvkb-pioniers .elementor-icon-list-icon { width: 14px !important; height: 18px; flex: 0 0 14px; padding: 0 !important; margin: 0 !important; }
.fvkb-pioniers .elementor-icon-list-icon svg, .fvkb-pioniers .elementor-icon-list-icon i { display: none !important; }
.fvkb-pioniers .elementor-icon-list-icon::before { content: ""; display: block; width: 14px; height: 18px; background: #2B3BD6; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
.fvkb-pioniers .elementor-icon-list-text { font-size: 16px !important; font-weight: 700 !important; color: #0E1240 !important; padding: 0 !important; }