/*
 * Partner - Requirements.
 *
 * Read from cp-all-designer join-business/store-business-partner/index.html:61-178
 * and css/app.css:3696-3919, 4059-4063, 4074-4079, 4315-4344.
 *
 * Colour, type, padding, corners and the spaces between the parts arrive from
 * the Style tab and are not repeated here.
 */

.custom-partner-requirements {
	--custom-requirements-icon: #50A3D5;
	--custom-requirements-icon-on: #16418C;
	--custom-requirements-paper: rgba(255, 255, 255, 0.06);
	--custom-requirements-paper-edge: rgba(255, 255, 255, 0.12);
	--custom-requirements-paper-on: rgba(255, 255, 255, 0.1);
	--custom-requirements-paper-edge-on: rgba(80, 163, 213, 0.5);
}

/* app.css:3703 */
.custom-partner-requirements .custom-partner-requirements__blocks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ */
/* A block's header line — app.css:3707-3713                           */
/* ------------------------------------------------------------------ */

.custom-partner-requirements .custom-partner-requirements__block-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.custom-partner-requirements .custom-partner-requirements__block-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;                      /* app.css:174 body, which the design leaves it to */
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.custom-partner-requirements .custom-partner-requirements__block-rule {
	flex: 1 1 auto;
	height: 2px;                           /* app.css:3712 measures 1px */
}

.custom-partner-requirements .custom-partner-requirements__count {
	flex: 0 0 auto;
	font-family: inherit;
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* The conditions — app.css:3726-3793                                  */
/* ------------------------------------------------------------------ */

.custom-partner-requirements .custom-partner-requirements__conditions {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

/* app.css:3731-3734 — the figure is stretched by the row, so the picture ends level with the list */
.custom-partner-requirements .custom-partner-requirements__figure {
	position: relative;
	min-height: 340px;
	margin: 0;
	overflow: hidden;
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:146 */
}

.custom-partner-requirements .custom-partner-requirements__picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.custom-partner-requirements .custom-partner-requirements__picture > img,
.custom-partner-requirements .custom-partner-requirements__picture > video {
	object-position: center 32%;           /* app.css:3738 */
}

/* app.css:3742-3748 — the caption rides a scrim, not a bar */
.custom-partner-requirements .custom-partner-requirements__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	margin: 0;
	background: linear-gradient(to top, rgba(14, 30, 84, 0.88) 0%, rgba(14, 30, 84, 0.55) 45%, rgba(14, 30, 84, 0) 100%);
	font-family: inherit;
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0;
	pointer-events: none;
}

.custom-partner-requirements .custom-partner-requirements__list {
	display: grid;
	align-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* app.css:3753-3759 — each line waits its turn to come up */
.custom-partner-requirements .custom-partner-requirements__condition {
	display: flex;
	align-items: center;
	margin: 0;
	border-bottom-width: 2px;              /* app.css:3756 measures 1px */
	border-bottom-style: solid;
	list-style: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--custom-requirements-wait, 0ms),
	            transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--custom-requirements-wait, 0ms),
	            color 300ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--custom-requirements-wait, 0ms);
}

.custom-partner-requirements .custom-partner-requirements__condition:last-child {
	border-bottom-width: 0;
}

.custom-partner-requirements .custom-partner-requirements__block.is-in .custom-partner-requirements__condition {
	opacity: 1;
	transform: translateY(0);
}

/* app.css:3785 — a line answers the pointer at once, and steps in from the rule */
.custom-partner-requirements .custom-partner-requirements__block.is-in .custom-partner-requirements__condition:hover {
	transform: translateX(6px);
	transition-delay: 0s;
}

/* app.css:3761-3766 */
.custom-partner-requirements .custom-partner-requirements__condition-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	color: var(--custom-requirements-icon);
	line-height: 1;
	transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-partner-requirements .custom-partner-requirements__condition-icon svg {
	display: block;
}

.custom-partner-requirements .custom-partner-requirements__condition:hover .custom-partner-requirements__condition-icon {
	color: var(--custom-requirements-icon-on);
}

.custom-partner-requirements .custom-partner-requirements__condition-words {
	min-width: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* The papers — app.css:3822-3905                                      */
/* ------------------------------------------------------------------ */

.custom-partner-requirements .custom-partner-requirements__block--papers {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	overflow: hidden;
}

/* three lights on the panel, each one of the brand's own colours */
.custom-partner-requirements .custom-partner-requirements__block--papers::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background:
		radial-gradient(46% 130% at 2% -14%, rgba(80, 163, 213, 0.3), transparent 100%),
		radial-gradient(44% 120% at 52% 118%, rgba(92, 161, 63, 0.2), transparent 100%),
		radial-gradient(44% 130% at 100% -12%, rgba(206, 41, 41, 0.2), transparent 100%);
	pointer-events: none;
}

