/* ============================================================================
   CAPTAIN PIPE 2.0 — HERO  (FASE 1)
   One hero. No slider. White. Desktop ~45/55 (content/media).
   Product is meant to "float" on white — no card, no artificial background.
   ========================================================================== */

/* Collapse the empty front-page article; the hero (inside <main>) is the content. */
body.home .entry-header,
body.home .entry-content {
	display: none;
}
body.home .inside-article {
	padding: 0;
	border: 0;
}
body.home #main,
body.home .site-content .content-area {
	padding: 0;
}

/* ---- Hero shell --------------------------------------------------- */
.cs-hero {
	background: var(--cs-bg);
}
.cs-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* ---- Content --------------------------------------------------- */
.cs-hero__content {
	max-width: 34rem;
}
.cs-hero__eyebrow {
	margin: 0 0 1.25rem;
	font-size: var(--cs-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--cs-tracking-cap);
	text-transform: uppercase;
	color: var(--cs-muted);
}
.cs-hero__title {
	margin: 0 0 1.25rem;
	font-size: var(--cs-fs-hero);
	line-height: var(--cs-lh-tight);
	letter-spacing: -0.02em;
}
.cs-hero__lede {
	margin: 0 0 2.25rem;
	font-size: var(--cs-fs-lede);
	line-height: 1.5;
	color: var(--cs-ink-soft);
}
.cs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* ---- Media (real image OR reserved slot) --------------------- */
.cs-hero__media {
	position: relative;
}
.cs-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 68vh;
	object-fit: contain;
	/* extremely subtle "floating" shadow, no card */
	filter: drop-shadow(0 26px 44px rgba(22, 21, 15, 0.10));
}
.cs-hero__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	aspect-ratio: 4 / 5;
	max-height: 620px;
	background: var(--cs-surface);
	border: 1px dashed var(--cs-line);
	color: var(--cs-muted);
	font-family: var(--cs-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.7;
	text-transform: uppercase;
}

/* ---- Desktop: 45 / 55 split, controlled height --------------- */
@media (min-width: 1024px) {
	.cs-hero__inner {
		grid-template-columns: 45fr 55fr;
		gap: clamp(3rem, 5vw, 6rem);
		min-height: clamp(620px, 68vh, 720px);
		padding-block: clamp(3.5rem, 6vw, 6rem);
	}
	.cs-hero__media {
		justify-self: end;
		width: 100%;
	}
}

/* ---- Tablet: tighten proportionally ------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.cs-hero__inner {
		gap: 2.5rem;
	}
	.cs-hero__slot {
		max-width: 460px;
		margin-inline: auto;
	}
}

/* ---- Mobile: auto height, media first is avoided (content leads) --- */
@media (max-width: 767.98px) {
	.cs-hero__slot {
		aspect-ratio: 3 / 4;
	}
}

/* ============================================================================
   MODE 'image'  (visual test)
   Full-bleed hero graphic directly under the header. No container, no side
   padding, no white frame, no overlay. Aspect ratio preserved on every screen
   (width 100% + height auto + intrinsic dimensions => no stretch, no crop).
   ========================================================================== */
.cs-hero--image {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--cs-bg);
	font-size: 0;    /* kill the inline-image baseline gap */
	line-height: 0;
}
.cs-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
}