/*
 * "Fits your workflow" - a purple panel over three frosted delivery cards.
 *
 * Measured off the 1440px frame: a 1280-wide panel on primary-light, ~54px
 * inner padding, three ~376px cards with a 24px gutter.
 */

.workflow {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.workflow__panel {
	position: relative;
	overflow: hidden;
	padding:
		clamp(var(--space-32), 7.9vw, 114px)
		clamp(var(--space-24), 3.75vw, 54px)
		clamp(var(--space-32), 7.8vw, 112px);
	border-radius: var(--radius-2xl);
	background: var(--color-primary-light);
	color: var(--color-text-inverse);
}

/* Brand X watermark. Fitted against the export: 75% of the panel wide, waist
   sitting over the right-hand card, white at 10%, bleeding off the right. */
.workflow__panel::before {
	content: "";
	position: absolute;
	top: -2.6%;
	left: 48.6%;
	width: 75%;
	aspect-ratio: 917 / 792;
	background: var(--workflow-x) center / contain no-repeat;
	opacity: 0.1;
	pointer-events: none;
}

.workflow__head,
.workflow__grid {
	position: relative;
	z-index: 1;
}

.workflow__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	margin-bottom: var(--space-64);
}

.workflow__title {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1.37;
	color: var(--color-text-inverse);
}

.workflow__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding-inline: var(--space-32);
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: var(--radius-full);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-body);
	text-decoration: none;
	transition: background var(--transition);
}

.workflow__cta:hover {
	background: rgb(255 255 255 / 14%);
}

/* --- Cards ---------------------------------------------------------------- */

.workflow__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-24);
}

.workflow-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-42) var(--space-24);
	border-radius: var(--radius-lg);
	/* Frosted, not tinted: white at 48% over the panel gives the design's
	   #C29FD5 and lets the X watermark read faintly through. */
	background: rgb(255 255 255 / 48%);
}

.workflow-card__media {
	display: block;
	aspect-ratio: 326 / 142;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.workflow-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.workflow-card__title {
	margin: var(--space-16) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: 1.2;
}

/* Dark on the light card, per the design - the panel's inverse colour does not
   carry into the frosted cards. */
.workflow-card__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-primary);
}

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

@media (max-width: 900px) {
	.workflow__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.workflow__grid {
		grid-template-columns: 1fr;
	}

	/* The mark reads as a full-bleed watermark at this width, not a corner
	   flourish. */
	.workflow__panel::before {
		top: -4%;
		left: 12%;
		width: 130%;
	}
}