/* =========================
   CCI Founder Spotlight
   "Meet the founder" block: photo panel (top left) + intro copy and pill
   button (top right), "Featured in:" logos (bottom left) and a click-to-play
   video card in the stepped corner (bottom right).

   The photo panel and the video card touch at a single corner. Two concave
   fillets bridge that corner, so the pair reads as one stepped shape. They are
   cut from a masked copy of the photo (.cci-founder-spotlight__photo-fillets),
   so the photo itself continues into both curves whatever its colours.

   The player's poster, 16:9 frame and click-to-play behaviour come from the
   shared cci-responsive-video stylesheet + script (this widget reuses the
   .cci-rv markup); this file only restyles the play button as a pill.

   Elementor default breakpoints: tablet <= 1024px, mobile <= 767px. Tablet and
   mobile stack photo, intro, video, logos and drop the fillets.
========================= */

.cci-founder-spotlight {
	--cci-fs-photo-col: 66%;
	--cci-fs-photo-height: 560px;
	--cci-fs-panel: #23345a;
	--cci-fs-radius: 32px;
	--cci-fs-btn-color: #0e0e0e;
	--cci-fs-btn-bg: #f2f3f5;
	--cci-fs-btn-bg-hover: #e4e6ea;
	--cci-fs-logo-height: 40px;
	--cci-fs-logo-opacity: 0.4;

	display: grid;
	grid-template-columns: minmax(0, var(--cci-fs-photo-col)) minmax(0, 1fr);
	grid-template-areas:
		"photo intro"
		"logos video";
	width: 100%;
}

.cci-founder-spotlight *,
.cci-founder-spotlight *::before,
.cci-founder-spotlight *::after {
	box-sizing: border-box;
}

/* No video: the logos simply sit under the photo, intro column runs on. */
.cci-founder-spotlight--no-video {
	grid-template-areas:
		"photo intro"
		"logos intro";
}

/* --- Photo panel -------------------------------------------------------- */

.cci-founder-spotlight__photo {
	grid-area: photo;
	position: relative;
	height: var(--cci-fs-photo-height);
}

/* The inner wrapper clips the photo to the radius; the fillet copy lives on
   the outer cell so it is not clipped. */
.cci-founder-spotlight__photo-inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--cci-fs-radius);
	background-color: var(--cci-fs-panel);
}

.cci-founder-spotlight--has-video .cci-founder-spotlight__photo-inner {
	border-bottom-right-radius: 0;
}

.cci-founder-spotlight .cci-founder-spotlight__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
	object-position: center center;
}

/* With the video card, the photo is laid out one radius wider and taller than
   its cell (the inner wrapper still clips it), so the fillet copy below can show
   the pixels that continue past the photo's bottom-right corner. Both copies
   share this geometry, so they line up exactly. */
.cci-founder-spotlight--has-video .cci-founder-spotlight__photo-inner .cci-founder-spotlight__photo-img {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + var(--cci-fs-radius));
	height: calc(100% + var(--cci-fs-radius));
}

/* Concave fillets joining the photo's bottom-right corner to the video card's
   top-left corner: one right of the photo (above the video), one under it (left
   of the video). Each is a radius-sized square of the photo copy minus a
   quarter circle; everything else of the copy is masked away. */
