/**
 * Button Components
 * Reusable button styles following BEM methodology
 */

/* ========================================
   PRIMARY BUTTON (CTA)
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: color var(--transition-default);
  user-select: none;
}

.btn--primary {
  min-height: 80px;
  padding: 0 36px 0 0;
  font-size: 26px;
  line-height: var(--line-height-base);

  border-radius: var(--border-radius-xxl);
  border: var(--border-width-base) solid var(--color-border-primary);
  background: var(--color-bg-overlay);
  backdrop-filter: var(--backdrop-blur-lg);

  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.btn--primary::before {
  content: '';
  width: auto;
  height: calc(100% - 12px);
  aspect-ratio: 1;
  flex: none;
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary);
  position: absolute;
  right: 6px;
  top: 6px;
  transition: var(--transition-slow) all var(--transition-timing-ease-in-out);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' fill='none' viewBox='0 0 34 34'%3e%3cpath fill='%23000' d='m21.068 16.542-5.442 7.483a.142.142 0 0 1-.115.058h-2.483a.142.142 0 0 1-.114-.225l5.32-7.316a.425.425 0 0 0 0-.5l-5.32-7.317a.142.142 0 0 1 .114-.225h2.483c.046 0 .088.022.115.058l5.442 7.484a.425.425 0 0 1 0 .5Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px;
}

.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 500px;
  transition: width var(--transition-slow) var(--transition-timing-ease-in-out);
  z-index: -1;
}

.btn--primary:hover {
  color: var(--color-text-dark);
}

.btn--primary:hover::after {
  width: 100%;
  right: 0;
}

/* ========================================
   SECONDARY BUTTON (Outline)
   ======================================== */

.btn--secondary {
  padding: 12px 16px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);

  background-color: var(--color-bg-overlay);
  border-radius: var(--border-radius-xl);
  border: var(--border-width-base) solid var(--color-border-primary);

  color: var(--color-text-primary);
  transition: opacity var(--transition-default);
}

.btn--secondary:hover {
  opacity: 0.8;
}

/* ========================================
   ACCENT BUTTON (Solid Green)
   ======================================== */

.btn--accent {
  padding: 12px 16px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);

  background-color: var(--color-primary);
  border-radius: var(--border-radius-xl);

  color: var(--color-text-dark);
  transition: opacity var(--transition-default);
}

.btn--accent:hover {
  opacity: 0.9;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .btn--primary {
    min-height: 44px;
    padding-right: 22px;
    font-size: var(--font-size-base);
  }

  .btn--primary::before {
    background-size: 20.3px;
    right: 8px;
  }
}