/* PyroPhobic Flow Chart widget */

/* Always fill the parent container, even when it lays its children out in a row
   (otherwise the widget shrinks to its content width between breakpoints). */
.elementor .e-con > .e-con-inner > .elementor-widget-pfc_flow_chart,
.elementor .e-con > .elementor-widget-pfc_flow_chart {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

.pfc {
	--pfc-bg: transparent; /* Grey box + padding come from the parent #flowChart container. */
	--pfc-orange-bg: #f5e5d9;
	--pfc-orange-line: #fcb88f;
	--pfc-purple-bg: #e2def4;
	--pfc-purple-line: #cbc4f6;
	--pfc-blue-bg: #d3d6df;
	--pfc-blue-line: #adb3c8;
	--pfc-gap-groups: 40px;
	--pfc-gap-panels: 24px;
	--pfc-gap-columns: 20px;
	--pfc-gap-items: 36px;
	--pfc-line: 8px;
	--pfc-panel-pad: 18px;
	--pfc-radius: 8px;
	--pfc-icon-h: 46px;

	display: flex;
	align-items: stretch;
	gap: var(--pfc-gap-groups);
	background: var(--pfc-bg);
	padding: 0;
	text-align: center;
	line-height: 1.2;
	box-sizing: border-box;
}

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

.pfc.pfc h2,
.pfc.pfc h3,
.pfc.pfc h4,
.pfc.pfc h5,
.pfc.pfc h6,
.pfc.pfc p {
	margin: 0;
	padding: 0;
}

.pfc.pfc a,
.pfc.pfc a:hover,
.pfc.pfc a:focus {
	color: inherit;
	text-decoration: none;
}

.pfc a:hover .pfc-item__logo-img,
.pfc a:hover .pfc-item__image-img {
	opacity: .85;
}

.pfc.pfc a:hover,
.pfc.pfc .pfc-item__text-link:hover .pfc-item__desc {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pfc a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.pfc img,
.pfc picture {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Sizes live on the wrapper so WebP <picture> wrappers / lazy-loaders can't break them. */
.pfc .pfc-item__logo,
.pfc .pfc-item__image {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.pfc .pfc-item__logo img,
.pfc .pfc-item__image img,
.pfc .pfc-item__logo picture,
.pfc .pfc-item__image picture {
	width: 100% !important;
	height: auto;
}

/* ---------- Group ---------- */

.pfc-group {
	flex: var(--pfc-grow, 1) 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pfc-group__head {
	margin-bottom: 18px;
}

.pfc-group__icon img {
	height: var(--pfc-icon-h);
	width: auto;
	margin-bottom: 6px;
}

.pfc .pfc-group__title {
	color: #707070;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.pfc-group__panels {
	flex: 1;
	display: flex;
	gap: var(--pfc-gap-panels);
}

/* ---------- Panel ---------- */

.pfc-panel {
	flex: var(--pfc-grow, 1) 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pfc-panel--orange { --panel-bg: var(--pfc-orange-bg); --panel-line: var(--pfc-orange-line); }
.pfc-panel--purple { --panel-bg: var(--pfc-purple-bg); --panel-line: var(--pfc-purple-line); }
.pfc-panel--blue   { --panel-bg: var(--pfc-blue-bg);   --panel-line: var(--pfc-blue-line); }

.pfc .pfc-panel__heading {
	color: #5b5b5b;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 12px !important;
}

.pfc-panel__body {
	flex: 1;
	display: flex;
	gap: var(--pfc-gap-columns);
	background: var(--panel-bg, #fff);
	border-top: var(--pfc-line) solid var(--panel-line, transparent);
	padding: var(--pfc-panel-pad) var(--pfc-panel-pad) calc(var(--pfc-panel-pad) * 1.5);
}

/* ---------- Column ---------- */

.pfc-col {
	flex: var(--pfc-grow, 1) 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pfc .pfc-col__heading {
	color: #6b6b6b;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 12px !important;
}

.pfc-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pfc-gap-items);
}

/* ---------- Item ---------- */

.pfc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.pfc-item > :empty {
	display: none;
}

.pfc-item__top > * + * {
	margin-top: 8px;
}

.pfc-item__media,
.pfc-item__body {
	margin-top: 12px;
}

.pfc-item__top:empty + .pfc-item__media,
.pfc-item__top:empty + .pfc-item__media:empty + .pfc-item__body {
	margin-top: 0;
}

.pfc-item__media--side {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.pfc-item__media--side > * {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

.pfc .pfc-item__image img {
	border-radius: var(--pfc-radius);
}

.pfc .pfc-item__caption {
	color: #6b6b6b;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 300;
}

.pfc .pfc-item__text {
	font-size: 14px;
	line-height: 1.2;
	max-width: var(--pfc-text-max, none);
	margin-left: auto !important;
	margin-right: auto !important;
}

.pfc .pfc-item__title {
	color: #333;
	font-size: 14px;
	font-weight: 700;
}

.pfc .pfc-item__desc {
	color: #555;
	font-size: 14px;
	font-weight: 300;
}

/* Card grid (2+ items per row): subgrid lines up captions, images and text across cards. */
.pfc-items--grid {
	display: grid;
	grid-template-columns: repeat(var(--pfc-cols, 3), minmax(0, 1fr));
	column-gap: 18px;
	row-gap: 0;
	align-items: start;
	margin-bottom: calc(-1 * var(--pfc-gap-items));
}

.pfc-items--grid .pfc-item {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	justify-items: center;
	align-items: end;
	padding-bottom: var(--pfc-gap-items);
}


.pfc-items--grid .pfc-item--full {
	grid-column: 1 / -1;
}

.pfc-items--grid .pfc-item__top   { grid-row: 1; }
.pfc-items--grid .pfc-item__media { grid-row: 2; margin-top: 12px; align-self: center; }
.pfc-items--grid .pfc-item__body  { grid-row: 3; align-self: start; }
.pfc-items--grid .pfc-item__top:empty + .pfc-item__media { margin-top: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.pfc {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.pfc-group__panels,
	.pfc-panel__body {
		flex-direction: column;
	}

	.pfc-panel__body {
		gap: calc(var(--pfc-gap-items) * .8);
	}

	.pfc-items--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pfc-item__text {
		max-width: 280px;
	}
}