/**
 * Timeline widget — Cascaid-style alternating grid (timeline.html draft, CW tokens).
 *
 * Last modified: 2026-03-29
 *
 * @package CW_Elementor_Widgets
 */

/* -------------------------------------------------------------------------
   Shell + header (matches timeline.html .home-timeline intro)
   ------------------------------------------------------------------------- */
.elementor-widget-cw-timeline .cw-timeline {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	color: var(--cw-text, #dce0ea);
}

.elementor-widget-cw-timeline .cw-timeline--border-top {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.elementor-widget-cw-timeline .cw-timeline__inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1366px) {
	.elementor-widget-cw-timeline .cw-timeline__inner {
		padding-inline-start: max(var(--cw-gutter-inline), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline), env(safe-area-inset-right, 0px));
	}
}

@media (min-width: 1367px) {
	.elementor-widget-cw-timeline .cw-timeline__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.elementor-widget-cw-timeline .cw-timeline__header {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.elementor-widget-cw-timeline .cw-timeline__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cw-accent-secondary, #00b7fa);
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
}

.elementor-widget-cw-timeline .cw-timeline__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cw-text-heading, #f8fafc);
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
}

.elementor-widget-cw-timeline .cw-timeline__cta {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cw-accent-secondary, #00b7fa);
	text-decoration: none;
	transition: color 0.3s ease;
}

.elementor-widget-cw-timeline .cw-timeline__cta:hover {
	color: var(--cw-text-heading, #f8fafc);
}

/* -------------------------------------------------------------------------
   Grid + center line (draft timeline.html)
   ------------------------------------------------------------------------- */
.elementor-widget-cw-timeline .cw-timeline__shell {
	position: relative;
}

.elementor-widget-cw-timeline .cw-timeline__grid {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	z-index: 0;
}

.elementor-widget-cw-timeline .cw-timeline__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--cw-timeline-line, rgba(255, 255, 255, 0.12));
	z-index: 0;
	pointer-events: none;
}

