/* Igor Andrić — the arrow buttons. One component, used by the events pages and the gallery, so the two
   can never drift apart. The nav type (16px, never under 14px — Lazar), and a drawn 1px arrow that
   stretches toward where it goes on hover. */
.arrow-btn{display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;
  font-weight:var(--fw-bold);letter-spacing:.012em;text-transform:uppercase;color:var(--ink);
  transition:opacity .25s ease}
.arrow-btn:disabled{opacity:.22;pointer-events:none}
.arrow-btn:focus{outline:none}
.arrow-btn:focus-visible{outline:1px solid var(--mute);outline-offset:8px}

.arrow{position:relative;display:block;width:26px;height:1px;background:currentColor;
  transition:width .4s cubic-bezier(.2,.8,.2,1)}
.arrow::after{content:'';position:absolute;top:50%;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor}
.arrow-btn.is-next .arrow::after{right:0;transform:translateY(-50%) rotate(45deg)}
.arrow-btn.is-prev .arrow::after{left:0;transform:translateY(-50%) rotate(-135deg)}
/* only where there is a real hover: on a phone a tap leaves :hover on, and the arrow stayed stretched after it */
@media (hover:hover){ .arrow-btn:hover .arrow{width:40px} }

/* a thumb needs more than a 26px line of type: on touch the target reaches --sp-3 above and below the words and
   --sp-2 past their ends — invisible, nothing moves */
@media (pointer:coarse){
  .arrow-btn{position:relative}
  .arrow-btn::before{content:'';position:absolute;inset:calc(var(--sp-3) * -1) calc(var(--sp-2) * -1)}
}

/* the quiet count that sits with them: "01–08 of 11", "03 / 08" */
.arrow-count{font-weight:var(--fw-semi);font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--mute);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){ .arrow{transition:none} }