.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;
  }

  .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;
  }

  .fals-bubble,
  .fals-bubble img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Option (c) — scale each SVG to fit the narrowed bubble-area
     without distortion. Pills inside still differ in proportion
     (slide 3's pink pill is taller in viewBox than the cream pills)
     but the overall bubble footprint becomes uniform. */
  .fals-bubble img {
    object-fit: contain;
    object-position: left center;
  }

  .fals-slide__image {
    flex-shrink: 0;
    align-self: stretch;
    width: 784px;
    aspect-ratio: var(--slide-aspect, 784 / 758);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  &[data-slide-count="1"] .fals-progress { display: none; }

  /* ── Progress bar: at section bottom ──────────────── */
  .fals-progress {
    position: absolute;
    inset-block-end: 32px;
    inset-inline: 32px;
    height: 4px;
    border-radius: 32px;
    background: rgba(92, 26, 52, 0.1);
    overflow: hidden;
    z-index: 10;
  }

  /* Desktop: continuous bar with growing fill */
  .fals-progress__fill {
    height: 100%;
    width: 25%;
    border-radius: 200px;
    background: var(--c-primary);
    transition: width 0.3s var(--ease);
  }

  /* Segmented progress (mobile) */
  .fals-progress__segments { display: none; }

  .fals-progress__seg {
    flex: 1 0 0;
    min-width: 1px;
    height: 100%;
    background: var(--c-primary);
    border-radius: 200px;
    opacity: 0.2;
    transition: opacity 0.3s var(--ease);
  }

  .fals-progress__seg.is-active { opacity: 1; }

  /* ── Wide-screen (Figma 5821:5045) ──
     At 2500 viewport, each section in Figma is 2162px wide:
     text 760 + image 1402.5. Code's image is 784 (designed for 1440
     viewport) — bump it so the slide fills the section width and
     scroll-snap matches Figma. */
  @media (min-width: 2500px) {
    .fals-slide__image {
      width: 87.65625rem;          /* 1402.5px */
    }

    /* Track min-height tracks the new image height (1402.5 × 758/784
       ≈ 1356px) so the section doesn't crop the taller image. */
    .fals-track {
      min-height: 84.75rem;        /* 1356px */
    }

    .fals-slide--1 .fals-slide__text { min-height: 84.75rem; }
  }

  /* ── Slightly smaller viewports: scale design proportionally ─ */
  @media (max-height: 56rem) and (min-width: 48rem) {
    --fals-h2: clamp(4rem, 12.4vh, 7rem);

    .fals-track { min-height: clamp(34rem, 84vh, 47.375rem); }

    .fals-slide__text {
      width: clamp(28rem, 47.5vh, 47.5rem);
      padding: clamp(2.5rem, 10.7vh, 6rem) clamp(1rem, 3.55vh, 2rem) clamp(3rem, 15.1vh, 8.5rem);
    }

    .fals-slide--1 .fals-slide__text { min-height: clamp(34rem, 84vh, 47.375rem); }

    .fals-slide__bubble-area {
      width: clamp(22rem, 39.5vh, 39.5rem);
      height: clamp(11rem, 19.625vh, 19.625rem);
      margin-block-end: clamp(-2.5rem, -2.5vh, -1rem);
    }

    .fals-slide__title-area {
      gap: 1.5rem;
      padding-inline-start: clamp(1rem, 2.5vh, 2.5rem);
      margin-block-end: clamp(-2.5rem, -2.5vh, -1rem);
    }

    .fals-desc {
      font-size: var(--fals-body);
      width: clamp(16rem, 21.5vh, 21.5rem);
    }
  }

  /* ── Mobile: per-Figma 5378:10589 (390×710) ──────────────────────────
     Mobile here uses a regular horizontal swipe (CSS scroll-snap), NOT
     scroll-jacking — that is the whole point of the -swipe variant.
     Vertical page scroll continues to work normally; horizontal slide
     navigation is finger-driven. */
  @container yummo-feature-auto-layout-swipe (max-width: 47.9375rem) {
    .section-feature-auto-layout-swipe {
      --header-h: 0;
      --fals-h2: 3.5rem;
      --fals-body: 1.125rem;
      --fals-body-lh: 1.375rem;

      min-height: auto;
      padding-block-start: 0;
      padding-block-end: 0;
    }

    .fals-track {
      align-items: stretch;
      gap: 0;
      padding-inline-end: 0;
      min-height: 0;
      scroll-snap-type: x mandatory;
    }

    .fals-slide {
      flex-direction: column;
      align-items: stretch;
      width: 100cqi;
      height: auto;
      min-height: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .fals-slide--1 .fals-slide__text { min-height: 0; }

    .fals-slide__text {
      width: 100cqi;
      padding: 1rem 0;
      align-items: flex-start;
    }

    /* Slides 1 and 3 sit visually higher than 2/4 because their badge
       SVGs (diary 315×202; pink pill 637×326) are taller than the
       cream pills used on 2/4. Push the whole text block down so the
       badges line up at the same baseline as on the other slides. */
    .fals-slide--1 .fals-slide__text,
    .fals-slide--3 .fals-slide__text {
      padding-block-start: 3rem;
    }

    .fals-slide__bubble-area {
      width: 18.875rem;
      height: 9.375rem;
      margin-block-end: -1rem;
    }

    .fals-slide--1 .fals-slide__bubble-area {
      width: 18.875rem;
      height: 9.375rem;
      margin-block-end: -1rem;
      overflow: visible;
    }

    .fals-slide--1 .fals-bubble--diary {
      position: absolute;
      width: 19.6875rem;
      height: 12.625rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .fals-slide__title-area {
      width: 100cqi;
      gap: 1.5rem;
      padding-inline: 1rem;
      margin-block-end: -1rem;
    }

    .fals-title {
      width: 100%;
      max-width: 21.5rem;
    }

    .fals-desc {
      width: 100%;
      max-width: 21.5rem;
    }

    .fals-slide--3 .fals-slide__bubble-area {
      height: 9.6875rem;
    }

    .fals-slide__image {
      width: 100cqi;
      height: auto;
      aspect-ratio: 918 / 888;
      max-width: none;
      align-self: flex-start;
    }

    .fals-progress {
      margin-top: 2rem;
      inset-block-start: var(--header-h);
      inset-block-end: auto;
      inset-inline: 1rem;
      background: transparent;
      overflow: visible;
    }

    .fals-progress__fill { display: none; }

    .fals-progress__segments {
      display: flex;
      gap: 6px;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }
}

/* ── Scroll-jacked horizontal mode (DESKTOP ONLY) ─────────
   Flat selectors, written without native nesting so the rules
   apply unconditionally in every browser. The .is-fals-jacked
   class is added by view.js only above the mobile breakpoint. */
.wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked {
  max-height: none;
  overflow: visible;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .section-feature-auto-layout-swipe {
  height:     calc(100svh - var(--fals-admin-bar, 0px));
  max-height: calc(100svh - var(--fals-admin-bar, 0px));
  min-height: calc(100svh - var(--fals-admin-bar, 0px));
  /* Top padding (7rem = 112px) clears the fixed site-header.
     Bottom padding (2.5rem = 40px) clears the absolute progress bar
     (inset-block-end: 32px, height: 4px → progress top sits 36px from
     section bottom; 40px leaves a 4px gap, plus tightens the visual
     transition to the next section.) */
  padding-block-start: 7rem;
  padding-block-end:   2.5rem;
}

.wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-track {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  scroll-snap-type: none;
  width: max-content;
  max-width: none;
  flex: 1 0 auto;
  align-self: stretch;
  min-height: 0;
  will-change: transform;
}

.wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__image {
    width:      auto;
    /* Match the section's vertical padding (7rem top + 2.5rem bottom = 9.5rem)
       so the image fits between the fixed site-header and the progress bar. */
    height:     calc(100svh - 9.5rem - var(--fals-admin-bar, 0px));
    max-height: 638px;
    max-width:  660px;
    aspect-ratio: var(--slide-aspect, 784 / 758);
    align-self: center;
  }

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__text {
    padding-block: 32px;
    justify-content: flex-start;
  }

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide--1 .fals-slide__text {
    min-height: 0;
  }

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__title-area {
    justify-content: flex-start;
    margin-block-end: 0;
  }

  /* Slide-3-specific jacked-mode bubble-area height removed —
     with option (c) the base bubble-area is now 185px tall for all
     slides and SVGs scale uniformly via object-fit: contain, so the
     slide-3 special-case override (height: 250px) would re-introduce
     the size asymmetry we are trying to eliminate. The
     `margin-block-end: 0` it carried was a workaround for the older
     taller pink-pill overlap with the title; with the smaller bubble
     box that overlap can't happen either, so the base
     `margin-block-end: -40px` is fine across all four slides. */

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-bubble img {
    object-fit: contain;
    object-position: top left;
  }

  /* Constrain track + slide + text to the section's padded content area
     so they cannot grow taller than (100svh − 11rem). Without this, the
     @media (max-height: 56rem) vh-based padding/min-height scaling above
     can balloon the slide content past the bottom padding and overlap the
     absolute progress bar. flex:1 1 0 lets the track shrink to its
     container; height/max-height: 100% pin the slide and text to that
     same area; overflow: hidden clips any excess. */
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-track {
    flex: 1 1 0;
    min-height: 0;
  }

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide,
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__text {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__text {
    overflow: hidden;
  }
}

/* On viewports ≤ 56rem tall, the @media (max-height: 56rem) rule above
   sets --fals-h2 to clamp(4rem, 12.4vh, 7rem) — at 768px viewport that is
   ~95px, which makes slide 3's "та рецепти / для малюків" title wrap to
   four lines and pushes .fals-desc out of the overflow:hidden text box
   in jacked mode. Scale the h2 down inside the jacked layout so the
   bubble + title + desc fit the section's content area.

   Also shrink slide 3's pink-pill bubble (fixed 250px in jacked mode)
   proportionally at very short viewports — at 1280×600 the 250px bubble
   leaves no room for the long desc and clips it. */
@media (max-height: 56rem) and (min-width: 48rem) {
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked {
    --fals-h2: clamp(3rem, 9vh, 5.5rem);
  }
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide--3 .fals-slide__bubble-area {
    height: clamp(8rem, 22vh, 15.625rem);
  }
}

/* ── Wide-screen jacked-mode image caps (Figma 2500) ──
   Jacked mode caps image at 660×638 (1440-design ratio). At 2500
   the slide image grows to 1402.5×1356 per Figma. */
@media (min-width: 2500px) {
  .wp-block-yummo-feature-auto-layout-swipe.is-fals-jacked .fals-slide__image {
    max-width:  87.65625rem;     /* 1402.5px */
    max-height: 84.75rem;        /* 1356px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-yummo-feature-auto-layout-swipe .fals-progress__fill,
  .wp-block-yummo-feature-auto-layout-swipe .fals-progress__seg {
    transition: none;
  }
}