/* Integration Flow Diagram — base styles.
   Everything colour/size related is a CSS variable so Elementor controls can override it. */

.ifd {
	position: relative;
	max-width: 100%;
	font-family: var(--ifd-font, "Work Sans", sans-serif);
	overflow: hidden;
	border-radius: 18px;
	padding: 44px 40px 40px;
	background: linear-gradient(150deg, #0f4d78 0%, #1c77b7 100%);
}

.ifd__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--ifd-grid-color, rgba(255, 255, 255, .05)) 1px, transparent 1px),
		linear-gradient(90deg, var(--ifd-grid-color, rgba(255, 255, 255, .05)) 1px, transparent 1px);
	background-size: var(--ifd-grid-size, 40px) var(--ifd-grid-size, 40px);
}

.ifd__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* ---------- Rows of pills ---------- */

.ifd__row {
	display: grid;
	grid-template-columns: repeat(var(--ifd-cols, 3), minmax(0, 1fr));
	gap: var(--ifd-gap, 12px);
}

.ifd__pill {
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 14px 12px;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	background: var(--ifd-pill-bg, var(--ifd-pill-bg-base, rgba(255, 255, 255, .12)));
	border: 1px solid var(--ifd-pill-bc, var(--ifd-pill-bc-base, rgba(255, 255, 255, .25)));
	-webkit-backdrop-filter: blur(var(--ifd-pill-blur, 10px));
	backdrop-filter: blur(var(--ifd-pill-blur, 10px));
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

a.ifd__pill:hover,
a.ifd__pill:focus-visible {
	background: var(--ifd-pill-bg-hover, var(--ifd-pill-bg, var(--ifd-pill-bg-base, rgba(255, 255, 255, .18))));
	border-color: var(--ifd-pill-bc-hover, var(--ifd-pill-bc, var(--ifd-pill-bc-base, rgba(255, 255, 255, .45))));
}

.ifd__pill-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	color: var(--ifd-pill-ic, var(--ifd-pill-ic-base, #ffffff));
	font-size: 20px;
	line-height: 1;
}

.ifd__pill-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ifd__pill-icon .ifd__icon-svg,
.ifd__card-icon .ifd__icon-svg {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ifd-icon-stroke, 1.6);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ifd__pill-title {
	overflow-wrap: anywhere;
	color: var(--ifd-pill-tc, var(--ifd-pill-tc-base, #ffffff));
	font-size: clamp(12px, 1.1vw, 13px);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ifd__pill-sub {
	color: var(--ifd-pill-sc, var(--ifd-pill-sc-base, rgba(255, 255, 255, .65)));
	font-size: clamp(10px, 1vw, 11px);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ---------- Hub card ---------- */

.ifd__card {
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 12px;
	background: #ffffff;
	text-decoration: none;
	box-shadow: 0 16px 40px -18px rgba(9, 40, 62, .6);
}

.ifd__card-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(28, 119, 183, .1);
	color: #1c77b7;
	font-size: 22px;
	line-height: 1;
}

.ifd__card-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ifd__card-text {
	min-width: 0;
	display: flex;
	overflow-wrap: break-word;
	flex-direction: column;
	min-width: 0;
}

.ifd__card-title {
	color: #191c1e;
	font-size: clamp(15px, 1.4vw, 16px);
	font-weight: 600;
	line-height: 1.3;
}

.ifd__card-desc {
	margin-top: 2px;
	color: #70787d;
	font-size: clamp(12px, 1.1vw, 12.5px);
	line-height: 1.45;
}

/* ---------- Footer ---------- */

.ifd__footer {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	text-align: center;
}

.ifd__footer-text {
	display: inline-block;
	color: rgba(255, 255, 255, .75);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---------- Connectors ----------
   One .ifd__cell per item in the adjacent row (same grid template = perfect alignment).
   --ifd-branch: 1 = branching bracket, 0 = single centre line (used on stacked breakpoints). */

.ifd__conn {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--ifd-cols, 3), minmax(0, 1fr));
	gap: var(--ifd-gap, 12px);
	height: var(--ifd-conn-h, 52px);
}

.ifd__cell {
	position: relative;
}

.ifd__cell::before,
.ifd__cell::after {
	content: "";
	position: absolute;
	opacity: var(--ifd-branch, 1);
	border-width: 0;
	border-style: var(--ifd-line-style, solid);
	border-color: var(--ifd-line-color, rgba(255, 255, 255, .45));
}

.ifd__trunk {
	position: absolute;
	font-style: normal;
	left: 50%;
	transform: translateX(-50%);
	border-left: var(--ifd-line-w, 1.5px) var(--ifd-line-style, solid) var(--ifd-line-color, rgba(255, 255, 255, .45));
}

.ifd__conn--collect .ifd__trunk {
	top: calc(50% * var(--ifd-branch, 1));
	bottom: 0;
}

.ifd__conn--fanout .ifd__trunk {
	top: 0;
	bottom: calc(50% * var(--ifd-branch, 1));
}

.ifd__conn--straight .ifd__trunk,
.ifd__conn--centered .ifd__trunk {
	top: 0;
	bottom: 0;
}

/* Bracket style — replicates the reference SVG path exactly:
   outer verticals drop to the bar, turn inward with a radius, run to r short of the
   centre, then curve down and merge into the trunk. */
.ifd__conn {
	--ifd-colw: calc((100% - (var(--ifd-cols, 3) - 1) * var(--ifd-gap, 12px)) / var(--ifd-cols, 3));
}

.ifd__elbow,
.ifd__joint {
	position: absolute;
	display: block;
	font-style: normal;
	opacity: var(--ifd-branch, 1);
	border-width: 0;
	border-style: var(--ifd-line-style, solid);
	border-color: var(--ifd-line-color, rgba(255, 255, 255, .45));
}

.ifd__joint {
	width: var(--ifd-line-r, 10px);
	height: var(--ifd-line-r, 10px);
}

/* Middle columns just drop a stub to the bar. */
.ifd__conn--bracket .ifd__cell:not(:first-of-type):not(:last-of-type)::before {
	left: 50%;
	right: 50%;
	height: var(--ifd-bar, 24px);
	border-left-width: var(--ifd-line-w, 1.5px);
}

/* ---- collect (row above, card below) ---- */
.ifd__conn--collect.ifd__conn--bracket .ifd__cell:not(:first-of-type):not(:last-of-type)::before {
	top: 0;
}

.ifd__conn--collect .ifd__elbow {
	top: 0;
	height: var(--ifd-bar, 24px);
	border-bottom-width: var(--ifd-line-w, 1.5px);
}

.ifd__conn--collect .ifd__elbow--l {
	left: calc(var(--ifd-colw) / 2);
	right: calc(50% + var(--ifd-line-r, 10px));
	border-left-width: var(--ifd-line-w, 1.5px);
	border-bottom-left-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--collect .ifd__elbow--r {
	right: calc(var(--ifd-colw) / 2);
	left: calc(50% + var(--ifd-line-r, 10px));
	border-right-width: var(--ifd-line-w, 1.5px);
	border-bottom-right-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--collect .ifd__joint {
	top: var(--ifd-bar, 24px);
	border-top-width: var(--ifd-line-w, 1.5px);
}

.ifd__conn--collect .ifd__joint--l {
	right: 50%;
	border-right-width: var(--ifd-line-w, 1.5px);
	border-top-right-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--collect .ifd__joint--r {
	left: 50%;
	border-left-width: var(--ifd-line-w, 1.5px);
	border-top-left-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--collect.ifd__conn--bracket .ifd__trunk {
	top: calc((var(--ifd-bar, 24px) + var(--ifd-line-r, 10px)) * var(--ifd-branch, 1));
	bottom: 0;
}

/* ---- fanout (card above, row below) ---- */
.ifd__conn--fanout.ifd__conn--bracket .ifd__cell:not(:first-of-type):not(:last-of-type)::before {
	bottom: 0;
}

.ifd__conn--fanout .ifd__elbow {
	bottom: 0;
	height: var(--ifd-bar, 24px);
	border-top-width: var(--ifd-line-w, 1.5px);
}

.ifd__conn--fanout .ifd__elbow--l {
	left: calc(var(--ifd-colw) / 2);
	right: calc(50% + var(--ifd-line-r, 10px));
	border-left-width: var(--ifd-line-w, 1.5px);
	border-top-left-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--fanout .ifd__elbow--r {
	right: calc(var(--ifd-colw) / 2);
	left: calc(50% + var(--ifd-line-r, 10px));
	border-right-width: var(--ifd-line-w, 1.5px);
	border-top-right-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--fanout .ifd__joint {
	bottom: var(--ifd-bar, 24px);
	border-bottom-width: var(--ifd-line-w, 1.5px);
}

.ifd__conn--fanout .ifd__joint--l {
	right: 50%;
	border-right-width: var(--ifd-line-w, 1.5px);
	border-bottom-right-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--fanout .ifd__joint--r {
	left: 50%;
	border-left-width: var(--ifd-line-w, 1.5px);
	border-bottom-left-radius: var(--ifd-line-r, 10px);
}

.ifd__conn--fanout.ifd__conn--bracket .ifd__trunk {
	top: 0;
	bottom: calc((var(--ifd-bar, 24px) + var(--ifd-line-r, 10px)) * var(--ifd-branch, 1));
}

/* An odd number of items puts a column dead centre, so the trunk runs the full height
   (this is what makes the 3-item default match the reference line-for-line). */
.ifd__conn--bracket.ifd__conn--odd .ifd__trunk {
	top: 0;
	bottom: 0;
}

/* A single item needs no bracket at all. */
.ifd__conn--single .ifd__elbow,
.ifd__conn--single .ifd__joint,
.ifd__conn--single .ifd__cell::before,
.ifd__conn--single .ifd__cell::after {
	display: none;
}

.ifd__conn--single .ifd__trunk {
	top: 0;
	bottom: 0;
}

/* Straight style — one vertical line per column, no bar. */
.ifd__conn--straight .ifd__cell::before {
	top: 0;
	bottom: 0;
	left: 50%;
	right: 50%;
	border-left-width: var(--ifd-line-w, 1.5px);
}

.ifd__conn--straight .ifd__trunk {
	opacity: calc(1 - var(--ifd-branch, 1));
	top: 0;
	bottom: 0;
}

/* Centered style — evenly spaced vertical lines gathered under the card centre,
   independent of the column grid. Dash pattern is fully controllable. */
.ifd__conn--centered {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: var(--ifd-conn-spacing, 70px);
}

.ifd__conn--centered .ifd__cell {
	flex: 0 0 auto;
	width: var(--ifd-line-w, 1.5px);
	opacity: var(--ifd-branch, 1);
	background-image: repeating-linear-gradient(
		to bottom,
		var(--ifd-line-color, rgba(255, 255, 255, .45)) 0 var(--ifd-dash, 4px),
		transparent var(--ifd-dash, 4px) calc(var(--ifd-dash, 4px) + var(--ifd-dash-gap, 5px))
	);
}

.ifd__conn--centered .ifd__cell::before,
.ifd__conn--centered .ifd__cell::after {
	content: none;
}

.ifd__conn--centered .ifd__trunk {
	top: 0;
	bottom: 0;
	width: var(--ifd-line-w, 1.5px);
	border: 0;
	opacity: calc(1 - var(--ifd-branch, 1));
	background-image: repeating-linear-gradient(
		to bottom,
		var(--ifd-line-color, rgba(255, 255, 255, .45)) 0 var(--ifd-dash, 4px),
		transparent var(--ifd-dash, 4px) calc(var(--ifd-dash, 4px) + var(--ifd-dash-gap, 5px))
	);
}

/* Narrow screens: the hub card reads better stacked than as an icon + text row. */
@media (max-width: 480px) {
	.ifd__card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.ifd__footer-text {
		letter-spacing: .08em;
	}
}

/* ---------- Responsive fallback ----------
   Sizes with their own control are handled per device in the panel; this only
   rescues the card layout once there is no room for the icon beside the text. */
@media (max-width: 420px) {
	.ifd__card {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifd__pill {
		transition: none;
	}
}