/* =========================================================================
   usp.css — the four-promise band.

   A navy slab, like the band it replaces, because that is the anchor at the
   foot of a white page and the client's own design put it there. Everything
   inside it is different.

   THE THREE ACCENT COLOURS ARE DECLARED HERE AND NOWHERE ELSE. Green, amber
   and coral appear on exactly four small shapes on this page and are scoped to
   this file so they cannot leak into a component that has no business with
   them. They are not tokens; a token is an invitation.
   ========================================================================= */

.bedi-usp {
	margin-block: var(--bedi-space-8);
}

.bedi-usp__slab {
	background-color: var(--bedi-navy);
	border-radius: var(--bedi-radius-2xl);
	/*
	 * Two very soft washes of light under the content, one from each end. A
	 * flat navy rectangle at this size reads as a hole in the page; these give
	 * it a surface without putting a gradient anywhere you can point at.
	 */
	background-image:
		radial-gradient(60% 120% at 12% 0%, rgba(45, 129, 255, 0.28), transparent 60%),
		radial-gradient(50% 110% at 92% 100%, rgba(45, 129, 255, 0.18), transparent 60%);
	overflow: clip;
	padding: var(--bedi-space-7) var(--bedi-space-6);
	position: relative;
}

.bedi-usp__grid {
	display: grid;
	gap: var(--bedi-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-usp__item {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	min-inline-size: 0;
	padding-block: var(--bedi-space-2);
	position: relative;
}

/*
 * A HAIRLINE BETWEEN THE FOUR, DRAWN AS A GRADIENT RATHER THAN A BORDER.
 *
 * A solid 1px rule on navy is either invisible or a scratch. This fades in at
 * the ends, so it separates the columns in the middle where they touch and
 * disappears where it would otherwise collide with the slab's rounded corner.
 */
.bedi-usp__item + .bedi-usp__item::before {
	background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
	content: "";
	inline-size: 1px;
	inset-block: 0;
	inset-inline-start: calc(var(--bedi-space-5) / -2);
	position: absolute;
}

/* --- the art ---------------------------------------------------------- */

.bedi-usp__art {
	align-items: center;
	block-size: 64px;
	color: var(--bedi-accent);
	display: inline-flex;
	flex: none;
	inline-size: 64px;
	justify-content: center;
	position: relative;
}

/*
 * The glow. Sized in percentages of the 64px box so it scales with it, and
 * painted behind the glyph rather than under the whole tile — it is a light
 * source for the icon, not a background for the column.
 */
.bedi-usp__art::before {
	background-image: radial-gradient(closest-side, rgba(45, 129, 255, 0.38), transparent);
	block-size: 130%;
	content: "";
	inline-size: 130%;
	inset-block-start: -15%;
	inset-inline-start: -15%;
	position: absolute;
	transition: opacity var(--bedi-dur) var(--bedi-ease-out);
}

/*
 * Each tile's glow takes the hue of its own accent mark, at a fraction of the
 * strength. It is the reason four blue-bodied icons do not read as one icon
 * repeated: the light around them differs before the detail inside them does.
 */
.bedi-usp__item[data-bedi-usp="pay"] .bedi-usp__art::before {
	background-image: radial-gradient(closest-side, rgba(34, 197, 94, 0.30), transparent);
}

.bedi-usp__item[data-bedi-usp="ship"] .bedi-usp__art::before {
	background-image: radial-gradient(closest-side, rgba(255, 176, 32, 0.30), transparent);
}

.bedi-usp__item[data-bedi-usp="care"] .bedi-usp__art::before {
	background-image: radial-gradient(closest-side, rgba(242, 68, 44, 0.26), transparent);
}

.bedi-usp__art svg {
	display: block;
	position: relative;
	transition: transform var(--bedi-dur) var(--bedi-ease-out);
}

.bedi-usp__item:hover .bedi-usp__art svg {
	transform: translateY(-3px) scale(1.04);
}

.bedi-usp__item:hover .bedi-usp__art::before {
	opacity: 1.35;
}

/* --- the words -------------------------------------------------------- */

.bedi-usp__body {
	display: grid;
	min-inline-size: 0;
	row-gap: 2px;
}

.bedi-usp__heading {
	color: #FFFFFF;
	font-size: var(--bedi-text-base);
	font-weight: 700;
	line-height: 1.3;
}

.bedi-usp__note {
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--bedi-text-sm);
	line-height: 1.35;
}

.bedi-usp__link {
	color: var(--bedi-accent);
	font-size: var(--bedi-text-sm);
	font-weight: 700;
	inline-size: fit-content;
	margin-block-start: 2px;
	text-decoration: none;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
	overflow-wrap: anywhere;
}

.bedi-usp__link:hover,
.bedi-usp__link:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- narrower ---------------------------------------------------------- */

@media (max-width: 61.9375em) {
	.bedi-usp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bedi-space-5) var(--bedi-space-6);
	}

	/* The rule only ever separates a pair now, so it goes on the odd columns. */
	.bedi-usp__item + .bedi-usp__item::before { content: none; }

	.bedi-usp__item:nth-child(even)::before {
		background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
		content: "";
		inline-size: 1px;
		inset-block: 0;
		inset-inline-start: calc(var(--bedi-space-6) / -2);
		position: absolute;
	}
}

@media (max-width: 47.9375em) {
	.bedi-usp {
		margin-block: var(--bedi-space-6);
	}

	.bedi-usp__slab {
		padding: var(--bedi-space-5) var(--bedi-space-4);
	}

	/*
	 * One per row on a phone. Two columns of a 48px icon plus two lines of
	 * Georgian is about 150px of text each, and at that width the note wraps to
	 * four lines and the promise stops being scannable — which is the only
	 * thing this band is for.
	 */
	.bedi-usp__grid {
		gap: var(--bedi-space-4);
		grid-template-columns: minmax(0, 1fr);
	}

	.bedi-usp__item:nth-child(even)::before { content: none; }

	/* A hairline BETWEEN stacked rows instead, now that they are stacked. */
	.bedi-usp__item + .bedi-usp__item {
		border-block-start: 1px solid rgba(255, 255, 255, 0.12);
		padding-block-start: var(--bedi-space-4);
	}

	.bedi-usp__art {
		block-size: 52px;
		inline-size: 52px;
	}

	.bedi-usp__art svg {
		block-size: 40px;
		inline-size: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-usp__art svg,
	.bedi-usp__art::before,
	.bedi-usp__link { transition: none; }

	.bedi-usp__item:hover .bedi-usp__art svg { transform: none; }
}