/*
 * Pulsante a pillola con icona opzionale.
 * Varianti: --primary (pieno), --light (bianco), --accent (evidenza), --outline (bordo scuro),
 * --ghost (bordo chiaro su fondo scuro), --sm (più basso), --block (tutta larghezza), --lead-icon (icona tonda a sinistra).
 */
@layer components {
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 10px 20px; border: 0; border-radius: var(--radius-pill);
    font-family: inherit; font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: var(--tracking);
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color .25s, color .25s, box-shadow .25s;
  }

  .button--primary {
    background: var(--color-primary); color: var(--color-on-primary);
    box-shadow: 0 4px 9px 2px rgb(0 0 0 / 0.11), inset 0 0 7px 0 rgb(235 235 235 / 0.6);
    &:hover { background: var(--color-primary-dark); color: var(--color-on-primary); }
  }
  .button--light {
    background: var(--color-bg); color: var(--color-ink);
    &:hover { background: var(--color-accent); color: var(--color-on-accent); }
  }
  .button--accent {
    background: var(--color-accent); color: var(--color-on-accent); font-weight: 600;
    &:hover { background: var(--color-bg); color: var(--color-ink); }
  }
  .button--outline {
    background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink);
    &:hover { background: var(--color-accent); color: var(--color-on-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
  }
  .button--ghost {
    background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); padding-inline: 22px;
    &:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
  }
  .button--sm { min-height: 46px; padding-block: 8px; font-size: 15px; }
  .button--block { display: flex; width: 100%; }
  .button--strong { font-weight: 600; }

  /* Icona in un cerchio a sinistra ("Trova un'attività") */
  .button--lead-icon { padding-left: 11px; }
  .button__circle {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
  }

  @media (max-width: 767px) {
    .button--block-mobile { display: flex; width: 100%; }
  }
}