/**
 * KES Group — block/pattern front-end styles.
 *
 * Only what the block editor needs on the front end; the core section styling
 * lives in assets/css/sections.css.
 */

/* ---------------------------------------------------------------
 * Section rhythm
 * ------------------------------------------------------------- */
.wp-block-kes-section {
	padding: 0;
}

.wp-block-kes-section.alignfull {
	max-width: none;
}

/* ---------------------------------------------------------------
 * Eyebrow (matches kes-eyebrow)
 * ------------------------------------------------------------- */
.wp-block-kes-eyebrow p {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --kes-muted, #6f6a66 );
}

.wp-block-kes-eyebrow p::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	background: var( --kes-accent, #ed8536 );
	flex: none;
}

.wp-block-kes-eyebrow.is-style-centered p {
	justify-content: center;
}

/* ---------------------------------------------------------------
 * Section head
 * ------------------------------------------------------------- */
.wp-block-kes-section-head {
	max-width: 46rem;
	margin-bottom: 3.5rem;
}

.wp-block-kes-section-head.is-style-centered {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.wp-block-kes-section-head.is-style-centered .wp-block-kes-eyebrow p {
	justify-content: center;
}

/* ---------------------------------------------------------------
 * Stat grid
 * ------------------------------------------------------------- */
.wp-block-kes-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 2.5rem 2rem;
	counter-reset: kes-stat;
}

