/*--------------------------------------------------------------
# Classic Polo — About Us
#
# This page is about people and time: two named leaders, and a dated
# chronology. So the devices are a credential strip under each leader
# and a chronicle of years — both drawn from what the copy actually
# contains rather than imposed on it.
#
# Distinct from the other pages: home runs a vertical production line,
# retail sets facing columns, design studio a room directory,
# warehousing an operations sheet.
#
# Tokens come from .cp-sec in cp-sections.css.
--------------------------------------------------------------*/

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

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

/* Mission and vision ----------------------------------------------- */

.cp-a-mv {
	border-top: 2px solid var( --cp-ink );
}

.cp-a-pillar {
	border-left: 1px solid var( --cp-rule );
}

.cp-a-pillar:first-child {
	border-left: 0;
}

.cp-a-pillar .cp-a-pillar-name .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --cp-muted );
}

.cp-sec .cp-a-pillar p {
	font-size: clamp( 1rem, 1.5vw, 1.1875rem );
	line-height: 1.55;
	color: var( --cp-ink );
	max-width: 40ch;
}

/* Leadership -------------------------------------------------------
   Two people, given parallel treatment. The credential strip carries
   the facts the prose buries: role, tenure, discipline. */

.cp-a-leader {
	border-top: 2px solid var( --cp-ink );
}

.cp-a-name .elementor-heading-title {
	font-size: clamp( 1.375rem, 2.2vw, 1.875rem );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --cp-ink );
}

.cp-a-role .elementor-heading-title {
	font-family: var( --monofont );
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --cp-gold );
}

/* The credential strip: facts on a line, mono, tabular. */
.cp-a-creds ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1px solid var( --cp-rule );
	border-bottom: 1px solid var( --cp-rule );
}

.cp-a-creds li {
	font-family: var( --monofont );
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var( --cp-muted );
	padding: 12px 20px 12px 0;
	margin-right: 20px;
	border-right: 1px solid var( --cp-rule );
	font-variant-numeric: tabular-nums;
}

.cp-a-creds li:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.cp-sec .cp-a-bio p {
	max-width: 62ch;
}

.cp-sec .cp-a-bio p + p {
	margin-top: 14px;
}

/* The chronicle ---------------------------------------------------
   Years carry the structure, so they are set large. No connecting
   line: the dates themselves are the spine. */

.cp-a-chron {
	border-top: 2px solid var( --cp-ink );
}

.cp-a-entry {
	border-bottom: 1px solid var( --cp-rule );
	align-items: baseline !important;
}

.cp-a-year .elementor-heading-title {
	font-family: var( --monofont );
	font-size: clamp( 1.75rem, 3.6vw, 3rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --cp-gold );
	font-variant-numeric: tabular-nums;
}

.cp-a-event .elementor-heading-title {
	font-size: clamp( 1.0625rem, 1.6vw, 1.375rem );
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --cp-ink );
}

.cp-sec .cp-a-entry p {
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 56ch;
}

/* Closing figures --------------------------------------------------- */

.cp-sec.cp-a-close {
	background: var( --cp-navy );
}

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

.cp-sec.cp-a-close p {
	color: rgba( 255, 255, 255, 0.7 );
}

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

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

.cp-a-stat:first-child {
	border-left: 0;
}

.cp-a-stat .cp-a-statn .elementor-heading-title {
	font-family: var( --monofont );
	font-size: clamp( 1.5rem, 2.8vw, 2.375rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --cp-gold );
	font-variant-numeric: tabular-nums;
}

.cp-sec.cp-a-close .cp-a-stat p {
	font-size: 0.8125rem;
	line-height: 1.5;
	max-width: 26ch;
}

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

@media screen and ( max-width: 1024px ) {
	.cp-a-pillar,
	.cp-a-stat {
		border-left: 0;
		border-top: 1px solid var( --cp-rule );
	}

	.cp-a-stat {
		border-top-color: rgba( 255, 255, 255, 0.2 );
	}

	.cp-a-pillar:first-child,
	.cp-a-stat:first-child {
		border-top: 0;
	}

	.cp-a-creds li {
		padding-right: 14px;
		margin-right: 14px;
	}
}

/* Leaders page ------------------------------------------------------
   Shares the people system above (name, role, credential strip, bio).
   The portraits are larger here because this page exists to introduce
   them, and the two blocks alternate sides so neither reads as the
   default and the other an afterthought. */

.cp-l-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Faces sit high in both source photographs. */
	object-position: center 22%;
	background: var( --cp-wash );
}

.cp-l-intro .cp-a-statement .elementor-heading-title {
	max-width: 22ch;
}

/* Elementor sets a container's width through a --width custom
   property that only resolves to 100% of its own accord below 767px;
   between that and this file's 1024px cutoff, a portrait and a bio
   column that already sum to 100% just squeeze side by side instead
   of stacking — the same mechanism documented in cp-sections.css
   against .cp-split. The selector needs to clear the (0,3,0) rule
   Elementor emits for it, which compounding .e-con onto both cells
   does. */
@media screen and ( max-width: 1024px ) {
	.cp-a-leader.e-con {
		flex-wrap: wrap;
	}

	.cp-a-leader.e-con > .cp-a-portrait.e-con,
	.cp-a-leader.e-con > .cp-a-bio.e-con {
		--width: 100%;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* Portrait first on small screens, whichever side it sits on —
	   the base row already carries it first in the markup; the flipped
	   row needs its order reversed to match. */
	.cp-a-leader--flip {
		flex-direction: column-reverse !important;
	}

	.cp-a-leader.e-con > .cp-a-bio.e-con {
		--padding-top: 16px;
	}
}