/* ── Before & After carousel — "Smiles We Are Proud Of" ──────────────
   Opt-in via the CSS class `eos-ba` on the Divi Group Carousel module
   (About Us). One slide = one case: the Before image stacked over the
   After image, 1rem apart.

   Built in the builder and left alone here: slidesToShow 4/3/2/1, the
   1rem stack gap, the 2rem side padding on each slide, and the images
   themselves. The prev/next control is the shared .eos-cnav in the code
   module underneath — see css/global/carousel-nav.css.

   This file carries the two things Divi cannot express: the rule between
   two sets, and the Before/After chip sitting on each image. */


/* ── Divider between sets ────────────────────────────────────────────
   Each slide carries 2rem of side padding, so adjacent cards sit in a
   4rem channel and the slide boundary falls exactly down its middle —
   which is where `right: 0` puts this line. The Figma agrees: its cards
   are 301px, 70px apart, with the rule centred at 35px.

   Height is 90%; the Figma's is 292 of 315 (92.7%), close enough that
   90% reads the same and is a rounder number to maintain. */
.eos-ba .et_pb_group_carousel_slide > .et_pb_group { position: relative; }

.eos-ba .et_pb_group_carousel_slide > .et_pb_group::after {
  content        : '';
  position       : absolute;
  right          : 0;
  top            : 50%;
  transform      : translateY(-50%);
  width          : 1px;
  height         : 90%;
  background     : var(--medium-grey);
  pointer-events : none;
}

/* Two jobs, one rule. Divi stamps _slide_last_visible on the right-most
   visible slide, so this drops the line that would otherwise sit against
   the carousel's right edge — and because at phone (slidesToShow 1) the
   only visible slide is also the last, it automatically satisfies "only
   between sets when more than one set is showing" with no breakpoint of
   its own. */
.eos-ba .et_pb_group_carousel_slide_last_visible > .et_pb_group::after {
  display : none;
}


/* ── "Before" / "After" chip ─────────────────────────────────────────
   Figma: a 96x46 white pill inset 7px right / 8px bottom of the 301x148
   image, 1px #949494 border, 12/20 padding, 16px Arial at 0.1em.
   Rounded to the grid: 0.5rem inset, 0.75rem/1.25rem padding.

   Drawn as a pseudo-element rather than a Divi text module so it cannot
   drift out of position when the carousel resizes, and so the label can
   never be edited to disagree with the image it sits on. The class comes
   from the builder (ba-before / ba-after on each image module), so which
   label appears is still visible to an editor. */
/* The chip is sized in cqw — percent of the CARD's own width — not rem.
   A fixed 16px chip is 32% of the Figma's 301px card, but the card shrinks
   with the viewport while 4 slides are showing, so by ~1100px the chip was
   swallowing the photo. Container units keep it proportional at every width
   with no breakpoint tuning, and reproduce the Figma exactly at 301px:

     font 16/301 = 5.32cqw   padding 12/301 = 3.99  20/301 = 6.64
     right 7/301 = 2.33      bottom 8/301  = 2.66

   clamp()ed at both ends so it never exceeds the Figma size on a wide card
   or becomes unreadable on a narrow one. */
.eos-ba .ba-before,
.eos-ba .ba-after {
  position       : relative;
  container-type : inline-size;   /* makes cqw = 1% of the card */
}

.eos-ba .ba-before::after,
.eos-ba .ba-after::after {
  content        : 'Before';
  position       : absolute;
  right          : clamp(0.25rem, 2.33cqw, 0.5rem);
  bottom         : clamp(0.25rem, 2.66cqw, 0.5rem);
  padding        : clamp(0.4rem, 3.99cqw, 0.75rem) clamp(0.6rem, 6.64cqw, 1.25rem);
  background     : var(--white);
  border         : 1px solid var(--medium-grey);
  border-radius  : 2.5rem;      /* pill; Figma radius 40 */
  font-family    : var(--font-arial);
  font-size      : clamp(0.6875rem, 5.32cqw, 1rem);
  line-height    : 1.375;
  letter-spacing : 0.1em;
  color          : var(--black);
  white-space    : nowrap;
  pointer-events : none;
}

.eos-ba .ba-after::after { content: 'After'; }