/**
 * Recommended Case Studies — the closing rail of a Case Study page.
 *
 * Motion budget, matching the Portfolio Grid's: hover transitions 150-250ms,
 * ease-out with a quick initial response and a gentle finish. The image zoom
 * is the one exception, and it is deliberately outside the budget.
 */
.case-study-related {
  --case-study-related-content-width: 1180px;
  --case-study-related-gutter: max(32px, calc((100vw - var(--case-study-related-content-width)) / 2));
  --case-study-related-radius: 14px;
  --case-study-related-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --case-study-related-hover-duration: 200ms;
  --case-study-related-press-duration: 160ms;
  /*
   * The zoom is the one piece of motion here that is meant to be noticed
   * slowly, and its curve is pulled between two failures. A strong ease-out
   * (the rail's own, 38% of the travel inside 100ms) lands snappy however long
   * the duration is. An ease-in-out holds still at the start — measured at 3%
   * after 100ms, which across 3% of scale is a fifth of a pixel, and reads as
   * the card taking a moment to decide. This curve leaves at once and arrives
   * unhurried: ~20% by 100ms, ~38% by 200ms, still drifting past a second.
   * It also settles back faster than it grows — leaving a card should not feel
   * like waiting for it.
   */
  --case-study-related-zoom-ease: cubic-bezier(0.2, 0.3, 0.2, 1);
  --case-study-related-zoom-duration: 1400ms;
  --case-study-related-zoom-return: 700ms;
  --case-study-related-settle-duration: 520ms;
  overflow: hidden;
  padding: clamp(84px, 9vw, 128px) 0 clamp(60px, 7vw, 96px);
  color: #171a1b;
  background: #fff;
}

@supports (overflow: clip) {
  .case-study-related {
    overflow: clip;
  }
}

.case-study-related,
.case-study-related * {
  box-sizing: border-box;
}

.case-study-related__inner {
  width: min(calc(100% - 64px), var(--case-study-related-content-width));
  margin-inline: auto;
}

.case-study-related__header {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  gap: 32px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 44px;
}

.case-study-related__heading {
  max-width: 590px;
  margin: 0;
  color: #101318;
  font: inherit;
  font-size: clamp(38px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.case-study-related__controls {
  display: flex;
  gap: 10px;
  padding-bottom: 2px;
}

/*
 * Doubly-classed on purpose. The theme paints every `button:hover` and
 * `button:focus` #c36, which out-specifies a single class — so a control that
 * leads nowhere turned pink under the pointer, and an enabled one stayed pink
 * after a click moved the pointer away. Holding the resting colours at two
 * classes settles both, and the rail's own hover rule still wins over them.
 */
.case-study-related .case-study-related__control {
  display: inline-grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(23 26 27 / 20%);
  border-radius: 50%;
  color: #171a1b;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition:
    color var(--case-study-related-hover-duration) var(--case-study-related-ease),
    border-color var(--case-study-related-hover-duration)
      var(--case-study-related-ease),
    background-color var(--case-study-related-hover-duration)
      var(--case-study-related-ease),
    opacity var(--case-study-related-hover-duration)
      var(--case-study-related-ease),
    transform var(--case-study-related-press-duration)
      var(--case-study-related-ease);
}

.case-study-icon {
  display: block;
}

.case-study-related__control:hover:not(:disabled) {
  color: #f8fafc;
  border-color: #191f37;
  background: #191f37;
}

.case-study-related__control:active:not(:disabled) {
  transform: scale(0.96);
}

.case-study-related__control:focus-visible {
  outline: 2px solid #19448a;
  outline-offset: 3px;
}

.case-study-related__control:disabled {
  opacity: 0.32;
  cursor: default;
}

/*
 * The gutters belong to the viewport, not the container: Embla aligns every
 * slide to the container's edge, so a gutter made of container padding would
 * seat the first card at the gutter and each one after it flush against the
 * screen. Sized this way the container *is* the content column, one press
 * moves exactly one card, and the cards still bleed past both edges.
 *
 * The block padding is deliberate room for the cards' hover shadow, which an
 * edge-tight viewport would shear off mid-lift; the negative margins hand the
 * borrowed space back to the layout.
 */
.case-study-related__viewport {
  --case-study-related-fade: min(var(--case-study-related-gutter), 56px);
  --case-study-related-fade-start: var(--case-study-related-fade);
  --case-study-related-fade-end: var(--case-study-related-fade);
  overflow: hidden;
  padding: 46px var(--case-study-related-gutter) 96px;
  margin-block: -36px -50px;
  /*
   * The end of the rail is a fraction of a card away, not a whole one, so the
   * last press lands as a nudge. Softening whichever edge still has cards
   * behind it — and squaring off the edge that does not — is what tells the
   * difference between "more to come" and "that was the last one". Both ends
   * are driven by the data attributes the script already publishes.
   */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--case-study-related-fade-start),
    #000 calc(100% - var(--case-study-related-fade-end)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--case-study-related-fade-start),
    #000 calc(100% - var(--case-study-related-fade-end)),
    transparent 100%
  );
}