.cci-founder-spotlight__photo-fillets {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: calc(100% + var(--cci-fs-radius));
	height: calc(100% + var(--cci-fs-radius));
	overflow: hidden;
	background-color: var(--cci-fs-panel);
	pointer-events: none;
	-webkit-mask-image:
		radial-gradient(circle at 100% 0, transparent calc(var(--cci-fs-radius) - 0.5px), #000 var(--cci-fs-radius)),
		radial-gradient(circle at 0 100%, transparent calc(var(--cci-fs-radius) - 0.5px), #000 var(--cci-fs-radius));
	mask-image:
		radial-gradient(circle at 100% 0, transparent calc(var(--cci-fs-radius) - 0.5px), #000 var(--cci-fs-radius)),
		radial-gradient(circle at 0 100%, transparent calc(var(--cci-fs-radius) - 0.5px), #000 var(--cci-fs-radius));
	-webkit-mask-size: var(--cci-fs-radius) var(--cci-fs-radius);
	mask-size: var(--cci-fs-radius) var(--cci-fs-radius);
	-webkit-mask-position: right 0 bottom var(--cci-fs-radius), right var(--cci-fs-radius) bottom 0;
	mask-position: right 0 bottom var(--cci-fs-radius), right var(--cci-fs-radius) bottom 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* --- Intro -------------------------------------------------------------- */

.cci-founder-spotlight__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	padding: 40px 0 40px 56px;
}

/* Extra .cci-founder-spotlight scope so these beat the Elementor kit's global
   h1–h6 / p typography. */
.cci-founder-spotlight .cci-founder-spotlight__heading {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.3px;
}

.cci-founder-spotlight .cci-founder-spotlight__description,
.cci-founder-spotlight .cci-founder-spotlight__description p {
	font-family: "Inter", sans-serif;
	font-size: 20px;
	line-height: 32px;
	font-weight: 400;
}

.cci-founder-spotlight__description p {
	margin: 0 0 16px;
}

.cci-founder-spotlight__description p:last-child {
	margin-bottom: 0;
}

.cci-founder-spotlight .cci-founder-spotlight__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 36px;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-decoration: none;
	color: var(--cci-fs-btn-color);
	transition: background-color 0.2s ease, filter 0.2s ease;
}

.cci-founder-spotlight .cci-founder-spotlight__button:not(.bg-gold) {
	background-color: var(--cci-fs-btn-bg);
}

.cci-founder-spotlight .cci-founder-spotlight__button:not(.bg-gold):hover,
.cci-founder-spotlight .cci-founder-spotlight__button:not(.bg-gold):focus-visible {
	background-color: var(--cci-fs-btn-bg-hover);
	color: var(--cci-fs-btn-color);
}

.cci-founder-spotlight .cci-founder-spotlight__button.bg-gold:hover,
.cci-founder-spotlight .cci-founder-spotlight__button.bg-gold:focus-visible {
	filter: brightness(1.05);
	color: var(--cci-fs-btn-color);
}

/* --- Video card --------------------------------------------------------- */

.cci-founder-spotlight__video {
	grid-area: video;
	align-self: start;
	overflow: hidden;
	border-radius: 0 var(--cci-fs-radius) var(--cci-fs-radius) var(--cci-fs-radius);
	background-color: var(--cci-fs-panel);
	/* Own stacking context so the shared player's absolutely positioned layers
	   stay clipped by the radius in Safari. */
	isolation: isolate;
}

.cci-founder-spotlight__video .cci-rv {
	display: block;
	width: 100%;
}

/* The shared .cci-rv frame brings its own radius; the card clips instead. */
.cci-founder-spotlight__video .cci-rv__frame,
.cci-founder-spotlight__video .cci-rv__media {
	border-radius: 0;
}

/* Pill "Watch video" button over the poster (overrides the shared 32px icon
   button and its grow-on-hover). */
.cci-founder-spotlight .cci-rv__play.cci-founder-spotlight__play,
.cci-founder-spotlight .cci-rv__media--playable:hover .cci-rv__play.cci-founder-spotlight__play {
	width: auto;
	height: auto;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}

.cci-founder-spotlight .cci-rv__media--playable:hover .cci-rv__play.cci-founder-spotlight__play {
	background: rgba(255, 255, 255, 0.28) !important;
}

.cci-founder-spotlight .cci-rv__play.cci-founder-spotlight__play:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.cci-founder-spotlight__play-icon {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* --- Featured in -------------------------------------------------------- */

.cci-founder-spotlight__logos {
	grid-area: logos;
	align-self: center;
	/* Right padding keeps clear of the fillet in the corner. */
	padding: 48px calc(var(--cci-fs-radius) + 24px) 32px 0;
}

.cci-founder-spotlight .cci-founder-spotlight__logos-label {
	margin: 0 0 20px;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -0.3px;
}

/* One row on desktop (logos shrink to fit); wraps once stacked. */
.cci-founder-spotlight__logos-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cci-founder-spotlight__logo {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.cci-founder-spotlight__logo img {
	display: block;
	width: auto;
	height: var(--cci-fs-logo-height);
	max-width: min(100%, 180px);
	object-fit: contain;
}

/* Carousel layout: the CCI Media Carousel marquee, sized to this row. The
   extra scope beats the Media Carousel's own 60px / 80px logo defaults. */
.cci-founder-spotlight .cci-founder-spotlight__carousel .cci-media-carousel__logo {
	padding-inline-end: 56px;
}

.cci-founder-spotlight .cci-founder-spotlight__carousel .cci-media-carousel__logo img {
	height: var(--cci-fs-logo-height);
	max-width: none !important;
}

/* Light logos (flagged by cci-founder-spotlight.js) are inverted so their
   white artwork turns dark; hue-rotate keeps accent colours in Original
   Colours mode. */
.cci-founder-spotlight .cci-founder-spotlight__logo img.cci-founder-spotlight__logo-img--light {
	filter: invert(1) hue-rotate(180deg);
}

/* Greyscale (default): drain the colour and soften every logo to the same
   grey via --cci-fs-logo-opacity, keeping each logo's own detail so boxed
   logos (AP, Fox News) stay legible. */
.cci-founder-spotlight--logos-grey .cci-founder-spotlight__logo img {
	filter: grayscale(1);
	opacity: var(--cci-fs-logo-opacity);
}

.cci-founder-spotlight--logos-grey .cci-founder-spotlight__logo img.cci-founder-spotlight__logo-img--light {
	filter: grayscale(1) invert(1);
}

/* --- Tablet / mobile: stack --------------------------------------------- */

@media (max-width: 1024px) {
	.cci-founder-spotlight,
	.cci-founder-spotlight--no-video {
		--cci-fs-photo-height: 460px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"photo"
			"intro"
			"video"
			"logos";
	}

	.cci-founder-spotlight--has-video .cci-founder-spotlight__photo-inner {
		border-bottom-right-radius: var(--cci-fs-radius);
	}

	.cci-founder-spotlight--has-video .cci-founder-spotlight__photo-inner .cci-founder-spotlight__photo-img {
		width: 100%;
		height: 100%;
	}

	.cci-founder-spotlight__photo-fillets {
		display: none;
	}

	.cci-founder-spotlight__intro {
		padding: 32px 0;
		gap: 20px;
	}

	.cci-founder-spotlight__video {
		border-radius: var(--cci-fs-radius);
	}

	.cci-founder-spotlight__logos {
		padding: 40px 0 0;
	}

	.cci-founder-spotlight__logos-list {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	.cci-founder-spotlight,
	.cci-founder-spotlight--no-video {
		--cci-fs-photo-height: 340px;
		--cci-fs-logo-height: 32px;
		--cci-fs-radius: 20px;
	}

	.cci-founder-spotlight .cci-founder-spotlight__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.cci-founder-spotlight .cci-founder-spotlight__description,
	.cci-founder-spotlight .cci-founder-spotlight__description p {
		font-size: 16px;
		line-height: 26px;
	}

	.cci-founder-spotlight .cci-founder-spotlight__button {
		width: 100%;
	}

	.cci-founder-spotlight .cci-founder-spotlight__logos-label {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 16px;
	}

	.cci-founder-spotlight__logos-list {
		gap: 20px 28px;
	}

	.cci-founder-spotlight .cci-founder-spotlight__carousel .cci-media-carousel__logo {
		padding-inline-end: 36px;
	}
}