/*
 * FULFIT — главная: HERO, PROMISE, STAFF
 *
 * Часть разделённого main.css (был 11103 строки, 79% из них не
 * использовались на конкретной странице). Файл собран из целых секций
 * исходника БЕЗ изменения их порядка и содержимого.
 *
 * Подключается: только главная (is_front_page)
 * Правится вручную, как обычный CSS. Общие для всех страниц стили —
 * в main-core.css; секции ищите по прежним баннерам-комментариям.
 */

/* =======================================================================
   HERO
   ======================================================================= */

.ff-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--hero-bg);
	/* Figma: 48px corner radius on both the 360 and 1920 reference frames —
	   constant, not fluid (previously fluid-clamped down to 24px on mobile;
	   confirmed against the mockup and corrected per client sign-off). */
	border-radius: 3rem;
	/* Figma: card padding-top is a constant 84px on both the 360 and 1920
	   reference frames (not fluid); sides/bottom are fluid between the
	   mobile (10px/10px) and desktop (213px/50px) reference values. */
	padding: 5.25rem clamp(0.625rem, -2.3029rem + 13.0128vw, 13.3125rem) clamp(0.625rem, 0.0481rem + 2.5641vw, 3.125rem);
}

/* Figma: the hero card sits on a tighter 10px outer gutter on the 360px
   frame (vs. the 16px used by every other full-width section) — below the
   width where "wide" alignment would otherwise start centering it, pin an
   explicit small margin so it doesn't bleed flush to the viewport edge. */
@media (max-width: 767px) {
	/* core's constrained-layout support always emits `margin-left/right:
	   auto !important` for any non-alignfull child (including alignwide) of
	   a constrained container — see wp-includes/block-supports/layout.php.
	   A plain (non-important) margin here would silently lose that fight,
	   the same reason a few of core's own near-equivalent rules elsewhere
	   in this file carry !important too. */
	.ff-hero {
		margin-inline: 10px !important;
		width: auto;
	}
}

/* >=768px: without an explicit width, alignwide only ever gets core's
   flat max-width:1595px (wideSize) + margin-inline:auto!important (the
   same mechanism explained in the comment right above) — the card
   stretches edge-to-edge with zero side gutter for every viewport
   narrower than wideSize itself (confirmed live: 0px margin from
   ~768px all the way up to ~1595px, since the box only ever stops
   growing once it actually hits that 1595px cap). Pin an explicit
   width so the card gets --ff-gutter on each side down here too,
   capped at the same 1595px Figma affords once the viewport is wide
   enough — border-box (see the global reset) means this width already
   accounts for the card's own fluid side padding above, so it can't
   cause horizontal scroll. margin-inline:auto is redundant with core's
   own !important rule (kept for readability; core's wins the tie
   either way, same value). */
@media (min-width: 768px) {
	.ff-hero {
		width: min(1595px, calc(100% - 2 * var(--ff-gutter)));
		margin-inline: auto;
	}
}

/* Decorative dot-grid texture (Figma node "Image", tiled IMAGE fill), inset
   50px from the card edge on desktop / 20px below 768px, sitting behind the
   content but above the glow. Figma scalingFactor 1.44 on the 20x20 source
   tile => 28.8px repeat. */
.ff-hero::before {
	content: "";
	position: absolute;
	inset: 50px;
	background-image: url("../images/hero-texture.png");
	background-repeat: repeat;
	background-size: 28.8px 28.8px;
	opacity: 0.1;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 767px) {
	.ff-hero::before {
		inset: 20px;
	}
}

/* Decorative blurred glow, bottom of the card (Figma: Ellipse 3, #8E43FF,
   blur 400 — approximated as blur(120px), since a literal 400px CSS blur
   would render the ellipse almost imperceptibly faint at this box size).
   Sits behind the dot texture. */