.case-study-related[data-at-start="true"] .case-study-related__viewport {
  --case-study-related-fade-start: 0px;
}

.case-study-related[data-at-end="true"] .case-study-related__viewport {
  --case-study-related-fade-end: 0px;
}

.case-study-related__viewport:focus-visible {
  outline: 2px solid rgb(25 68 138 / 42%);
  outline-offset: -2px;
}

.case-study-related__track-container {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y pinch-zoom;
}

.case-study-related__item {
  flex: 0 0 clamp(620px, 49vw, 720px);
  min-width: 0;
}

.case-study-related__item:nth-child(3n + 2) {
  flex-basis: clamp(590px, 46vw, 680px);
}

.case-study-related__item:nth-child(3n + 3) {
  flex-basis: clamp(640px, 51vw, 750px);
}

.case-study-related__card {
  position: relative;
  height: 100%;
  border-radius: var(--case-study-related-radius);
}

/*
 * The lift lives on the wrapper and the resting shadow cross-fades into the
 * raised one on a pseudo-element: transitioning the card's own box-shadow
 * while its clipped image is scaling is what made the hover feel sticky.
 */
.case-study-related__card::before,
.case-study-related__card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.case-study-related__card::before {
  box-shadow: 0 18px 40px rgb(18 28 48 / 14%);
}

.case-study-related__card::after {
  box-shadow: 0 22px 54px rgb(18 28 48 / 18%);
  opacity: 0;
}

.case-study-related .case-study-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  height: 100%;
  min-height: 332px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--case-study-related-radius);
  color: #f8fafc;
  background: var(
    --case-study-featured-gradient,
    linear-gradient(135deg, #151b31 0%, #1c2947 100%)
  );
  text-decoration: none;
}

.case-study-card__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, #255796 36%, #111827);
}

/*
 * Absolute so the image fills the column however tall the copy beside it runs,
 * and doubly-classed because Elementor's `.elementor img { height: auto }`
 * otherwise out-specifies the fill and letterboxes the card.
 */
.case-study-related .case-study-card__image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.case-study-card__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(8 12 20 / 16%) 0%,
    rgb(8 12 20 / 0%) 34%,
    rgb(8 12 20 / 0%) 66%,
    rgb(8 12 20 / 34%) 100%
  );
  content: "";
  pointer-events: none;
}

.case-study-card__copy {
  display: flex;
  min-width: 0;
  padding: 36px 34px 32px;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  box-shadow: inset 1px 0 rgb(255 255 255 / 9%);
}

.case-study-card__text {
  display: grid;
  gap: 14px;
}

