/* ============================================================
   Home case-study carousel — visible prev/next arrows

   .home-slider is a real Webflow slider holding 5 case studies,
   but nothing signalled that: its arrow elements exist in the
   markup as .left-arrow / .right-arrow and the site's CSS sets
   them to display:none at every breakpoint. The slider also
   carries data-disable-swipe="true", so with the arrows hidden
   there was no way at all to reach the other four - it read as one
   static case study.

   These reveal Webflow's own arrows rather than adding controls,
   so the slider's native click handling does the work and no extra
   JS is needed.

   Styled after .more-work-arrow-circle, the circular pair the More
   Work carousel already uses, so both carousels share one
   affordance.
   ============================================================ */

.home-slider .left-arrow,
.home-slider .right-arrow {
  /* Beats the several `.left-arrow { display:none }` breakpoint
     rules on specificity alone - no !important needed. */
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  margin: 0;

  /* Positioned as a pair off the slider's RIGHT edge, not flanking
     left and right. The slide is full-bleed but its photo is not:
     the photo's right edge is flush with the slider while its left
     edge floats (x=179 of 1280 at desktop), so a left-flanking
     arrow lands in empty gutter. The right edge is the one anchor
     that holds at every width.

     Bottom corner matches the arrow placement on the case study
     heroes. */
  top: auto;
  bottom: clamp(12px, 1.8vw, 26px);
  left: auto;
  transform: none;

  border-radius: 999px;
  background-color: var(--color--white, #fff);
  color: var(--color--red, #cb2828);
  box-shadow: 0 2px 10px rgba(40, 30, 20, 0.22);

  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.home-slider .right-arrow {
  right: clamp(12px, 1.8vw, 26px);
}

/* Sits immediately left of the next button: gutter + button + gap. */
.home-slider .left-arrow {
  right: calc(clamp(12px, 1.8vw, 26px) + clamp(34px, 3vw, 44px) + 10px);
}

.home-slider .left-arrow:hover,
.home-slider .right-arrow:hover {
  background-color: var(--color--red, #cb2828);
  color: var(--color--white, #fff);
  transform: scale(1.06);
}

/* The arrows contain PREV / NEXT headings. Keep them for screen
   readers; the chevron below carries the visual meaning. */
.home-slider .left-arrow .slider-button-text,
.home-slider .right-arrow .slider-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home-slider .left-arrow .slider-button,
.home-slider .right-arrow .slider-button {
  padding: 0;
}

/* Chevrons from borders - no icon asset, and they inherit
   currentColor so the hover state comes free. */
.home-slider .left-arrow::after,
.home-slider .right-arrow::after {
  content: "";
  width: 30%;
  height: 30%;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.home-slider .left-arrow::after {
  transform: rotate(135deg);
  margin-left: -8%;
}

.home-slider .right-arrow::after {
  transform: rotate(-45deg);
  margin-right: -8%;
}

/* Each slide also carries its own small grey "PREV NEXT" text pair
   (.slider-button-text, 44x20, bottom-left of the slide). That was
   the original control, but it is easy to miss at desktop and does
   not render at all on narrow screens - which is why the carousel
   read as static. The circles do that job visibly, so suppress the
   text rather than show two competing controls.

   To restore the original instead, delete this block and the arrow
   styling above. */
.home-slider .w-slide .slider-nav-button,
.home-slider .w-slide .slider-button-text {
  display: none;
}