/* ============================================================
   BUTTON ARROW
   The chevron that grows a tail into a full arrow on hover. Shared, because
   the case study pages carry it too — on their closing CTA and on the card
   that leads to the next study, whose whole box is the hover target.
   ============================================================ */
/* Arrow icon inside buttons — a chevron at rest that grows a tail into a
   full arrow on hover. Two paths rather than one glyph so the tail can
   scale from the chevron's own tip. */
.btn__arrow {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The same arrow, turned a quarter. It keeps the tail-grows-on-hover
   animation, which then reads downward — the cue this button wants. */
.btn__arrow--down svg {
  transform: rotate(90deg);
}

.btn__arrow-tail,
.btn__arrow-head {
  /* Without view-box the origin resolves against the path's own bounds,
     which differ per path and would pull the two apart */
  transform-box: view-box;
  transform-origin: 13px 10px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.btn__arrow-tail {
  transform: scaleX(0);
  opacity: 0;
}

.btn:hover .btn__arrow-tail,
.btn:focus-visible .btn__arrow-tail,
.schedule-card:hover .btn__arrow-tail,
.schedule-card:focus-visible .btn__arrow-tail,
.cs-next__link:hover .btn__arrow-tail,
.cs-next__link:focus-visible .btn__arrow-tail {
  transform: scaleX(1);
  opacity: 1;
}

.btn:hover .btn__arrow-head,
.btn:focus-visible .btn__arrow-head,
.schedule-card:hover .btn__arrow-head,
.schedule-card:focus-visible .btn__arrow-head,
.cs-next__link:hover .btn__arrow-head,
.cs-next__link:focus-visible .btn__arrow-head {
  transform: translateX(1.5px);
}

/* No pointer means no hover — show the finished arrow so touch users
   still get the "this leads somewhere" cue */
@media (hover: none) {
  .btn__arrow-tail {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn__arrow-tail,
  .btn__arrow-head {
    transition: none;
  }
}