/**
 * =============================================================================
 * COMPONENT: Button (.btn) + small arrow link (.link-arrow)
 * =============================================================================
 * 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>
 *
 * `.link-arrow` at the bottom of this file is the small, quiet counterpart of
 * the pill: same accent colour and trailing arrow, no pill and no border. It
 * lives here rather than in a page stylesheet because two different templates
 * already use it, and this file is enqueued globally as a shared component.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * 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;
}

/* The label stays WHITE while hovered, on every variant.
 * ---------------------------------------------------------------------------
 * base.css has a global `a:hover { color: var(--color-light-green) }`. That
 * selector scores (0,1,1) and `.btn` only (0,1,0), so the global rule won that
 * cascade and every button that is a link went light green on hover. On
 * --primary it never showed, because .btn--primary:hover happens to repeat
 * `color: var(--color-white)`. On --secondary, whose hover fills with the green
 * radial gradient, it meant light-green text on green — the label vanished.
 *
 * Pinned here at (0,2,0) so it outranks the global rule and no variant has to
 * remember to repeat it. A variant that genuinely wants another hover colour
 * needs to beat this, which is the right amount of friction.
 */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
 * 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;
  }
}

/* ---------------------------------------------------------------------------
 * SMALL ARROW LINK (.link-arrow)
 * ---------------------------------------------------------------------------
 * The quiet, small-size sibling of the CTA pill: accent-coloured label with a
 * trailing arrow that nudges on hover, no pill, no border, no fixed height.
 *
 * Use it where a pill would shout: inside a card, or under a block of chips and
 * pills where a 44px green button outweighs everything around it.
 *
 * Markup:
 *   <a class="link-arrow" href="#">
 *     <span>See the Project</span>
 *     <span class="link-arrow__icon" aria-hidden="true">→</span>
 *   </a>
 *
 * `currentColor` on the icon means a wrapper can recolour the whole thing with
 * one `color` declaration.
 * --------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-text-accent);
  text-decoration: none;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  text-decoration: underline;
}

.link-arrow__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.link-arrow__icon svg {
  width: 100%;
  height: 100%;
}

.link-arrow:hover .link-arrow__icon {
  transform: translate(2px, -2px);
}

/* Where the link is not the hover target itself — a card whose whole surface is
   the link, so this element is only the affordance — the owning component drives
   the nudge from its own :hover (see .project-card in page-collab-projects.css).
   Deliberately NOT a bare `:hover > .link-arrow` here: that would fire on any
   hovered parent anywhere on the site, which is far more reach than a component
   file should claim. */