/*--------------------------------------------------------------
# Classic Polo — Media & Promotions
#
# The page's one real job right now is the reel strip: short
# vertical clips, shown the shape they were shot in rather than
# letterboxed into a wide frame — the same call already made for the
# vertical films on Testimonials, carried over here as its own class
# set so the two pages stay independently editable.
#
# Tokens come from .cp-sec in cp-sections.css.
--------------------------------------------------------------*/

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

.cp-mp-open .cp-mp-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: 20ch;
}

/* Reels -------------------------------------------------------------
   Every clip in this strip is a real Elementor video widget, so
   swapping in the finished edit is a single click in the editor —
   the placeholder is the actual footage on hand, not a grey box. */

.cp-mp-reels {
	flex-wrap: wrap;
}

.cp-mp-reel .elementor-widget-video,
.cp-mp-reel .elementor-wrapper,
.cp-mp-reel .elementor-video {
	background: var( --cp-navy );
}

.cp-mp-reel video {
	object-fit: cover;
}

.cp-mp-num .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 );
	line-height: 1.5;
}

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

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

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

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

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

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

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

/* Responsive ----------------------------------------------------------
   Elementor sets a container's width through a --width custom
   property, declared at
   `.elementor-<postID> .elementor-element.elementor-element-<id>` —
   three classes, (0,3,0) — scoped to `@media (min-width: 480px)` with
   no upper bound, and it only forces --width:100% and wrapping of its
   own accord below its own 767px mobile breakpoint. Five columns that
   already sum to 100% never overflow to trigger that wrap, so between
   480px and this file's own cutoffs they'd sit five-across, each
   squeezed into a sliver — the same mechanism documented at length
   against .cp-split in cp-sections.css. Compounding .e-con onto both
   halves clears that specificity. */
@media screen and ( max-width: 1024px ) {
	.cp-mp-reels.e-con {
		--flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.cp-mp-reels.e-con > .cp-mp-reel.e-con {
		--width: 33.3333%;
	}
}

@media screen and ( max-width: 640px ) {
	.cp-mp-reels.e-con > .cp-mp-reel.e-con {
		--width: 50%;
	}
}

@media screen and ( max-width: 420px ) {
	.cp-mp-reels.e-con > .cp-mp-reel.e-con {
		--width: 100%;
	}
}