/* ── About Us carousel — "The Beliefs That Shape Every Smile" ─────────
   Opt-in via the CSS class `about-us-carousel` on the Divi Group Carousel
   module (About Us page). Everything else about this carousel lives in the
   builder: 7 slides, slidesToShow 2/1, the 1.5rem gap (0.75rem side padding
   per slide group), slide height 100%, arrow colour and position.

   Only two things could NOT be expressed as builder attributes, and both are
   documented below with the reason. If a third thing ever needs adding here,
   check the builder first — Divi 5.10 covers more than it looks. */

.about-us-carousel {
  /* the Figma chevron, used as a mask below so it inherits the arrow colour */
  --chevron : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='34' viewBox='0 0 19 34' fill='none'%3E%3Cpath d='M17.4143 0.707031L1.41431 16.707L17.4143 32.707' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}


/* ── 1. Equal card heights ───────────────────────────────────────────
   The builder already asks for this: each slide group is height:100% and
   each card carries Sizing → flexGrow. But Divi ships

       .et_pb_group_carousel.et_pb_group_carousel_slides_2
         .et_pb_group { flex: 0 0 50% }

   as a DESCENDANT selector, so it lands on the card nested inside each
   slide as well as on the slides themselves. That pins the card to
   max(50% of the slide, its own content), so cards whose body copy wraps
   shorter sit short — measured a 23px spread at 1280px (Community,
   Transformation and Comfort against the other four).

   Divi emits module attributes at single-class specificity
   (`.et_pb_group_2`, (0,1,0)), which cannot outrank its own (0,3,0) rule —
   flex-shrink from the module rule applied, flex-grow was overridden to 0.
   Four classes here beats it at (0,4,0) and hands control back to the
   builder's flexGrow toggle. Remove this only if Divi tightens that
   selector to a direct child. */
.about-us-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_group {
  flex : 1 1 auto;
}


/* ── 2. Figma arrows ────────────────────────────────────────────────
   Divi's arrows are font glyphs (ETmodules "Caret Left"/"Caret Right"),
   and Arrow Size only drives font-size — which scales the glyph's stroke
   along with its height. Measured: the glyph's stroke-to-height ratio is
   ~0.22 against the Figma's 0.0625, so at the Figma's 32px height the
   stroke lands near 7px instead of 2px. No Arrow Size value can match it,
   and there is no thinner chevron in the 1,989-icon set.

   So the glyph is hidden and the real Figma path is painted as a mask.
   background-color: currentColor means the builder's Arrow Color setting
   still drives it — keep changing the colour in the builder, not here.
   Arrow Size no longer affects these (size is the 19x34 box below). */
.about-us-carousel .et_pb_group_carousel_arrow .et-pb-icon {
  display          : block;   /* .et-pb-icon is a span; width/height need this */
  /* !important because Divi's per-instance arrow rule lands at the same
     specificity as this one AND ships in the deferred stylesheet, which is
     appended after this file — so source order cannot win. Without it the
     glyph still renders at Arrow Size underneath (harmless, the mask clips
     it) but the declaration would be silently dead, which is worse. */
  font-size        : 0 !important;
  width            : 19px;    /* the path measures exactly 16x32 inside this, */
  height           : 34px;    /* the extra 3/2px is the 2px stroke's overhang  */
  background-color : currentColor;
  -webkit-mask     : var(--chevron) no-repeat center / contain;
          mask     : var(--chevron) no-repeat center / contain;
}

/* right arrow is the same path, mirrored. Safe to put on the icon: Divi's
   own translateY(-50%) translateX(±100%) sits on the wrapper, not here. */
.about-us-carousel .et_pb_group_carousel_arrow_next .et-pb-icon {
  transform : scaleX(-1);
}

/* Breathing room between arrow and card. Divi pins the arrows flush:
   `left: 0` / `right: 0` plus translateX(∓100%) puts the arrow's inner edge
   exactly on the carousel edge, measured 0px at every width. Arrow Position
   only offers outside/inside/center — no offset — so it lands here.

   1.5rem matches the Figma's left gap (24px) and is the same 24px that sits
   between the two cards, so the whole row reads on one rhythm. (The Figma's
   right gap measures 40px; that looks like mockup drift rather than intent,
   so both sides use 24px.) These beat Divi's single-class rules at (0,2,0). */
.about-us-carousel .et_pb_group_carousel_arrow_prev { left  : -1.5rem; }
.about-us-carousel .et_pb_group_carousel_arrow_next { right : -1.5rem; }

/* The glyph box is 19x34, under the 24x24 minimum target size. This grows
   the hit area without moving the arrow — the wrapper is already
   position:absolute, and an inset ::before adds no layout.

   Horizontal expansion is deliberately small: an absolutely-positioned
   ::before still counts toward the document's scroll width, and at 360px the
   arrows sit only 7px from the viewport edge once offset by 1.5rem above —
   0.625rem here pushed the page 3px wide. 0.25rem gives a 27x50 target,
   still over the 24x24 minimum, with nothing hanging off the edge. */
.about-us-carousel .et_pb_group_carousel_arrow::before {
  content  : '';
  position : absolute;
  inset    : -0.5rem -0.25rem;   /* 27x50 clickable */
}