/* Custom Content Timeline - base styles
   All colors/sizes are driven by CSS custom properties set inline per-instance,
   so every timeline on a page can have its own palette. */

.ct-timeline {
	--ct-line-color: #7c3aed;
	--ct-line-color-muted: #e5e0fa;
	--ct-line-size: 4px;
	--ct-line-left-offset: 0px;
	--ct-card-gap: 28px;

	--ct-icon-bg: #e5e0fa;
	--ct-icon-bg-active: #7c3aed;
	--ct-icon-color: #7c3aed;
	--ct-icon-color-active: #ffffff;
	--ct-bullet-size: 80px;
	--ct-icon-font-size: 32px;
	--ct-bullet-offset-top: 0px;
	--ct-bullet-offset-left: 0px;
	--ct-bullet-border-width: 0px;
	--ct-bullet-border-color: #e5e0fa;
	--ct-bullet-border-color-active: #7c3aed;

	--ct-caret-size: 8px;
	--ct-caret-position: 20px;
	--ct-caret-color: #ffffff;

	--ct-card-bg: #ffffff;
	--ct-title-color: #1a1a2e;
	--ct-text-color: #555555;
	--ct-date-color: #333333;
	--ct-title-align: left;
	--ct-excerpt-align: left;

	--ct-h-tag-bg: #eef2f7;
	--ct-h-tag-text: #475569;
	--ct-h-tag-dot: #2563eb;
	--ct-h-meta-label: #0e9aa7;
	--ct-h-meta-value: #64748b;

	box-sizing: border-box;
}
.ct-timeline *,
.ct-timeline *::before,
.ct-timeline *::after {
	box-sizing: inherit;
}

.ct-timeline__icon .dashicons {
	font-size: var(--ct-icon-font-size);
	width: var(--ct-icon-font-size);
	height: var(--ct-icon-font-size);
}
.ct-timeline__icon img {
	width: var(--ct-icon-font-size);
	height: var(--ct-icon-font-size);
	border-radius: 50%;
	object-fit: cover;
}

.ct-timeline__card {
	background: var(--ct-card-bg);
	padding: 22px 24px;
	position: relative;
}
.ct-timeline--shadow .ct-timeline__card {
	box-shadow: 0 4px 24px rgba(20, 10, 50, 0.10), 0 1px 3px rgba(20, 10, 50, 0.08);
}

/* ---------------- Second in-card icon (optional, per item) ----------------
   Separate from the connector/badge icon: sits inside the card itself,
   above the title/content. Deliberately plain, no circle, no background
   color, no border, nothing forcing it into a shape, just the icon or
   image itself at a controllable size, since it's meant to be dropped
   in exactly as uploaded/chosen rather than styled like the bullet. */
.ct-timeline__card-icon-row {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 14px;
}
.ct-timeline__icon-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.ct-timeline__icon-secondary .dashicons {
	font-size: 56px;
	width: 56px;
	height: 56px;
}
.ct-timeline__icon-secondary img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

.ct-timeline__date {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-date-color);
	margin-bottom: 6px;
}

.ct-timeline__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--ct-title-color);
	text-align: var(--ct-title-align);
}

.ct-timeline__excerpt {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ct-text-color);
	text-align: var(--ct-excerpt-align);
}
.ct-timeline__excerpt p:first-child { margin-top: 0; }
.ct-timeline__excerpt p:last-child { margin-bottom: 0; }

