/* ── Scout Process Carousel ─────────────────────────────────────────────── */

.scout-pc-section {
	position: relative;
	/* overflow is intentionally visible so the track extends past the section */
}

/* Viewport: clips horizontally, extends right to the browser edge via JS */
.scout-pc-viewport {
	overflow: hidden;
}

/* Timeline viewport clips horizontally but stays open vertically so the
   dot pulse ring can expand upward over the carousel images above it. */
.scout-pc-timeline-viewport {
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
	z-index: 10;
}

/* ── Carousel track ─────────────────────────────────────────────────────── */

.scout-pc-track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;          /* default; overridden by Elementor control selector */
	will-change: transform;
	cursor: grab;
	user-select: none;
	box-sizing: border-box;
}

.scout-pc-track.is-dragging {
	cursor: grabbing;
}

/* ── Individual card ────────────────────────────────────────────────────── */

.scout-pc-item {
	flex: 0 0 auto;
	width: 360px;       /* default; overridden by Elementor control selector */
}

.scout-pc-item-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #1a2a3a;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* gradient overlay */
.scout-pc-item-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
	pointer-events: none;
}

.scout-pc-label {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	color: #fff;
	padding: 0 0 20px 20px;
	font-size: 2.25rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	pointer-events: none;
}

/* ── Timeline ───────────────────────────────────────────────────────────── */

.scout-pc-timeline-viewport {
	margin-top: 0;      /* default; overridden by Elementor control selector */
}

.scout-pc-timeline-track {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;          /* kept in sync with card gap via shared selector */
	will-change: transform;
	box-sizing: border-box;
	/* horizontal line drawn as pseudo-element, centered on dot height */
}

.scout-pc-timeline-track::before {
	content: '';
	position: absolute;
	/* vertically centered on the dot */
	top: calc(var(--scout-dot-size, 12px) / 2);
	/* JS sets these: line runs from first dot center to last dot center */
	left: var(--scout-pc-line-start, 0px);
	width: var(--scout-pc-line-width, 0px);
	height: 1px;
	background: #c8c8c8; /* default; overridden by Elementor control selector */
	transform: translateY(-50%);
	pointer-events: none;
}

.scout-pc-timeline-item {
	flex: 0 0 auto;
	width: 360px;       /* default; overridden by Elementor control selector */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.scout-pc-dot {
	position: relative;
	z-index: 20;          /* above carousel images; ripple ::after inherits context */
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e8a040; /* default; overridden by Elementor control selector */
	opacity: 0;           /* hidden until animation reaches this dot */
}

.scout-pc-subtitle {
	margin-top: 14px;
	text-align: center;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.4;
}

/* ── Timeline intro animation ───────────────────────────────────────────── */

/* Dot: brief scale-up on arrival */
@keyframes scout-dot-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.65); }
	75%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

/* Ripple ring that expands outward from the dot */
@keyframes scout-dot-ripple {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(3.5); opacity: 0; }
}

.scout-pc-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: 0;
	pointer-events: none;
}

.scout-pc-dot.is-pulsing {
	animation: scout-dot-pop 0.55s ease-out forwards;
}

.scout-pc-dot.is-pulsing::after {
	animation: scout-dot-ripple 0.65s ease-out forwards;
}

/* Subtitles — JS sets opacity/transform inline during animation */
.scout-pc-subtitle {
	opacity: 0;
	transform: translateY(8px);
}

/* ── Drag-prevention on images ──────────────────────────────────────────── */
.scout-pc-track img,
.scout-pc-track a {
	-webkit-user-drag: none;
	pointer-events: none;
}