/* =============================================================================
   Before / After Results — global block
   1 or 2 items render as a centered grid (no carousel).
   3+ items render in a Swiper carousel with one centered active slide and
   side peeks of the prev/next slides; navigation via arrow buttons only.
   ============================================================================= */

/* Section pinned to the viewport height (matches the 50/50 Accordion).
   100dvh accounts for mobile address-bar collapse; falls back to 100vh on
   older browsers. The full flex chain (inner → content → body) passes the
   height through so the carousel can be vertically centered inside it. */
@media (min-width: 768px) {
  .vio-section.vio-before-after,
  section.vio-section.vio-before-after {
    padding: 50px 0;
  }
  .vio-section.vio-before-after .vio-section__inner,
  section.vio-section.vio-before-after .vio-section__inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

.vio-before-after__empty {
  text-align: center;
  color: var(--wp--preset--color--vio-ink, #030303);
  opacity: 0.7;
  padding: 24px 0;
}

/* Title — single editor field that allows HTML (<br>, <b>, <strong>).
   Renders the two-line "Results You Can See. / Care You Can Feel." pattern
   by default; editor can override per-block. */
.vio-before-after__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond, serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: 0;
  /* Per Figma: 50px from title bottom to carousel top. */
  margin: 0 0 50px;
  color: var(--wp--preset--color--vio-ink, #030303);
  text-align: center;
}
.vio-before-after__title b,
.vio-before-after__title strong {
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────────
   Grid mode (1 or 2 items)
   ──────────────────────────────────────────────────────────────────────────
   Sizing is locked to match the 3+ carousel's active-slide size (26vw,
   capped at 454px) so a treatment with 1 or 2 pairs renders at exactly
   the same dimensions as one with 3+ pairs (the active slide). The
   side-peek size (16vw / 283px max) is irrelevant here — those only
   exist in carousel mode. */
.vio-before-after__grid {
  display: grid;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}
.vio-before-after__grid--1 {
  grid-template-columns: minmax(0, 26vw);
  max-width: 454px;
  margin: 0 auto;
}
.vio-before-after__grid--2 {
  grid-template-columns: minmax(0, 26vw) minmax(0, 26vw);
  gap: 100px;              /* per designer — 100px between the two items */
  max-width: 1008px;       /* 2× 454px + 100px gap */
  margin: 0 auto;
}
@media (max-width: 767px) {
  /* Below 768px the carousel's mobile sizing (58vw active) takes over —
     mirror that here so 1/2-item layouts also use the bigger mobile size,
     and stack to single column. */
  .vio-before-after__grid--1 {
    grid-template-columns: minmax(0, 58vw);
    max-width: none;
  }
  .vio-before-after__grid--2 {
    grid-template-columns: minmax(0, 58vw);
    max-width: none;
  }
}
.vio-before-after__grid .vio-before-after__item {
  width: 100%;
  /* aspect-ratio + overflow:hidden moved to the INNER
     .image-comparison__slider-wrapper element below so the per-pair
     caption rendered as a sibling of the slider-wrapper can extend
     BELOW the square comparison box without being clipped. The
     item is now a normal block that grows to fit comparison + caption. */
  position: relative;
}
/* Re-apply the square shape + clip to the slider-wrapper itself
   (the inner element that holds the before/after images and the
   range thumb). Scoped to grid mode so it doesn't affect carousel
   mode, which has its own fixed-pixel sizing further below. */
.vio-before-after__grid .vio-before-after__item .image-comparison__slider-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

/* ──────────────────────────────────────────────────────────────────────────
   Carousel mode (3+ items)
   ──────────────────────────────────────────────────────────────────────────
   Architecture: the .vio-before-after__track is a FIXED-HEIGHT viewport
   (locked to the active-slide height — 605px desktop). All slides are
   position:absolute inside it, so size changes on individual slides can't
   resize the track or the section around it. That alone solves the
   "section height changes when rotating items" jitter.

   State classes (set by view.js based on current index):
     .is-active  — center, full size (605×605), z=3
     .is-prev    — left peek, 377×377, dulled with overlay, z=1
     .is-next    — right peek, 377×377, dulled with overlay, z=1
     (no class)  — invisible (opacity 0, pointer-events: none)

   Active item is dead center of the track; prev/next sit on either side
   with a fixed gap. With 3 items, all three are always visible (active +
   prev wraps to the last item, next wraps to first). With 4+, only those
   three slots are populated; the rest are hidden offstage and become
   visible as the carousel rotates.
   ──────────────────────────────────────────────────────────────────────── */
.vio-before-after__carousel {
  position: relative;
  width: 100%;
}
.vio-before-after__track {
  position: relative;
  width: 100%;
  height: 454px;            /* locked to active size — section never resizes */
  overflow: visible;        /* side peeks extend past edges visually */
  contain: layout paint;    /* isolate so slide changes don't trigger parent reflows */
}
.vio-before-after__carousel .swiper-wrapper {
  position: relative;
  height: 100%;
  display: block;           /* override Swiper's flex from the global stylesheet */
  margin: 0;
  padding: 0;
}
/* All carousel sizes are 25% smaller than the original Figma values
   (active 605→454, sides 377→283). Offsets recomputed proportionally
   so the layout stays geometrically consistent. */
.vio-before-after__carousel .vio-before-after__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 454px;
  height: 454px;
  margin: 0;
  /* Hidden by default; state classes opt-in to visibility. */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    transform 0.45s cubic-bezier(.4, 0, .2, 1),
    width    0.45s cubic-bezier(.4, 0, .2, 1),
    height   0.45s cubic-bezier(.4, 0, .2, 1),
    opacity  0.3s ease;
  z-index: 0;
}
.vio-before-after__carousel .vio-before-after__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  width: 454px;
  height: 454px;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.vio-before-after__carousel .vio-before-after__slide.is-prev {
  opacity: 1;
  width: 283px;
  height: 283px;
  /* Center of prev at (50% - 391px): active half (227) + gap (23) + prev half (141.5) */
  transform: translate(calc(-50% - 391px), -50%);
  z-index: 1;
}
.vio-before-after__carousel .vio-before-after__slide.is-next {
  opacity: 1;
  width: 283px;
  height: 283px;
  transform: translate(calc(-50% + 391px), -50%);
  z-index: 1;
}
/* Second-level peeks — only used when the carousel has 5+ items. JS adds
   `.is-prev-2` / `.is-next-2` to the slides two positions away from the
   active one. They render same-size as the primary peeks but sit further
   from center so part of them bleeds beyond the viewport edges. */
.vio-before-after__carousel .vio-before-after__slide.is-prev-2 {
  opacity: 1;
  width: 283px;
  height: 283px;
  /* Far prev: 391 (primary peek center) + 283 (slide width) + 23 (gap)
     = 697px from track center. Mostly off-screen left at smaller widths. */
  transform: translate(calc(-50% - 697px), -50%);
  z-index: 0;
}
.vio-before-after__carousel .vio-before-after__slide.is-next-2 {
  opacity: 1;
  width: 283px;
  height: 283px;
  transform: translate(calc(-50% + 697px), -50%);
  z-index: 0;
}

/* Dulling overlay on the prev/next side peeks — mtn-greige with alpha so
   the active slide stands out as the focal point. The overlay sits above
   the image-comparison content (z 10) but below the active slide (z 3). */
.vio-before-after__carousel .vio-before-after__slide.is-prev::after,
.vio-before-after__carousel .vio-before-after__slide.is-next::after,
.vio-before-after__carousel .vio-before-after__slide.is-prev-2::after,
.vio-before-after__carousel .vio-before-after__slide.is-next-2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(178, 157, 146, 0.45);
  pointer-events: none;
  z-index: 10;
}
/* Far peeks get a slightly heavier veil so they read as "further back". */
.vio-before-after__carousel .vio-before-after__slide.is-prev-2::after,
.vio-before-after__carousel .vio-before-after__slide.is-next-2::after {
  background: rgba(178, 157, 146, 0.6);
}
.vio-before-after__carousel .vio-before-after__slide .image-comparison {
  width: 100%;
  height: 100%;
}

