/* ──────────────────────────────────────────────────────────────
   Hoogendoorn – Elementor-widget "Tijdlijn"
   Verticale, alternerende tijdlijn met ronde foto's en gouden
   stippen op de middenlijn. Kleuren/maten worden via CSS-variabelen
   door de Elementor-instellingen overschreven.
   ────────────────────────────────────────────────────────────── */

.hpb-timeline {
	--hpb-tl-line:   #3c4a2e;
	--hpb-tl-dot:    #f5a623;
	--hpb-tl-year:   #3c4a2e;
	--hpb-tl-title:  #2b2b2b;
	--hpb-tl-text:   #555555;
	--hpb-tl-circle: 90px;
	--hpb-tl-gap:    34px; /* lengte van het verbindingsstreepje */
	--hpb-tl-line-w:   3px;  /* dikte verticale middenlijn */
	--hpb-tl-conn-w:   3px;  /* dikte horizontaal verbindingsstreepje */
	--hpb-tl-dot-size: 15px; /* diameter stip */

	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 0;
	box-sizing: border-box;
}

/* Verticale middenlijn */
.hpb-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--hpb-tl-line-w);
	background: var(--hpb-tl-line);
	transform: translateX(-50%);
	z-index: 2;
}

/* Eén tijdlijn-item (halve breedte, links of rechts van de lijn) */
.hpb-timeline__item {
	position: relative;
	width: 50%;
	box-sizing: border-box;
	padding: 22px 56px;
	display: flex;
	align-items: center;
	gap: 22px;
}

.hpb-timeline__item--left {
	left: 0;
	flex-direction: row-reverse; /* tekst links, foto rechts (tegen de lijn) */
	text-align: right;
}
.hpb-timeline__item--right {
	left: 50%;
	flex-direction: row;         /* foto links (tegen de lijn), tekst rechts */
	text-align: left;
}

/* Gouden stip op de middenlijn */
.hpb-timeline__item::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--hpb-tl-dot-size);
	height: var(--hpb-tl-dot-size);
	border-radius: 50%;
	background: var(--hpb-tl-dot);
	z-index: 2;
}
.hpb-timeline__item--left::after  { right: 0; transform: translate(50%, -50%); }
.hpb-timeline__item--right::after { left: 0;  transform: translate(-50%, -50%); }

/* Ronde foto */
.hpb-timeline__media {
	position: relative;
	flex: 0 0 auto;
	line-height: 0;
}
.hpb-timeline__item--left  .hpb-timeline__media { margin-right: var(--hpb-tl-gap); }
.hpb-timeline__item--right .hpb-timeline__media { margin-left:  var(--hpb-tl-gap); }

/* Verbindingsstreepje van foto naar de stip op de lijn */
.hpb-timeline__media::after {
	content: "";
	position: absolute;
	top: 50%;
	height: var(--hpb-tl-conn-w);
	width: var(--hpb-tl-gap);
	background: var(--hpb-tl-line);
	transform: translateY(-50%);
}
.hpb-timeline__item--left  .hpb-timeline__media::after { right: calc(-1 * var(--hpb-tl-gap)); }
.hpb-timeline__item--right .hpb-timeline__media::after { left:  calc(-1 * var(--hpb-tl-gap)); }

.hpb-timeline__img {
	display: block;
	width: var(--hpb-tl-circle);
	height: var(--hpb-tl-circle);
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--hpb-tl-line);
	background: #e9efe2;
}

/* Leeg-placeholder als er geen foto is gekozen */
.hpb-timeline__media--empty .hpb-timeline__img {
	background: #e9efe2;
}

/* Tekst */
.hpb-timeline__content { min-width: 0; }
.hpb-timeline__year {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--hpb-tl-year);
	margin: 0 0 6px;
}
.hpb-timeline__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hpb-tl-title);
	margin: 0 0 4px;
}
.hpb-timeline__text {
	font-size: .9rem;
	line-height: 1.45;
	color: var(--hpb-tl-text);
	margin: 0;
}

/* ── Mobiel: alles links uitgelijnd tegen één lijn ── */
@media (max-width: 767px) {
	.hpb-timeline { padding: 6px; padding-left: 0px; padding-right: 0px; }
	.hpb-timeline::before { left: 22px; }

	.hpb-timeline__item,
	.hpb-timeline__item--left,
	.hpb-timeline__item--right {
		width: 100%;
		left: 0;
		flex-direction: row;
		text-align: left;
		padding: 18px 0 18px 44px;
		gap: 16px;
	}

	.hpb-timeline__item::after,
	.hpb-timeline__item--left::after,
	.hpb-timeline__item--right::after {
		left: 22px !important;
		right: auto;
		transform: translate(-50%, -50%);
	}

	.hpb-timeline__item--left  .hpb-timeline__media,
	.hpb-timeline__item--right .hpb-timeline__media {
		margin-left: 0;
		margin-right: 0;
		order: -1; /* foto altijd voor de tekst */
	}
	.hpb-timeline__media::after { display: none; }

	.hpb-timeline { --hpb-tl-circle: 64px; }
	.hpb-timeline__year { font-size: 1.4rem; }

	.hpb-timeline__item{
		padding-right: 15px;
		background-color: #BDCCB9 !important;
	}
	.hpb-timeline__item:nth-child(odd){
		background-color: #B2C1AC !important;
	}
}