/* ============================================================
   INNER HERO — .inner-hero
   Two-column: text left, image right. Used on all inner pages.
   ============================================================ */

/* ----------------------------------------------------------
   Base (mobile-first)
---------------------------------------------------------- */

.inner-hero {
	background: var(--color-white);
	overflow: hidden;
}

.inner-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-py);
	padding-inline: var(--container-pad);
	gap: var(--space-8);
	align-items: center;
}

/* Content — text column
---------------------------------------------------------- */

.inner-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Eyebrow
   15px Bold 700 UPPERCASE --color-primary
---------------------------------------------------------- */

.inner-hero__eyebrow {
	font-size: 0.9375rem;             /* 15px */
	font-weight: var(--weight-bold);  /* 700 */
	text-transform: uppercase;
	color: var(--color-primary);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	margin: 0;
}

/* Title
   clamp 40px → 80px, Bold 700, --color-text
---------------------------------------------------------- */

.inner-hero__title {
	font-size: clamp( 2.5rem, 6vw, 5rem );
	font-weight: var(--weight-bold);
	color: var(--color-text);
	line-height: 1.15;
	margin: 0;
}

/* Accent word — renders in primary red */

.inner-hero__title-accent {
	display: inline;
	color: var(--color-primary);
}

/* Body
   16px Regular 400 --color-text-muted
---------------------------------------------------------- */

.inner-hero__body {
	font-size: var(--size-base);
	font-weight: var(--weight-regular);
	color: #000000;
	line-height: 1.7;
	margin: 0;
	max-width: 52ch;
}

/* CTA row — primary button + optional info sheet link */

.inner-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: var(--space-2);
}

.inner-hero__cta {
	align-self: flex-start;
}

.inner-hero__info-sheet {
	font-size: 1rem;
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.inner-hero__info-sheet:hover,
.inner-hero__info-sheet:focus-visible {
	color: var(--color-primary-dark);
	opacity: 0.8;
}

/* Media — image column
---------------------------------------------------------- */

.inner-hero__media {
	width: 100%;
}

.inner-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: var(--radius-lg);
}

/* ----------------------------------------------------------
   Desktop (≥ 992px) — two-column layout
---------------------------------------------------------- */

@media (min-width: 992px) {

	.inner-hero__inner {
		grid-template-columns: 2.1fr 1fr;
		gap: var(--space-10);
		padding-block: var(--section-py);
	}

	.inner-hero__image {
		aspect-ratio: 3 / 4;
		border-radius: var(--radius-lg);
	}

}

/* ----------------------------------------------------------
   Large desktop (≥ 1280px) — image overflow effect
---------------------------------------------------------- */

@media (min-width: 1280px) {

	.inner-hero__image {
		width: 150%;
		max-width: 150%;
	}

}