.wp-block-kes-stat {
	padding-top: 1.5rem;
	border-top: 2px solid var( --kes-border, #e6e4e0 );
}

.wp-block-kes-stat .kes-stat__value {
	margin: 0;
	font-family: var( --kes-font-display, "Inter", sans-serif );
	font-size: clamp( 2.75rem, 5vw, 4rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var( --kes-dark, #1c1917 );
}

.wp-block-kes-stat .kes-stat__label {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --kes-dark, #1c1917 );
}

.wp-block-kes-stat .kes-stat__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Capability row
 * ------------------------------------------------------------- */
.wp-block-kes-capability {
	padding: 2rem 0;
	border-top: 1px solid var( --kes-border, #e6e4e0 );
}

.wp-block-kes-capability:last-child {
	border-bottom: 1px solid var( --kes-border, #e6e4e0 );
}

.wp-block-kes-capability .kes-capability__num {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var( --kes-primary-dark, #64b32c );
	margin-bottom: 0.5rem;
}

.wp-block-kes-capability h3 {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.4rem, 2.4vw, 1.9rem );
	letter-spacing: -0.02em;
}

.wp-block-kes-capability ul {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.wp-block-kes-capability li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem;
	color: var( --kes-muted, #6f6a66 );
}

.wp-block-kes-capability li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var( --kes-primary, #81d742 );
}

/* ---------------------------------------------------------------
 * Step row (Approach)
 * ------------------------------------------------------------- */
.wp-block-kes-steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 2.5rem 2rem;
}

.wp-block-kes-step {
	position: relative;
	padding-top: 1.5rem;
	border-top: 2px solid var( --kes-primary, #81d742 );
}

.wp-block-kes-step .kes-step__num {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var( --kes-accent, #ed8536 );
}

.wp-block-kes-step h3 {
	margin: 0 0 0.6rem;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
}

.wp-block-kes-step p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Proof / case grid
 * ------------------------------------------------------------- */
.wp-block-kes-proofs {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 3rem 2.5rem;
}

.wp-block-kes-proof .kes-proof__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.wp-block-kes-proof .kes-proof__tag {
	display: inline-block;
	margin-bottom: 0.85rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --kes-accent, #ed8536 );
}

.wp-block-kes-proof h3 {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.wp-block-kes-proof p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Person grid
 * ------------------------------------------------------------- */
.wp-block-kes-people {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 2rem 1.5rem;
}

.wp-block-kes-person img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	background: var( --kes-off-white-2, #f4f4f2 );
}

.wp-block-kes-person .kes-person__name {
	margin: 0.9rem 0 0.2rem;
	font-size: 1.0625rem;
}

.wp-block-kes-person .kes-person__role {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Page-body rhythm
 *
 * The page body is a readable measure, but seeded sections break
 * back out to the container width so grids and images are not
 * squeezed into a single text column.
 * ------------------------------------------------------------- */
.kes-prose .wp-block-group {
	margin-top: 3.5rem;
}

.kes-prose > .wp-block-group:first-child {
	margin-top: 0;
}

.kes-prose .wp-block-kes-section-head {
	max-width: 46rem;
}

/*
 * `.kes-prose` caps the measure at 78ch, which is right for running copy but
 * far too narrow for grids and images. Lift the cap for the whole body and put
 * it back only on the text-level blocks, so seeded sections get the full
 * container width without any viewport maths that could overflow on mobile.
 */
.kes-page-body .kes-prose {
	max-width: none;
}

.kes-page-body .kes-prose > p,
.kes-page-body .kes-prose > h1,
.kes-page-body .kes-prose > h2,
.kes-page-body .kes-prose > h3,
.kes-page-body .kes-prose > h4,
.kes-page-body .kes-prose > ul,
.kes-page-body .kes-prose > ol,
.kes-page-body .kes-prose > blockquote {
	max-width: 68ch;
}

.kes-page-body .kes-prose .wp-block-kes-section-head,
.kes-page-body .kes-prose .wp-block-kes-section-head p {
	max-width: 46rem;
}

.kes-page-body .kes-prose .wp-block-kes-section-head.is-style-centered {
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------
 * Intro prose
 * ------------------------------------------------------------- */
.kes-prose > .wp-block-group > p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Capabilities list
 * ------------------------------------------------------------- */
.wp-block-kes-capabilities {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 3rem 2.5rem;
}

.wp-block-kes-capability .kes-capability__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin-bottom: 1.25rem;
	background: var( --kes-off-white-2, #f4f4f2 );
}

.wp-block-kes-capability .kes-capability__headline {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --kes-accent, #ed8536 );
}

.wp-block-kes-capability h4 {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Case facets
 * ------------------------------------------------------------- */
.wp-block-kes-proof .kes-proof__facet {
	margin-top: 0.6rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

.wp-block-kes-proof .kes-proof__facet b {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --kes-primary-dark, #64b32c );
}

/* ---------------------------------------------------------------
 * Principles
 * ------------------------------------------------------------- */
.wp-block-kes-principles {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 2.5rem 2rem;
}

.wp-block-kes-principle {
	padding-top: 1.25rem;
	border-top: 2px solid var( --kes-primary, #81d742 );
}

.wp-block-kes-principle h3 {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.wp-block-kes-principle p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Push image (About)
 * ------------------------------------------------------------- */
.wp-block-kes-push .kes-push__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: var( --kes-off-white-2, #f4f4f2 );
}

/* ---------------------------------------------------------------
 * Contact rows
 * ------------------------------------------------------------- */
.wp-block-kes-contact .kes-contact__row {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.6;
}

.wp-block-kes-contact .kes-contact__row b {
	display: inline-block;
	min-width: 5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --kes-muted, #6f6a66 );
}

/* ---------------------------------------------------------------
 * Any image an editor drops into a page body always fits its slot.
 * ------------------------------------------------------------- */
.kes-prose .wp-block-image img,
.kes-prose .wp-block-gallery img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * CTA band
 * ------------------------------------------------------------- */
.wp-block-kes-cta {
	position: relative;
	overflow: hidden;
	background: var( --kes-dark, #1c1917 );
	color: #fff;
	padding: 5rem 0;
}

.wp-block-kes-cta.has-background-image {
	background-size: cover;
	background-position: center;
}

.wp-block-kes-cta.has-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, rgba( 28, 25, 23, 0.94 ) 0%, rgba( 28, 25, 23, 0.72 ) 55%, rgba( 28, 25, 23, 0.5 ) 100% );
}

.wp-block-kes-cta > * {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-kes-cta h2 {
	color: #fff;
	font-size: clamp( 2.1rem, 4.5vw, 3.25rem );
}

.wp-block-kes-cta p {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 1.0625rem;
}

/* ---------------------------------------------------------------
 * Newsletter band
 * ------------------------------------------------------------- */
.wp-block-kes-newsletter {
	background: var( --kes-dark, #1c1917 );
	color: #fff;
	padding: 3.5rem 0;
}

.wp-block-kes-newsletter h2 {
	color: #fff;
	margin-top: 0;
}

.wp-block-kes-newsletter p {
	color: rgba( 255, 255, 255, 0.7 );
}

.wp-block-kes-newsletter input[type="email"] {
	border-radius: 0;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	background: transparent;
	color: #fff;
	padding: 0.9em 1em;
}

.wp-block-kes-newsletter input[type="email"]::placeholder {
	color: rgba( 255, 255, 255, 0.55 );
}

.wp-block-kes-newsletter button {
	border-radius: 0;
	background: var( --kes-primary, #81d742 );
	color: var( --kes-dark, #1c1917 );
	font-weight: 700;
	padding: 0.9em 1.75em;
}

/* ---------------------------------------------------------------
 * Client marquee (block version)
 * ------------------------------------------------------------- */
.wp-block-kes-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

.wp-block-kes-marquee .kes-marquee__track {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	width: max-content;
	animation: kes-marquee 38s linear infinite;
}

.wp-block-kes-marquee img {
	width: 130px;
	height: 130px;
	object-fit: contain;
	opacity: 0.72;
	transition: opacity 0.3s ease;
}

.wp-block-kes-marquee img:hover {
	opacity: 1;
}

@keyframes kes-marquee {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-kes-marquee .kes-marquee__track {
		animation: none;
	}
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media ( max-width: 782px ) {
	.wp-block-kes-section-head {
		margin-bottom: 2.5rem;
	}

	.wp-block-kes-stats,
	.wp-block-kes-steps,
	.wp-block-kes-proofs,
	.wp-block-kes-people,
	.wp-block-kes-principles,
	.wp-block-kes-capabilities {
		gap: 2rem 1.5rem;
	}

	.kes-prose .wp-block-group {
		margin-top: 2.5rem;
	}

	.wp-block-kes-cta {
		padding: 3.5rem 0;
	}
}