/* USP Grid - repeating items (icon or image, title, text, optional link) in a style variant.
   Columns come from the module (--usp-cols); tablets show at most 2, phones 1. */

div.usp-grid {
	--usp-cols-now: var(--usp-cols, 3);
}
@media screen and (max-width: 1024px) {
	div.usp-grid {
		--usp-cols-now: min(var(--usp-cols, 3), 2);
	}
}
@media screen and (max-width: 768px) {
	div.usp-grid {
		--usp-cols-now: 1;
	}
}


/* ---- Default (the original look) ---- */

div.usp-grid.usp-grid--default {
	display: grid;
	grid-template-columns: repeat(var(--usp-cols, 3), 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
}

div.usp-grid.usp-grid--default div.usp-grid-item {
	border-radius: var(--border-radius);
	background: var(--wp--preset--color--wpbf-palette-color-2);
	padding: 2.5rem;
	display: flex;
	flex-flow: column nowrap;
}

div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header img {
	width: 3.75rem;
	margin: 0;
	display: block;
}
div.usp-grid.usp-grid--default .usp-item-icon .md-icon {
	width: 3.75rem;
	height: 3.75rem;
	color: var(--wp--preset--color--wpbf-palette-color-4);
}

div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header .usp-item-title {
	color: var(--wp--preset--color--wpbf-palette-color-4);
	width: 100%;
	text-align: left;
	margin: 0 0 0.75rem;
}

div.usp-grid.usp-grid--default div.usp-grid-item > div {
	color: var(--wp--preset--color--wpbf-palette-color-1);
	font-size: var(--text-size-100);
}

div.usp-grid.usp-grid--default div.usp-grid-item > div > a {
	text-decoration: underline;
	transition: text-decoration 0.3s ease-in-out;
}
div.usp-grid.usp-grid--default div.usp-grid-item > div > a:hover {
	color: var(--wp--preset--color--wpbf-palette-color-3);
	text-decoration-color: var(--wp--preset--color--wpbf-palette-color-8);
	text-decoration-thickness: 15%;
}
div.usp-grid.usp-grid--default .usp-item-link {
	margin-top: 1.5rem;
}

@media screen and (max-width: 1200px) {
	div.usp-grid.usp-grid--default {
		grid-column-gap: 2.5rem;
	}
}

@media screen and (max-width: 960px) {
	div.usp-grid.usp-grid--default {
		grid-column-gap: 1rem;
	}

	div.usp-grid.usp-grid--default div.usp-grid-item {
		padding: 1.5rem;
	}
}
@media screen and (max-width: 800px) {
	div.usp-grid.usp-grid--default {
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 1.5rem;
	}
	div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
	}

	div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header > h2,
	div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header > h3 {
		width: calc(80% - 1.5rem);
		margin: 0;
	}

	div.usp-grid.usp-grid--default div.usp-grid-item .usp-item-header > img {
		margin: 0;
		width: 15%;
		height: auto;
	}

	div.usp-grid.usp-grid--default div.usp-grid-item > div {
		max-width: 100%;
	}

	div.usp-grid.usp-grid--default div.usp-grid-item {
		padding: 1.5rem;
	}
}


/* ---- Shared by the design variants ---- */

/* Card rows are flex, so a short last row is centred */
div.usp-grid:is(.usp-grid--cards-band, .usp-grid--cards-tint, .usp-grid--steps) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap-grid);
}
div.usp-grid:is(.usp-grid--cards-band, .usp-grid--cards-tint, .usp-grid--steps) > .usp-grid-item {
	flex: 0 0 calc((100% - (var(--usp-cols-now) - 1) * var(--gap-grid)) / var(--usp-cols-now));
	display: flex;
	flex-direction: column;
	min-width: 0;
}
/* Two columns and an odd number of cards: the last one takes the full row rather than sitting alone at half width */
@media screen and (min-width: 769px) {
	div.usp-grid.usp-grid--cols-2:is(.usp-grid--cards-band, .usp-grid--cards-tint, .usp-grid--steps) > .usp-grid-item:last-child:nth-child(odd) {
		flex-basis: 100%;
	}
}

/* Titles and text (two classes + :not() beat the theme's light-text rule on blue rows) */
div.usp-grid:not(.usp-grid--default) .usp-item-title {
	margin: 0;
	text-align: left;
	color: var(--wp--preset--color--wpbf-palette-color-3);
}
div.usp-grid:not(.usp-grid--default) .usp-item-content {
	font-size: var(--text-size-100);
	line-height: 1.7;
	color: var(--wp--preset--color--wpbf-palette-color-1);
}
div.usp-grid:not(.usp-grid--default) .usp-item-content p {
	margin: 0 0 1.5rem;
}
div.usp-grid:not(.usp-grid--default) .usp-item-content p:last-child {
	margin-bottom: 0;
}
div.usp-grid:not(.usp-grid--default) .usp-item-content strong {
	font-weight: 600;
}

/* Icon holder - the icon itself is a mask painted with the Blue Grad */
div.usp-grid .usp-item-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}
div.usp-grid:not(.usp-grid--default) .usp-item-icon .md-icon {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--gradient-accent);
}

div.usp-grid .usp-item-link {
	align-self: flex-start;
}


/* ---- Cards - light blue header band, icon in a white circle ---- */

