/* ════════════════════════════════════════════════════════════════
 * Shared button primitives — single source of truth.
 *
 * .btn-cta            : default — atlas-blue fill, white text & arrow.
 *                       Sits on dark or paper sections.
 * .btn-cta--on-blue   : inverse — white fill, atlas-blue text & arrow.
 *                       Sits on atlas-blue sections (e.g. /ueber-mich/ CTA).
 *
 * Hover behaviour is identical: bg shifts one step + arrow nudges
 * 4px to the right. Height 48, padding 0 26, Inter 14/500 uppercase,
 * 0.04em tracking, 3px radius — locked across all pages. Page-local
 * `.cta__btn`, `.ueber-cta__btn` etc. should be migrated to this
 * primitive over time.
 * ════════════════════════════════════════════════════════════════ */

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  background: var(--color-atlas);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.btn-cta__arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.btn-cta:hover                 { background: var(--color-atlas-dk); }
.btn-cta:hover .btn-cta__arrow { transform: translateX(4px); }
.btn-cta:active                { transform: translateY(1px); }

/* Two-line variant — for long German labels that would otherwise
   make the button uncomfortably wide. Caps width and lets the
   label wrap; height grows from 48 → 64 (still on 8-grid). */
.btn-cta--wrap {
  height: auto;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: center;
  text-align: left;
}
.btn-cta--wrap .btn-cta__label {
  display: inline-block;
  max-width: 200px;
  line-height: 1.25;
  white-space: normal;
}

.btn-cta:focus-visible {
  outline: 2px solid var(--color-alpine);
  outline-offset: 3px;
}

/* Inverse — for use on atlas-blue surfaces. */
.btn-cta--on-blue {
  background: var(--color-white);
  color: var(--color-atlas);
}
.btn-cta--on-blue:hover {
  background: var(--color-sky-pale);
  color: var(--color-atlas-dk);
}
.btn-cta--on-blue:focus-visible {
  outline-color: var(--color-white);
}

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