/*--------------------------------------------------------------
# Classic Polo — Sustainability
#
# These four items are not initiatives, they are plant: a treatment
# works, a solar array, a wind fleet, a sewage works. So the page is
# built as a register of installations, each one carrying a rating
# plate the way real equipment does — a bordered mono block with the
# capacity on it. Records alternate side to side so the photographs
# and the plates make a column of their own down the page.
#
# Distinct from the other pages: home runs a production line, retail
# facing columns, design studio a room directory, warehousing an
# operations sheet, about a chronicle, awards a citation register,
# franchise a prospectus.
#
# Tokens come from .cp-sec in cp-sections.css.
--------------------------------------------------------------*/

/* Opening ---------------------------------------------------------- */

.cp-su-open .cp-su-statement .elementor-heading-title {
	font-size: clamp( 1.75rem, 3.4vw, 2.75rem );
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	max-width: 010ch;
	max-width: 24ch;
}

/* Ledger — the headline figures, on the one dark band -------------- */

.cp-sec.cp-su-ledger {
	background: var( --cp-navy );
}

.cp-sec.cp-su-ledger .elementor-heading-title,
.cp-sec.cp-su-ledger h2 {
	color: #fff;
}

.cp-sec.cp-su-ledger p {
	color: rgba( 255, 255, 255, 0.72 );
}

.cp-sec.cp-su-ledger .cp-eyebrow .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.6 );
}

.cp-su-fig {
	border-left: 1px solid rgba( 255, 255, 255, 0.2 );
}

.cp-su-fig:first-child {
	border-left: 0;
}

.cp-su-fig .cp-su-fign .elementor-heading-title {
	font-family: var( --monofont );
	font-size: clamp( 1.6rem, 3.2vw, 2.75rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --cp-gold );
	font-variant-numeric: tabular-nums;
}

.cp-sec.cp-su-ledger .cp-su-fig p {
	font-size: 0.8125rem;
	line-height: 1.5;
	max-width: 22ch;
}

/* The records ------------------------------------------------------
   Media always comes first in the markup so the reading order on a
   phone is the same for every record; the flip is a desktop-only
   visual alternation. */

.cp-su-rec {
	border-top: 1px solid var( --cp-rule );
	align-items: flex-start !important;
}

.cp-su-rec:first-of-type {
	border-top: 2px solid var( --cp-ink );
}

@media screen and ( min-width: 1025px ) {
	.cp-su-rec--flip {
		flex-direction: row-reverse !important;
	}

	/* On a flipped record the photographs sit on the right, so a record
	   carrying a single half-width frame must hug the outer edge rather
	   than float in the middle of its column. */
	.cp-su-rec--flip .cp-su-media {
		justify-content: flex-end;
	}
}

/* Photographs ------------------------------------------------------ */

.cp-su-media {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-content: flex-start;
	gap: 14px;
}

/* Elementor sizes every widget in a container with
   `.e-con-full > .elementor-widget { width: var(--container-widget-width,100%) }`
   at (0,2,0), and its stylesheet loads after this one, so a plain
   `.cp-su-shot` at (0,1,0) never got a look in. Compounding both
   Elementor classes takes this to (0,4,0) and it wins on weight.

   flex-grow stays at 0 so a record with one photograph keeps it at
   half width instead of blowing it up to fill the column. */
.cp-su-media.e-con > .cp-su-shot.elementor-widget {
	flex: 0 1 calc( 50% - 7px );
	width: calc( 50% - 7px );
	min-width: 0;
}

.cp-su-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var( --cp-wash );
}

/* Reference number and name ---------------------------------------- */

.cp-su-ref .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.4;
	color: var( --cp-muted );
}

.cp-su-name .elementor-heading-title {
	font-size: clamp( 1.25rem, 2.1vw, 1.75rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var( --cp-ink );
	max-width: 22ch;
}

.cp-sec .cp-su-rec p {
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 46ch;
}

/* The rating plate --------------------------------------------------
   Modelled on the plate bolted to a piece of plant: a hard border,
   the figure large in mono, the duty description small and tracked
   beneath a hairline. */

.cp-su-plate {
	border: 2px solid var( --cp-navy );
	align-self: flex-start !important;
	width: fit-content !important;
	max-width: 100%;
}

.cp-su-plate .cp-su-platev .elementor-heading-title {
	font-family: var( --monofont );
	font-size: clamp( 1.25rem, 2vw, 1.625rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --cp-navy );
	font-variant-numeric: tabular-nums;
}

.cp-su-plate .cp-su-platel .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.4;
	color: var( --cp-muted );
	margin-top: 13px;
	padding-top: 10px;
	border-top: 1px solid var( --cp-rule );
	white-space: nowrap;
}

/* A claim worth setting apart from the body copy. */
.cp-su-note .elementor-heading-title {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var( --cp-ink );
	border-left: 3px solid var( --cp-gold );
	padding-left: 14px;
	max-width: 40ch;
}

/* Closing band ------------------------------------------------------ */

.cp-sec.cp-su-closing {
	background: var( --cp-navy );
}

.cp-sec.cp-su-closing .elementor-heading-title,
.cp-sec.cp-su-closing h2 {
	color: #fff;
}

.cp-sec.cp-su-closing .cp-eyebrow .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.65 );
}

.cp-sec.cp-su-closing p {
	color: rgba( 255, 255, 255, 0.75 );
}

.cp-sec.cp-su-closing .elementor-button {
	background-color: var( --cp-gold );
	color: var( --cp-ink );
}

.cp-sec.cp-su-closing .elementor-button:hover {
	background-color: #ffc927;
	color: var( --cp-ink );
}

/* Responsive --------------------------------------------------------

   Elementor applies a container's width through a --width custom
   property, declared at
   `.elementor-1706 .elementor-element.elementor-element-<id>` — three
   classes, (0,3,0) — and scoped to `@media (min-width: 480px)`. So the
   rows stack on their own only below 480px, and between 480px and the
   desktop layout they stay side by side at unusable widths.

   Overriding the property is the cleanest way to stack them, but the
   selector has to clear (0,3,0) first; compounding .e-con onto both
   halves takes these to (0,4,0). */

@media screen and ( max-width: 1024px ) {
	/* Widths alone are not enough: the rows are nowrap, so cells asking
	   for 100% simply shrink back to an even split instead of dropping
	   onto their own line. Elementor only turns wrapping on below its
	   767px mobile breakpoint, which leaves the whole tablet range
	   squeezed. */
	.cp-su-rec.e-con,
	.cp-su-figs.e-con {
		--flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.cp-su-rec.e-con > .cp-su-media.e-con,
	.cp-su-rec.e-con > .cp-su-body.e-con {
		--width: 100%;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	.cp-su-rec.e-con > .cp-su-body.e-con {
		--padding-top: 4px;
	}

	.cp-su-figs.e-con > .cp-su-fig.e-con {
		--width: 50%;
	}

	.cp-su-fig {
		border-left: 0;
		border-top: 1px solid rgba( 255, 255, 255, 0.2 );
	}

	.cp-su-fig:first-child {
		border-top: 0;
	}
}

@media screen and ( max-width: 600px ) {
	.cp-su-figs.e-con > .cp-su-fig.e-con {
		--width: 100%;
	}

	/* A pair of half-width frames lands under ~170px on a phone, which
	   is too small to read an industrial photograph in. */
	.cp-su-media.e-con > .cp-su-shot.elementor-widget {
		flex-basis: 100%;
		width: 100%;
	}
}