/*
 * Policy - Intro.
 *
 * Read from cp-all-designer css/about-us-policy.css (.poin) and the tokens of
 * css/app.css it uses.
 *
 * What the Style tab sets arrives through the widget's selectors; a size
 * left empty there scales with the window the way the design's does,
 * through the two numbers below (app.css:127-128, 2889-2900).
 */

.custom-policy-intro {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
	--custom-pad: 90px;
	--custom-rhythm: min(clamp(52px, calc(8.6 * var(--custom-vwu)), 160px), calc(13.7 * var(--custom-vhu)));
	--custom-gap: min(clamp(32px, calc(4.5 * var(--custom-vwu)), 64px), calc(4.4 * var(--custom-vhu)));
	--custom-pair-gap: clamp(28px, calc(3.6 * var(--custom-vwu)), 60px);
	--custom-curl: clamp(56px, calc(6 * var(--custom-vwu)), 96px);
	--custom-curl-sm: clamp(30px, calc(3.2 * var(--custom-vwu)), 50px);
	--custom-sh: 0 18px 44px -14px rgba(22, 65, 140, 0.2);
	--custom-sh-lg: 0 34px 80px -20px rgba(22, 65, 140, 0.3);
	--custom-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	/* app.css:385-389 .sec--rhythm, .container --pad */
	padding: var(--custom-rhythm) var(--custom-pad);
	letter-spacing: normal;
	background-color: #FFFFFF;
	text-align: left;
}

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

.custom-policy-intro *,
.custom-policy-intro *::before,
.custom-policy-intro *::after {
	box-sizing: border-box;
}

.custom-policy-intro .nb {
	white-space: nowrap;
}

/* app.css:350-360 .sec — a band shorter than the screen fills it and centres
   its content, above 1024px (app.css:2854 releases the rule below) */
.custom-policy-intro--fill {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
}

@media (max-width: 1024px) {
	.custom-policy-intro--fill { min-height: 0; }
}

.custom-policy-intro__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: var(--custom-pair-gap);
	align-items: center;
	width: 100%;
}

.custom-policy-intro__copy {
	position: relative;
	z-index: 2;
	max-width: 690px;
}

.custom-policy-intro__p {
	margin: 0 0 clamp(22px, calc(2.4 * var(--custom-vwu)), 32px);
	font-size: clamp(16px, calc(1.25 * var(--custom-vwu)), 18px);
	font-weight: 300;
	line-height: 2;
	color: #475569;
}

.custom-policy-intro__p:last-of-type {
	margin-bottom: 0;
}

/* the brand's outlined leaf in two corners — about-us-policy.css .poin__leaf */
.custom-policy-intro__leaf {
	position: absolute;
	z-index: 0;
	height: auto;
	pointer-events: none;
}

.custom-policy-intro__leaf--a {
	top: -40px;
	left: -56px;
	width: clamp(110px, calc(11 * var(--custom-vwu)), 165px);
	opacity: 0.16;
	color: #081F57;
}

.custom-policy-intro__leaf--b {
	right: -70px;
	bottom: -90px;
	width: clamp(190px, calc(21 * var(--custom-vwu)), 300px);
	opacity: 0.22;
	color: #00428F;
	transform: rotate(180deg);
}

/* the photographs, placed as shares of one 5:4 box so the overlap holds at every width */
.custom-policy-intro__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 5 / 4;
}

.custom-policy-intro__ph {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 6px solid #FFFFFF;
	border-radius: var(--custom-curl-sm) 0 var(--custom-curl-sm) 0;
	background: #E8F4FB;
	box-shadow: 0 20px 44px -18px rgba(22, 65, 140, 0.42);
	transition: width 0.45s var(--custom-ease), height 0.45s var(--custom-ease);
}

.custom-policy-intro__ph--lg { left: 0; bottom: 0; z-index: 2; width: 73%; height: 74%; }

.custom-policy-intro__ph--sm {
	right: 0;
	top: 0;
	z-index: 1;
	width: 50%;
	height: 46%;
	box-shadow: var(--custom-sh-lg);
}

.custom-policy-intro__ph img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

@media (hover: hover) {
	.custom-policy-intro__media--swap:has(.custom-policy-intro__ph--sm:hover) .custom-policy-intro__ph--sm { z-index: 3; width: 73%; height: 74%; }
	.custom-policy-intro__media--swap:has(.custom-policy-intro__ph--sm:hover) .custom-policy-intro__ph--lg { width: 50%; height: 46%; }
	.custom-policy-intro__media--swap:has(.custom-policy-intro__ph--lg:hover) .custom-policy-intro__ph--lg { z-index: 3; }
}

.custom-policy-intro__ph.is-empty {
	background:
		radial-gradient(90% 80% at 24% 16%, rgba(80, 163, 213, 0.34) 0%, rgba(80, 163, 213, 0) 64%),
		linear-gradient(150deg, #F0F9FD 0%, #CCDAF2 100%);
}

@media (max-width: 1080px) {
	.custom-policy-intro__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, calc(4 * var(--custom-vwu)), 44px); }
	.custom-policy-intro__copy { order: -1; }
	.custom-policy-intro__media { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
	.custom-policy-intro__leaf--a { top: -30px; left: -38px; }
	.custom-policy-intro__leaf--b { right: -48px; bottom: -62px; }
}

@media (max-width: 620px) {
	.custom-policy-intro__ph { border-width: 4px; box-shadow: 0 12px 26px -14px rgba(22, 65, 140, 0.4); }
	.custom-policy-intro__ph--sm { box-shadow: 0 14px 30px -12px rgba(22, 65, 140, 0.46); }
}

@media (prefers-reduced-motion: reduce) {
	.custom-policy-intro__ph { transition: none; }
}