/* Hexagon Process Widget - Frontend Styles */

.hpw-grid {
	--hpw-columns: 8;
	--hpw-row-gap: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--hpw-row-gap);
	width: 100%;
}

.hpw-cell {
	--hpw-hex-size: 90px;
	--hpw-border-width: 1.5px;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex: 0 0 calc(100% / var(--hpw-columns));
	max-width: calc(100% / var(--hpw-columns));
	padding: 0 6px;
	box-sizing: border-box;
}

.hpw-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	width: 100%;
	position: relative;
	z-index: 2;
}

.hpw-hex {
	width: var(--hpw-hex-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	position: relative;
	flex-shrink: 0;
}

/* Outer layer = the hexagon border color */
.hpw-hex-border {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #C9D6F0;
	-webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Inner layer = the hexagon fill color, inset by border width to reveal the border ring */
.hpw-hex-inner {
	position: absolute;
	top: var(--hpw-border-width);
	left: var(--hpw-border-width);
	right: var(--hpw-border-width);
	bottom: var(--hpw-border-width);
	background-color: #EEF2FB;
	-webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hpw-hex-inner img {
	width: 45%;
	height: 45%;
	object-fit: contain;
	display: block;
}

.hpw-title {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #1E2A5A;
	line-height: 1.4;
	max-width: 150px;
}

/* Connector line + dot, positioned from center of this hexagon to center of the next */
.hpw-connector-wrap {
	position: absolute;
	top: calc(var(--hpw-hex-size) / 2);
	left: 79%;
	width: 100%;
	height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	transform: translateY(-50%);
}

.hpw-connector {
	flex: 1;
	border-top: 2px dotted #B9C7EC;
	margin: 0;
}

.hpw-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #4A6CF7;
	flex-shrink: 0;
}

/* Hidden automatically by JS on the last item of each visual row */
.hpw-cell.hpw-hide-connector .hpw-connector-wrap {
	display: none;
}

@media (max-width: 767px) {
	.hpw-title {
		font-size: 12px;
	}
}