/* app.css:3845-3849 — four across: a pack to gather, not a sequence to walk */
.custom-partner-requirements .custom-partner-requirements__papers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* app.css:3850-3858 */
.custom-partner-requirements .custom-partner-requirements__paper {
	--custom-requirements-inset: 26px;
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--custom-requirements-paper-edge);   /* app.css:3855 measures 1px */
	border-radius: 14px;                   /* --r, app.css:141 */
	background-color: var(--custom-requirements-paper);
	list-style: none;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* app.css:3861-3867 — the well the mark stands in, centred on it whatever the padding */
.custom-partner-requirements .custom-partner-requirements__paper::before {
	content: "";
	position: absolute;
	top: calc(var(--custom-requirements-inset) - 14px);
	left: calc(var(--custom-requirements-inset) - 14px);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba(80, 163, 213, 0.16);
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-partner-requirements .custom-partner-requirements__paper-icon {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	line-height: 1;
}

.custom-partner-requirements .custom-partner-requirements__paper-icon svg {
	display: block;
}

.custom-partner-requirements .custom-partner-requirements__paper-words {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
}

/* app.css:3890-3895 — pushed to the floor, so the papers keep one baseline */
.custom-partner-requirements .custom-partner-requirements__paper-tag {
	align-self: flex-start;
	margin-top: auto;
	padding: 4px 12px;
	border-width: 2px;                     /* app.css:3893 measures 1px */
	border-style: solid;
	border-radius: 1000px;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
}

/* app.css:3900-3905 — the paper lifts, and the well opens out under the mark */
.custom-partner-requirements .custom-partner-requirements__paper:hover {
	border-color: var(--custom-requirements-paper-edge-on);
	background-color: var(--custom-requirements-paper-on);
	transform: translateY(-4px);
}

.custom-partner-requirements .custom-partner-requirements__paper:hover::before {
	background-color: rgba(80, 163, 213, 0.34);
	transform: scale(1.15);
}

/* ------------------------------------------------------------------ */
/* Where the design steps — 1180px (app.css:4059-4063)                 */
/* ------------------------------------------------------------------ */

/* three papers to a row would leave a runt on the second: two by two */
@media (max-width: 1180px) {
	.custom-partner-requirements .custom-partner-requirements__papers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (app.css:4315-4324, drawn at 1000)         */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the picture lies down across the head of the list */
	.custom-partner-requirements .custom-partner-requirements__conditions {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-partner-requirements .custom-partner-requirements__figure {
		min-height: 0;
		aspect-ratio: 21 / 9;
	}
	.custom-partner-requirements .custom-partner-requirements__picture > img,
	.custom-partner-requirements .custom-partner-requirements__picture > video {
		object-position: center 34%;
	}
	.custom-partner-requirements .custom-partner-requirements__paper {
		--custom-requirements-inset: 22px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (app.css:4074-4079, 4326-4344, drawn at 600)   */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-partner-requirements .custom-partner-requirements__figure {
		aspect-ratio: 16 / 10;
	}
	/* the icon holds the first line of a condition that wraps */
	.custom-partner-requirements .custom-partner-requirements__condition {
		align-items: flex-start;
	}
	.custom-partner-requirements .custom-partner-requirements__condition-icon {
		margin-top: 2px;
	}
	.custom-partner-requirements .custom-partner-requirements__papers {
		grid-template-columns: minmax(0, 1fr);
	}
	/* the rule has no slack left to fill: the count moves up beside the title */
	.custom-partner-requirements .custom-partner-requirements__block-head {
		gap: 12px;
	}
	.custom-partner-requirements .custom-partner-requirements__block-title {
		white-space: normal;
	}
	.custom-partner-requirements .custom-partner-requirements__block-rule {
		display: none;
	}
	.custom-partner-requirements .custom-partner-requirements__paper {
		--custom-requirements-inset: 20px;
	}
	/* one paper to a row: the well steps down with the mark */
	.custom-partner-requirements .custom-partner-requirements__paper::before {
		top: calc(var(--custom-requirements-inset) - 14px);
		left: calc(var(--custom-requirements-inset) - 14px);
		width: 60px;                       /* app.css:4079 measures 58px, about a 32px mark */
		height: 60px;
	}
	.custom-partner-requirements .custom-partner-requirements__paper-tag {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-partner-requirements .custom-partner-requirements__condition {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.custom-partner-requirements .custom-partner-requirements__block.is-in .custom-partner-requirements__condition:hover {
		transform: none;
	}
	.custom-partner-requirements .custom-partner-requirements__condition-icon,
	.custom-partner-requirements .custom-partner-requirements__paper,
	.custom-partner-requirements .custom-partner-requirements__paper::before {
		transition: none;
	}
	.custom-partner-requirements .custom-partner-requirements__paper:hover,
	.custom-partner-requirements .custom-partner-requirements__paper:hover::before {
		transform: none;
	}
}