/* =============================================================
   Páginas públicas — estado, cidade e vaga
   -------------------------------------------------------------
   São as páginas que aparecem na busca e as que circulam no
   WhatsApp. Continuam usando os tokens de styles/tokens.css: o
   azul-marinho, o mesmo espaçamento e a mesma tipografia do
   restante do produto. O que muda é o ritmo — aqui há mais
   respiro, porque quem chega vem de fora e precisa entender a
   proposta antes de decidir entrar.

   Layout responsivo fica nas classes do Tailwind, no HTML. Este
   arquivo cuida da aparência dos componentes.
   ============================================================= */

@layer pages {

  /* ---------------------------------------------------------
     Trilha de navegação
     --------------------------------------------------------- */

  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
  }

  .crumbs a {
    color: var(--text-muted);
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .crumbs__separator {
    color: var(--border-strong);
  }

  .crumbs [aria-current="page"] {
    color: var(--text-default);
  }

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

    .crumbs a:hover {
      color: var(--text-strong);
      border-block-end-color: var(--border-control);
    }
  }

  /* ---------------------------------------------------------
     Cabeçalho da página pública
     --------------------------------------------------------- */

  .public-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .public-head__eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-text);
  }

  .public-head__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--text-strong);
  }

  .public-head__lead {
    max-inline-size: 60ch;
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
  }

  .public-head__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  .stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .stat-chip__value {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
  }

  /* ---------------------------------------------------------
     Grade de cidades e estados
     --------------------------------------------------------- */

  .city-grid {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .city-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    min-block-size: var(--tap-target);
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  .city-link__name {
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
  }

  .city-link__meta {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
  }

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

    .city-link:hover {
      border-color: var(--border-control);
      background: var(--surface-overlay);
      transform: translateY(-1px);
    }
  }

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

  /* ---------------------------------------------------------
     Lista de vagas da cidade
     --------------------------------------------------------- */

  .job-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
  }

  .job-item__link {
    display: block;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-inset);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  .job-item__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-snug);
  }

  .job-item__company {
    margin-block-start: var(--space-1);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .job-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-3);
    font-size: var(--fs-xs);
  }

  .job-item__salary {
    font-weight: var(--fw-semibold);
    color: var(--positive-text);
    font-variant-numeric: tabular-nums;
  }

  .job-item__source {
    color: var(--text-subtle);
  }

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

    .job-item__link:hover {
      border-color: var(--border-control);
      background: var(--surface-overlay);
      transform: translateY(-2px);
    }
  }

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

  .job-empty {
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    text-align: center;
  }

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

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

  /* ---------------------------------------------------------
     Cartões explicativos
     --------------------------------------------------------- */

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

  .info-card__text {
    margin-block-start: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
  }

  /* ---------------------------------------------------------
     Compartilhamento

     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.
     --------------------------------------------------------- */

  .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;
  }

  /* ---------------------------------------------------------
     Página de uma vaga
     --------------------------------------------------------- */

  .job-page__block {
    margin-block-start: var(--space-8);
  }

  .job-page__block-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin-block-end: var(--space-3);
  }

  .job-page__block p + p {
    margin-block-start: var(--space-3);
  }

  .job-page__block p {
    color: var(--text-default);
    line-height: var(--lh-relaxed);
  }

  .job-facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
  }

  /* Em tela estreita, rótulo em cima e valor embaixo: tentar alinhar em duas
     colunas com jornada longa produzia uma quebra torta, com o rótulo sozinho
     em uma linha e o valor pulando para a outra. A grade em si está nas
     classes do Tailwind, no modelo. */

  /* Rótulo e valor lado a lado em tela mais larga: classes
     xs:grid-cols-[9rem_1fr] xs:items-baseline xs:gap-x-4, no modelo
     others/job.html. */

  .job-facts__label {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .job-facts__value {
    margin: 0;
    color: var(--text-strong);
    font-weight: var(--fw-medium);
  }

  .job-page__origin {
    margin-block-start: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-fill);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
  }

  .job-page__source {
    display: inline-block;
    margin-block-start: var(--space-2);
    color: var(--text-link);
    font-weight: var(--fw-medium);
  }

  /* ---------------------------------------------------------
     Texto corrido das páginas públicas
     --------------------------------------------------------- */

  .public-prose {
    max-inline-size: 68ch;
    color: var(--text-default);
    line-height: var(--lh-relaxed);
  }

  .public-prose h2 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text-strong);
    margin-block-end: var(--space-4);
  }

  .public-prose h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin-block: var(--space-6) var(--space-2);
  }

  .public-prose p + p {
    margin-block-start: var(--space-4);
  }

  .public-prose a {
    color: var(--text-link);
  }

  /* ---------------------------------------------------------
     Movimento

     Entrada discreta, uma vez só, e desligada para quem pediu
     menos animação no sistema.
     --------------------------------------------------------- */

  .reveal {
    animation: public-reveal var(--dur-slow) var(--ease-out) both;
  }

  @keyframes public-reveal {

    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

    .reveal {
      animation: none;
    }

    .city-link,
    .job-item__link,
    .share-button {
      transition: none;
    }
  }
}

@layer pages {

  /* Imagem do anúncio na página pública da vaga. */
  .job-page__image {
    margin: var(--space-8) 0 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-sunken);
  }

  .job-page__image img {
    display: block;
    inline-size: 100%;
    max-block-size: 34rem;
    object-fit: contain;
    background: var(--surface-sunken);
  }

  .job-page__contact {
    margin-block-start: var(--space-2);
  }
}