/**
 * ZeltaCode Commitments — front-end styles.
 *
 * The scroll effect is a colour change on the number and nothing else, so the
 * only thing JS touches is a class on the row. Every colour comes from a custom
 * property that Elementor writes on .zccm, which keeps this file the single
 * place the cascade is declared.
 */

.zccm {
	--zccm-line: rgba( 255, 255, 255, 0.11 );
	--zccm-row-hover-bg: rgba( 255, 255, 255, 0.015 );
	--zccm-num-col: 76px;
	--zccm-col-gap: 32px;
	--zccm-num-color: #4e4e4e;
	--zccm-num-hover: #ff8a4c;
	--zccm-num-active: #ff8a4c;
	--zccm-num-speed: 350ms;

	background: #000;
}

.zccm *,
.zccm *::before,
.zccm *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Heading block                                                       */
/* ------------------------------------------------------------------ */

.zccm__head {
	margin-bottom: 52px;
}

.zccm .zccm__eyebrow {
	margin: 0 0 16px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: #5e9eff;
}

.zccm .zccm__heading {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.2px;
	color: #ededed;
	overflow-wrap: break-word;
}

.zccm .zccm__sub {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.6;
	color: #8a8a8a;
}

/* ------------------------------------------------------------------ */
/* List and rows                                                       */
/* ------------------------------------------------------------------ */

/**
 * The opening and closing hairlines sit on the list, not on the rows, so
 * toggling either one off cannot leave a phantom border behind.
 */
.zccm__list {
	border-top: 0 solid var( --zccm-line );
	border-bottom: 0 solid var( --zccm-line );
}

.zccm-firstline-yes .zccm__list {
	border-top-width: 1px;
	border-top-style: solid;
}

.zccm-lastline-yes .zccm__list {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.zccm__row {
	display: grid;
	grid-template-columns: var( --zccm-num-col ) minmax( 0, 1fr ) auto;
	gap: var( --zccm-col-gap );
	align-items: start;
	padding: 34px 0;
	border-bottom: 1px solid var( --zccm-line );
	transition: background-color 250ms ease;
}

/* The list already draws the closing line, so the last row must not double it. */
.zccm__row:last-child {
	border-bottom: 0;
}

.zccm__row:hover {
	background-color: var( --zccm-row-hover-bg );
}

/* ------------------------------------------------------------------ */
/* Number                                                              */
/* ------------------------------------------------------------------ */

.zccm .zccm__num {
	display: block;
	margin: 0;
	font-family: inherit;
	font-size: clamp( 30px, 3.4vw, 44px );
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var( --zccm-num-color );
	transition: color var( --zccm-num-speed ) ease;
}

/* Hover highlight — independent of the scroll effect, and separately switchable. */
.zccm-hover-yes .zccm__row:hover .zccm__num {
	color: var( --zccm-num-hover );
}

/**
 * Scroll highlight. `is-lit` is the "light once" mode, `is-active` the
 * "follow scroll" mode; both are set by JS and both only ever affect
 * the number's colour.
 */
.zccm-scroll-yes .zccm__row.is-lit .zccm__num,
.zccm-scroll-yes .zccm__row.is-active .zccm__num {
	color: var( --zccm-num-active );
}

/* ------------------------------------------------------------------ */
/* Body text                                                           */
/* ------------------------------------------------------------------ */

.zccm .zccm__title {
	margin: 0 0 10px;
	font-size: clamp( 19px, 2vw, 23px );
	font-weight: 600;
	line-height: 1.3;
	color: #ededed;
}

.zccm .zccm__desc {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.65;
	color: #8a8a8a;
}

/* ------------------------------------------------------------------ */
/* Button                                                              */
/* ------------------------------------------------------------------ */

.zccm__action {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.zccm .zccm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #141416;
	color: #ededed;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.zccm a.zccm__btn:hover,
.zccm a.zccm__btn:focus-visible {
	background-color: #1e1e22;
	color: #fff;
}

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

@media ( max-width: 1024px ) {
	.zccm__row {
		grid-template-columns: var( --zccm-num-col ) minmax( 0, 1fr );
	}

	/* The button drops under the copy, still clear of the number column. */
	.zccm__action {
		grid-column: 2;
		justify-content: flex-start;
		margin-top: 18px;
	}
}

@media ( max-width: 767px ) {
	.zccm__row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.zccm__action {
		grid-column: 1;
	}

	.zccm .zccm__btn {
		white-space: normal;
	}
}

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

/**
 * The highlight is a colour change, not movement, so it still fires — the
 * fade is what gets dropped. Only applies when the widget opts in.
 */
@media ( prefers-reduced-motion: reduce ) {
	.zccm-reduced-yes .zccm__num,
	.zccm-reduced-yes .zccm__row,
	.zccm-reduced-yes .zccm__btn {
		transition-duration: 1ms;
	}
}