/*
 * Sustain - Framework widget.
 *
 * Read from cp-all-designer/css/sustain.css (.susfw / .susstep / .susstd
 * blocks at lines 953-1173) and sustain/index.html.
 *
 * Font sizes and colours are controlled from the Elementor Style tab and
 * written into the element via `selectors`. This file supplies layout,
 * spacing, and the fixed structural rules that never change per instance.
 *
 * CSS custom properties used by the Style tab:
 *   --fw-sky-from   sky top colour       on .__sky
 *   --fw-sky-to     sky bottom colour    on .__sky
 *   --fw-card-accent brand colour        on each .__card--* (via Elementor)
 */

/* ------------------------------------------------------------------ */
/* Root                                                                */
/* ------------------------------------------------------------------ */

.custom-sustain-framework {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Inner wrapper — horizontal padding (mirrors .container)             */
/* ------------------------------------------------------------------ */

/* sustain.css uses .container with --pad (90px desktop); we replicate
   the same breakpoints here so the widget works inside a full-width
   Elementor section with no outer padding. */
.custom-sustain-framework__inner {
	position: relative;
	z-index: 1;
	padding-inline: 90px;
	padding-block: clamp(52px, calc(8.6 * var(--vwu, 14.4px)), 160px);
}

@media (max-width: 1024px) {
	.custom-sustain-framework__inner {
		padding-inline: 40px;
	}
}

@media (max-width: 640px) {
	.custom-sustain-framework__inner {
		padding-inline: 24px;
	}
}

/* ------------------------------------------------------------------ */
/* Sky background                                                       */
/* ------------------------------------------------------------------ */

/* sustain.css:960 — gradient covers the full section (design uses a 4-stop
   linear gradient so the transition is gentler than a 2-stop; the radial
   blue overlay at top-left is handled by the glow-blue span below).
   --fw-sky-from / --fw-sky-to are set by Elementor's selectors. */
.custom-sustain-framework__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		168deg,
		var(--fw-sky-from, #E3F1FA) 0%,
		#EFF7FC 34%,
		#F7FBFE 66%,
		var(--fw-sky-to, #FFFFFF) 100%
	);
}

/* sustain.css:961-963 — the two blurred glow discs; their background is
   written by Elementor (radial-gradient with the user-chosen colour).
   Position and size are structural and stay here. */
.custom-sustain-framework__glow-blue,
.custom-sustain-framework__glow-green {
	position: absolute;
	display: block;
	border-radius: 50%;
	/* fallback background — Elementor's selector overwrites it */
	background: transparent;
}

.custom-sustain-framework__glow-blue {
	width: 720px;
	height: 720px;
	top: -260px;
	left: -180px;
	background: radial-gradient(ellipse, rgba(80, 163, 213, 0.22) 0%, transparent 70%);
}

.custom-sustain-framework__glow-green {
	width: 620px;
	height: 620px;
	top: 40px;
	right: -220px;
	background: radial-gradient(ellipse, rgba(92, 161, 63, 0.14) 0%, transparent 70%);
}

/* ------------------------------------------------------------------ */
/* Section heading                                                      */
/* ------------------------------------------------------------------ */

.custom-sustain-framework__head {
	position: relative;
	z-index: 2;
	text-align: center;
}

.custom-sustain-framework__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

/* home-sustainability.css:114-131 pattern — italic + bold + soft
   highlight bar; colour comes from the Style tab (title_accent). */
.custom-sustain-framework__title em {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 700;
}

.custom-sustain-framework__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 6px;
	border-radius: 4px;
	background: currentColor;
	opacity: 0.18;
}

/* ------------------------------------------------------------------ */
/* Two-column grid: media left · copy right                            */
/* ------------------------------------------------------------------ */

/* sustain.css:968 */
.custom-sustain-framework__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	gap: var(--pair-gap, clamp(24px, calc(3 * var(--vwu, 14.4px)), 56px));
	align-items: center;
	position: relative;
	z-index: 2;
	margin-top: clamp(24px, calc(3 * var(--vwu, 14.4px)), 48px);
}

/* ------------------------------------------------------------------ */
/* Media column: two overlapping leaf-framed photos                    */
/* ------------------------------------------------------------------ */

/* sustain.css:977 — fixed ratio keeps the overlap composition stable. */
.custom-sustain-framework__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 5 / 4;
}

/* sustain.css:981 */
.custom-sustain-framework__shot {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--curl, 52px) 0 var(--curl, 52px) 0;
	box-shadow: var(--sh, 0 12px 36px -10px rgba(22, 65, 140, 0.22));
}

/* sustain.css:987 */
.custom-sustain-framework__shot--a {
	left: 0;
	top: 0;
	width: 73%;
	height: 74%;
}

