/* SectionLink — a navigational text link, NOT a classic pill button.
   Uppercase label with a leading right-arrow and a solid orange rule beneath
   both arrow and text. Use it to point at another section (e.g. "About the
   studio"), never for a primary/committing action. */

.ds-slink {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--slink-line-gap);
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-body);
  cursor: pointer;
  width: fit-content;
  -webkit-tap-highlight-color: transparent;
}

/* Auf dunklem Grund. Einziger Unterschied ist die Textfarbe: Pfeil erbt sie
   ueber currentColor, die orange Linie bleibt in beiden Faellen gleich. */
.ds-slink--dark {
  color: var(--color-white);
}

/* Arrow + label sit on one row; the gap is intentionally wide so the arrow
   reads as a separate marker set further left than the label. */
.ds-slink__row {
  display: inline-flex;
  align-items: center;
  gap: var(--slink-arrow-gap);
}

.ds-slink__icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--transition-btn) ease, color var(--transition-btn) ease;
}

.ds-slink__label {
  font-size: var(--slink-text);   /* fluid: 32px desktop → 24px mobile */
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.031em;       /* em-based (≡ -1px at 32px) so it scales with the fluid size */
  text-transform: uppercase;
  line-height: 1.375;             /* ≡ 44px at 32px; scales with the fluid size */
  white-space: nowrap;
}

/* Solid orange rule — full width of the arrow+label row. */
.ds-slink__line {
  height: var(--slink-line-weight);
  background: var(--color-orange-600);
  transition: height var(--transition-btn) ease;
}

/* Hover: arrow advances toward the label, the rule wipes in from the left. */
.ds-slink:hover .ds-slink__icon,
.ds-slink:focus-visible .ds-slink__icon {
  transform: translateX(6px);
  color: var(--color-orange-600);
}

.ds-slink:hover .ds-slink__line,
.ds-slink:focus-visible .ds-slink__line {
  height: 2px;
}

.ds-slink:focus-visible {
  outline: 2px solid var(--color-orange-600);
  outline-offset: 6px;
}