/* ============================================================
   Bigwave Timeline — WPBakery Element  v1.1.0
   ============================================================ */

/* ── Scroll wrapper ──────────────────────────────────────── */
.bw-timeline-wrapper {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	padding: 20px 0 30px;
}

/* ── Track ───────────────────────────────────────────────── */
.bw-timeline-track {
	display: flex;
	align-items: stretch;
	height: var(--bw-track-height, 460px);
	position: relative;
	min-width: max-content;
}

/* Horizontal centre line — uses CSS vars set inline by PHP */
.bw-timeline-track::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--bw-line-thickness, 2px);
	background-color: var(--bw-line-color, #888888);
	transform: translateY(-50%);
	z-index: 0;
}

/* ── Logo / start image ──────────────────────────────────── */
/*
 * align-self is set inline by PHP (center / flex-start / flex-end)
 * so the box can sit on the line, at the top, or at the bottom.
 */
.bw-timeline-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 20px;
	z-index: 1;
}

/*
 * .bw-logo-box border, background, radius, and padding are all
 * applied inline by PHP so the editor controls work live.
 * Only layout defaults live here.
 */
.bw-logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.bw-logo-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Timeline item (column) ──────────────────────────────── */
.bw-timeline-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 0 220px;
	position: relative;
	z-index: 1;
	padding: 0 10px;
}

/* Top half — "above" cards anchor here */
.bw-item-top {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

/*
 * Centre point — the dot lives here.
 * Because .bw-item-top and .bw-item-bottom both use flex:1,
 * the vertical centre of this element always falls at exactly
 * 50% of the track, matching the ::before line perfectly.
 * Width/height are set inline by PHP to match the dot size.
 */
.bw-center-point {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

/* Bottom half — "below" cards anchor here */
.bw-item-bottom {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

/* ── Dot ─────────────────────────────────────────────────── */
/* size, colour set inline per-item by PHP */
.bw-dot {
	border-radius: 50%;
	flex-shrink: 0;
	width: var(--bw-dot-size, 30px);
	height: var(--bw-dot-size, 30px);
	background-color: #1b6a7a;
}

/* ── Connector ───────────────────────────────────────────── */
/* colour and height set inline per-item by PHP */
.bw-connector {
	width: 2px;
	flex-shrink: 0;
	height: var(--bw-conn-height, 20px);
	background-color: #1b6a7a;
}

/* ── Card ────────────────────────────────────────────────── */
/* bg-color, text-color, border, border-radius set inline by PHP */
.bw-card {
	width: 100%;
	padding: 18px 20px 16px;
	background-color: #1b6a7a;
	color: #ffffff;
	box-sizing: border-box;
}

.bw-card-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.15rem;   /* overridden inline if title_size is set */
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.bw-card-date {
	display: block;
	font-size: 0.9rem;    /* overridden inline if date_size is set */
	font-weight: 400;
	color: inherit;
	opacity: 0.92;
	margin-top: 4px;
}

/* ── Card image ──────────────────────────────────────────── */
.bw-card-image {
	margin: 10px 0 6px;
}

.bw-card-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Scrollbar (Webkit only) ─────────────────────────────── */
.bw-timeline-wrapper::-webkit-scrollbar        { height: 6px; }
.bw-timeline-wrapper::-webkit-scrollbar-track  { background: #f0f0f0; border-radius: 3px; }
.bw-timeline-wrapper::-webkit-scrollbar-thumb  { background: #bbbbbb; border-radius: 3px; }
.bw-timeline-wrapper::-webkit-scrollbar-thumb:hover { background: #999999; }