/* =============================================================
   Compartilhar — cartão e botões

   Fica logo abaixo da dobra de conteúdo, e não no rodapé: a hora
   de mandar a vaga para alguém é logo depois de ler que ela
   existe.

   Morava em pages/public.css e serve às duas metades do produto:
   a página pública de cidade e de vaga usam o cartão inteiro, e o
   convite dentro do aplicativo usa os mesmos botões. Uma vaga
   compartilhada de dentro do app e a mesma vaga compartilhada da
   página pública precisam parecer a mesma coisa — é o mesmo gesto.
   ============================================================= */

@layer components {

  .share {
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, var(--surface-sheen), transparent 60%),
      var(--surface-raised);
  }

  .share__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
  }

  .share__text {
    margin-block-start: var(--space-2);
    max-inline-size: 56ch;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
  }

  .share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  .share-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-target);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-default);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .share-button--primary {
    border-color: transparent;
    background: var(--positive-fill);
    color: var(--text-on-accent);
  }

  @media (hover: hover) and (pointer: fine) {

    .share-button:hover {
      border-color: var(--border-control-hover);
      background: var(--surface-hover);
      color: var(--text-strong);
    }

    .share-button--primary:hover {
      background: var(--positive-fill-hover);
      color: var(--text-on-accent);
    }
  }

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

  .share-button__icon {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    flex: none;
  }

  /* O reset zera o preenchimento de todo SVG, porque os ícones do produto são
     desenhados só com traço. O símbolo do WhatsApp é sólido: sem esta regra ele
     some, e o botão fica só com o texto. */
  .share-button__icon--filled {
    fill: currentColor;
    stroke: none;
  }

  @media (prefers-reduced-motion: reduce) {

    .share-button {
      transition: none;
    }
  }
}