/* ===========================================
   BUTTONS — Institutional Brutalism
   "The Block Action"
   0px border-radius • heavy padding • surgical precision
   =========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* Primary — Solid Black */
.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: scale(0.99);
}

/* Ghost / Outline — Transparent with border */
.btn-ghost {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Ghost on Light Surface */
.btn-ghost-dark {
  background-color: transparent;
  border: 1px solid var(--color-inverse-primary);
  color: var(--color-inverse-primary);
}

.btn-ghost-dark:hover {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-on-primary); 
}

/* Secondary — Red accent */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn-secondary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.btn-secondary:active {
  opacity: 0.8;
  transform: scale(0.99);
}

/* Inverted — White with secondary text */
.btn-inverted {
  background-color: #ffffff;
  color: var(--color-secondary);
}

.btn-inverted:hover {
  opacity: 0.95;
}

/* CTA Banner Button — larger outline on colored bg */
.btn-banner-outline {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 16px 48px;
}

.btn-banner-outline:hover {
  background-color: #ffffff;
  color: var(--color-secondary);
}

/* Sizes */
.btn-sm {
  padding: 10px 20px;
  font-size: 0.625rem;
}

.btn-lg {
  padding: 20px 40px;
  font-size: 0.875rem;
}

/* Full Width */
.btn-full-width {
  width: 100%;
}

/* Disabled */
.btn-disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon inside button */
.btn-icon {
  margin-right: 8px;
}

/* Icon-only action button */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: var(--color-surface-container-highest);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

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