/* 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;
	top: 0;
	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;
}
.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;
	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;
	top: 0;
	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;
	}
}