/* =============================================================================
   Hello Studio — przyciski (DESIGN-SYSTEM.md §6, komponenty 1–5)
   Primary / Primary-white / Secondary / Secondary-white / Link-underline
   ============================================================================= */

.wl-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: var(--font-base);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.wl-btn:hover {
  transform: translateY(-1px);
}

.wl-btn__body {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  position: relative;
  min-height: var(--btn-min-h, 0);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-pill);
  border: var(--btn-border-width) solid transparent;
}

/* Primary / on-dark: magenta + obwódka biała (Button / Primary / on-dark) */
.wl-btn--primary .wl-btn__body {
  background: var(--brand-magenta);
  color: var(--neutral-white);
  border-color: var(--neutral-white);
}

/* Primary / on-light: magenta + obwódka magenta (Button / Primary / on-light) */
.wl-btn--primary_light .wl-btn__body {
  background: var(--brand-magenta);
  color: var(--neutral-white);
  border-color: var(--brand-magenta);
}

/* Primary white: biała pigułka z ciemnym tekstem */
.wl-btn--primary_white .wl-btn__body {
  background: var(--neutral-white);
  color: var(--brand-magenta);
  border-color: var(--neutral-white);
}

/* Secondary / on-dark: sama obwódka biała */
.wl-btn--secondary .wl-btn__body {
  background: transparent;
  color: var(--neutral-white);
  border-color: var(--neutral-white);
}

/* Secondary / on-light: obwódka ink */
.wl-btn--secondary_light .wl-btn__body {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-ink);
}

.wl-btn--secondary_white .wl-btn__body {
  background: transparent;
  color: var(--neutral-white);
  border-color: var(--neutral-white);
}

.wl-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon);
  height: var(--btn-icon);
  flex: 0 0 auto;
}

.wl-btn__icon svg,
.wl-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wl-btn__label {
  white-space: nowrap;
}

/* Badge (Bezpłatna lekcja próbna) — cyan pigułka nad przyciskiem */
.wl-btn__badge {
  position: absolute;
  top: calc(var(--space-md) * -1 + var(--space-2xs) * -0.5); /* → −25px @1920 */
  left: calc(var(--btn-padding-x) + var(--btn-padding-x));    /* → 95px @1920 */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-white);
  background: var(--brand-cyan);
  color: var(--neutral-white);
  font-family: var(--font-base);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  white-space: nowrap;
}

.wl-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--btn-row-gap);
}

.wl-btn-row--center {
  justify-content: center;
}

/* Link-underline (karta usługi) — tekst magenta + linia 2px */
.wl-btn--link .wl-btn__body {
  background: transparent;
  color: var(--brand-magenta);
  border: 0;
  border-bottom: var(--btn-border-width) solid var(--brand-magenta);
  border-radius: 0;
  padding: var(--btn-padding-y) 0;
  font-weight: var(--fw-regular);
}

.wl-btn--link:hover {
  transform: none;
}

.wl-btn--link:hover .wl-btn__body {
  opacity: 0.72;
}

@media (max-width: 768px) {
  .wl-btn__label {
    white-space: normal;
  }

  .wl-btn-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .wl-btn {
    justify-content: center;
  }

  .wl-btn__badge {
    top: auto;
    bottom: calc(var(--space-md) * -1);
    left: 50%;
    transform: translateX(-50%);
  }

  /* badge nachodzi na następny element — dodaj zapas pod pigułką */
  .wl-btn--has-badge {
    margin-bottom: var(--space-md);
  }
}