div.usp-grid.usp-grid--cards-band > .usp-grid-item {
	overflow: hidden;
	padding-bottom: 2.5rem;
	border-radius: var(--border-radius);
	background: var(--wp--preset--color--wpbf-palette-color-2);
	box-shadow: var(--shadow-card);
}
div.usp-grid.usp-grid--cards-band .usp-item-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 2.5rem;
	background: var(--wp--preset--color--wpbf-palette-color-5);
}
div.usp-grid.usp-grid--cards-band .usp-item-icon {
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--wpbf-palette-color-2);
	box-shadow: var(--shadow-card);
}
div.usp-grid.usp-grid--cards-band .usp-item-content {
	padding: 2.5rem 2.5rem 0;
}
div.usp-grid.usp-grid--cards-band .usp-item-link {
	margin: 2rem 2.5rem 0;
}


/* ---- Cards - pale gradient, icon in a white tile beside the title ---- */

div.usp-grid.usp-grid--cards-tint > .usp-grid-item {
	gap: 1.5rem;
	padding: 2rem;
	border: 2px solid var(--wp--preset--color--wpbf-palette-color-5);
	border-radius: var(--border-radius-small);
	background: var(--gradient-tint);
}
div.usp-grid.usp-grid--cards-tint .usp-item-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
div.usp-grid.usp-grid--cards-tint .usp-item-icon {
	width: 4.625rem;
	height: 4.625rem;
	border-radius: var(--border-radius-small);
	background: var(--wp--preset--color--wpbf-palette-color-2);
}


/* ---- Steps - numbered white cards, icon in a gradient circle over the top edge ---- */

div.usp-grid.usp-grid--steps {
	counter-reset: usp-step;
	/* room for the circles that sit over each card's top edge */
	padding-top: 2rem;
	row-gap: calc(var(--gap-grid) + 2rem);
}
div.usp-grid.usp-grid--steps > .usp-grid-item {
	position: relative;
	counter-increment: usp-step;
	gap: 1rem;
	padding: 3.5rem 2rem 2rem;
	border-radius: var(--border-radius-small);
	background: var(--wp--preset--color--wpbf-palette-color-2);
	box-shadow: var(--shadow-card);
}
div.usp-grid.usp-grid--steps .usp-item-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* "Step 01" - the design's Caption style */
div.usp-grid.usp-grid--steps .usp-item-header::before {
	content: "Step " counter(usp-step, decimal-leading-zero);
	font-family: var(--font-head);
	font-size: var(--text-size-90);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wpbf-palette-color-6);
}
div.usp-grid.usp-grid--steps .usp-item-icon {
	position: absolute;
	top: -2rem;
	left: 2rem;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--gradient-accent);
}
div.usp-grid.usp-grid--steps .usp-item-icon .md-icon {
	width: 2rem;
	height: 2rem;
	background: var(--wp--preset--color--wpbf-palette-color-2);
}


/* ---- List - icon tile beside title and text, with a hairline under each ---- */

div.usp-grid.usp-grid--list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
div.usp-grid.usp-grid--list > .usp-grid-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 2rem;
	row-gap: 0.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--wpbf-palette-color-5);
}
div.usp-grid.usp-grid--list > .usp-grid-item:not(:has(.usp-item-icon)) {
	column-gap: 0;
}
div.usp-grid.usp-grid--list .usp-item-header {
	display: contents;
}
div.usp-grid.usp-grid--list .usp-item-icon {
	grid-column: 1;
	grid-row: 1 / span 3;
	width: 4.625rem;
	height: 4.625rem;
	border-radius: var(--border-radius-small);
	background: var(--wp--preset--color--wpbf-palette-color-5);
}
div.usp-grid.usp-grid--list :is(.usp-item-title, .usp-item-content, .usp-item-link) {
	grid-column: 2;
}


/* ---- Phones ---- */

@media screen and (max-width: 768px) {
	div.usp-grid.usp-grid--cards-band .usp-item-header {
		padding: 1.25rem 1.5rem;
	}
	div.usp-grid.usp-grid--cards-band .usp-item-content {
		padding: 1.5rem 1.5rem 0;
	}
	div.usp-grid.usp-grid--cards-band .usp-item-link {
		margin: 1.5rem 1.5rem 0;
	}
	div.usp-grid.usp-grid--cards-band > .usp-grid-item {
		padding-bottom: 1.5rem;
	}
	div.usp-grid.usp-grid--cards-tint > .usp-grid-item {
		padding: 1.5rem;
	}
	/* Steps - the circle comes out of its overhang and sits beside the step number
	   and title, which takes a lot of height out of each card */
	div.usp-grid.usp-grid--steps {
		padding-top: 0;
		row-gap: var(--gap-grid);
	}
	div.usp-grid.usp-grid--steps > .usp-grid-item {
		padding: 1.5rem;
	}
	div.usp-grid.usp-grid--steps .usp-item-header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 1rem;
		row-gap: 0.25rem;
	}
	div.usp-grid.usp-grid--steps .usp-item-icon {
		position: static;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 3.5rem;
		height: 3.5rem;
	}
	div.usp-grid.usp-grid--steps .usp-item-header::before {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}
	div.usp-grid.usp-grid--steps .usp-item-title {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	/* List - the text drops below the icon and title so it gets the full width */
	div.usp-grid.usp-grid--list > .usp-grid-item {
		column-gap: 1.25rem;
	}
	div.usp-grid.usp-grid--list .usp-item-icon {
		grid-row: 1;
		align-self: center;
	}
	div.usp-grid.usp-grid--list .usp-item-title {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}
	div.usp-grid.usp-grid--list :is(.usp-item-content, .usp-item-link) {
		grid-column: 1 / -1;
	}
	div.usp-grid:is(.usp-grid--cards-band, .usp-grid--list) .usp-item-icon,
	div.usp-grid.usp-grid--cards-tint .usp-item-icon {
		width: 3.5rem;
		height: 3.5rem;
	}
	div.usp-grid:not(.usp-grid--default, .usp-grid--steps) .usp-item-icon .md-icon {
		width: 2rem;
		height: 2rem;
	}
}