/**
 * SFD Hero Home Block
 * Combines hero section with pain point cards that overlap
 */

/* Main wrapper */
.sfd-hero-home {
	position: relative;
	overflow-x: hidden;
}

/* Hero section */
.sfd-hero-home__hero {
	position: relative;
	min-height: 45vh;
	display: flex;
	align-items: center;
	background: linear-gradient(to top, #f8f9fa 0%, #ffffff 100%);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.sfd-hero-home__image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* Give the floating circles room to move without being clipped
	   by the parent flex item bounds. */
	overflow: visible;
	padding: 60px 30px;
	box-sizing: border-box;
}

.sfd-hero-home__image-placeholder > svg {
	overflow: visible;
	width: 100%;
	height: auto;
	max-width: 560px;
	/* Circles can draw outside the viewBox when animating, so let them. */
	isolation: isolate;
}

.sfd-hero-home__shot-composition {
	position: relative;
	width: 100%;
	max-width: 440px;
	aspect-ratio: 440 / 480;
	overflow: visible;
	isolation: isolate;
}

.sfd-hero-home__shot {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(38, 38, 38, 0.09);
}

/* Actual <img> inside each circle, contain so the full subject is always
   visible (no unwanted cropping). The background-color on each circle fills
   any letterbox gaps. */
.sfd-hero-home__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* After circle — Victoria's photo, solid fill background */
.sfd-hero-home__shot--after {
	overflow: hidden;
	top: -5%;
	right: -5%;
	width: 90%;
	aspect-ratio: 1;
	background-color: rgba(232, 245, 208, 0.45);
}

/* Before circle — smaller, solid fill, overlaps the main after circle */
.sfd-hero-home__shot--before {
	left: 12%;
	bottom: 10%;
	width: 30%;
	aspect-ratio: 1;
	background-color: rgba(238, 114, 142, 0.35);
	z-index: 2;
}

/* Make the "before" image a lighter black and white to visually distinguish it from the "after" shot */
.sfd-hero-home__shot--before img {
	filter: grayscale(100%) opacity(80%);
}

/* Ensure HTML circle divs are always fully opaque with normal blending.
   (SVG-era fill/mix-blend-mode/opacity rules are removed; these divs use
   background-image and must not be affected by blend modes or opacity.) */
.sfd-hero-home__shot.hero-image-circle--after,
.sfd-hero-home__shot.hero-image-circle--before {
	mix-blend-mode: normal;
	opacity: 1;
}

/* Shot labels removed — no longer used */

.sfd-hero-home__result-bubble {
	position: absolute;
	right: -2%;
	bottom: 17%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(74px, 24vw, 112px);
	height: clamp(62px, 20vw, 92px);
	border-radius: 58% 42% 54% 46% / 44% 58% 42% 56%;
	background: #EE728E;
	box-shadow: 0 10px 28px rgba(238, 114, 142, 0.18);
	color: #ffffff;
	font-family: 'Nunito', sans-serif;
	font-size: clamp(10px, 3vw, 15px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-align: center;
	pointer-events: none;
	animation-delay: -1s;
}

.sfd-hero-home__result-bubble span {
	display: block;
}

/* When hero animation is enabled, hide shot elements initially so they
   don't flash before the JS-driven slide-in animation starts.
   Target the specific elements the JS animates for maximum specificity. */
body:not(.sfd-hero-animation-disabled) .sfd-hero-home__shot--after,
body:not(.sfd-hero-animation-disabled) .sfd-hero-home__shot--before,
body:not(.sfd-hero-animation-disabled) .sfd-hero-home__result-bubble {
	opacity: 0;
	transform: translateY(30px);
}

/* Keep Before / After labels full opacity, just fade the background circles. */
.sfd-hero-home__image-placeholder svg rect {
	opacity: 0.8 !important;
}

.sfd-hero-home__image-placeholder svg text {
	opacity: 1;
}

/* SVG-only properties (fill, r) kept for any inline SVG usage.
   mix-blend-mode and opacity intentionally removed, these classes are
   also used on HTML div circles where blending/fading would hide images. */
.hero-image-circle--after {
	fill: rgba(232, 245, 208, 0.35); /* SVG: light green */
	r: 160;                           /* SVG: radius */
}

.hero-image-circle--before {
	fill: #EE728E;  /* SVG: brand pink */
	r: 100;         /* SVG: radius */
}

/* Floating animation for hero circles — disabled in favour of JS-driven
   slider-revolution-style elastic animation in view.js */
.hero-image-circle {
	/* animation: float 6s ease-in-out infinite; */
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

.hero-image-circle--before {
	/* animation-delay: -2s; */
}

.hero-image-circle--after {
	/* animation-delay: -4s; */
}

/* @keyframes float {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-10px); }
	100% { transform: translateY(0); }
} */

.sfd-hero-home__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	/* Large screens: text on left, image on right.
	   Smaller screens (below 1025px) switch to a stacked column
	   with the text first and image below (see media queries). */
	flex-direction: row;
	gap: 4rem;
	align-items: center;
}

.sfd-hero-home__content {
	flex: 1;
	min-width: 0;
	max-width: 540px;
}

.sfd-hero-home__image {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sfd-hero-home__headline {
	font-family: 'Nunito', sans-serif;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: #262626;
	margin: 0 0 1.25rem;
	letter-spacing: -0.02em;
}

.sfd-hero-home__headline-emphasis {
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.08em;
}

.sfd-hero-home__sub {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	color: #4a4a4a;
	line-height: 1.6;
	margin: 0 0 2rem;
}

.sfd-hero-home__sub strong {
	color: #262626;
}

.sfd-hero-home__sub-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(38, 38, 38, 0.4);
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.sfd-hero-home__sub-link:hover {
	color: #569E03;
	text-decoration-color: #569E03;
}

.sfd-hero__buttons {
	display: flex;
	gap: 16px;
	margin-bottom: 2rem;
	align-items: center;
}

/* Intentionally no .sfd-hero__cta visual overrides: inherit exact global .sfd-btn styling. */

.sfd-hero__cta--left {
	min-width: 240px;
}

.sfd-hero__cta--right {
	min-width: 125px;
	border: 2px solid #569E03;
}

.sfd-hero-home__trust-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	font-size: 0.875rem;
	color: #262626;
}

/* Keep each segment (stars block, "Over 108,000 members", link) atomic so
   adjacent dots/text don't run into each other when the row wraps. */
.sfd-hero-home__trust-bar > * {
	white-space: nowrap;
}

.sfd-hero-home__trust-bar .trust-bar__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.sfd-hero-home__trust-bar .trust-bar__dot {
	flex-shrink: 0;
	opacity: 0.5;
}


.sfd-hero-home__trust-bar a {
	color: #262626;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sfd-hero-home__trust-bar a:hover {
	color: #569E03;
}

.sfd-hero-home__trust-bar strong {
	color: #262626;
}

/* Pain cards section - sits above hero */
.sfd-hero-home__pain-cards {
	position: relative;
	z-index: 10;
	padding: 5rem 0;
	background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.sfd-hero-home__intro {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 3rem;
}

.sfd-hero-home__intro-title {
	font-family: 'Nunito', sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 800;
	color: #262626;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

.sfd-hero-home__intro-text {
	font-size: clamp(1rem, 1.8vw, 1.125rem);
	color: #4a4a4a;
	line-height: 1.75;
	margin: 0 0 0.75rem;
}

.sfd-hero-home__intro-text strong {
	color: #262626;
	font-weight: 700;
}

.sfd-hero-home__intro-text:last-child {
	margin-bottom: 0;
}

/* Reframe two-column layout - matches pain grid card style */
.pain-grid__reframe {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 3rem !important;
	align-items: center !important;
	margin-top: 3rem !important;
	padding: 2.5rem !important;
	background: transparent !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.pain-grid__reframe:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

.pain-grid__reframe-text p {
	font-family: 'Nunito', sans-serif;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	color: #262626;
	line-height: 1.4;
	margin: 0 0 0.75rem;
	text-align: left !important;
}

.pain-grid__reframe-text p:nth-child(2) {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	font-weight: 400;
	color: #4a4a4a;
	line-height: 1.6;
}

.pain-grid__reframe-text p:last-child {
	margin-bottom: 0;
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	font-weight: 600;
}

.pain-grid__reframe-text strong {
	color: #569E03;
	font-weight: 900;
}

.pain-grid__reframe-image {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;
	min-height: 240px;
}

.pain-grid__reframe-image::before,
.pain-grid__reframe-image::after {
	content: '';
	position: absolute;
	border-radius: 999px;
	filter: blur(2px);
	pointer-events: none;
	z-index: -1;
}

.pain-grid__reframe-image::before {
	width: clamp(150px, 45%, 230px);
	height: clamp(150px, 45%, 230px);
	background: rgba(238, 114, 142, 0.24);
	top: 4%;
	right: 18%;
	opacity: 0;
	transform: translate(80px, -80px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.pain-grid__reframe-image::after {
	width: clamp(130px, 38%, 200px);
	height: clamp(130px, 38%, 200px);
	background: rgba(140, 217, 51, 0.24);
	left: 14%;
	bottom: 2%;
	opacity: 0;
	transform: translate(-80px, 80px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Animate blobs into position when the reframe section scrolls into view.
   .sfd-animated is added by scroll-animations.js when the .pain-section
   enters the viewport. */
.sfd-animated .pain-grid__reframe-image::before,
.sfd-animated.pain-grid__reframe-image::before {
	opacity: 1;
	transform: translate(0, 0);
}

.sfd-animated .pain-grid__reframe-image::after,
.sfd-animated.pain-grid__reframe-image::after {
	opacity: 1;
	transform: translate(0, 0);
}

.pain-grid__reframe-image img,
.pain-grid__reframe-image svg {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 220px;
	height: auto;
	border-radius: 12px;
}

/* ────────────────────────────────────────────────────────────
   Responsive cascade
   ≥1025px  : 2-col desktop layout (image right, content left)
   1024–769 : tighten gap, cap image column (tablet landscape)
   768–561  : stack vertically, image above content (tablet portrait)
   ≤560     : compact phone layout (hide decorative image)
   ──────────────────────────────────────────────────────────── */

/* Tablet landscape / small laptop, stack so image drops below text */
@media (max-width: 1024px) {
	.sfd-hero-home__inner {
		flex-direction: column; /* text first, image below */
		gap: 2rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		align-items: center;
		text-align: center;
	}

	.sfd-hero-home__content {
		max-width: 760px;
		text-align: center;
	}

	.sfd-hero__buttons {
		justify-content: center;
	}

	.sfd-hero-home__trust-bar {
		justify-content: center;
	}

	/* Give the image column explicit width so it doesn't collapse in flex-column */
	.sfd-hero-home__image {
		width: 100%;
		max-width: 500px;
	}

	.sfd-hero-home__image-placeholder {
		/* Extra top padding to accommodate PNG overflowing above the circle */
		padding: 55px 10px 30px;
	}

	.sfd-hero-home__image-placeholder > svg {
		max-width: 400px;
	}

	.sfd-hero-home__shot-composition {
		max-width: 400px;
		/* The after circle is positioned at right:-5%, shifting visual centre right.
		   Nudge the composition left to compensate and look centred. */
		transform: translateX(-5%);
	}

	.sfd-hero-home__result-bubble {
		right: 0;
		bottom: 16%;
		width: 100px;
		height: 82px;
		font-size: 14px;
	}

	.sfd-hero__cta--left {
		min-width: 200px;
	}
}

/* Tablet portrait, keep the same stacked-column layout as 1024px,
   just tighten spacing and stack the buttons.
   No grid reordering, image stays below all the text content. */
@media (max-width: 768px) {
	.sfd-hero-home__hero {
		min-height: auto;
	}

	.sfd-hero-home__inner {
		gap: 1rem;
	}

	.sfd-hero-home__trust-bar {
		gap: 0.4rem 0.6rem;
	}

	.sfd-hero-home__trust-bar > * {
		font-size: 0.8125rem;
	}

	/* Full-width stacked buttons */
	.sfd-hero__buttons {
		flex-direction: column;
		width: 100%;
		gap: 12px;
		align-items: center;
	}

	.sfd-hero__cta {
		width: 100%;
		max-width: 400px;
	}

	.sfd-hero-home__image-placeholder {
		padding: 65px 10px 20px;
	}

	.sfd-hero-home__image-placeholder > svg {
		max-width: 320px;
	}

	.sfd-hero-home__shot-composition {
		max-width: 320px;
		transform: translateX(-5%);
	}

	.sfd-hero-home__result-bubble {
		right: 1%;
		bottom: 13%;
		width: 86px;
		height: 72px;
		font-size: 12px;
	}

	.pain-grid__reframe {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
		padding: 1.5rem !important;
	}

	.pain-grid__reframe-image {
		min-height: 180px;
	}
}

/* Phone, simplify further, stack buttons (keep image visible) */
@media (max-width: 560px) {
	.sfd-hero-home__image-placeholder {
		/* Must be tall enough to absorb PNG overflowing above the circle */
		padding: 55px 0 10px;
	}

	.sfd-hero-home__image-placeholder > svg {
		max-width: 280px;
	}

	.sfd-hero-home__shot-composition {
		max-width: 280px;
		transform: translateX(-5%);
	}

	.sfd-hero-home__result-bubble {
		right: 3%;
		bottom: 12%;
		width: 74px;
		height: 62px;
		font-size: 10px;
	}

	.sfd-hero__buttons {
		flex-direction: column;
		width: 100%;
		gap: 12px;
		align-items: center;
	}

	.sfd-hero__cta {
		width: 100%;
		max-width: 320px;
	}

	.sfd-hero-home__trust-bar {
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
	}

	.sfd-hero-home__trust-bar .trust-bar__dot {
		display: none;
	}
}

@media (max-width: 380px) {
	.sfd-hero-home__shot-composition {
		max-width: 250px;
	}

	.sfd-hero-home__result-bubble {
		right: 2%;
		bottom: 11%;
		width: 64px;
		height: 54px;
		font-size: 9px;
	}
}