.ff-hero::after {
	content: "";
	position: absolute;
	left: 21.317%;
	bottom: 0;
	width: 57.43%;
	max-width: 916px;
	aspect-ratio: 916 / 274;
	background: var(--wp--preset--color--hero-glow);
	filter: blur(120px);
	opacity: 1;
	z-index: -1;
	pointer-events: none;
}

/* Figma: 40px between the intro block and the stats bar, and 40px between
   the text group and the CTA button, on BOTH the 360 and 1920 reference
   frames — a constant gap, not fluid. */
.ff-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.ff-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	max-width: 961px;
	width: 100%;
	margin-inline: auto;
}

/* Figma: 25px between H1/subtitle/FBO-line on both reference frames — also
   constant, not fluid. */
.ff-hero__intro > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5625rem;
	width: 100%;
}

.ff-hero__title {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.1731rem + 2.5641vw, 4.25rem);
	line-height: 1.18;
	margin: 0;
	max-width: 961px;
}

/* Keeps "и интернет- магазинов" (see hero.php) from splitting across two
   lines under ordinary word-wrap. Needed on mobile so the phrase lands as
   a single third line; harmless on desktop where it already fits on one
   line inside the wider box. */
.ff-hero__title-tail {
	white-space: nowrap;
}

@media (max-width: 767px) {
	/* Figma mobile H1 node is a fixed 320px/28px box, wrapping "Фулфилмент
	   для селлеров и интернет- магазинов" into exactly 3 lines: "Фулфилмент
	   для" / "селлеров" / "и интернет- магазинов". Browser Inter metrics
	   don't reproduce that exact 3-way split from max-width alone (fitting
	   "Фулфилмент для" needs >=~241px, but keeping "и интернет- магазинов"
	   off the "селлеров" line needs <~330px), so that trailing phrase is
	   glued together (.ff-hero__title-tail) and this box is sized to fit
	   the glued phrase (~326px at 28px) while still excluding "селлеров"
	   from line 1 (~383px). Font-size is frozen (not fluid) here so the
	   phrase can't outgrow the box anywhere in this range. */
	.ff-hero__title {
		max-width: 340px;
		font-size: 1.75rem;
	}
}

.ff-hero__subtitle {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	font-size: clamp(0.9375rem, 0.8942rem + 0.1923vw, 1.125rem);
	line-height: 1.44;
	max-width: 720px;
	margin: 0;
}

@media (max-width: 767px) {
	/* Figma: the subtitle does not exist on the 360px mobile frame at all. */
	.ff-hero__subtitle {
		display: none !important;
	}
}

.ff-hero__partners-line {
	color: var(--wp--preset--color--white);
	opacity: 0.76;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	font-size: clamp(0.8125rem, 0.7692rem + 0.1923vw, 1rem);
	line-height: 1.5;
	max-width: 748px;
	margin: 0;
}

.ff-hero__cta {
	margin: 0;
}

.ff-hero__stats {
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Figma: 36px corner radius on both the 360 and 1920 reference frames —
	   constant, not fluid. Padding is fluid between the mobile (24px/10px)
	   and desktop (40px/86px) reference values. */
	border-radius: 2.25rem;
	padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem) clamp(0.625rem, -0.4712rem + 4.8718vw, 5.375rem);
	row-gap: clamp(1rem, 0.8rem + 0.8889vw, 1.5rem);
	column-gap: clamp(0.5rem, 0.2rem + 1.3vw, 2rem);
}

.ff-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 auto;
	min-width: 130px;
}

.ff-stat__num {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem);
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
}

.ff-stat__label {
	color: var(--wp--preset--color--white);
	opacity: 0.8;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 500;
	font-size: clamp(0.8125rem, 0.7692rem + 0.1923vw, 1rem);
	line-height: 1.5;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 960px) {
	.ff-hero__stats {
		flex-wrap: wrap;
		justify-content: center;
	}

	.ff-stat {
		flex: 1 1 40%;
		min-width: 45%;
	}

	.ff-stat__num,
	.ff-stat__label {
		white-space: normal;
	}
}

