/**
 * Link Molecule Styles
 *
 * Sizes: l (28px) | m (22px) | s (18px)
 * Backgrounds: white | ambience | trust | attitude | academy
 *
 * Figma node: 694:32931 — Links RBSG
 */

/* ── Scoped custom properties ────────────────────────────────────────────────── */

.link {
  --lnk-color:       var(--attitude-600, #996096);
  --lnk-icon-size:   20px;
  --lnk-gap:         12px;
  --lnk-font-size:   var(--text-link-m, 22px);
}

/* On trust (dark maroon bg) → attitude pink */
.surface--trust .link,
.link.link--on-trust {
  --lnk-color: var(--attitude, #ffa0fa);
}

/* On attitude (pink bg) → trust maroon */
.surface--attitude .link,
.surface--academy .link,
.surface--ambience .link,
.link.link--on-attitude,
.link.link--on-academy,
.link.link--on-ambience
{
  --lnk-color: var(--trust, #550a2d);
}


/* ── Base styles ─────────────────────────────────────────────────────────────── */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--lnk-gap);
  padding: 6px 2px;
  border-radius: var(--border-radius-m, 4px);

  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--lnk-font-size);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--lnk-color);
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: color 0.3s ease-in-out;

  .container__inner > & {
    width: 100%; /* force onto own line */
  }
}

/* ── Icon ────────────────────────────────────────────────────────────────────── */

.link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--lnk-icon-size);
  height: var(--lnk-icon-size);
}

.link__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.link__icon.before {
  order: -1;
}

.link__label {
  order:0;
}

.link__icon.after {
  order: 1;
}

/* ── Sizes ───────────────────────────────────────────────────────────────────── */

.link--l {
  --lnk-font-size: var(--text-link-l, 28px);
  --lnk-icon-size: 24px;
  min-height: 48px;
}

.link--m {
  --lnk-font-size: var(--text-link-m, 22px);
  --lnk-icon-size: 20px;
  min-height: 38px;
}

.link--s {
  --lnk-font-size: var(--text-link-s, 18px);
  --lnk-icon-size: 16px;
  min-height: 32px;
}

/* ── States ──────────────────────────────────────────────────────────────────── */

.link:hover {
  color: var(--attitude-500, #CC80C8);
}

.surface--trust .link:hover,
.link.link--on-trust:hover
{
  color: var(--attitude-200, #FFCFFD);
}

.surface--ambience .link:hover,
.link.link--on-ambience:hover
{
  color: var(--attitude-500, #CC80C8);
}

.surface--attitude .link:hover,
.surface--academy .link:hover,
.link.link--on-attitude:hover,
.link.link--on-academy:hover
{
  color: var(--accent-600, #961723);
}

.link:focus-visible {
  outline: 2px solid var(--accent, #fa263a);
  outline-offset: 0;
  border-radius: 2px;
}

.link:active {
  opacity: 0.8;
}

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

/* ── Responsive typography ───────────────────────────────────────────────────── */

@media (min-width: 1200px) {  /* Desktop */
  .link--l { --lnk-font-size: var(--text-link-l, 28px); }
  .link--m { --lnk-font-size: var(--text-link-m, 22px); }
  .link--s { --lnk-font-size: var(--text-link-s, 18px); }
}