/**
 * Process Timeline Widget — Frontend Styles
 * Premium, modern, minimal timeline for home-service businesses.
 */

.ptw-process-timeline {
	--ptw-accent: #E30613;
	box-sizing: border-box;
}

.ptw-process-timeline *,
.ptw-process-timeline *::before,
.ptw-process-timeline *::after {
	box-sizing: border-box;
}

.ptw-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------- */

.ptw-header {
	width: 100%;
}

.ptw-heading {
	margin: 0 0 16px;
	line-height: 1.2;
}

.ptw-subtitle {
	margin: 0 0 48px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Steps grid (desktop: 4 columns)
 * ---------------------------------------------------------------- */

.ptw-steps {
	--ptw-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--ptw-columns), 1fr);
	gap: 28px;
	align-items: stretch;
	position: relative;
}

.ptw-step {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

/* Card fills the step cell so all cards share equal height */
.ptw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	border: 1px solid #EDEDEF;
	border-radius: 14px;
	padding: 40px 28px;
	text-align: left;
	transition-property: transform, box-shadow, border-color;
	transition-duration: 300ms;
	transition-timing-function: ease;
	outline: none;
}

.ptw-card:focus-visible {
	outline: 2px solid var(--ptw-accent);
	outline-offset: 3px;
}

.ptw-card:hover {
	border-color: var(--ptw-accent);
}

/* ------------------------------------------------------------------
 * Number badge
 * ---------------------------------------------------------------- */

.ptw-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	min-width: 64px;
	border-radius: 50%;
	background-color: var(--ptw-accent);
	color: #FFFFFF;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	transition: background-color 300ms ease;
	user-select: none;
}

/* ------------------------------------------------------------------
 * Icon
 * ---------------------------------------------------------------- */

.ptw-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	color: var(--ptw-accent);
	margin-bottom: 16px;
	transition: color 300ms ease;
}

.ptw-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--ptw-accent);
}

/* ------------------------------------------------------------------
 * Title & description
 * ---------------------------------------------------------------- */

.ptw-title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	color: #16171A;
	line-height: 1.35;
}

.ptw-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #5B5F66;
}

/* ------------------------------------------------------------------
 * Connector line (desktop / tablet: horizontal, between grid cells)
 * ---------------------------------------------------------------- */

.ptw-connector {
	display: block;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: var(--ptw-gap, 28px);
	height: 2px;
	background-color: #E9CACD;
	z-index: 1;
}

/* ------------------------------------------------------------------
 * Responsive: Tablet — 2 columns
 * ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ptw-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.ptw-step:nth-child(2) .ptw-connector,
	.ptw-step:nth-child(4) .ptw-connector,
	.ptw-step:nth-child(6) .ptw-connector,
	.ptw-step:nth-child(8) .ptw-connector {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Responsive: Mobile — 1 column, vertical timeline
 * ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.ptw-steps {
		grid-template-columns: 1fr;
	}

	.ptw-process-timeline.ptw-vertical-on-mobile .ptw-step {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ptw-process-timeline.ptw-vertical-on-mobile .ptw-connector {
		display: block;
		position: static;
		transform: none;
		width: 2px;
		height: 28px;
		margin: 4px 0;
		background-color: #E9CACD;
	}

	.ptw-process-timeline.ptw-vertical-on-mobile .ptw-card {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * Reveal-on-scroll animation hooks (progressive enhancement via JS)
 * ---------------------------------------------------------------- */

.ptw-step.ptw-in-view .ptw-card {
	animation: ptw-fade-up 600ms ease both;
}

@keyframes ptw-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ptw-card,
	.ptw-number,
	.ptw-icon {
		transition: none !important;
	}

	.ptw-step.ptw-in-view .ptw-card {
		animation: none !important;
	}
}