/* =======================================================================
   PROMISE (heading + bullet grid + warehouse photo)
   ======================================================================= */

.ff-promise {
	background-color: var(--wp--preset--color--white);
	padding-top: clamp(2.5rem, 2rem + 2.2222vw, 4.375rem);
	padding-bottom: clamp(2.5rem, 2rem + 2.2222vw, 4.375rem);
	padding-inline: var(--ff-gutter);
}

/* Deficit lockstep — see the --ff-gutter comment at the top of the
   file: this section has no "align", so WordPress itself caps it at
   1170px; without this, a growing padding-inline alone would eat
   into that fixed box and narrow the 1138px content it has today.
   :not(.alignfull) defensively matches .ff-steps's own fix right above
   (see its comment) in case this exact section is ever saved as
   align:full on some page too — cheap insurance, not confirmed needed
   here today. */
.ff-promise:not(.alignfull) {
	max-width: calc(1170px + (var(--ff-gutter) - 16px) * 2);
}

/* Figma desktop (38:886 -> 41:437 -> 38:930): 40px/600, line-height 50px,
   text-box hard-broken "Упакуем, промаркируем" / "и доставим ваш товар без
   задержек" (explicit line break in the source), text-box width 767px,
   centered (counterAxisAlignItems: CENTER on the 1170px-wide section frame
   — the same content-size as the header container, see theme.json). 767px
   leaves a deliberate buffer over the ~727px a browser actually needs to
   fit line 2 on one line (see .ff-partners__title above for the same
   Figma/browser font-metric-drift allowance). */
.ff-promise__title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.5769rem + 0.7692vw, 2.5rem);
	line-height: 1.25;
	text-align: center;
	max-width: 767px;
	margin: 0 auto clamp(2.5rem, 2.3558rem + 0.6410vw, 3.125rem);
}

@media (max-width: 767px) {
	/* Figma mobile (100:176 -> 108:437 -> 108:438): fixed 328px text box
	   (the 360px mobile frame minus this section's 16px inline padding on
	   each side), 28px/600, line-height 30px. At that exact width, real
	   Inter metrics wrap the two hard-broken lines again, into 4 lines
	   total: "Упакуем," / "промаркируем" / "и доставим ваш товар" / "без
	   задержек" (confirmed with the Range API against live Inter). Freezing
	   max-width to 328px (rather than trusting each device's own width)
	   reproduces that exact split at every mobile viewport (375/390/414/
	   428...), the same way .ff-hero__title freezes to 340px instead of
	   flexing with the viewport. Font-size is frozen too (not clamped) so
	   it can't outgrow the box anywhere in this range. */
	.ff-promise__title {
		max-width: 328px;
		font-size: 1.75rem;
		line-height: 1.0714;
	}
}

.ff-promise__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	/* Figma: 54px gap on the 1170px desktop frame (41:436), 30px on the
	   328px mobile frame (108:439, stacked). */
	gap: clamp(1.875rem, 1.5288rem + 1.5385vw, 3.375rem);
}

.ff-promise__col {
	display: flex;
	flex-direction: column;
	/* Figma: 50px gap desktop (41:435), 30px mobile (108:440). */
	gap: clamp(1.875rem, 1.5865rem + 1.2821vw, 3.125rem);
	flex: 1 1 480px;
}

.ff-promise__bullets {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Figma: gridRowGap/gridColumnGap both 30px on the desktop grid
	   (41:428). Mobile source frame (108:441) only gives one usable value
	   (itemSpacing 10px) — reused for both axes since the grid collapses to
	   a single column below 640px anyway. */
	gap: clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);
}

