/**
 * =============================================================================
 * COMPONENT: Button (.btn)
 * =============================================================================
 * Primary interactive element. Pill-shaped with radial gradients.
 *
 * Variants:  .btn--primary  |  .btn--secondary
 * Sizes:     .btn--lg (60px) | .btn--md (44px, default)
 * Modifiers: .btn--icon (with trailing circular icon)
 *
 * Markup:
 *   <a class="btn btn--primary btn--lg btn--icon" href="#">
 *     <span class="btn__label">Explore Our Work</span>
 *     <span class="btn__icon" aria-hidden="true">→</span>
 *   </a>
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * BASE
 * --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-14);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
}

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

/* ---------------------------------------------------------------------------
 * VARIANT: PRIMARY
 * --------------------------------------------------------------------------- */
.btn--primary {
  background: var(--gradient-radial-green);
}

.btn--primary:hover {
  background: var(--gradient-radial-glass);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-cta);
}

.btn--primary:active {
  background: var(--gradient-radial-glass);
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * VARIANT: SECONDARY
 * --------------------------------------------------------------------------- */
.btn--secondary {
  background: var(--gradient-radial-glass);
}

.btn--secondary:hover {
  background: var(--gradient-radial-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-cta);
}

.btn--secondary:active {
  background: var(--color-bg-surface);
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * SIZE: LARGE (60px)
 * --------------------------------------------------------------------------- */
.btn--lg {
  height: 60px;
  padding: var(--space-6) var(--space-14);
  font-size: 1.125rem;
  line-height: 1.222;
}

/* ---------------------------------------------------------------------------
 * SIZE: MEDIUM (44px, default)
 * --------------------------------------------------------------------------- */
.btn--md {
  height: 44px;
  padding: var(--space-6) var(--space-14);
  font-size: var(--text-lg);
  line-height: 1.25;
}

/* ---------------------------------------------------------------------------
 * MODIFIER: WITH ICON
 * Asymmetric padding: more left, icon flush right with small gap
 * --------------------------------------------------------------------------- */
.btn--icon {
  /* Left inset trimmed (32px → 24px) so short labels don't read as
     left-heavy against the trailing icon circle — the auto-width pill has
     no fixed label column to centre within (unlike the Figma fixed-width
     buttons), so the inset itself must be balanced. Matches the value
     already used at the mobile breakpoint. */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-12);
  gap: var(--space-4);
  border: 4px solid rgba(255, 255, 255, 0.18);
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
}

.btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--color-secondary);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-sm);
  color: var(--color-white);
  font-size: 1.25rem;
  transition: transform var(--transition-base);
}

.btn--icon:hover .btn__icon {
  transform: translateX(2px);
  color: var(--color-white);
}

/* Primary at hover swaps to glass — invert the icon circle so the arrow
   stays readable: white pill + dark teal arrow. */
.btn--primary:hover .btn__icon {
  background: var(--color-white);
  color: var(--color-secondary);
}

/* ---------------------------------------------------------------------------
 * ICON SVG (arrow)
 * --------------------------------------------------------------------------- */
.btn__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .btn--lg {
    height: 52px;
    font-size: var(--text-lg);
  }

  .btn--icon {
    padding-left: var(--space-12);
  }

  .btn__icon {
    width: 38px;
    height: 38px;
  }
}