/* Desktop / large tablet (≥768px) viewport-relative sizing. All values
   are 75% of the original Figma sizes per the designer's "25% smaller"
   request — active 26vw / sides 16vw / offset 23vw — capped at 454px /
   283px on very large screens (also 75% of the prior 605/377 caps). */
@media (min-width: 768px) {
  .vio-before-after__track {
    height: 26vw;
    max-height: 454px;
  }
  .vio-before-after__carousel .vio-before-after__slide,
  .vio-before-after__carousel .vio-before-after__slide.is-active {
    width: 26vw;
    height: 26vw;
    max-width: 454px;
    max-height: 454px;
  }
  .vio-before-after__carousel .vio-before-after__slide.is-prev,
  .vio-before-after__carousel .vio-before-after__slide.is-next,
  .vio-before-after__carousel .vio-before-after__slide.is-prev-2,
  .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
    width: 16vw;
    height: 16vw;
    max-width: 283px;
    max-height: 283px;
  }
  /* Active half 13vw + 2vw gap + side half 8vw = 23vw side center offset. */
  .vio-before-after__carousel .vio-before-after__slide.is-prev {
    transform: translate(calc(-50% - 23vw), -50%);
  }
  .vio-before-after__carousel .vio-before-after__slide.is-next {
    transform: translate(calc(-50% + 23vw), -50%);
  }
  /* Far peeks: another 18vw further (16vw slide + 2vw gap) → ±41vw centers. */
  .vio-before-after__carousel .vio-before-after__slide.is-prev-2 {
    transform: translate(calc(-50% - 41vw), -50%);
  }
  .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
    transform: translate(calc(-50% + 41vw), -50%);
  }
}
@media (max-width: 767px) {
  /* Strip the section's 40px side padding so the carousel track spans
     the full viewport width — without this the 80px of combined padding
     eats into the space and the side peeks get clipped to nothing. */
  .vio-section.vio-before-after,
  section.vio-section.vio-before-after {
    padding-left: 0;
    padding-right: 0;
  }
  .vio-section.vio-before-after .vio-section__inner,
  section.vio-section.vio-before-after .vio-section__inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .vio-before-after__track {
    height: 58vw;
    min-height: 200px;
    max-height: 420px;
    /* Drop paint containment on mobile so overflow: visible actually
       works and side peeks render beyond the track edges. Desktop keeps
       contain: layout paint for reflow isolation. */
    contain: layout;
  }
  .vio-before-after__carousel .vio-before-after__slide,
  .vio-before-after__carousel .vio-before-after__slide.is-active {
    width: 58vw;
    height: 58vw;
    min-width: 200px;
    min-height: 200px;
    max-width: 420px;
    max-height: 420px;
  }
  .vio-before-after__carousel .vio-before-after__slide.is-prev,
  .vio-before-after__carousel .vio-before-after__slide.is-next {
    width: 52vw;
    height: 52vw;
    min-width: 170px;
    min-height: 170px;
    max-width: 380px;
    max-height: 380px;
    opacity: 1;
  }
  /* Active half 29vw + 3vw gap + side half 26vw = 58vw offset.
     With the section padding stripped (track = 100vw), each peek shows
     ~18vw of itself on its respective screen edge. */
  .vio-before-after__carousel .vio-before-after__slide.is-prev {
    transform: translate(calc(-50% - 58vw), -50%);
  }
  .vio-before-after__carousel .vio-before-after__slide.is-next {
    transform: translate(calc(-50% + 58vw), -50%);
  }
  /* Far peeks would be way off-screen at phone widths — hide entirely. */
  .vio-before-after__carousel .vio-before-after__slide.is-prev-2,
  .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
    opacity: 0;
    pointer-events: none;
  }

  /* Title and nav still need horizontal breathing room since the
     section padding is gone. */
  .vio-before-after__title {
    padding-left: 24px;
    padding-right: 24px;
  }
  .vio-before-after__nav {
    padding-left: 24px;
    padding-right: 24px;
  }
  .vio-before-after__active-caption {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Nav arrows — circular, sit directly below the carousel, centered.
   Per Figma: 50px between the carousel bottom and the arrow row. */
.vio-before-after__nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.vio-before-after__nav-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  /* No circle background at rest — just the chevron icon. The circle
     appears on hover/focus as a hit-target affordance. */
  background: transparent;
  color: var(--wp--preset--color--vio-ink, #030303);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.vio-before-after__nav-btn:hover,
.vio-before-after__nav-btn:focus-visible {
  background: var(--wp--preset--color--vio-alabaster, #F2F0E6);
}
.vio-before-after__nav-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.vio-before-after__nav-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
  outline-offset: 2px;
}

/* Before / After captions — match the testimonials-grid styling exactly.
   The base styles come from the global `.image-comparison__caption` and
   `.image-comparison__caption-body` (lotion text on rgba(58,51,26,0.20)
   pill). The positioning override below is the same as the testimonials
   grid: top corners, font-size 11px, bottom: auto so the caption box
   doesn't stretch from top to bottom of the image (which it would do if
   both `top` and the global `bottom: 12px` were applied). */
.vio-before-after .image-comparison__caption {
  font-size: 11px;
  top: 8px;
  bottom: auto;
}
.vio-before-after .image-comparison__caption--before { left: 8px;  right: auto; }
.vio-before-after .image-comparison__caption--after  { right: 8px; left:  auto; text-align: right; }

/* Optional per-pair caption rendered below the comparison frame.
   Editor-provided text via the `caption` sub-field. Used in GRID
   mode (1–2 pairs); carousel mode (3+) hides this and uses the
   shared `.vio-before-after__active-caption` element instead. */
.vio-before-after__item-caption {
  margin: 20px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  /* Matches the testimonial quote body size in the design
     (the text between the gold/tan eyebrow and the bold name). */
  font-size: 18px;
  line-height: 1.55;
  /* Inherit so dark-section backgrounds (vio-ink) render the caption
     in light text instead of black-on-black. */
  color: inherit;
  text-align: center;
  letter-spacing: 0.01em;
}
.vio-before-after__carousel .vio-before-after__item-caption {
  display: none;
}

/* Carousel mode: a SHARED caption element lives between the track
   and the nav buttons (see render.php). view.js syncs its text
   with the active slide's `data-caption` on every navigation.

   Why shared/external instead of per-slide:
   The slide is absolutely positioned inside a track with
   `contain: layout paint`, and its layout box is exactly the
   image size. A per-slide caption (DOM-nested in the slide)
   would render below the slide's box and get clipped by the
   track's paint containment. Rendering one shared caption
   outside the track sidesteps the clipping entirely.

   Fade transition on text change is opacity-based — view.js
   toggles `data-empty="1"` for blank captions so the bar
   collapses cleanly when no caption is configured. */
.vio-before-after__active-caption {
  margin: 20px auto 8px;
  font-family: "Nunito", system-ui, sans-serif;
  /* Matches the testimonial quote body size in the design
     (the text between the gold/tan eyebrow and the bold name). */
  font-size: 18px;
  line-height: 1.55;
  color: inherit;
  text-align: center;
  letter-spacing: 0.01em;
  /* Reserve a single line of vertical space so swapping captions
     of different length doesn't shift the nav buttons. */
  min-height: 1.55em;
  opacity: 1;
  transition: opacity 0.18s ease;
}
.vio-before-after__active-caption[data-empty="1"] {
  opacity: 0;
}