/* Figma "Background+Border" card (e.g. 38:1024 desktop / 108:442 mobile):
   1px solid #ECECF5 (bg-soft) border, 12px radius, 19px/16px padding —
   identical on both reference frames, so these are constants, not fluid.
   The white fill layer exists in the source but is toggled off
   (visible:false) there, which reads the same either way against this
   section's own white background — set it explicitly since the client's
   reference screenshot calls for a visibly white card (also makes the
   border read correctly if the section background ever changes). */
.ff-promise__bullet {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--bg-soft);
	border-radius: 12px;
	padding: 19px 16px;
}

/* Real 44x44 artwork (patterns/promise.php) with its own rounded-square
   backdrop baked in by the client — constant 44x44 on both Figma reference
   frames, no fluid scaling, no extra CSS backdrop. */
.ff-promise__bullet-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
}

.ff-promise__bullet-icon img {
	display: block;
	width: 44px;
	height: 44px;
}

.ff-promise__bullet-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.33;
}

.ff-promise__cta {
	margin: 0;
}

.ff-promise__photo {
	flex: 1 1 440px;
	margin: 0;
}

.ff-promise__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

@media (max-width: 640px) {
	/* Figma mobile (108:437 -> 108:441, HORIZONTAL auto-layout, NO_WRAP,
	   itemSpacing 10): the 6 cards are a horizontal scroller, not a
	   stacked column. Confirmed by client 2026-07-19 after a prior pass
	   misread the overflow row as an unfinished stack. On the 360px
	   reference frame the row's visible box is 328px (this section's
	   content width) and each card (108:442) is a fixed 277x82, so one
	   card sits fully in view with ~41px of the next card peeking in
	   (328 - 277 - 10 gap). Card width/gap are frozen in px (not the
	   usual fluid clamp) for the same reason .ff-promise__title freezes
	   below 767px: a scroll-snap track needs a stable card size to keep
	   that peek visible at every real phone width (375/390/414/428...),
	   not just at exactly 360px. */
	.ff-promise__col {
		/* Without this, .ff-promise__col (a flex item of the wrapping
		   .ff-promise__row) keeps its default min-width: auto, which
		   never shrinks below its content's intrinsic width. That lets
		   the nowrap card row's full ~1712px content width push the
		   whole page into horizontal scroll instead of clipping inside
		   .ff-promise__bullets below. Same reasoning applies one level
		   down, so .ff-promise__bullets repeats the override on itself. */
		min-width: 0;
	}

	.ff-promise__bullets {
		display: flex;
		flex-wrap: nowrap;
		min-width: 0;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ff-promise__bullets::-webkit-scrollbar {
		display: none;
	}

	.ff-promise__bullet {
		flex: 0 0 277px;
		scroll-snap-align: start;
	}
}

/* =======================================================================
   STAFF (role badges — "уже в штате")

   Full-bleed #F6F5FC background unchanged from the 2026-07-20 pass (see
   .ff-advantages above for the shared-band rationale). This block is the
   later redesign of the badges themselves.

   GEOMETRY — _figma/full.json desktop 38:886 -> 109:933 (title 54:512,
   grid 109:932, badges 54:513/517/521/525/529/533, icon circles 54:514
   etc., avatar images 54:515 etc.) and mobile 100:176 -> 109:934 (title
   109:935, row 109:936, badges 109:937/941/945/949/953/957). Both frames
   share identical badge metrics (275x72 pill, 56px icon circle, 36px
   icon, 18px text) — only the container differs: a 4-column CSS grid
   desktop (row 2's 2 items land left-aligned under columns 1-2 for free,
   via Grid auto-placement with no explicit column spans, matching Figma
   exactly) vs a horizontal scroll-snap slider mobile — same technique as
   .ff-categories__grid / .ff-promise__bullets (see their comments for the
   full rationale). Pill shadow is the client's literal spec: 0px 30px
   60px 0px #9E9BAE33 — identical to Figma's own DROP_SHADOW (radius 60,
   offset 0/30, color #9E9BAE @ 20% opacity = hex alpha 33). Badge icons
   are the client's existing uploaded avatar PNGs (staff-*.png, ids 45-50,
   transparent-background flat art, confirmed via pixel sampling — not
   photos) — kept as-is per instruction, just newly given the 56px
   lavender (#F2EFFF, a one-off not in theme.json's palette) circle
   backdrop Figma's own icon nodes show.
   ======================================================================= */

.ff-staff {
	background-color: var(--wp--preset--color--bg-lavender);
	/* Every top-level section in .entry-content gets an automatic 24px
	   margin-top from core's block-gap support (confirmed: every ff-*
	   section here has it except the first, ff-hero) — normally invisible
	   between sections that already differ in background color, but a
	   dealbreaker here: it would leave a 24px WHITE strip (the page's own
	   background showing through) between two sections that are only
	   "seamless" because they share the exact same #F6F5FC. Cancelled
	   here rather than removed globally so every other section pair on
	   the page keeps its existing spacing untouched. */
	margin-top: 0;
	padding-top: clamp(2.5rem, 2rem + 2.2222vw, 4.375rem);
	padding-bottom: clamp(2.5rem, 2rem + 2.2222vw, 4.375rem);
	padding-inline: var(--ff-gutter);
}

.ff-staff__title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.5769rem + 0.7692vw, 2.5rem);
	line-height: 1.25;
	text-align: center;
	/* Figma title -> row gap: a flat 50px at BOTH reference frames
	   (54:512 bottom 9156 vs 109:932 top 9206 desktop; 109:935 bottom
	   8036 vs 109:936 top 8086 mobile) — frozen, not clamped. */
	margin: 0 auto 50px;
}