.case-study-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #f8fafc;
  font: inherit;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.case-study-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgb(248 250 252 / 88%);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.case-study-card__cta {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 9999px;
  color: #f8fafc;
  background: rgb(255 255 255 / 4%);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.case-study-card__cta-arrow {
  display: inline-flex;
  color: #f8fafc;
}

.case-study-card:focus-visible {
  outline: 3px solid #255796;
  outline-offset: 4px;
}

.case-study-related__empty,
.case-study-related__editor-notice {
  margin: 0;
  padding: 28px 0;
  color: #465063;
  font-size: 17px;
  line-height: 1.5;
}

.case-study-related__editor-notice {
  padding: 24px;
  border: 1px solid rgb(23 26 27 / 18%);
  border-radius: 10px;
  background: #f8fafc;
}

/*
 * Transitions are declared unconditionally and taken apart again under
 * `prefers-reduced-motion: reduce` below, the way the Portfolio Grid and the
 * Case Study archive do it. Arming them behind `no-preference` instead used to
 * leave the reduce case with the same movement and none of the easing.
 *
 * Each element lists only what it actually animates: the image never changes
 * colour, and the shadow never moves.
 *
 * Nothing on the card changes its position on hover. A card that hops a few
 * pixels towards the pointer draws the eye to the hop rather than to the work
 * in the card, and six of them along a rail reads as a toy. The elevation
 * still deepens and the image still moves — both slowly enough to register as
 * the card warming up rather than reacting.
 */
.case-study-related__card::after {
  transition: opacity var(--case-study-related-settle-duration)
    var(--case-study-related-zoom-ease);
}

.case-study-related .case-study-card {
  transition: transform var(--case-study-related-press-duration)
    var(--case-study-related-ease);
}

.case-study-related .case-study-card__image {
  transition: transform var(--case-study-related-zoom-return)
    var(--case-study-related-zoom-ease);
}

/* The scrim rides the zoom rather than the hover, so the image reads as one
   move and not as a light coming up over a picture that is already still. */
.case-study-card__media::after {
  transition: opacity var(--case-study-related-zoom-return)
    var(--case-study-related-zoom-ease);
}

.case-study-card__cta-arrow .case-study-icon {
  transition: transform var(--case-study-related-hover-duration)
    var(--case-study-related-ease);
}

/*
 * The press is answered by the card itself, before the browser has begun
 * fetching the Case Study, so a slow page never reads as a click that missed.
 * Same figure as the Portfolio Grid uses on a target of this size.
 */
.case-study-related .case-study-card:active {
  transform: scale(0.994);
}

/*
 * Hover only where a pointer can actually leave again. On touch the same rules
 * latch after a tap and the card stays raised behind the page you navigated to.
 */
@media (hover: hover) and (pointer: fine) {
  .case-study-related__card:hover::after {
    opacity: 1;
  }

  .case-study-related__card:hover .case-study-card__image,
  .case-study-related__card:hover .case-study-card__media::after {
    transition-duration: var(--case-study-related-zoom-duration);
  }

  .case-study-related__card:hover .case-study-card__image {
    transform: scale(1.03);
  }

  .case-study-related__card:hover .case-study-card__media::after {
    opacity: 0.55;
  }

  /* The arrow is the one thing that answers immediately: it is the response. */
  .case-study-related__card:hover .case-study-card__cta-arrow .case-study-icon {
    transform: translateX(2px);
  }

  /*
   * A drag is not a hover, however long the thumb rests on a card. A zoom that
   * kept creeping while the rail travelled under the pointer would read as the
   * page struggling, so it stops on the frame the drag starts.
   */
  .case-study-related[data-dragging] .case-study-related__card:hover::after {
    opacity: 0;
  }

  .case-study-related[data-dragging] .case-study-related__card:hover .case-study-card__image {
    transform: none;
  }
}

.case-study-related[data-dragging] .case-study-related__card::after,
.case-study-related[data-dragging] .case-study-card__image,
.case-study-related[data-dragging] .case-study-card__media::after {
  transition: none;
}

/*
 * Reduced motion drops the movement and keeps the rest: the elevation and the
 * scrim lifting off the image still say which card is under the pointer.
 */
@media (prefers-reduced-motion: reduce) {
  .case-study-related .case-study-card,
  .case-study-related .case-study-card__image,
  .case-study-related__control,
  .case-study-card__cta-arrow .case-study-icon {
    transition-duration: 1ms;
  }

  .case-study-related .case-study-card:active,
  .case-study-related__control:active:not(:disabled),
  .case-study-related__card:hover .case-study-card__image,
  .case-study-related__card:hover .case-study-card__cta-arrow .case-study-icon {
    transform: none;
  }
}

@media (max-width: 900px) {
  .case-study-related__item,
  .case-study-related__item:nth-child(3n + 2),
  .case-study-related__item:nth-child(3n + 3) {
    flex-basis: min(82vw, 650px);
  }
}

@media (max-width: 767px) {
  .case-study-related {
    --case-study-related-gutter: 20px;
    padding: 76px 0 72px;
  }

  .case-study-related__inner {
    width: min(calc(100% - 40px), var(--case-study-related-content-width));
  }

  .case-study-related__header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    margin-bottom: 30px;
  }

  .case-study-related__heading {
    font-size: 32px;
    line-height: 1.08;
  }

  .case-study-related__controls {
    gap: 8px;
  }

  .case-study-related .case-study-related__control {
    width: 44px;
    height: 44px;
  }

  .case-study-related__viewport {
    padding-block: 24px 62px;
    margin-block: -16px -32px;
  }

  .case-study-related__track-container {
    gap: 16px;
  }

  .case-study-related__item,
  .case-study-related__item:nth-child(3n + 2),
  .case-study-related__item:nth-child(3n + 3) {
    flex-basis: calc(100vw - 40px);
  }

  .case-study-related .case-study-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .case-study-card__media {
    aspect-ratio: 16 / 10;
  }

  .case-study-card__media::after {
    background: linear-gradient(180deg, transparent 78%, rgb(8 12 20 / 22%));
  }

  .case-study-card__copy {
    min-height: 224px;
    padding: 26px 24px 24px;
    gap: 24px;
    box-shadow: inset 0 1px rgb(255 255 255 / 9%);
  }
}