.elementor-widget-cw-timeline .cw-timeline__line-progress {
	position: absolute;
	left: 50%;
	top: 0;
	width: 2px;
	margin-left: -1px;
	height: 0;
	background: var(--cw-timeline-line-progress, var(--cw-accent-secondary, #00b7fa));
	z-index: 1;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Items: 3-column grid; odd = content right, even = content left
   ------------------------------------------------------------------------- */
.elementor-widget-cw-timeline .cw-timeline__item {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(1rem, 3vw, 2rem);
	padding-bottom: clamp(2.5rem, 6vw, 3rem);
	position: relative;
	align-items: start;
	z-index: 2;
}

.elementor-widget-cw-timeline .cw-timeline__item:last-child {
	padding-bottom: 0;
}

.elementor-widget-cw-timeline .cw-timeline__item--odd .cw-timeline__panel {
	grid-column: 3;
	text-align: left;
}

.elementor-widget-cw-timeline .cw-timeline__item--even .cw-timeline__panel {
	grid-column: 1;
	text-align: right;
}

.elementor-widget-cw-timeline .cw-timeline__marker {
	grid-column: 2;
	grid-row: 1;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	margin: 0.25rem auto 0;
	position: relative;
	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
	background: var(--cw-timeline-marker-bg, var(--cw-surface-1, #141414));
	border: 2px solid var(--cw-timeline-marker-border, rgba(255, 255, 255, 0.12));
}

.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__marker {
	background: var(--cw-timeline-marker-active, var(--cw-accent-secondary, #00b7fa));
	border-color: var(--cw-timeline-marker-active, var(--cw-accent-secondary, #00b7fa));
	animation: cw-timeline-marker-pulse 2s ease-in-out infinite;
}

.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__marker::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--cw-accent-secondary, #00b7fa);
	opacity: 0;
	animation: cw-timeline-marker-ring 2s ease-in-out infinite;
}

@keyframes cw-timeline-marker-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.12);
	}
}

@keyframes cw-timeline-marker-ring {
	0% {
		transform: scale(0.85);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

.elementor-widget-cw-timeline .cw-timeline__item:hover .cw-timeline__marker {
	border-color: var(--cw-accent-secondary, #00b7fa);
	background: var(--cw-accent-secondary, #00b7fa);
}

.elementor-widget-cw-timeline .cw-timeline__panel {
	min-width: 0;
	background: var(
		--cw-timeline-panel-bg,
		color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 92%, transparent)
	);
	border: 1px solid var(--cw-timeline-panel-border, rgba(255, 255, 255, 0.08));
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.elementor-widget-cw-timeline .cw-timeline__item:hover .cw-timeline__panel {
	border-color: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 45%, transparent);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 15%, transparent);
}

.elementor-widget-cw-timeline .cw-timeline__date {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	color: var(--cw-text-muted, #94a3b8);
	transition: color 0.3s ease;
}

.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__date {
	color: var(--cw-accent-secondary, #00b7fa);
}

.elementor-widget-cw-timeline .cw-timeline__item-title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	font-weight: 600;
	line-height: 1.35;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	color: var(--cw-text-heading, #f8fafc);
	transition: color 0.3s ease;
}

.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__item-title {
	color: var(--cw-accent-secondary, #00b7fa);
}

.elementor-widget-cw-timeline .cw-timeline__item-text {
	margin: 0 0 1rem;
	font-family: var(--cw-font-body, "Inter", system-ui, sans-serif);
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	line-height: 1.65;
	color: var(--cw-text-muted, #94a3b8);
}

.elementor-widget-cw-timeline .cw-timeline__details {
	margin-top: 1rem;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--cw-timeline-details-bg, rgba(255, 255, 255, 0.04));
	border-radius: 8px;
	padding: 1rem;
}

.elementor-widget-cw-timeline .cw-timeline__item--even .cw-timeline__details {
	align-items: center;
}

.elementor-widget-cw-timeline .cw-timeline__item--odd .cw-timeline__details {
	align-items: center;
}

/* Max width / height: Style → Milestone images */
.elementor-widget-cw-timeline .cw-timeline__media {
	flex-shrink: 0;
	width: 100%;
	max-width: 14rem;
	margin: 0 auto;
}

.elementor-widget-cw-timeline .cw-timeline__thumb {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	object-fit: contain;
	background: transparent;
	transition: box-shadow 0.35s ease;
}

.elementor-widget-cw-timeline .cw-timeline__thumb--fallback {
	opacity: 0.55;
	filter: grayscale(0.15);
}

.elementor-widget-cw-timeline .cw-timeline__read-more-wrap {
	margin: 0.75rem 0 0;
	text-align: inherit;
}

.elementor-widget-cw-timeline .cw-timeline__read-more-wrap > a.elementor-button.elementor-button-link.cw-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.elementor-widget-cw-timeline .cw-timeline__btn-icon {
	font-size: 1.125rem;
	line-height: 1;
}

/* Scroll reveal — silky team-style settle (lift + subtle scale) */
.elementor-widget-cw-timeline .cw-timeline[data-cw-timeline-reveal="1"] .gsap-cw-timeline-item {
	opacity: 0;
	transform: translate3d(0, var(--cw-timeline-reveal-y, 48px), 0) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-cw-timeline .cw-timeline[data-cw-timeline-reveal="1"] .gsap-cw-timeline-item {
		opacity: 1;
		transform: none;
	}

	.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__marker {
		animation: none;
	}

	.elementor-widget-cw-timeline .cw-timeline__item.is-cw-timeline-active .cw-timeline__marker::before {
		animation: none;
		display: none;
	}
}

.elementor-editor-active .elementor-widget-cw-timeline .cw-timeline[data-cw-timeline-reveal="1"] .gsap-cw-timeline-item {
	opacity: 1;
	transform: none;
}

/* Mobile: stack — marker column + full-width content */
@media (max-width: 767px) {
	.elementor-widget-cw-timeline .cw-timeline__item {
		grid-template-columns: auto 1fr;
		gap: 1.25rem;
		padding-bottom: 2.5rem;
	}

	.elementor-widget-cw-timeline .cw-timeline__item--odd .cw-timeline__panel,
	.elementor-widget-cw-timeline .cw-timeline__item--even .cw-timeline__panel {
		grid-column: 2;
		text-align: left;
	}

	.elementor-widget-cw-timeline .cw-timeline__marker {
		grid-column: 1;
		width: 16px;
		height: 16px;
		margin-top: 0.35rem;
	}

	.elementor-widget-cw-timeline .cw-timeline__line,
	.elementor-widget-cw-timeline .cw-timeline__line-progress {
		left: 7px;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-cw-timeline .cw-timeline__marker,
	.elementor-widget-cw-timeline .cw-timeline__date,
	.elementor-widget-cw-timeline .cw-timeline__item-title,
	.elementor-widget-cw-timeline .cw-timeline__thumb,
	.elementor-widget-cw-timeline .cw-timeline__read-more-wrap .cw-hero__btn {
		transition-duration: 0.01ms;
	}
}