/* sustain.css:990 — the smaller frame overlaps the larger's corner;
   a white border keeps the two readable where they meet. */
.custom-sustain-framework__shot--b {
	right: 0;
	bottom: 0;
	width: 56%;
	height: 54%;
	border-radius: var(--curl-sm, 24px) 0 var(--curl-sm, 24px) 0;
	border: 6px solid #fff;
	box-shadow: var(--sh-lg, 0 20px 60px -20px rgba(22, 65, 140, 0.32));
}

/* render_media outputs a div wrapper with the part class containing img */
.custom-sustain-framework__shot-img {
	display: block;
	width: 100%;
	height: 100%;
}

.custom-sustain-framework__shot-img > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* sustain.css:998 — CP ALL leaf watermark behind the empty corner */
.custom-sustain-framework__leaf {
	position: absolute;
	z-index: 0;
	bottom: -7%;
	right: calc(-1 * min(9%, var(--pair-gap, 40px)));
	width: 46%;
	height: auto;
	pointer-events: none;
	transform: scaleX(-1);
	fill: var(--leaf-1, #50A3D5);
	opacity: 0.22;
}

/* ------------------------------------------------------------------ */
/* Copy column: logo + three labelled paragraphs                       */
/* ------------------------------------------------------------------ */

/* sustain.css:1011 */
.custom-sustain-framework__copy {
	position: relative;
	z-index: 3;
	text-align: left;
}

/* sustain.css:1014 */
.custom-sustain-framework__logo {
	display: block;
	width: clamp(120px, calc(11 * var(--vwu, 14.4px)), 158px);
	height: auto;
	margin: 0 0 clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 34px);
}

.custom-sustain-framework__logo > img {
	display: block;
	width: 100%;
	height: auto;
}

/* sustain.css:1023 */
.custom-sustain-framework__label {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
}

/* gap between a label and the paragraph below it */
.custom-sustain-framework__copy .custom-sustain-framework__label + p,
.custom-sustain-framework__copy .h-wrap + p {
	margin-top: 10px;
}

/* gap above a label that follows a paragraph or another label —
   sustain.css:1032-1034.  Both the unwrapped element (Elementor) and
   the .h-wrap version (main.js sweep animation) are covered. */
.custom-sustain-framework__copy > p + .custom-sustain-framework__label,
.custom-sustain-framework__copy > p + .h-wrap,
.custom-sustain-framework__copy > .h-wrap + .h-wrap,
.custom-sustain-framework__copy > .h-wrap + .custom-sustain-framework__label {
	margin-top: clamp(22px, calc(2.6 * var(--vwu, 14.4px)), 38px);
}

/* the sweep wrapper that main.js injects — block so margin collapses work */
.custom-sustain-framework__copy .h-wrap {
	display: block;
}

/* ---- the three copy paragraphs ---- */

/* sustain.css:1036 */
.custom-sustain-framework__phil {
	margin: 0;
	font-weight: 300;
	line-height: 1.8;
}

/* sustain.css:1041 — ปณิธาน is the bold claim line; green by design */
.custom-sustain-framework__wish {
	margin: 0;
	font-size: clamp(22px, calc(5 * var(--vwu, 14.4px) / 3), 24px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--cp-green, #5CA13F) !important;
}

/* sustain.css:1045 */
.custom-sustain-framework__vision {
	margin: 0;
	font-weight: 300;
	line-height: 1.8;
}

/* ------------------------------------------------------------------ */
/* Mission list                                                         */
/* ------------------------------------------------------------------ */

/* sustain.css:933 .susld-subh + :942 .susld-subh--sp —
   left-aligned; margin-top equals one full section rhythm so it reads
   as the start of the next block, not a caption for the grid above. */
.custom-sustain-framework__mission-head {
	position: relative;
	z-index: 2;
	text-align: left;
	margin: var(--sec-rhythm, clamp(52px, calc(8.6 * var(--vwu, 14.4px)), 160px))
	        0
	        20px !important; /* ok-rhythm — internal section spacing, not section padding */
	font-size: 22px; /* sustain.css:933 .susld-subh — fixed 22px */
	font-weight: 600;
	line-height: 1.35;
}

/* sustain.css:1067 */
.custom-sustain-framework__steps {
	list-style: none;
	margin: 0;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, calc(2.6 * var(--vwu, 14.4px)), 40px);
	position: relative;
	z-index: 2;
}

/* sustain.css:1072 */
.custom-sustain-framework__step {
	display: flex;
	flex-direction: column;
}

/* sustain.css:1079 + sustain.css:1100 (.susld variant) —
   no step numbers on this page; min-height keeps all three description
   paragraphs starting on the same row even when a heading wraps. */
