/* ── BUTTON COMPONENT ── */
/* Figma node: 37448:13649 — Button (Primary/Secondary × Default/Small × Default/Hover) */

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);       /* 4px — --border/default */
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* ── PRIMARY (Default size: 52px) ── */

.btn--primary {
  height: 52px;
  padding: 8px 8px 8px 20px;
  gap: var(--space-2);
  background: var(--grad-glass);         /* white-80% → white-90% → white-80% */
  box-shadow: var(--shadow-btn);         /* 0 8px 12px rgba(0,0,0,0.04) */
  color: var(--color-darkblue);
}

.btn--primary:hover {
  background: var(--color-white);
  box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.04);
  color: var(--color-orange);
}

.btn--primary:hover .btn__icon {
  background: var(--grad-orange);
}

/* ── PRIMARY SMALL (44px) ── */

.btn--primary.btn--sm {
  height: 44px;
  padding: 12px 8px 12px 16px;
  gap: 0;
  box-shadow: var(--shadow-btn-sm);     /* 0 4px 8px rgba(0,0,0,0.04) */
}

/* ── SECONDARY (glassmorphism, on dark bg) ── */

.btn--secondary {
  height: 52px;
  padding: 8px 8px 8px 20px;
  gap: var(--space-2);
  background: var(--color-white-4);
  border: 1px solid var(--color-white-12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--color-white);
}

.btn--secondary:hover {
  border-color: var(--color-darkblue-12);
  color: var(--color-darkblue);
  background: var(--color-white);
}

/* ── SECONDARY SMALL ── */

.btn--secondary.btn--sm {
  height: 44px;
  padding: 12px 8px 12px 16px;
}

/* ── ICON WRAPPER (36×36 inside button) ── */

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);       /* 2px — --border/small */
  background: var(--grad-navy);          /* navy gradient default */
  transition: background var(--dur-base) var(--ease-out);
  overflow: hidden;
}

/* Arrow icon inside btn__icon */
.btn__icon svg,
.btn__icon .icon-arrow {
  width: 20px;
  height: 20px;
  color: var(--color-white);
  flex-shrink: 0;
}

/* ── BUTTON LINK (text only with arrow) ── */

.btn--link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-nav);
  color: var(--color-darkblue);
  cursor: pointer;
}

.btn--link:hover {
  color: var(--color-orange);
}

/* ── ICON-ONLY BUTTON ── */

.btn--icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: var(--grad-navy);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}

.btn--icon-only:hover {
  background: var(--grad-orange);
}

/* On dark backgrounds, secondary icon only */
.btn--icon-only.btn--icon-secondary {
  background: var(--color-white-4);
  border: 1px solid var(--color-white-12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--icon-only.btn--icon-secondary:hover {
  background: var(--color-white-20);
}