/**
 * Zenegy Cases — Case Hero
 *
 * Layout and spacing live here rather than in Elementor controls, so every case
 * page keeps the same hero regardless of who builds it. Colours, min-height and
 * typography are exposed as controls and land as inline styles that override
 * the defaults below.
 */

.zen-case-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	min-height: 720px;
	isolation: isolate;
	background-color: #150e2e;
}

/* --- Background media ---------------------------------------------------- */

.zen-case-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.zen-case-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zen-case-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: #150e2e;
	opacity: 0.55;
	pointer-events: none;
}

/* A second, bottom-weighted scrim. The flat overlay alone leaves the headline
   and stats sitting on whatever happens to be in the photo; this keeps the
   bottom third readable without darkening the whole image. */
.zen-case-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(10, 6, 24, 0.85) 0%, rgba(10, 6, 24, 0.35) 35%, rgba(10, 6, 24, 0) 65%);
	pointer-events: none;
}

/* --- Content ------------------------------------------------------------- */

.zen-case-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	color: #fff;
}

.zen-case-hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* --- Spokesperson chip --------------------------------------------------- */

.zen-case-hero__person {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 1rem 0.375rem 0.375rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

.zen-case-hero__person-photo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.zen-case-hero__person-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.zen-case-hero__person-name {
	font-size: 0.875rem;
	font-weight: 600;
}

.zen-case-hero__person-role {
	font-size: 0.75rem;
	opacity: 0.75;
}

/* --- Customer logo ------------------------------------------------------- */

.zen-case-hero__logo {
	margin-left: auto;
}

.zen-case-hero__logo img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

/* --- Headline ------------------------------------------------------------ */

.zen-case-hero__title {
	margin: auto 0 0;
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: #fff;
	max-width: 20ch;
	text-wrap: balance;
}

/* --- Product pills ------------------------------------------------------- */

.zen-case-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zen-case-hero__pill-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zen-case-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9375rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.zen-case-hero__pill:hover,
a.zen-case-hero__pill:focus-visible {
	background-color: rgba(255, 255, 255, 0.22);
}

.zen-case-hero__pill-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.zen-case-hero__pill-icon svg {
	width: 1.125em;
	height: auto;
	fill: currentColor;
}

.zen-case-hero__pill-icon i {
	font-size: 1em;
}

/* --- Highlight stats ----------------------------------------------------- */

.zen-case-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1.5rem;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.2);
}

.zen-case-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-color: rgba(255, 255, 255, 0.2);
}

.zen-case-hero__stat-title {
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}

.zen-case-hero__stat-text {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.75);
}

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

@media (max-width: 767px) {
	.zen-case-hero {
		min-height: 560px;
	}

	.zen-case-hero__top {
		align-items: flex-start;
		gap: 1rem;
	}

	.zen-case-hero__logo {
		margin-left: 0;
	}

	.zen-case-hero__logo img {
		width: 160px;
	}

	.zen-case-hero__title {
		max-width: none;
	}

	.zen-case-hero__stats {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

/* --- Motion preferences -------------------------------------------------- */

/* Autoplay can't be cancelled from CSS, so the video is hidden entirely and the
   poster painted on .zen-case-hero__media shows through instead. */
@media (prefers-reduced-motion: reduce) {
	.zen-case-hero__video {
		display: none;
	}

	.zen-case-hero__pill {
		transition: none;
	}
}

/* Product pills sourced from the Produkter taxonomy carry an uploaded icon
   rather than an Elementor icon, so size the image the same as the SVG. */
.zen-case-hero__pill-icon img {
	width: 1.125em;
	height: auto;
	display: block;
}