/* ==========================================================================
   Service Hero Block — front-end styles
   Matches the supplied Figma spec:
   - Title: Syne 700, 36px, #191919
   - Description: Google Sans 400, 16px, #778AA9
   - Image: 630x317, radius 30px
   - Counter number: Syne 700, 40px, #B51B5A
   - Counter label: Syne 700, 20px, #191919
   - Equal left/right whitespace around a centered content column
   - On stacked layouts: image first, then title/description, both
     containers share the same width and alignment
   ========================================================================== */

.shb-hero {
	width: 100%;
	/* background: #ffffff; */
	overflow: hidden;
}

/* BeTheme caps its page/content wrapper (~1140–1240px) by default, which
   would silently limit this block below 1600px regardless of its own
   max-width. Widen the actual wrapping element so the hero can reach
   1600px like the other plugins. Scoped via :has() so it only affects
   wrappers that contain this block. */
.container:has(> .shb-hero),
.container:has(.shb-hero),
.Content:has(.shb-hero),
#Content:has(.shb-hero),
.content_wrapper:has(.shb-hero),
.mfn-main-container:has(.shb-hero),
.mfn-builder-content-wraper:has(.shb-hero) {
	max-width: none !important;
	width: 100% !important;
}

.shb-hero__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 64px 24px;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Top row: text (left) + image (right)
   --------------------------------------------------------------------- */
.shb-hero__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 32px;
}

.shb-hero__text {
	/* flex: 1 1 460px; */
	max-width: 529px;
	width: 100%;
	box-sizing: border-box;
}

.shb-hero__title {
	font-family: 'Syne', sans-serif !important;
	font-weight: 700;
	font-style: normal;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: 0;
	color: #191919;
	margin: 0 0 18px;
}

.shb-hero__desc,
.shb-hero__desc p {
	font-family: 'Google Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 19px;
	line-height: 1.6;
	letter-spacing: 0;
	color: #778AA9;
	margin: 0 0 18px;
}

.shb-hero__desc p:last-child {
	margin-bottom: 0;
}

.shb-hero__media {
	max-width: 630px;
	width: 100%;
	box-sizing: border-box;
}

.shb-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 317px;
	object-fit: cover;
	border-radius: 30px;
}

/* ---------------------------------------------------------------------
   Counters row
   --------------------------------------------------------------------- */
/* Desktop keeps a single wrapping flex row: this row spans the full width of the
   block (it sits below the image, not inside the text column), so all four
   counters fit on one line and there is nothing to align. The 2-column grid that
   aligns them lives in the tablet breakpoint below, which is the only place they
   actually wrap. */
.shb-hero__counters {
	display: flex;
	flex-wrap: wrap;
	gap: 44px 56px;
}

.shb-hero__counter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 140px;
}

.shb-hero__counter-number {
	font-family: 'Syne', sans-serif !important;
	font-weight: 700;
	font-style: normal;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 0;
	color: #B51B5A;
}

.shb-hero__counter-label {
	font-family: 'Syne', sans-serif !important;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #191919;
}

/* ---------------------------------------------------------------------
   Responsive: below this width the image and text wrap onto separate
   rows. Per spec: image comes FIRST, then title + description, and
   both the image container and text container share identical width
   and alignment (both simply become full-width, stacked, left aligned).
   --------------------------------------------------------------------- */
@media (max-width: 992px) {
	.shb-hero__inner {
		padding: 48px 20px;
	}

	.shb-hero__row {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-bottom: 28px;
	}

	.shb-hero__media {
		order: -1; /* image first */
		max-width: 100%;
	}

	.shb-hero__text {
		max-width: 100%;
	}

	.shb-hero__title {
		font-size: 30px;
	}

	/* Tablets only. Here the four counters no longer fit on one line, and as a
	   wrapping flex row each one was sized by its own content — so the second
	   counter of row 1 started at a different x than the second of row 2 and the
	   block read as ragged (iPad Mini, iPad Air, Zenbook Fold). Grid tracks are
	   shared by every row, so the numbers and labels line up down the columns.
	   `max-content` keeps the block as compact as the flex version was — the
	   columns hug the widest label instead of splitting the full width — and the
	   `minmax(0, …)` floor lets a column shrink rather than overflow if a label is
	   ever longer than the room available. */
	.shb-hero__counters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: start;
		gap: 28px 40px;
	}
}

@media (max-width: 600px) {
	.shb-hero__inner {
		padding: 36px 16px;
	}

	.shb-hero__title {
		font-size: 25px;
		margin-bottom: 16px;
		text-align: center;
	}

	.shb-hero__desc,
	.shb-hero__desc p {
		font-size: 15px;
	}

	.shb-hero__media img {
		border-radius: 18px;
		max-height: none;
	}

	.shb-hero__counters {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.shb-hero__counter-number {
		font-size: 32px;
	}

	.shb-hero__counter-label {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
   Scroll-reveal entrance animation — "Cinematic split"
   The left text block (title -> description -> counters) rises and fades
   in as a slow top-down stagger; the hero media image does a slow
   scale-DOWN settle (scale(1.06) -> scale(1)), like a camera coming to
   rest. Animates opacity + transform only (no layout shift, no filter).
   --------------------------------------------------------------------- */
.shb-hero.shb-reveal .shb-hero__title,
.shb-hero.shb-reveal .shb-hero__desc,
.shb-hero.shb-reveal .shb-hero__counters,
.shb-hero.shb-reveal .shb-hero__media {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Left text block: rises up from below. */
.shb-hero.shb-reveal .shb-hero__title,
.shb-hero.shb-reveal .shb-hero__desc,
.shb-hero.shb-reveal .shb-hero__counters {
	transform: translateY(36px);
}

/* Media image: slow scale-down settle, like a camera coming to rest. */
.shb-hero.shb-reveal .shb-hero__media {
	transform: scale(1.06);
	transition:
		opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered entrance order: title -> description -> counters. */
.shb-hero.shb-reveal .shb-hero__title {
	transition-delay: 0.05s;
}

.shb-hero.shb-reveal .shb-hero__desc {
	transition-delay: 0.22s;
}

.shb-hero.shb-reveal .shb-hero__counters {
	transition-delay: 0.42s;
}

.shb-hero.shb-reveal .shb-hero__media {
	transition-delay: 0.12s;
}

/* Revealed (in-view) state: settle everything to its resting position. */
.shb-hero.shb-reveal.shb-in .shb-hero__title,
.shb-hero.shb-reveal.shb-in .shb-hero__desc,
.shb-hero.shb-reveal.shb-in .shb-hero__counters,
.shb-hero.shb-reveal.shb-in .shb-hero__media {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.shb-hero.shb-reveal .shb-hero__title,
	.shb-hero.shb-reveal .shb-hero__desc,
	.shb-hero.shb-reveal .shb-hero__counters,
	.shb-hero.shb-reveal .shb-hero__media {
		opacity: 1;
		transform: none;
		transition: none;
	}
}