/* =========================================================================
   nh-feature-card — reusable two-column card (SINGLE SOURCE OF TRUTH).
   Soft panel; title stays 100px from the top, while subtitle + body are pulled
   upward by a capped spacer so the title-to-copy gap never exceeds 275px.
   Stacks to one column below 1024px.

   Variants are BLOCK MODIFIER CLASSES driven by block attributes — there is NO
   per-page (.page-{slug}) scoping. Set them in the editor:
     • --spacing-wide  → larger vertical rhythm (e.g. stacked email cards)
     • --spacing-band  → tall vertical band (e.g. forums revenue card)
     • --zoom-image    → photo scales 1.5 → 1 when the card enters the viewport

   Loaded by the block's own style handle (ow-nh-feature-card); design tokens
   (--nh-*) come from the shared ow-newhome stylesheet it depends on.
   ========================================================================= */
.nh-feature-card {
	padding: 0;
	color: var(--nh-fg);
}
.nh-feature-card__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}
.nh-feature-card__panel {
	background: var(--nh-card-bg);
	border-radius: var(--nh-radius);
	min-height: 650px;          /* Figma 126:520 — 32px inset + 586 image + 32px */
	display: grid;
	/* Text flexes; the image column auto-sizes to the media's min-width. The
	   image is position:absolute so it never pushes the track past that floor. */
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: hidden;
	position: relative;
}
.nh-feature-card__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 100px 48px 64px 64px;    /* 100px top → title sits 100px from the top */
	gap: 0;
}
/* Keep title and lower copy connected: max 275px gap, but allow it to shrink
   when the text/image height leaves less room. */
.nh-feature-card__spacer {
	flex: 1 1 0;
	max-height: 275px;
	min-height: 0;
}
.nh-feature-card__title {
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 0;
	max-width: 420px;
}
.nh-feature-card__bottom {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 380px;
}
.nh-feature-card__subtitle {
	display: block;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.05em;
	margin: 0;
}
.nh-feature-card__body {
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}
.nh-feature-card__media {
	margin: 32px;               /* 32px inset on ALL sides (Figma 126:520) */
	min-width: 569px;           /* image box width floor */
	max-width: 586px;           /* image box width cap (Figma) */
	min-height: 589px;          /* image box height */
	overflow: hidden;
	align-self: stretch;
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* On desktop the background IS the image — hide the <img> inside */
.nh-feature-card__media-img {
	display: none !important;
}
@media (max-width: 1023.98px) {
	.nh-feature-card__media-img {
		display: block !important;
	}
}

/* --- variants: block attributes → modifier classes (no page scoping) ----- */
.nh-feature-card--spacing-wide,
.nh-feature-card--spacing-band {
	padding: 0;
}

/* Photo loads zoomed-in (scale 1.6) and eases back to its natural size once the
   card enters the viewport (the shared IntersectionObserver adds .is-visible on
   the section). We animate transform on a ::before layer rather than
   background-size, because background-size cannot interpolate to/from the
   `cover` keyword — it would jump instead of zoom. */
.nh-feature-card--zoom-image .nh-feature-card__media {
	position: relative;
}
.nh-feature-card--zoom-image .nh-feature-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;          /* same image / cover / center as the figure */
	transform: scale(1.6);
	transform-origin: center;
	transition: transform 2.3s cubic-bezier(.43, .195, .02, 1);
	will-change: transform;
}
.nh-feature-card--zoom-image.is-visible .nh-feature-card__media::before {
	transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.nh-feature-card--zoom-image .nh-feature-card__media::before {
		transform: none;
		transition: none;
	}
}

/* --- image-left: mirror the default layout with image on the left ---------- */
.nh-feature-card--image-left .nh-feature-card__panel {
	grid-template-columns: auto minmax(0, 1fr);
}
.nh-feature-card--image-left .nh-feature-card__media {
	order: -1;
	margin: 18px;
}
.nh-feature-card--image-left .nh-feature-card__text {
	/* mirror the asymmetric padding (default: 100px 48px 64px 64px) */
	padding: 100px 64px 64px 48px;
}

/* Allow HTML lists in the body field (e.g. bullet points) */
.nh-feature-card__body ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
}
.nh-feature-card__body li {
	margin-bottom: 8px;
}
.nh-feature-card__body li:last-child {
	margin-bottom: 0;
}

/* --- collapse to a single stacked column below 1024px ------------------- */
@media (max-width: 1023.98px) {
	.nh-feature-card,
	.nh-feature-card--spacing-wide,
	.nh-feature-card--spacing-band {
		padding: 0;
	}
	.nh-feature-card__inner {
		padding-bottom: var(--nh-gutter);
	}
	/* override both base and image-left panel rules to force single column */
	.nh-feature-card__panel,
	.nh-feature-card--image-left .nh-feature-card__panel {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.nh-feature-card__panel {
		padding: 40px 28px 32px;
	}
	.nh-feature-card__text {
		padding: 0 0 30px 0;
		gap: 32px;
	}
	.nh-feature-card__bottom {
		max-width: 100%;
	}
	.nh-feature-card__spacer   { display: none; }
	.nh-feature-card__title    { font-size: 32px; }
	/* reset order so text is first (top), image is second (bottom) */
	.nh-feature-card--image-left .nh-feature-card__media {
		order: 0;
	}
	.nh-feature-card__media {
		width: 100%;
		margin: 0;
		min-width: 0;
		max-width: none;
		min-height: 0;
		aspect-ratio: 569 / 589;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 5px;
	}
	/* inline <img> sizing (display toggled by the rule above the media query) */
	.nh-feature-card__media-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	/* Mobile zoom: the background (and its ::before layer) is nulled here, so the
	   <img> is the visible photo — scale that instead. The media box keeps
	   overflow:hidden from the base rule, so the scaled image is clipped. */
	.nh-feature-card--zoom-image .nh-feature-card__media::before {
		display: none;
	}
	.nh-feature-card--zoom-image .nh-feature-card__media-img {
		transform: scale(1.6);
		transform-origin: center;
		transition: transform 2.3s cubic-bezier(.43, .195, .02, 1);
		will-change: transform;
	}
	.nh-feature-card--zoom-image.is-visible .nh-feature-card__media-img {
		transform: scale(1);
	}
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
	.nh-feature-card--zoom-image .nh-feature-card__media-img {
		transform: none;
		transition: none;
	}
}

@media (max-width: 600px) {
	.nh-feature-card__inner {
		padding: 0;
	}

	.nh-feature-card__panel {
		padding: 70px 24px;
		border-radius: 0;
	}

	.nh-feature-card__text {
		padding: 0;
		gap: 0;
		margin-bottom: 55px;
	}

	.nh-feature-card__media {
		border-radius: 5px;
	}

	.nh-feature-card__title {
		font-size: 22px;
		line-height: 1.1;
		letter-spacing: -2px;
		margin-bottom: 20px;
	}

	.nh-feature-card__bottom {
		gap: 0;
	}

	.nh-feature-card__subtitle {
		font-size: 16px;
		line-height: 1.15;
		letter-spacing: -1.5px;
		margin-bottom: 20px;
	}

	.nh-feature-card__body {
		font-size: 14px;
		line-height: 1.15;
		letter-spacing: -0.5px;
		margin-bottom: 0;
	}
}