/* Buttons: primary, outline, link (BRAND.md 6.1). Inline, not a block.
   The forced .is-hover / .is-focus states for the gallery live in gallery.css. */
.ws-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ws-space-1);
  min-height:44px;
  padding:14px 36px;
  border:1px solid transparent;
  border-radius:var(--ws-radius);
  background:none;
  font-family:var(--ws-font-body);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  transition:background-color var(--ws-ease), border-color var(--ws-ease), color var(--ws-ease);
}
.ws-btn:focus-visible{ outline:2px solid var(--ws-focus); outline-offset:2px; }

.ws-btn--primary{
  background:var(--ws-red-ui);
  border-color:var(--ws-red-ui);
  color:var(--ws-white);
}
.ws-btn--primary:hover{
  background:var(--ws-red-hover);
  border-color:var(--ws-red-hover);
  color:var(--ws-white);
}

.ws-btn--outline{
  border-color:currentColor;
  color:var(--ws-fg);
}
.ws-btn--outline:hover{
  background:var(--ws-fg);
  border-color:var(--ws-fg);
  color:var(--ws-bg);
}

.ws-btn--small{
  min-height:40px;
  padding:10px 20px;
}

.ws-btn--link{
  min-height:auto;
  padding:4px 0;
  border:0;
  color:var(--ws-fg);
}
.ws-btn__arrow{
  flex:none;
  width:16px;
  height:16px;
  transition:transform var(--ws-ease);
}
.ws-btn--link:hover .ws-btn__arrow{ transform:translateX(4px); }

.ws-btn:disabled,
.ws-btn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.45;
  pointer-events:none;
}

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