.wp-block-yummo-feature-auto-layout-swipe {
--c-primary: var(--wp--preset--color--primary, #5c1a34);
--c-cream: var(--wp--preset--color--cream, #f6eddc);
--c-pink: var(--wp--preset--color--pink, #fa8fc2);
--c-mint: var(--wp--preset--color--mint, #b8f2ce);
--ease: var(--wp--custom--transition--ease, cubic-bezier(.25, .46, .45, .94));
--page-px: var(--wp--preset--spacing--page-x, clamp(1rem, 2.22vw, 2rem));
--header-h: clamp(3rem, 12.22vw, 11rem);
/* Figma frame: 1440 × 900. h2 = 112px, body = 18px (line 22). */
--fals-h2: 112px;
--fals-body: 18px;
--fals-body-lh: 22px;
background: var(--c-mint);
container-type: inline-size;
container-name: yummo-feature-auto-layout-swipe;
scroll-snap-align: start;
scroll-snap-stop: always;
max-height: clamp(47.4rem, calc(54.79vw - 5.47rem), 74.9rem);
overflow: hidden;
/* Mobile: drop the height cap and overflow clip. The swipe variant
does NOT scroll-jack on mobile, so the section is free-flowing
and must grow to the slide's natural stacked height (bubble +
title + desc + image). The original feature-auto-layout could
keep `max-height: 44.375rem` here only because scroll-jack
pinned it to viewport height; reusing that cap clips the image. */
@media (max-width: 47.9375rem) {
max-height: none;
overflow: visible;
}
.section-feature-auto-layout-swipe {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
@media (max-width: 47.9375rem) {
.section-feature-auto-layout-swipe {
height: auto;
overflow: visible;
}
}
/* ── Horizontal track — native scroll ────────────────── */
.fals-track {
flex: 1;
display: flex;
align-items: center;
gap: 1rem;
padding-inline-end: 104px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
min-height: 758px;
}
.fals-track::-webkit-scrollbar { display: none; }
/* ── Slide ──────────────────────────────────────────── */
.fals-slide {
flex-shrink: 0;
height: 100%;
display: flex;
align-items: stretch;
scroll-snap-align: start;
}
/* ── Text half ──────────────────────────────────────── */
.fals-slide__text {
flex-shrink: 0;
width: 760px;
display: flex;
flex-direction: column;
align-items: flex-start;
isolation: isolate;
padding: 96px 32px 136px;
position: relative;
}
.fals-slide--1 .fals-slide__text { min-height: 758px; }
/* Option (c) visual experiment — shrink the bubble-area to a narrow
box (aspect of slide 2/4's cream pill, 619×185 ≈ 3.35:1) so every
SVG scales down to fit via `object-fit: contain`. The four SVGs
render at uniform pixel dimensions (~372×185) without distortion;
pills inside still differ in proportion (slide 3's pink pill is
taller than the cream pills in the same viewBox) but the OVERALL
bubble footprint becomes consistent across slides. Letterforms
stay un-distorted because the SVG is scaled uniformly.
Revert if the result still looks unbalanced — the cleanest fix
remains designer-provided SVGs with matched pill dimensions. */
.fals-slide__bubble-area {
position: relative;
z-index: 2;
flex-shrink: 0;
width: 632px;
height: 185px;
margin-block-end: -40px;
}
/* Slide 3's badge is the only one that rotates clockwise, so its bottom
right corner sits `width x sin(5deg)` below the rest — and now that the
pill grows with the word, that dip grows too: 25px for «Готові тарілки»,
38px for «Ready-made plates», which clipped the top of the title. Give
this slide back the difference. It is a fixed amount, so a badge word far
longer than these will still need a look — the check is in the MR notes. */
.fals-slide--3 .fals-slide__bubble-area {
margin-block-end: -24px;
}
.fals-slide__title-area {
margin-block-end: -40px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 1.5rem;
padding-inline-start: 40px;
width: 100%;
}
.fals-title {
font-size: var(--fals-h2);
font-weight: 700;
line-height: 0.9;
color: var(--c-primary);
margin: 0;
width: 100%;
}
.fals-desc {
font-size: var(--fals-body);
line-height: var(--fals-body-lh);
color: var(--c-primary);
width: 344px;
max-width: 100%;
margin: 0;
font-weight: 500;
}
/* ── Badge: live text, not outlined vector ─────────────────
Every number here is in the original 632x314 badge viewBox and is
multiplied by --s, which is the exact scale the old got from
`object-fit: contain`: 185px of box height over 314 viewBox units on
desktop, and 302px of box width over 636 on mobile, where width was
the binding constraint. Keeping the units means each value can still
be checked against the SVGs that used to ship.
The cream and pink pills are drawn here rather than in SVG so their
width follows the word — that is what makes the next language cost
nothing. Slide 1's cloud cannot be expressed in CSS and stays an
inline