/*
 * Corza button atom.
 *
 * Maps to Pack's BUTTONS enum (settings/common.js):
 *   btn-primary        → solid orange (brand CTA)
 *   btn-secondary      → solid dark ink
 *   btn-inverse-light  → white-on-dark, for use over dark hero overlays
 *   btn-inverse-dark   → outline-on-light, for use on white surfaces
 *
 * Adapted from corza.com's `.a-button` styles. Pill shape, expanding
 * horizontal padding on hover, GT Eesti Display 700.
 */

.c-btn {
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--corza-radius-pill);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--corza-font-display);
  font-weight: 700;
  gap: 10px;
  text-decoration: none;
  transition:
    color var(--corza-transition-base),
    background-color var(--corza-transition-base),
    border-color var(--corza-transition-base),
    padding var(--corza-transition-base),
    gap var(--corza-transition-base);
}

/* Sizes
 *  sm — product cards, filter chips, dense lists, "Quick view"
 *       (lifted from corza.com nav-dropdown buttons)
 *  md — default. Section CTAs, hero CTAs.
 *  lg — hero mega-CTAs, conversion points.
 *
 * Hover expands horizontal padding by ~10px to slide the label outward.
 */
.c-btn--sm {
  font-size: 13px;
  line-height: 18px;
  padding: 10px 16px;
}
.c-btn--sm:hover {
  padding: 10px 24px;
}

.c-btn,
.c-btn--md {
  font-size: 16px;
  line-height: 20px;
  padding: 13px 20px;
}
.c-btn:hover,
.c-btn--md:hover {
  padding: 13px 30px;
}

.c-btn--lg {
  font-size: 18px;
  line-height: 22px;
  padding: 16px 28px;
}
.c-btn--lg:hover {
  padding: 16px 38px;
}

.c-btn:hover {
  text-decoration: none;
}

.c-btn:focus-visible {
  outline: 2px solid var(--corza-orange);
  outline-offset: 2px;
}

/* btn-primary — Corza orange (brand action) */
.c-btn--primary {
  background-color: var(--corza-orange);
  border-color: var(--corza-orange);
  color: #fff;
}
.c-btn--primary:hover {
  background-color: var(--corza-orange-dk);
  border-color: var(--corza-orange-dk);
  color: #fff;
}

/* btn-secondary — Corza ink */
.c-btn--secondary {
  background-color: var(--corza-ink);
  border-color: var(--corza-ink);
  color: #fff;
}
.c-btn--secondary:hover {
  background-color: var(--corza-ink-dk);
  border-color: var(--corza-ink-dk);
  color: #fff;
}

/* btn-inverse-light — for dark hero overlays */
.c-btn--inverse-light {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.c-btn--inverse-light:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--corza-ink);
}

/* btn-inverse-dark — for light surfaces */
.c-btn--inverse-dark {
  background-color: transparent;
  border-color: var(--corza-ink);
  color: var(--corza-ink);
}
.c-btn--inverse-dark:hover {
  background-color: var(--corza-ink);
  border-color: var(--corza-ink);
  color: #fff;
}