/* ---------------- Bullet / icon circle ---------------- */
.ct-timeline__icon {
	width: var(--ct-bullet-size);
	height: var(--ct-bullet-size);
	border-radius: 50%;
	background: var(--ct-icon-bg);
	color: var(--ct-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border: var(--ct-bullet-border-width) solid var(--ct-bullet-border-color);
	transition: background 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 2;
	position: relative;
	top: var(--ct-bullet-offset-top);
	left: var(--ct-bullet-offset-left);
}

.ct-timeline__item--active .ct-timeline__icon,
.ct-timeline__connector--passed .ct-timeline__icon {
	background: var(--ct-icon-bg-active);
	color: var(--ct-icon-color-active);
	border-color: var(--ct-bullet-border-color-active);
}

/* ---------------- Caret (speech-bubble pointer toward the line) ---------------- */
.ct-timeline__card--caret-right::before,
.ct-timeline__card--caret-left::before {
	content: '';
	position: absolute;
	top: var(--ct-caret-position);
	width: 0;
	height: 0;
	pointer-events: none;
}
.ct-timeline__card--caret-right::before {
	right: calc(-1 * var(--ct-caret-size));
	border-width: var(--ct-caret-size) 0 var(--ct-caret-size) var(--ct-caret-size);
	border-style: solid;
	border-color: transparent transparent transparent var(--ct-caret-color);
}
.ct-timeline__card--caret-left::before {
	left: calc(-1 * var(--ct-caret-size));
	border-width: var(--ct-caret-size) var(--ct-caret-size) var(--ct-caret-size) 0;
	border-style: solid;
	border-color: transparent var(--ct-caret-color) transparent transparent;
}

/* ---------------- Button (optional, per item) ---------------- */
.ct-timeline__button {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--ct-icon-bg-active);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============ Scroll-fade entrance for cards ============ */
.ct-timeline__card {
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hidden pre-entrance state is applied by JS, not by default here. This way,
   if the entrance script fails to run for any reason (a conflicting plugin
   script erroring out earlier on the page, aggressive caching, a blocker),
   the card content stays visible instead of vanishing. */
.ct-timeline--scroll-fx .ct-timeline__card.ct-timeline__card--pre-entrance {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}
.ct-timeline--scroll-fx .ct-timeline__item--in-view .ct-timeline__card {
	opacity: 1;
	transform: translateY(0);
}
/* Horizontal cards use opacity-only entrance, no translateY, since a
   slide-up motion doesn't read as naturally on cards sitting to the
   side of a horizontal line the way it does stacked in a vertical
   list, an upward slide plus the offset already applied to position
   the card above/below the line reads as a slightly odd double-motion. */
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance {
	transform: none; /* remove the inherited translateY from the vertical rule */
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance-h {
	opacity: 0;
	will-change: opacity;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h {
	opacity: 1;
}

/* ============ VERTICAL (zigzag, center alignment) ============ */
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__list {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr var(--ct-bullet-size) 1fr;
	column-gap: var(--ct-card-gap);
	row-gap: 30px;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-fill {
	position: absolute;
	/* Matches the connector's own padding-top (4px) plus half the
	   bullet size exactly, this is where the first bullet's center
	   actually sits, a fixed, reliable value that doesn't depend on
	   JavaScript timing the way the bottom end (see script.js) has
	   to, since there's no preceding content above the first item to
	   create any uncertainty about it. */
	top: calc(4px + (var(--ct-bullet-size) / 2));
	left: calc(50% + var(--ct-line-left-offset));
	width: var(--ct-line-size);
	transform: translateX(-50%);
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base {
	bottom: 0;
	background: var(--ct-line-color-muted);
	z-index: 1;
}
.ct-timeline--vertical .ct-timeline__line-fill {
	height: 0;
	background: var(--ct-line-color);
	z-index: 1;
	transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
}
/* The line's exact length depends on the real, measured position of
   the last bullet (see initVerticalLine in script.js), not just a
   fixed guess, since the last row can be taller than its bullet
   (whenever its card has more content), which would otherwise let the
   line run past the bullet into that extra space. Both lines stay
   hidden until JS has measured and applied the correct length, rather
   than briefly showing a too-long line and then snapping shorter. */
.ct-timeline--vertical .ct-timeline__line-base,
.ct-timeline--vertical .ct-timeline__line-fill {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.ct-timeline--vertical.ct-timeline--line-ready .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--line-ready .ct-timeline__line-fill {
	opacity: 1;
}
.ct-timeline--vertical.ct-timeline--no-scroll-fx .ct-timeline__line-base {
	background: var(--ct-line-color);
}
.ct-timeline--vertical.ct-timeline--no-scroll-fx .ct-timeline__line-fill {
	display: none;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item {
	display: contents;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__connector {
	grid-column: 2;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Without this, the connector has no align-self of its own, so it
	   defaults to Grid's stretch behavior (the list's own grid never
	   sets align-items), meaning the connector's own box stretches to
	   match the row's height (set by whichever is taller, the bullet
	   or the card), not just its content. That mismatch between the
	   connector's layout box and where the bullet actually sits is
	   exactly what let the line's JS measurement land below the
	   bullet's real position for a tall last card, this is what
	   actually fixes it at the source rather than working around it. */
	align-self: start;
	position: relative;
	z-index: 2;
	padding-top: 4px;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__card {
	grid-column: 1;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__card {
	grid-column: 3;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__date--aside {
	grid-column: 3;
	text-align: left;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__date--aside {
	grid-column: 1;
	text-align: right;
}
.ct-timeline--vertical .ct-timeline__date--aside {
	align-self: flex-start;
}

@media (max-width: 767px) {
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__list {
		grid-template-columns: 44px 1fr;
		column-gap: 16px;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-fill {
		left: 22px;
		transform: none;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__connector {
		grid-column: 1;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__card,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__card {
		grid-column: 2;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__date--aside {
		display: none;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card .ct-timeline__date {
		display: inline-block !important;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card--caret-left::before,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card--caret-right::before {
		display: none; /* caret only makes sense pointing at a line that sits beside the card */
	}
}

/* ============ VERTICAL (left / right alignment, single column) ============ */
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__list,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__list {
	position: relative;
	max-width: 700px;
	margin: 0 auto;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-fill,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-fill {
	position: absolute;
	/* Matches where the first bullet's own center actually sits (no
	   extra padding-top in this alignment mode, unlike align-center),
	   a fixed, reliable value independent of JavaScript timing. */
	top: calc(var(--ct-bullet-size) / 2);
	left: calc( ( var(--ct-bullet-size) / 2 ) + var(--ct-line-left-offset) );
	width: var(--ct-line-size);
	transform: translateX(-50%);
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-base {
	bottom: 0;
	background: var(--ct-line-color-muted);
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__item,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__item {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin-bottom: 28px;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__connector,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__connector {
	position: relative;
	z-index: 2;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__card,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__card {
	margin-left: var(--ct-card-gap);
	flex: 1;
}

@media (max-width: 767px) {
	.ct-timeline--vertical .ct-timeline__date--aside {
		display: none;
	}
}

/* ============ HORIZONTAL, three-row layout ============
   Structure (identical to Essential Addons pattern):
     .ct-timeline__scroll          outer wrapper
       .ct-timeline__track         vertical stack of the three rows
         .ct-timeline__row--above  grid row: above-line cards + placeholders
         .ct-timeline__row--middle grid row: all connectors + the line
         .ct-timeline__row--below  grid row: below-line cards + placeholders

   Each row is a CSS Grid with exactly as many equal-width columns as
   there are items (--ct-h-item-count), so the whole thing always fits
   exactly inside whatever Elementor container/column it's placed in,
   it never creates its own wider scrollable area. All three rows
   share the same column count/gap, keeping every column aligned
   across rows without any JS measurement.
   ====================================================================== */

.ct-timeline--horizontal .ct-timeline__scroll {
	position: relative;
	width: 100%;
}

.ct-timeline--horizontal .ct-timeline__track {
	display: flex;
	flex-direction: column;    /* rows stack vertically: above, middle, below */
	width: 100%;
	position: relative;
	padding: 10px;
}
/* Card order for RTL is handled entirely in PHP (the items array itself
   is reversed there), not here. Whether direction:rtl reliably reverses
   CSS Grid column order the same way it does for flexbox is genuinely
   inconsistent across sources, layering it on top of an already-
   reversed array risked canceling back out to normal order in some
   browsers. One deterministic mechanism (array order) is safer than
   two mechanisms that might fight each other.
   direction: ltr; forces the actual text (numbers, punctuation, mixed
   content) to render normally, RTL here only meant "reverse the card
   order", not "this content is a right-to-left language". */
.ct-timeline--rtl .ct-timeline__track { direction: ltr; }

/* ── Each row is a grid of equal-width columns spanning the full width ── */
.ct-timeline--horizontal .ct-timeline__row {
	display: grid;
	grid-template-columns: repeat(var(--ct-h-item-count, 1), minmax(0, 1fr));
	gap: var(--ct-card-gap);
	width: 100%;
}

/* ── Column unit, min-width:0 lets grid cells shrink below content size
       instead of overflowing when there are many items ── */
.ct-timeline--horizontal .ct-timeline__h-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Placeholder: empty column so the opposite row's card stays aligned ── */
.ct-timeline--horizontal .ct-timeline__h-placeholder {
	min-width: 0;
}

/* ── Above row: cards sit at the bottom of the column (touching the line) ── */
.ct-timeline--horizontal .ct-timeline__row--above .ct-timeline__h-col--card {
	justify-content: flex-end;   /* card sticks to the bottom, closest to the line */
}

/* ── Below row: cards sit at the top of the column (touching the line) ── */
.ct-timeline--horizontal .ct-timeline__row--below .ct-timeline__h-col--card {
	justify-content: flex-start; /* card sticks to the top, closest to the line */
}

/* ── Nudge (odd/even card offset from the line), driven by CSS variables
       rather than a fixed inline pixel value, so it can respond to the
       Tablet/Mobile breakpoints. Item position within each row matches
       item index order (:nth-child(odd) = 1st, 3rd... = index 0, 2...,
       exactly what "odd card" means in the Style settings). A per-item
       "Custom Vertical Offset" override still wins via its own inline
       style, which always beats a class-based rule regardless of order. ── */
.ct-timeline--horizontal .ct-timeline__row--above .ct-timeline__h-col--card:nth-child(odd) {
	padding-bottom: var(--ct-h-nudge-odd, 0px);
}
.ct-timeline--horizontal .ct-timeline__row--above .ct-timeline__h-col--card:nth-child(even) {
	padding-bottom: var(--ct-h-nudge-even, 0px);
}
.ct-timeline--horizontal .ct-timeline__row--below .ct-timeline__h-col--card:nth-child(odd) {
	padding-top: var(--ct-h-nudge-odd, 0px);
}
.ct-timeline--horizontal .ct-timeline__row--below .ct-timeline__h-col--card:nth-child(even) {
	padding-top: var(--ct-h-nudge-even, 0px);
}

/* ── Middle row: connectors are centred on the line ── */
.ct-timeline--horizontal .ct-timeline__row--middle {
	position: relative;
	align-items: center;         /* connectors sit on the line */
	z-index: 1;
}

/* ── Card fills its column, optionally capped by Card Width so it doesn't
       stretch unreasonably wide when there are only one or two items ── */
.ct-timeline--horizontal .ct-timeline__card {
	width: 100%;
	max-width: var(--ct-h-item-width, none);
	margin: 0 auto;
}
/* No carets on horizontal cards */
.ct-timeline--horizontal .ct-timeline__card--caret-left::before,
.ct-timeline--horizontal .ct-timeline__card--caret-right::before {
	display: none;
}

/* ── Min-height on above/below rows so there is always room ── */
.ct-timeline--horizontal .ct-timeline__row--above,
.ct-timeline--horizontal .ct-timeline__row--below {
	min-height: var(--ct-h-row-min-height, 200px);
}

/* ── The line lives inside the middle row, stretches full width ── */
.ct-timeline--horizontal .ct-timeline__line-base--h,
.ct-timeline--horizontal .ct-timeline__line-fill--h {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: var(--ct-line-size);
	z-index: 0;
}
.ct-timeline--horizontal .ct-timeline__line-base--h {
	right: 0;
	background: var(--ct-line-color-muted);
}
.ct-timeline--horizontal .ct-timeline__line-fill--h {
	width: 0;
	background: var(--ct-line-color);
	transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
}
.ct-timeline--horizontal.ct-timeline--no-scroll-fx .ct-timeline__line-base--h {
	background: var(--ct-line-color);
}
.ct-timeline--horizontal.ct-timeline--no-scroll-fx .ct-timeline__line-fill--h {
	display: none;
}

/* ── Connector sits above the line z-index ── */
.ct-timeline--horizontal .ct-timeline__connector {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

/* ── Scroll-fx entrance: horizontal cards fade in only (no translateY
       since cards are now in their own row and have no transform conflict) ── */
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance {
	transform: none;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance-h {
	opacity: 0;
	will-change: opacity;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h,
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__h-col--card.ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h {
	opacity: 1;
}

/* ============ HORIZONTAL "Modern" card style ============
   The icon sits directly on the line (identical to Classic's connector,
   see render_h_connector), Modern's own distinguishing features are the
   card's layout, tag pill, and meta line below. Only active when both
   Layout = Horizontal and Horizontal Card Style = Modern are selected;
   otherwise these rules simply don't match anything. */
.ct-timeline--h-modern .ct-timeline__card {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ct-timeline--h-modern .ct-timeline__h-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
	background: var(--ct-h-tag-bg);
	color: var(--ct-h-tag-text);
}
.ct-timeline--h-modern .ct-timeline__h-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ct-h-tag-dot);
	flex-shrink: 0;
}

.ct-timeline--h-modern .ct-timeline__h-meta {
	font-size: 13px;
	margin-top: 10px;
	color: var(--ct-h-meta-value);
}
.ct-timeline--h-modern .ct-timeline__h-meta strong {
	color: var(--ct-h-meta-label);
	font-weight: 700;
}

/* ── ACCESSIBILITY ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ct-timeline__card,
	.ct-timeline__line-fill,
	.ct-timeline__icon,
	.ct-timeline__button {
		transition: none !important;
		animation: none !important;
	}
	.ct-timeline__card--pre-entrance,
	.ct-timeline__card--pre-entrance-h {
		opacity: 1 !important;
		transform: none !important;
	}
}