/* Centritek Home — public-facing styles
 *
 * Owns the full / (Home) page body (hero → about teaser) as one controlled
 * section, INCLUDING the hero (decision D6 — same as About; unlike
 * Rentals/Sales, which kept the page's pre-existing hero). Selectors are
 * prefixed `.ct-home` to clear Elementor's heading/button kit; loaded only
 * when the Home widget renders (wp_enqueue_style in render(), same scoping
 * mechanism as about.css / services.css / rentals.css / sales.css).
 *
 * Tokens mirror about.css / rentals.css / sales.css / components.css:
 *   orange #F56A22 (hover #d44a1c) · ink #1a1a1a · muted #74787c
 *   border #ededed · surface tint #f6f6f6 · heading font Space Grotesk
 */

.ct-home {
	color: #1a1a1a;
}

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

/* No horizontal padding — the page's container system (Vektor + Elementor)
 * owns the side gutter so it isn't doubled. max-width is kept as a safety
 * cap that re-centers content if the Elementor container is ever set to
 * Full Width. */
.ct-home__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Scoped under .ct-home (0,2,0) so the accent color beats Elementor's
 * text-kit color rules on headings, paragraphs, and spans. */
.ct-home .ct-home__accent {
	color: #F56A22;
}

/* ---------- Shared headings / copy ---------- */

.ct-home .ct-home__h1 {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 900;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: normal;
	color: #333;
	margin: 0 0 28px;
	text-transform: uppercase;
}

.ct-home .ct-home__h2 {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 900;
	font-size: 46px; /* matches the site's heading size (same as H1) */
	line-height: 1;
	letter-spacing: normal;
	color: #333;
	margin: 0 0 18px;
	text-transform: uppercase;
}

/* Lead/body are scoped (0,2,0) so their margins beat theme/kit paragraph
 * rules — same reason as the other rebuilt pages. */
.ct-home .ct-home__lead {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.6;
	color: #333;
	margin: 0 0 20px;
	max-width: 900px;
}

.ct-home .ct-home__lead:last-child {
	margin-bottom: 0;
}

/* ---------- Image placeholder (no media set) ---------- */

.ct-home__media--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		#2a2f33 0,
		#2a2f33 12px,
		#202428 12px,
		#202428 24px
	);
}

/* ---------- Button (shared across the page) ---------- */

.ct-home .ct-home__button {
	background: #F56A22;
	color: #fff;
	border: 1px solid #F56A22;
	border-radius: 0;
	padding: 16px 26px;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	min-height: 44px;
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease;
	box-shadow: none;
	text-shadow: none;
}

.ct-home .ct-home__button:hover,
.ct-home .ct-home__button:focus-visible {
	background: #d44a1c;
	border-color: #d44a1c;
	color: #fff;
}

.ct-home .ct-home__button:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.ct-home .ct-home__button--center {
	display: inline-flex;
}

.ct-home__arr {
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-weight: 500;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.ct-home .ct-home__button { transition: none; }
}

/* ---------- 1. Hero ---------- */

/* Full-bleed: break out of the centered container so the photo spans the
 * full viewport width regardless of the Elementor column it sits in, same
 * technique as .ct-about__story-media / .ct-rentals__band. aspect-ratio
 * drives the height until it hits max-height, which caps the band on wide
 * screens. This is the page's LCP image (eager/high fetchpriority, set in
 * class-home-widget.php). */
.ct-home__hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	aspect-ratio: 1600 / 560;
	max-height: 620px;
	background: #1a1a1a;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.ct-home .ct-home__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Left-to-right dark gradient so the white heading/button stay legible
 * over any photo, matching the darker left side of the mock's hero shot. */
.ct-home__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(10, 10, 10, 0.68) 0%,
		rgba(10, 10, 10, 0.4) 42%,
		rgba(10, 10, 10, 0.08) 68%,
		rgba(10, 10, 10, 0) 85%
	);
}

/* Unlike .ct-home__inner elsewhere on the page, this section is full-bleed
 * (100vw) and so isn't wrapped by the theme's own container gutter — the
 * heading/button need their own side padding or they hit the viewport edge
 * once the auto-centered max-width stops creating margin (~≤1200px wide). */
.ct-home__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 24px;
}

.ct-home .ct-home__hero-heading {
	color: #fff;
	max-width: 400px;
}

/* ---------- 2. Welcome copy ---------- */

.ct-home__welcome {
	padding: 48px 0 40px;
}

/* ---------- 3. Photo collage ---------- */

.ct-home__collage-wrap {
	padding: 0 0 56px;
}

.ct-home__collage {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	height: 480px;
}

.ct-home__collage-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	min-height: 0;
	min-width: 0;
}