.custom-sustain-framework__step-head {
	margin: 0 0 10px;
	min-height: 3em;
	font-size: 18px; /* sustain.css:1079 .susstep__t */
	font-weight: 600;
	line-height: 1.5;
}

/* sustain.css:1083 */
.custom-sustain-framework__step-desc {
	margin: 0;
	font-size: 16px; /* sustain.css:1083 .susstep__d */
	font-weight: 300;
	line-height: 1.75;
}

/* ------------------------------------------------------------------ */
/* Standards grid: five colour-coded leaf cards                        */
/* ------------------------------------------------------------------ */

/* sustain.css:1115 — six tracks so the bottom row of two centres under
   the top row of three. */
.custom-sustain-framework__standards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(14px, calc(1.6 * var(--vwu, 14.4px)), 26px);
	margin-top: clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 36px);
	position: relative;
	z-index: 2;
}

/* sustain.css:1120 */
.custom-sustain-framework__card {
	grid-column: span 2;
}

.custom-sustain-framework__card:nth-child(4) {
	grid-column: 2 / span 2;
}

.custom-sustain-framework__card:nth-child(5) {
	grid-column: 4 / span 2;
}

/* sustain.css:1123 — --fw-card-accent (c1) and --fw-card-accent-end (c2)
   are set per card via inline style from the Repeater controls.
   Design pairs: navy #16418C→#2E6BC4 · blue #3D8CB8→#6FBDE4
                 green #3F7A2A→#7CC15C · red #A81F1F→#E04B4B */
.custom-sustain-framework__card {
	--fw-card-from: #16418C;
	--fw-card-to: #2E6BC4;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, calc(2.6 * var(--vwu, 14.4px)), 38px);
	border-radius: 48px 0 48px 0;
	background: linear-gradient(
		135deg,
		var(--fw-card-from) 0%,
		var(--fw-card-to) 100%
	);
	color: #fff;
	box-shadow:
		0 2px 6px rgba(22, 65, 140, 0.06),
		0 12px 28px -10px rgba(22, 65, 140, 0.18);
	transition:
		transform 0.35s var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
		box-shadow 0.35s var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.custom-sustain-framework__card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 3px 8px rgba(22, 65, 140, 0.08),
		0 20px 42px -14px rgba(22, 65, 140, 0.26);
}

/* sustain.css:1145 */
.custom-sustain-framework__card-icon {
	display: block;
	line-height: 0;
	color: #fff;
}

.custom-sustain-framework__card-icon > svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* sustain.css:1147 */
.custom-sustain-framework__card-title {
	margin: 0;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Tablet — 1024px and below                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* sustain.css:1053 — pictures stack above the copy column */
	.custom-sustain-framework__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, calc(4 * var(--vwu, 14.4px)), 56px);
	}

	.custom-sustain-framework__media {
		max-width: 620px;
		margin-inline: auto;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* 900px — standards drop to two rows of two                           */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* sustain.css:1153 */
	.custom-sustain-framework__standards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.custom-sustain-framework__card:nth-child(4) {
		grid-column: span 2;
	}

	.custom-sustain-framework__card:nth-child(5) {
		grid-column: 2 / span 2;
	}
}

/* ------------------------------------------------------------------ */
/* 860px — mission steps stack to a single column                      */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
	/* sustain.css:1087 */
	.custom-sustain-framework__steps {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — 640px and below                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
	/* sustain.css:1057 — simplified corners on small screens */
	.custom-sustain-framework__shot {
		border-radius: var(--curl-sm, 24px) 0 var(--curl-sm, 24px) 0;
	}

	.custom-sustain-framework__shot--b {
		border-radius: var(--r-lg, 20px) 0 var(--r-lg, 20px) 0;
	}

	/* sustain.css:1059 — watermark hides on small screens */
	.custom-sustain-framework__leaf {
		display: none;
	}

	.custom-sustain-framework__inner {
		margin-top: 52px;
		padding-block: 0;
	}

	.custom-sustain-framework__mission-head {
		margin-top: 52px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 560px and below — standards single column                           */
/* ------------------------------------------------------------------ */

@media (max-width: 560px) {
	/* sustain.css:1158 */
	.custom-sustain-framework__standards {
		grid-template-columns: minmax(0, 1fr);
	}

	.custom-sustain-framework__card,
	.custom-sustain-framework__card:nth-child(4),
	.custom-sustain-framework__card:nth-child(5) {
		grid-column: auto;
	}

	.custom-sustain-framework__card-icon > svg {
		width: 34px;
		height: 34px;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */

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

	.custom-sustain-framework__card:hover {
		transform: none;
	}
}