/*
 * Business - Groups.
 *
 * Read from cp-all-designer css/business.css §02-§07 (.bizgp, .bzp) and
 * js/business.js:156-206. What the Style tab sets arrives through the
 * widget's selectors, most of it as custom properties the rules below read.
 *
 * Tiers: mobile up to 767px, tablet 768-1024px, desktop 1025px and up; the
 * arrow also steps at the design's own 860px and 620px.
 */

/* business.css:115-139 — no section air: the panels sit flush against each
   other, against the intro above and the footer below */
.custom-business-groups {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
}

/* The design scales most sizes with the window through app.css's --vwu
   (1% of 1440, stepping at 1280 / 1200 / 1024 / 860 / 640 / 380) and
   --vhu (1% of the window height, capped per step). The same two numbers
   live here, so a size left empty in the Style tab scales the way the
   design's does; a value typed there wins at every width. */
.custom-business-groups__list {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
	--custom-bzp-pad: 90px;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ */
/* The panel — business.css:149-200                                    */
/* ------------------------------------------------------------------ */

.custom-business-groups__panel {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	/* business.css:151 clamp(360, 48*vhu, 560). Content longer than that —
	   eight logos on a phone — makes the panel taller rather than being cut
	   off at its top edge, as it is in the design */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(360px, calc(48 * var(--custom-vhu)), 560px);
	background: linear-gradient(180deg, var(--custom-bzp-from, #FFFFFF) 0%, var(--custom-bzp-to, #F0F9FD) 100%);
}

.custom-business-groups__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.custom-business-groups__bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--custom-bzp-focus, 50% 50%);
	opacity: 0;
	transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* business.css:177-189 — the navy wash from the left edge, gone by 72%, so
   the right side shows the photo's own colours */
.custom-business-groups__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--custom-bzp-shade, #0E1E54) 90%, transparent) 0%,
		color-mix(in srgb, var(--custom-bzp-shade, #0E1E54) 80%, transparent) 36%,
		color-mix(in srgb, var(--custom-bzp-shade, #0E1E54) 50%, transparent) 56%,
		transparent 72%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* only a device with real hover gets the photo — a touch screen keeps the
   resting gradient, as the design does (business.css:191) */
@media (hover: hover) {
	.custom-business-groups__panel:hover .custom-business-groups__bg img,
	.custom-business-groups__panel:focus-within .custom-business-groups__bg img,
	.custom-business-groups__panel:hover::after,
	.custom-business-groups__panel:focus-within::after {
		opacity: 1;
	}

	.custom-business-groups__panel:hover .custom-business-groups__title,
	.custom-business-groups__panel:focus-within .custom-business-groups__title {
		color: var(--custom-bzp-title-hover, #FFFFFF);
		text-shadow: 0 2px 12px rgba(14, 30, 84, 0.55);
	}
}

/* business.css:200-209 — the room on the right is the arrow's lane, so the
   name and the logo row never run under it: clamp(70, 7*vwu, 100) */
.custom-business-groups__content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	--custom-bzp-y: var(--custom-bzp-pad-y, clamp(28px, calc(3.2 * var(--custom-vwu)), 48px));
	padding: var(--custom-bzp-y) calc(var(--custom-bzp-pad) + clamp(70px, calc(7 * var(--custom-vwu)), 100px)) var(--custom-bzp-y) var(--custom-bzp-pad);
}

/* business.css:210-218 */
.custom-business-groups__title {
	margin: 0 0 var(--custom-bzp-title-space, clamp(16px, calc(1.8 * var(--custom-vwu)), 24px));
	padding: 0;
	font-size: var(--custom-bzp-title-size, clamp(26px, calc(2.7 * var(--custom-vwu)), 44px));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--custom-bzp-title, #16418C);
	text-wrap: balance;
	transition: color 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------------ */
/* The logo tiles — business.css:230-261                               */
/* ------------------------------------------------------------------ */

.custom-business-groups__logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--custom-bzp-tile-gap, clamp(12px, calc(1.2 * var(--custom-vwu)), 18px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-business-groups__logo {
	display: grid;
	place-items: center;
	overflow: hidden;
	box-sizing: border-box;
	height: var(--custom-bzp-tile, clamp(76px, calc(7.2 * var(--custom-vwu)), 104px));
	margin: 0;
	padding: 0 var(--custom-bzp-tile-pad, clamp(20px, calc(2 * var(--custom-vwu)), 30px));
	border-radius: 6px;
	background: #FFFFFF;
}

.custom-business-groups__logo img {
	display: block;
	width: auto;
	max-width: 180px;
	max-height: var(--custom-bzp-mark, clamp(56px, calc(5.6 * var(--custom-vwu)), 82px));
	margin: 0;
	object-fit: contain;
}

.custom-business-groups__logo--text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* The arrow — business.css:265-294                                    */
/* ------------------------------------------------------------------ */

.custom-business-groups__arrow {
	--custom-press-ground: #50A3D5;
	--custom-press-ink: #FFFFFF;
	--custom-press-edge: transparent;
	--custom-press-shadow: 0 10px 24px rgba(80, 163, 213, 0.45);
	position: absolute;
	z-index: 3;
	top: 50%;
	right: var(--custom-bzp-pad);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--custom-bzp-arrow, clamp(56px, calc(5.4 * var(--custom-vwu)), 76px));
	height: var(--custom-bzp-arrow, clamp(56px, calc(5.4 * var(--custom-vwu)), 76px));
	border-radius: 50%;
	transform: translateY(-50%);
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-business-groups__arrow:hover {
	--custom-press-shadow: 0 16px 32px rgba(80, 163, 213, 0.55);
	transform: translateY(-50%) translateY(-4px);
}

.custom-business-groups__arrow:focus-visible {
	outline: 2px solid #16418C;
	outline-offset: 3px;
}

.custom-business-groups__arrow svg {
	display: block;
	width: 44%;
	height: 44%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-business-groups__arrow:hover svg {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Steps — app.css:2889-2900 (vwu, vhu) and business.css:332-346       */
/* ------------------------------------------------------------------ */

@media (max-width: 1280px) { .custom-business-groups__list { --custom-vwu: 12.2px; --custom-vhu: clamp(5.2px, 1svh, 8.5px); } }
@media (max-width: 1200px) { .custom-business-groups__list { --custom-vwu: 11.2px; --custom-vhu: clamp(5.2px, 1svh, 8.35px); } }
@media (max-width: 1024px) { .custom-business-groups__list { --custom-vwu: 9.2px; --custom-vhu: clamp(5.2px, 1svh, 8px); } }
@media (max-width: 860px)  { .custom-business-groups__list { --custom-vwu: 7.7px; --custom-vhu: clamp(5.2px, 1svh, 7.8px); } }
@media (max-width: 640px)  { .custom-business-groups__list { --custom-vwu: 4.2px; --custom-vhu: clamp(5.2px, 1svh, 7.6px); } }
@media (max-width: 380px)  { .custom-business-groups__list { --custom-vwu: 3.6px; --custom-vhu: clamp(5.2px, 1svh, 7.2px); } }

/* business.css:333 — the arrow's lane narrows */
@media (max-width: 860px) {
	.custom-business-groups__content {
		padding-right: calc(var(--custom-bzp-pad) + clamp(60px, calc(8 * var(--custom-vwu)), 88px));
	}
}

/* business.css:335-345 — on a phone the arrow drops under the text block */
@media (max-width: 620px) {
	.custom-business-groups__content {
		padding-right: var(--custom-bzp-pad);
		padding-bottom: 100px;
	}

	.custom-business-groups__arrow {
		top: auto;
		bottom: clamp(20px, calc(2.4 * var(--custom-vwu)), 32px);
		width: var(--custom-bzp-arrow, 56px);
		height: var(--custom-bzp-arrow, 56px);
		transform: none;
	}

	.custom-business-groups__arrow:hover {
		transform: translateY(-4px);
	}

	/* a long company name on a narrow phone wraps rather than leave the panel */
	.custom-business-groups__logo--text {
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-business-groups__bg img,
	.custom-business-groups__panel::after,
	.custom-business-groups__title,
	.custom-business-groups__arrow,
	.custom-business-groups__arrow svg {
		transition: none;
	}

	.custom-business-groups__arrow:hover {
		transform: translateY(-50%);
	}

	.custom-business-groups__arrow:hover svg {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 620px) {
	.custom-business-groups__arrow:hover {
		transform: none;
	}
}

/* the design wraps text plainly; some themes set "pretty" wrapping on
   paragraphs, which moves Thai line breaks */
.custom-business-groups p,
.custom-business-groups h2,
.custom-business-groups h3,
.custom-business-groups span {
	text-wrap: wrap;
	text-rendering: optimizeLegibility;
}

/* business.css:217 — the group name itself is balanced in the design */
.custom-business-groups .custom-business-groups__title {
	text-wrap: balance;
}