/*
 * One source of truth for every internal hero.
 * The homepage is intentionally excluded.
 */
:root {
	--ckw-inner-hero-height: 560px;
}

body:not(.home) .ckw-page-hero,
body:not(.home) .ckw-article-hero,
body:not(.home) .ckw-blog-hero,
body:not(.home) .ckw-services-hero,
body:not(.home) .ckw-service-hero,
body:not(.home) .ckw-inner-hero-shell,
body:not(.home) .ckw-cctv-hero,
body:not(.home) .ckw-privacy-hero {
	height: var(--ckw-inner-hero-height);
	min-height: var(--ckw-inner-hero-height);
	max-height: var(--ckw-inner-hero-height);
	box-sizing: border-box;
	overflow: hidden;
}

body:not(.home) .ckw-page-hero:not(.ckw-inner-hero-shell) > .ckw-container,
body:not(.home) .ckw-blog-hero > .ckw-container {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
}

/* The shared marketing heroes use the same vertical rhythm as Services. */
body:not(.home) .ckw-inner-hero-shell,
body:not(.home) .ckw-services-hero {
	padding-block: 46px;
}

/*
 * Contact and About already own a balanced two-column hero layout.
 * Never stretch those inner grids to the full section height: doing so
 * overrides their intrinsic 372px rhythm and pushes the numbered card
 * below the copy. Only the outer hero has a fixed height.
 */
body:not(.home) .ckw-contact-hero__grid,
body:not(.home) .ckw-about-hero__grid {
	height: auto;
}

@media (max-width: 820px) {
	:root {
		--ckw-inner-hero-height: 720px;
	}

	body:not(.home) .ckw-article-hero,
	body:not(.home) .ckw-article-hero--has-image {
		padding-block: 30px;
	}

	body:not(.home) .ckw-article-hero--has-image .ckw-article-hero__inner {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) 170px;
		gap: 18px;
	}

	body:not(.home) .ckw-article-hero__media {
		width: min(100%, 420px);
		height: 170px;
		margin: 0 auto;
	}

	body:not(.home) .ckw-article-hero__media img {
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 620px) {
	body:not(.home) .ckw-article-hero h1,
	body:not(.home) .ckw-services-hero h1,
	body:not(.home) .ckw-inner-hero-shell h1,
	body:not(.home) .ckw-privacy-hero h1 {
		font-size: clamp(27px, 8.5vw, 36px);
	}

	body:not(.home) .ckw-article-hero__excerpt {
		display: none;
	}

	body:not(.home) .ckw-article-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
	}

	body:not(.home) .ckw-article-hero__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	body:not(.home) .ckw-article-hero__actions .ckw-btn {
		min-width: 0;
		padding-inline: 10px;
		font-size: 13px;
	}
}