/*!
 * SWS Elementor Widgets — shared frontend stylesheet
 * Structural + default (overridable) styling for:
 *   1) Milestones Timeline   .sws-milestones
 *   2) Process Steps         .sws-steps
 *   3) Process Flow          .sws-flow
 *   4) Team Grid             .sws-team
 *
 * Colors/typography/spacing here are safe fallbacks only — every value
 * that matters is overridden per-widget by Elementor's Style controls.
 */

/* ==========================================================================
   1) MILESTONES TIMELINE
   ========================================================================== */

.sws-milestones {
	--sws-side-gap: 40px;
	box-sizing: border-box;
}
.sws-milestones *,
.sws-milestones *::before,
.sws-milestones *::after {
	box-sizing: border-box;
}

.sws-milestones__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.sws-milestones__title {
	font-size: 40px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.sws-milestones__subtitle {
	font-size: 16px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 auto;
}

.sws-milestones__list {
	position: relative;
}

.sws-milestones__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
}

.sws-milestone {
	position: relative;
	width: 50%;
}

.sws-milestone.sws-side-left {
	left: 0;
	text-align: right;
	padding-right: var(--sws-side-gap);
}

.sws-milestone.sws-side-right {
	left: 50%;
	text-align: left;
	padding-left: var(--sws-side-gap);
}

.sws-milestone__dot {
	position: absolute;
	top: 4px;
	border-radius: 50%;
	border: 0 solid transparent;
}

.sws-milestone.sws-side-left .sws-milestone__dot {
	right: 0;
	transform: translate( 50%, 0 );
}

.sws-milestone.sws-side-right .sws-milestone__dot {
	left: 0;
	transform: translate( -50%, 0 );
}

.sws-milestone__date {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.sws-milestone__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.sws-milestone__desc {
	font-size: 15px;
	line-height: 1.6;
}

/* Mobile / tablet — collapse to a single column */
@media ( max-width: 767px ) {
	.sws-milestones__line {
		left: 6px;
		transform: none;
	}

	.sws-milestones.sws-mobile-line-right .sws-milestones__line {
		left: auto;
		right: 6px;
	}

	.sws-milestone,
	.sws-milestone.sws-side-left,
	.sws-milestone.sws-side-right {
		width: 100%;
		left: 0;
		text-align: left;
		padding-left: calc( var( --sws-side-gap ) * 0.6 );
		padding-right: 0;
	}

	.sws-milestones.sws-mobile-line-right .sws-milestone,
	.sws-milestones.sws-mobile-line-right .sws-milestone.sws-side-left,
	.sws-milestones.sws-mobile-line-right .sws-milestone.sws-side-right {
		text-align: right;
		padding-left: 0;
		padding-right: calc( var( --sws-side-gap ) * 0.6 );
	}

	.sws-milestone.sws-side-left .sws-milestone__dot,
	.sws-milestone.sws-side-right .sws-milestone__dot {
		left: 6px;
		right: auto;
		transform: translate( -50%, 0 );
	}

	.sws-milestones.sws-mobile-line-right .sws-milestone.sws-side-left .sws-milestone__dot,
	.sws-milestones.sws-mobile-line-right .sws-milestone.sws-side-right .sws-milestone__dot {
		left: auto;
		right: 6px;
		transform: translate( 50%, 0 );
	}

	.sws-milestones__title {
		font-size: 30px;
	}
}

/* ==========================================================================
   2) PROCESS STEPS
   ========================================================================== */

.sws-steps *,
.sws-steps *::before,
.sws-steps *::after {
	box-sizing: border-box;
}

.sws-steps__list {
	display: flex;
	flex-direction: column;
}

.sws-step {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.sws-step__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.sws-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.sws-step__connector {
	flex: 1 1 auto;
	min-height: 24px;
	margin-top: 6px;
}

.sws-step__content {
	flex: 1 1 auto;
	padding-top: 10px;
}

.sws-step__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.sws-step__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.sws-step__desc {
	font-size: 15px;
	line-height: 1.6;
}

.sws-steps__note {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.sws-steps__note strong,
.sws-steps__note b {
	font-weight: 700;
}

@media ( max-width: 480px ) {
	.sws-step {
		gap: 14px;
	}
}

/* ==========================================================================
   3) PROCESS FLOW
   ========================================================================== */

.sws-flow {
	--sws-flow-cols: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.sws-flow *,
.sws-flow *::before,
.sws-flow *::after {
	box-sizing: border-box;
}

.sws-flow__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 calc( ( 100% / var( --sws-flow-cols ) ) - 1px );
	max-width: calc( 100% / var( --sws-flow-cols ) );
	padding: 0 12px;
}

.sws-flow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-bottom: 16px;
}

.sws-flow__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.sws-flow__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 8px;
}

.sws-flow__desc {
	font-size: 14px;
	line-height: 1.6;
	max-width: 260px;
}

.sws-flow__connector {
	display: flex;
	align-items: center;
	flex: 0 1 40px;
	min-width: 24px;
	margin-top: 34px;
}

.sws-flow__connector-line {
	flex: 1 1 auto;
	height: 2px;
}

.sws-flow__arrow {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 4px;
}

.sws-flow__arrow i {
	font-size: 12px;
}

/*
 * Column count on every breakpoint is driven by the widget's responsive
 * "Items Per Row" control (--sws-flow-cols), not hardcoded here. Arrows
 * only read correctly in a single row, so once items wrap onto more than
 * one row on smaller screens the connectors are hidden by default.
 */
@media ( max-width: 1024px ) {
	.sws-flow__item {
		margin-bottom: 32px;
	}

	.sws-flow__connector {
		display: none;
	}
}

/* ==========================================================================
   4) TEAM GRID
   ========================================================================== */

.sws-team {
	--sws-team-cols: 3;
	display: grid;
	grid-template-columns: repeat( var( --sws-team-cols ), 1fr );
	gap: 24px;
}

.sws-team *,
.sws-team *::before,
.sws-team *::after {
	box-sizing: border-box;
}

.sws-team__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}

.sws-team__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
}

.sws-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease, transform 0.4s ease;
}

.sws-team-grayscale-yes .sws-team__photo img {
	filter: grayscale( 100% );
}

.sws-team-grayscale-yes .sws-team__card:hover .sws-team__photo img {
	filter: grayscale( 0% );
}

.sws-team__info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.sws-team__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 2px;
}

.sws-team__role {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}

.sws-team__bio {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 14px;
}

.sws-team__social {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.sws-team__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/*
 * Column count on every breakpoint is driven by the widget's responsive
 * "Columns" control (--sws-team-cols) — see the base rule above. No
 * hardcoded overrides here so the control stays the single source of truth.
 */