/* 3 phrases, nowrap-glued (same technique as .ff-advantages__title-seg)
   so line breaks land exactly where Figma puts them instead of relying
   on the browser's own word-wrap: seg--tail ("уже в штате") is always
   its own block/line at both breakpoints; seg--mp ("с маркетплейсами —")
   is inline on desktop (shares line 1 with the first segment) and block
   on mobile. Reproduces Figma's desktop 2-line "Всё для работы с
   маркетплейсами — / уже в штате" vs mobile 3-line "Всё для работы / с
   маркетплейсами — / уже в штате" (109:935 characters hard-break after
   "работы", then "с маркетплейсами — уже в штате" wraps a 2nd time under
   its own 328px width — reproduced here deterministically instead of via
   width-tuning, the same reliability trade-off .ff-hero__title's comment
   documents for a similar 3-line phrase). */
.ff-staff__title-seg {
	white-space: nowrap;
}

.ff-staff__title-seg--tail {
	display: block;
}

.ff-staff__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 960px) {
	.ff-staff__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ff-staff__badge {
	display: flex;
	align-items: center;
	gap: 24px;
	background-color: var(--wp--preset--color--white);
	border-radius: 999px;
	padding: 8px;
	box-shadow: 0px 30px 60px 0px #9E9BAE33;
}

.ff-staff__badge-photo {
	margin: 0;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #F2EFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ff-staff__badge-photo img {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.ff-staff__badge-text {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.03em;
	line-height: 1.2222;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.ff-staff__title {
		line-height: 1.0714;
	}

	.ff-staff__title-seg--mp {
		display: block;
	}

	/* Horizontal card slider — same scroll-snap technique as
	   .ff-categories__grid / .ff-promise__bullets (see their comments).
	   Figma mobile row (109:936): HORIZONTAL, NO_WRAP, itemSpacing 10;
	   badges fixed 275px. On the 328px content width that's one badge
	   fully visible plus a ~43px peek of the next. */
	.ff-staff__row {
		display: flex;
		flex-wrap: nowrap;
		min-width: 0;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ff-staff__row::-webkit-scrollbar {
		display: none;
	}

	.ff-staff__badge {
		flex: 0 0 275px;
		scroll-snap-align: start;
	}
}