/*
-----------------------------------------
KNAPPAR OCH TEXTLÄNKAR (Ohlssons/button, Ohlssons/textLink)
.btn          fylld blå knapp, 48 px hög (Figma: Knapp, Bolagslänk, Tillbaka till Aktuellt)
.btn--outline vit kontur på bild (Figma: heroens Knapp)
.text-link    versal textlänk med pil (Figma: Textlänk)
-----------------------------------------
*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
  min-block-size: var(--size-control);
  padding-inline: var(--space-24);
  border-radius: var(--radius-button);
  background: var(--surface-brand);
  color: var(--text-inverse);
  font: var(--font-label);
  text-transform: uppercase;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

/* E-postadresser är inga versaler (Figma: info@ohlssons.se) */
.btn--plain-case {
  text-transform: none;
}

.btn--back {
  gap: var(--space-16);
}

.btn__icon {
  flex: none;
  inline-size: var(--size-icon-small);
  block-size: var(--size-icon-small);
}

.btn--back .btn__icon {
  rotate: var(--angle-flip);
}

.btn--outline {
  border: var(--border-width-button) solid var(--border-inverse);
  background: var(--surface-transparent);
}

.btn--outline:focus-visible {
  outline-color: var(--focus-ring-color-inverse);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text-heading);
  font: var(--font-label);
  text-transform: uppercase;
}

.text-link__icon {
  flex: none;
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  transition: translate var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
  .btn:hover {
    background: var(--surface-brand-hover);
  }

  .btn--outline:hover {
    background: var(--surface-page);
    color: var(--text-heading);
  }

  .text-link:hover .text-link__icon {
    translate: var(--space-4) 0;
  }
}

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