.pipeline-block {
	margin-top: 24px;

	@media screen and (max-width: 1100px) {
		margin-top: 20px;
	}

	& .pipeline-block__content {
		background: #faf9f7;
		border: 1.5px solid #cbcbcb;
		border-radius: 10px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;

		@media screen and (max-width: 1100px) {
			padding: 16px 11px;
		}

		& .pipeline-block__population p.hdr.label {
			opacity: 0.5;
			font-size: 1.3rem;

			@media screen and (max-width: 1100px) {
				font-size: 1.1rem;
			}
		}

		& .row {
			display: flex;
			flex-direction: row;
			gap: 20px;
			justify-content: space-between;

			@media screen and (max-width: 1100px) {
				flex-direction: column;
			}
		}

		& .pipeline-block__phases {
			max-width: 828px;

			@media screen and (min-width: 1100px) {
				padding-left: 20px;
				flex: 1;
			}

			& ul {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;

				/*
				 * On mobile, use five equal columns so the labels
				 * line up with their positions on the progress bar.
				 */
				@media screen and (max-width: 1100px) {
					display: grid;
					grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
					width: 100%;
				}

				& li.phase {
					display: flex;
					flex-direction: column;
					gap: 14px;
					flex: 1;
					min-width: 0;

					@media screen and (max-width: 1100px) {
						gap: 8px;
						width: 100%;
					}

					& span.label {
						width: 100%;
						color: var(--dark-gray);

						@media screen and (max-width: 1100px) {
							font-size: .99rem;
							letter-spacing: 0.5px;
							white-space: nowrap;
						}
					}

					/*
					 * Center Phase 1, Phase 2, and Phase 3.
					 */
					&:not(:first-child):not(:last-child) {
						& span.label {
							text-align: center;
						}
					}

					/*
					 * Shift Phase 2 and Phase 3 to match Figma.
					 */
					@media screen and (min-width: 1100px) {
						&:nth-child(3) span.label {
							transform: translateX(10%);
						}

						&:nth-child(4) span.label {
							transform: translateX(20%);
						}
					}

					& span.status {
						width: 100%;
						height: 14px;
						border: 1px solid;
						border-left: none;
						border-right: none;
						position: relative;
						z-index: 1;
						overflow-y: clip;

						&.complete {
							--bg: var(--orange);
							--border: var(--orange);

							background: var(--bg);
							border-color: var(--border);
						}

						&.inprogress {
							--bg: var(--light-orange);
							--border: var(--orange);

							background: var(--bg);
							border-color: var(--border);
						}

						&.none {
							--bg: transparent;
							--border: #24242366;

							background: var(--bg);
							border-color: var(--border);
							border: none;
						}
					}

					/*
					 * Add an arrow when a completed or in-progress
					 * phase is followed by an empty phase.
					 */
					&.complete:has(+ .phase .status.none),
					&.inprogress:has(+ .phase .status.none) {
						flex: 0 0 calc(20% - 6px);

						& span.status {
							&.inprogress::after,
							&.complete::after {
								content: "";
								position: absolute;
								top: 50%;
								right: -3px;
								width: 18px;
								height: calc(100% + 6px);
								background: var(--bg);
								border-top: 1px solid var(--border);
								border-right: 1px solid var(--border);
								transform: translateY(-50%) rotate(45deg);
								z-index: 1;
							}
						}
					}

					/*
					 * Add space to the label following an arrow.
					 */
					&.complete:has(+ .phase .status.none) + .phase .label,
					&.inprogress:has(+ .phase .status.none) + .phase .label {
						padding-left: 6px;
					}

					/*
					 * Keep Preclinical left-aligned.
					 */
					&:first-child {
						& span.label {
							text-align: left;
						}
					}

					/*
					 * Right-align Approved and show its arrow when
					 * complete or in progress.
					 */
					&:last-child {
						& span.label {
							text-align: right;
						}

						& span.status {
							border-right: 1px solid;
							border-color: var(--border);
							border-right: none;
						}

						& span.status.inprogress,
						& span.status.complete {
							width: calc(100% - 6px);

							&::after {
								content: "";
								position: absolute;
								top: 50%;
								right: -4px;
								width: 18px;
								height: calc(100% + 6px);
								background: var(--bg);
								border-top: 1px solid var(--border);
								border-right: 1px solid var(--border);
								transform: translateY(-50%) rotate(45deg);
								z-index: 1;
							}
						}
					}
				}
			}

			/*
			 * New continuous progress bar.
			 * The ACF Pipeline Progress value controls its width.
			 */
			& .pipeline-block__progress {
				position: relative;
				width: 100%;
				height: 14px;
				margin-top: 14px;
				border: none;
				overflow: visible;

				@media screen and (max-width: 1100px) {
					margin-top: 8px;
				}
			}

			& .pipeline-block__progress-fill {
				display: block;
				width: var(--pipeline-progress, 0%);
				height: 14px;
				background: var(--orange);
				border: none;

					@media screen and (max-width: 1100px) {
							width: var(
								--pipeline-progress-mobile,
								var(--pipeline-progress, 0%)
							);
						}

				/*
				 * Creates the point at the selected percentage.
				 */
				clip-path: polygon(
					0 0,
					calc(100% - 8px) 0,
					100% 50%,
					calc(100% - 8px) 100%,
					0 100%
				);
			}
		}

		& .pipeline-block__copy {
			max-width: 890px;

			p.small {
				letter-spacing: 0;
			}
		}
	}
}