/* ==========================================================================
   Butoane — Primary (Impuls) · Secondary (Profunzime) · Outline · Ghost
   Mărimi: sm · md (implicit) · lg. Stări: default, hover, active,
   focus-visible, disabled, loading.
   ========================================================================== */

.btn {
  --btn-py: 15px;
  --btn-px: 28px;
  --btn-fs: var(--fs-body);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  transition:
    transform var(--t-btn) var(--ease),
    box-shadow var(--t-btn) var(--ease),
    background-color var(--t-btn) var(--ease),
    border-color var(--t-btn) var(--ease),
    color var(--t-btn) var(--ease);
}

.btn i { font-size: 20px; line-height: 0; display: inline-flex; }

.btn:hover { transform: translateY(var(--lift-btn)); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* --- Mărimi -------------------------------------------------------------- */
.btn--sm { --btn-py: 10px; --btn-px: 20px; --btn-fs: var(--fs-sm); }
.btn--sm i { font-size: 16px; }
.btn--md { --btn-py: 15px; --btn-px: 28px; --btn-fs: var(--fs-body); }
.btn--lg { --btn-py: 18px; --btn-px: 36px; --btn-fs: var(--fs-lead); }
.btn--lg i { font-size: 22px; }

.btn--block { width: 100%; }

/* Sub 768px containerele sunt inguste si etichetele lungi nu incap pe un rand.
   Butonul isi pastreaza forma de pill si trece textul pe doua randuri. */
@media (max-width: 767px) {
  .btn { white-space: normal; }
}

/* --- Primary — Impuls ---------------------------------------------------- */
.btn--primary {
  background: var(--impuls);
  color: #FFFFFF;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: var(--impuls-dark); box-shadow: var(--shadow-btn-hover); color: #FFFFFF; }
.btn--primary:active { background: var(--impuls-dark); box-shadow: var(--shadow-btn); }

/* --- Secondary — Profunzime ---------------------------------------------- */
.btn--secondary {
  background: var(--profunzime);
  color: var(--claritate);
  box-shadow: var(--shadow-btn-dark);
}
.btn--secondary:hover {
  background: var(--profunzime);
  color: var(--claritate);
  box-shadow: var(--shadow-card-hover);
}
.btn--secondary:active { box-shadow: var(--shadow-btn-dark); }

/* --- Outline ------------------------------------------------------------- */
.btn--outline {
  background: transparent;
  color: var(--profunzime);
  border-color: var(--liniste);
}
.btn--outline:hover {
  border-color: var(--impuls);
  color: var(--impuls-text);
  background: var(--impuls-wash);
}
.btn--outline:active { background: var(--impuls-wash-strong); }

/* --- Ghost --------------------------------------------------------------- */
.btn--ghost {
  background: transparent;
  color: var(--impuls-text);
  padding-inline: var(--sp-4);
}
.btn--ghost:hover { background: var(--impuls-wash); color: var(--impuls-text); }
.btn--ghost:active { background: var(--impuls-wash-strong); }

/* --- Pe fundal Profunzime ------------------------------------------------
   Contextul .on-dark vine fie de la bandă, fie de la un card închis
   (.card--feature, .course--dark). Un card deschis pus într-o bandă închisă
   își are propria suprafață: butoanele din el rămân pe varianta de fundal
   deschis. :where() păstrează specificitatea regulilor neschimbată. */
.on-dark .btn--outline:where(:not(.card:not(.on-dark) *)) { color: var(--on-invers); border-color: rgba(255,255,255,.28); }
.on-dark .btn--outline:where(:not(.card:not(.on-dark) *)):hover { color: #FFFFFF; border-color: var(--impuls); background: var(--impuls-wash-strong); }
.on-dark .btn--ghost:where(:not(.card:not(.on-dark) *)) { color: var(--on-invers); }
.on-dark .btn--ghost:where(:not(.card:not(.on-dark) *)):hover { background: rgba(255,255,255,.1); color: #FFFFFF; }
.on-dark .btn:where(:not(.card:not(.on-dark) *)):focus-visible { box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }

/* --- Loading ------------------------------------------------------------- */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading i { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 700ms linear infinite;
}
.btn--primary.is-loading::after,
.btn--secondary.is-loading::after { border-color: #FFFFFF; border-top-color: transparent; }
.btn--outline.is-loading::after,
.btn--ghost.is-loading::after { border-color: var(--impuls); border-top-color: transparent; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation-duration: 2s; }
}

/* --- Buton-iconiță ------------------------------------------------------- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--liniste);
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--profunzime);
  cursor: pointer;
  transition: transform var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease),
              border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.btn-icon i { font-size: 20px; line-height: 0; }
.btn-icon:hover { transform: translateY(var(--lift-btn)); box-shadow: var(--shadow-card); border-color: var(--impuls); color: var(--impuls-text); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-icon[disabled] { opacity: .35; pointer-events: none; }

/* --- Buton cu logo de platformă (2026-09-24) -------------------------------
   Logo-ul unei platforme (Spotify, YouTube, Apple Podcasts…) e o imagine 1:1,
   rotundă, cu culorile mărcii: stă la stânga, la aceeași distanță de margine
   ca de sus și de jos, fără să mărească înălțimea butonului. Merge pe orice
   variantă și mărime; pe fundal închis, varianta Secondary dă forma
   „Ascultă pe”. Cu --block, logo-ul rămâne la stânga și textul se centrează
   în lățimea butonului. */
.btn--logo { --btn-logo: 28px; padding-inline-start: 11px; }
.btn--logo.btn--sm { --btn-logo: 24px; padding-inline-start: 10px; }
.btn--logo.btn--lg { --btn-logo: 32px; padding-inline-start: 14px; }

.btn__logo {
  display: block;
  flex: none;
  width: var(--btn-logo, 28px);
  height: var(--btn-logo, 28px);
  margin-block: -8px;
  border-radius: var(--r-full);
  object-fit: contain;
}

.btn--logo.btn--block { justify-content: flex-start; }
.btn--logo.btn--block .btn__label {
  flex: 1;
  padding-inline-end: var(--btn-logo, 28px);
}

.btn.is-loading .btn__logo { visibility: hidden; }

/* --- Grup de butoane pe telefon (2026-09-30, decizia clientului) -----------
   .cluster--stack-mobile (blocul Butoane): sub 480px fiecare buton ia toată
   lățimea coloanei, unul sub altul, în ordinea din editor — ținta e mare și
   textul nu se rupe într-o pastilă îngustă. La butoanele cu logo, logo-ul
   rămâne la stânga și textul se centrează, ca la .btn--block. Butoanele doar
   cu logo (.btn-icon) rămân rotunde, pe un rând. Peste 480px, grupul e un
   .cluster obișnuit. */
@media (max-width: 479px) {
  .cluster--stack-mobile > .btn { flex: 1 1 100%; }
  .cluster--stack-mobile > .btn--logo { justify-content: flex-start; }
  .cluster--stack-mobile > .btn--logo .btn__label {
    flex: 1;
    padding-inline-end: var(--btn-logo, 28px);
  }
}

/* Doar logo: butonul rotund de 44×44 e chiar logo-ul, fără ramă. */
.btn-icon--logo {
  border: 0;
  background: transparent;
  overflow: hidden;
}
.btn-icon__logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  object-fit: contain;
}
.btn-icon--logo:hover { box-shadow: var(--shadow-card); }
.btn-icon--lg { width: 56px; height: 56px; }

/* --- Buton-iconiță: variante și glife de platformă (2026-09-30) -------------
   Pentru profilurile sociale (blocul „Linkuri sociale” și footerul). Glifa
   într-o singură culoare e din Uicons Brands și ia culoarea butonului.
   Implicit rămâne discul deschis cu ramă; --solid e discul închis, perechea
   butonului Secondary; --ghost e doar glifa, cu zona de atingere întreagă.
   Nu există mărime sub 44px: e zona minimă de atingere. */
.btn-icon { text-decoration: none; }
.btn-icon--lg i { font-size: 24px; }

.btn-icon--solid {
  background: var(--profunzime);
  border-color: var(--profunzime);
  color: var(--claritate);
}
.btn-icon--solid:hover { background: var(--impuls); border-color: var(--impuls); color: #FFFFFF; }

.btn-icon--ghost { background: transparent; border-color: transparent; }
.btn-icon--ghost:hover { background: var(--impuls-wash); border-color: transparent; box-shadow: none; }

.on-dark .btn-icon--solid:where(:not(.card:not(.on-dark) *)) { border-color: rgba(255,255,255,.28); }
.on-dark .btn-icon--solid:where(:not(.card:not(.on-dark) *)):hover { border-color: var(--impuls); }
.on-dark .btn-icon--ghost:where(:not(.card:not(.on-dark) *)) { color: var(--on-invers); }
.on-dark .btn-icon--ghost:where(:not(.card:not(.on-dark) *)):hover { background: rgba(255,255,255,.1); color: #FFFFFF; }