/* sections/pro-process.php */
.pp-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--pp-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	--pp-tip: 1.25rem; /* depth of the arrow point and notch */
	background: var(--c-bg-alt); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.pp-section *, .pp-section *::before, .pp-section *::after { box-sizing: border-box; }
.pp-inner { display: grid; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.pp-inner > * { min-width: 0; }

.pp-label {
	display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.pp-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.pp-section .pp-title { margin: 0; color: var(--c-heading); font: 800 var(--fs-2xl)/1.18 var(--f-heading); letter-spacing: -0.02em; text-wrap: balance; }

/*
	Steps. Phone and tablet: stacked, each card pointing down, the next one's notch taking its point.
	From 1024px: one row pointing right. The shadow is a drop-shadow on the item, so it follows the arrow shape.
*/
.pp-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.pp-item { min-width: 0; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--c-bg-dark) 10%, transparent)); transition: transform 0.3s; }
.pp-item + .pp-item { margin-top: calc(var(--pp-tip) * -1 + var(--space-2)); }
.pp-item:hover { transform: translateY(-3px); }
.pp-card {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-4); height: 100%;
	padding: calc(var(--space-5) + var(--pp-tip)) var(--space-5) calc(var(--space-5) + var(--pp-tip));
	background: var(--c-surface);
	clip-path: polygon(0 0, 50% var(--pp-tip), 100% 0, 100% calc(100% - var(--pp-tip)), 50% 100%, 0 calc(100% - var(--pp-tip)));
}
.pp-item:first-child .pp-card { padding-top: var(--space-5); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-tip)), 50% 100%, 0 calc(100% - var(--pp-tip))); }
.pp-item:last-child .pp-card { padding-bottom: var(--space-5); clip-path: polygon(0 0, 50% var(--pp-tip), 100% 0, 100% 100%, 0 100%); }
.pp-disc {
	display: grid; place-items: center; grid-row: span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background: var(--pp-blue); color: var(--c-on-dark); font: 800 var(--fs-lg)/1 var(--f-heading); transition: background-color 0.3s;
}
.pp-item:hover .pp-disc { background: var(--c-accent); }
.pp-icon { width: 1.375rem; height: 1.375rem; }
.pp-section .pp-step-title { margin: 0; color: var(--c-heading); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.pp-text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* The first exchange: pale red, chat icon on a red disc */
.pp-item--start .pp-card { background: var(--c-accent-soft); }
.pp-item--start .pp-disc { background: var(--c-accent); color: var(--c-on-accent); }
.pp-item--start:hover .pp-disc { background: var(--c-accent-hover); }

@media (min-width: 1024px) {
	.pp-section { --pp-tip: 2rem; } /* a deeper point for the tall cards of the row */
	.pp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pp-item + .pp-item { margin-top: 0; margin-left: calc(var(--pp-tip) * -1 + var(--space-2)); }
	.pp-card {
		grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3);
		padding: var(--space-5) calc(var(--space-4) + var(--pp-tip)) var(--space-6) calc(var(--space-5) + var(--pp-tip));
		clip-path: polygon(0 0, calc(100% - var(--pp-tip)) 0, 100% 50%, calc(100% - var(--pp-tip)) 100%, 0 100%, var(--pp-tip) 50%);
	}
	.pp-item:first-child .pp-card { padding-top: var(--space-5); padding-left: var(--space-5); clip-path: polygon(0 0, calc(100% - var(--pp-tip)) 0, 100% 50%, calc(100% - var(--pp-tip)) 100%, 0 100%); }
	.pp-item:last-child .pp-card { padding-bottom: var(--space-6); padding-right: var(--space-5); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--pp-tip) 50%); }
	.pp-disc { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.pp-section * { transition: none !important; }
}