.ct-home__collage-item {
	position: relative;
	overflow: hidden;
	min-height: 0;
	background: #202428;
}

.ct-home .ct-home__collage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Column 1: tall photo (welder w/ drum) over a wide short strip (machined parts). */
.ct-home__collage-col--1 .ct-home__collage-item--tall {
	flex: 2.43 1 0;
}

.ct-home__collage-col--1 .ct-home__collage-item--short {
	flex: 1 1 0;
}

/* Column 2: wide photo (seal rings) over two side-by-side (calipers, bearing boxes). */
.ct-home__collage-col--2 .ct-home__collage-item--wide {
	flex: 1.11 1 0;
}

.ct-home__collage-row {
	display: flex;
	gap: 14px;
	flex: 1 1 0;
	min-height: 0;
}

.ct-home__collage-item--half {
	flex: 1 1 0;
}

/* Column 3: single tall photo (drum interior) spanning the full height. */
.ct-home__collage-col--3 .ct-home__collage-item--full {
	flex: 1 1 0;
	height: 100%;
}

.ct-home__collage-cta {
	margin-top: 32px;
}

/* ---------- 5. Why Choose CentriTEK? ---------- */

.ct-home__why {
	padding: 56px 0 64px;
}

.ct-home__why-cards {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ct-home__why-card {
	display: flex;
	flex-direction: column;
}

.ct-home__why-media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: #202428;
	overflow: hidden;
}

.ct-home .ct-home__why-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient scrim keeps the white overlaid label legible on any photo. */
.ct-home__why-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.4) 26%,
		rgba(0, 0, 0, 0) 55%
	);
	pointer-events: none;
}

/* Label overlaid top-left of the photo — real text (not baked into the
 * image); white bold ALL CAPS via CSS, source stays lowercase. */
.ct-home .ct-home__why-label {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	z-index: 2;
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: normal;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ct-home .ct-home__why-caption {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: #333;
	margin: 16px 0 0;
}

/* ---------- 6. About teaser (restyled Go-To Experts banner) ---------- */

.ct-home__about-teaser {
	padding: 8px 0 72px;
}

.ct-home__about-cta {
	text-align: center;
	margin-bottom: 40px;
}

.ct-home .ct-home__banner-heading {
	margin: 0 0 24px;
}

/* Two explicit lines per mock 7 (a deliberate design break, not a
 * width-driven wrap — see class-home-widget.php doc comment). */
.ct-home .ct-home__banner-line {
	display: block;
}

.ct-home__banner-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1751 / 620;
	background: #202428;
	overflow: hidden;
}

.ct-home .ct-home__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

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

@media (max-width: 980px) {
	.ct-home .ct-home__h1 { font-size: 34px; }
	.ct-home .ct-home__h2 { font-size: 34px; }
	.ct-home .ct-home__hero-heading { max-width: 320px; }

	.ct-home__collage { height: 420px; }

	.ct-home__why-cards { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}

@media (max-width: 768px) {
	/* Collage collapses to a 2-column arrangement: unwrap the desktop
	 * flex-column/flex-row nesting via display:contents so all six items
	 * fall directly into a simple 2-col grid in source order. Aspect-ratio
	 * (not the desktop flex-grow proportions) drives each item's height so
	 * nothing distorts. */
	.ct-home__collage {
		grid-template-columns: repeat(2, 1fr);
		height: auto;
	}

	.ct-home__collage-col,
	.ct-home__collage-row {
		display: contents;
	}

	.ct-home__collage-item {
		flex: none;
		aspect-ratio: 4 / 3;
	}

	.ct-home__hero { aspect-ratio: 4 / 5; max-height: 560px; }
	.ct-home .ct-home__hero-heading { max-width: 100%; }
}

@media (max-width: 640px) {
	/* Smaller body/lead type for narrow screens. Scoped to match the base
	 * rules' (0,2,0) specificity, or they'd lose the cascade. */
	.ct-home .ct-home__lead { font-size: 17px; line-height: 1.6; }
	.ct-home .ct-home__why-caption { font-size: 14px; }

	/* Tighter vertical rhythm. */
	.ct-home__welcome { padding: 36px 0 28px; }
	.ct-home__collage-wrap { padding: 0 0 40px; }
	.ct-home__why { padding: 40px 0 48px; }
	.ct-home__about-teaser { padding: 0 0 48px; }
	.ct-home__about-cta { margin-bottom: 28px; }

	/* Collage: single column stack on very small screens. */
	.ct-home__collage { grid-template-columns: 1fr; }

	/* Why-choose cards: single column stack. */
	.ct-home__why-cards { grid-template-columns: 1fr; }
	.ct-home__why-media { aspect-ratio: 4 / 3; }

	.ct-home__hero { aspect-ratio: 3 / 4; }
}