/* Page styles for busca, ported from _prototype/busca.html. */
.search-head{background:#fff;border-bottom:1px solid var(--line);padding:22px 0}
  .search-head .searchbar{box-shadow:var(--shadow-soft)}
  /* With a photo (Configurações > Imagens do site): more room around the bar,
     so the photo reads as a band and not as a border. */
  .search-head.has-photo{background:var(--petrol-ink);border-bottom:0;padding:44px 0}
  @media (max-width:640px){.search-head.has-photo{padding:26px 0}}

  .results-wrap{display:grid;grid-template-columns:264px 1fr;gap:28px;align-items:start;
    padding:28px 0 10px}
  @media (max-width:900px){ .results-wrap{grid-template-columns:1fr} }

  /* ---- filters ---- */
  .filters{position:sticky;top:82px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:18px;
    /* Sticky and taller than the window, its bottom (the "Aplicar" button)
       could never be reached; since the profession and city lists (2026-10-01)
       it often is taller, so it scrolls on its own. */
    max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
  .filters h2{font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
  .filters h2 svg{width:16px;height:16px;color:var(--petrol)}
  .fgroup{padding:14px 0;border-top:1px solid var(--line)}
  .fgroup:first-of-type{border-top:none;padding-top:0}
  .fgroup>b,.fgroup>.ftitle{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--faint);margin-bottom:9px}
  .filters .clear{width:100%;margin-top:6px}
  .fdrawer-close,.fopen{display:none}
  @media (max-width:900px){
    .filters{position:fixed;inset:auto 0 0 0;top:auto;z-index:300;border-radius:var(--r-lg) var(--r-lg) 0 0;
      max-height:82vh;overflow-y:auto;transform:translateY(105%);transition:transform .3s var(--ease);
      box-shadow:0 -12px 40px rgba(0,0,0,.25)}
    .filters.open{transform:none}
    .fdrawer-close{display:grid;place-items:center;width:38px;height:38px;border:none;
      background:var(--bg-2);border-radius:var(--r-sm);margin-left:auto}
    .filters h2{justify-content:flex-start}
    .fopen{display:inline-flex}
    .fscrim{position:fixed;inset:0;background:rgba(10,20,25,.4);z-index:299;opacity:0;
      pointer-events:none;transition:opacity .3s}
    .fscrim.on{opacity:1;pointer-events:auto}
  }

  /* ---- results header ---- */
  .res-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
  .res-top h1{font-size:clamp(20px,2.6vw,27px);margin:0;flex:1;min-width:200px}
  .res-sort{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
  .res-sort select{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;
    background:#fff;font-size:13.5px;min-height:40px}
  .res-blurb{font-size:14.5px;color:var(--muted);max-width:70ch;margin:2px 0 18px}
  .res-reply{margin:-6px 0 16px}
  .res-list{display:grid;gap:14px}
  .res-more{margin:26px auto 0;display:flex;justify-content:center}

  /* The count and "Lista | Mapa" (§3u), the agenda's toggle (.ag-views). */
  .res-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px;margin:0 0 14px}
  .res-bar .res-count{margin:0}
  .res-views{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;
    padding:3px;background:var(--bg-2);flex:none}
  .res-view{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
    font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;min-height:38px}
  .res-view svg{width:15px;height:15px}
  .res-view:hover{color:var(--petrol)}
  .res-view.on{background:var(--petrol);color:#fff;box-shadow:var(--shadow-1)}
  @media (max-width:480px){.res-views{width:100%}.res-view{flex:1;justify-content:center}}

  /* A paginação e .res-count subiram para o app.css: a agenda as usa e não
     carrega esta folha. */

  /* ---- empty state spacing inside the results column ---- */
  .res-list + .pagination{margin-top:26px}
  .empty .btn{margin-top:16px}

  /* ---- links into the profession-in-city pages ----
     Under the results on a profession page or a city page, never on the
     combination itself. Visually quieter than the cards above it: this is a
     way out of the page, not a result, and it should not compete with the
     people the visitor came to see. */
  .cx-links{margin:34px 0 4px;padding-top:22px;border-top:1px solid var(--line)}
  .cx-links .h-sec{margin:0 0 14px;font-size:17px}
  .cx-links ul{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px}
  .cx-links li{margin:0}
  .cx-links a{
    display:flex;align-items:center;gap:10px;
    /* 12px keeps the row at 44px, the design system's minimum tap target. The
       professions index measured 40.9px at 10px padding. */
    padding:12px;border-radius:var(--radius-btn);
    color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.35;
    transition:background .16s var(--ease)}
  .cx-links a:hover{background:var(--petrol-soft)}
  .cx-links a>span{flex:1 1 auto;min-width:0}
  .cx-links a>b{flex:none;font-size:12.5px;font-weight:600;
    color:var(--petrol);background:var(--petrol-soft);
    padding:2px 9px;border-radius:999px}

  @media (max-width:900px){ .cx-links ul{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .cx-links ul{grid-template-columns:1fr} }

/* ================================= a foto da cidade em /em/{cidade}/ (2026-09-24) ==== */

/* A foto é o maior elemento da primeira tela, então a altura é fixa: nada
   desloca a página quando ela chega (CLS). O crédito fica no canto, pequeno,
   sobre um véu verde-escuro, e é obrigatório pela licença da maioria delas. */
.city-band{margin-top:18px}
.city-band .city-cover{position:relative;margin:0;height:140px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--petrol-deep)}
.city-band .city-cover img{width:100%;height:100%;object-fit:cover;display:block}
.photo-credit{position:absolute;right:8px;bottom:8px;margin:0;padding:3px 8px;border-radius:var(--r-xs);
  background:rgba(7,38,28,.72);color:#fff;font-size:11px;line-height:1.4;max-width:calc(100% - 16px)}
.photo-credit a{color:#fff}
@media (min-width:768px){ .city-band .city-cover{height:220px} }
/* Alvo de toque dos dois links do crédito: são o único controle sobre a foto. */
.photo-credit a{display:inline-block;padding:5px 0}
/* ===================== a página da própria cidade, /em/{cidade}/ (2026-10-01) ==== */

/* O parágrafo da cidade no lugar da frase padrão: tinta, não cinza, porque é
   texto para ler e não legenda. */
.res-blurb.city-intro{color:var(--ink-2,var(--ink));font-size:15px;line-height:1.55}

/* Eventos e lugares da cidade embaixo dos resultados: o mesmo fio discreto
   dos links de combinação, porque é um caminho adiante e não mais resultado. */
.city-more{margin:34px 0 4px;padding-top:22px;border-top:1px solid var(--line)}
.city-more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:12px}
.city-more-head .h-sec{margin:0;font-size:17px}
/* Alvo de 44px a 390px (revisão de SEO e acessibilidade, 01/10): com 10px de
   padding o link media ~41px. */
.city-more-head .more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.city-more .lg-list{display:grid;gap:12px}
/* --muted (#5B5B5B) sobre o fundo dá ~6,3:1, acima dos 4,5:1 do AA mesmo a
   12,5px; o tamanho fica. Cada fonte é um alvo de 44px, que no celular é o
   que separa um link do outro. */
.city-sources{margin:26px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.city-sources p{margin:0}
.city-sources ul{list-style:none;margin:0;padding:0}
.city-sources li{min-height:44px;display:flex;align-items:center}
.city-sources a{color:inherit;display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
/* A licença é um link dentro de uma frase (exceção "inline" da WCAG 2.5.8):
   fica na linha do texto, sem a caixa de 44px que a jogaria para baixo. */
.city-sources .city-sources-licence{margin-top:4px}
.city-sources-licence a{display:inline;min-height:0}
/* Aluguel da cidade (Rents, 01/10): o número grande, os quartos em grade de
   2 no celular e 4 a partir de 561px, a fonte com a licença do ONS. */
.city-rent .cr-card{padding:16px 18px;box-shadow:none}
.cr-main{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.cr-main b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:30px;line-height:1.1;color:var(--petrol-ink);font-variant-numeric:tabular-nums}
.cr-main span{font-size:14px;color:var(--muted)}
.cr-meta{margin:4px 0 12px;font-size:14px;color:var(--ink)}
.cr-beds{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cr-beds li{display:flex;flex-direction:column;padding:8px 10px;border-radius:var(--r-sm);background:var(--petrol-wash)}
.cr-beds span{font-size:12.5px;color:var(--muted)}
.cr-beds b{font-variant-numeric:tabular-nums;color:var(--petrol-ink)}
.cr-note,.cr-source{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.cr-source{margin-top:6px}
.cr-source a{color:inherit}
@media (min-width:561px){ .cr-beds{grid-template-columns:repeat(4,minmax(0,1fr))} }

/*
 * O esqueleto dos cartões de evento da cidade, aqui e não só em ev-card.css
 * (revisão de SEO, 01/10). ev-card.css e places.css chegam tarde, por
 * media="print" trocado pelo app.js (Assets::late_tag; onload no <link> a CSP
 * proíbe), e numa cidade sem profissionais os cartões aparecem já na primeira
 * tela: sem o grid, eles nasciam empilhados e pulavam quando o CSS chegava.
 * Só o que define altura e colunas, com os mesmos valores de ev-card.css; a
 * pintura continua lá. O .lg-list já está acima, e o cartão de lugar é o
 * .item-card do app.css, sem imagem nesta página.
 */
.city-more .ev-list{display:grid;gap:12px;margin:0}
.city-more .ev-card{display:grid;grid-template-columns:64px minmax(0,1fr) 190px;grid-template-areas:"when body media";
  gap:16px;align-items:start;position:relative;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.city-more .ev-card > .ev-when{grid-area:when;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 6px;min-height:62px}
.city-more .ev-card > .ev-body{grid-area:body;min-width:0}
.city-more .ev-card > .cm{grid-area:media;align-self:stretch;aspect-ratio:auto;min-height:112px}
.city-more .ev-day{font-size:26px;line-height:1}
.city-more .ev-month{font-size:11.5px;margin-top:3px}
.city-more .ev-title{margin:0 0 5px;font-size:18px;line-height:1.3}
.city-more .ev-meta{margin:0 0 8px -17px;clip-path:inset(0 0 0 17px);display:flex;flex-wrap:wrap;font-size:14px}
.city-more .ev-meta > span::before{content:"·";display:inline-block;width:17px;text-align:center}
.city-more .ev-meta svg,.city-more .ev-tags svg{width:13px;height:13px}
.city-more .ev-hours,.city-more .ev-city{white-space:nowrap}
.city-more .ev-month{letter-spacing:.08em;text-transform:uppercase}
.city-more .ev-tags{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.city-more .ev-price{font-size:13.5px}
/* O cartão de lugar: as etiquetas em linha e os ícones no tamanho final. */
.city-more .place h3{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.city-more .place .type{font-size:13.5px;margin-bottom:6px}
.city-more .place .type svg{width:15px;height:15px}
.city-more .place .item-meta{margin-bottom:8px}
.city-more .place .tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.city-more .place .tags li{font-size:12.5px;padding:4px 11px}
@media (max-width:560px){
  .city-more .ev-card{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"media media" "when body";gap:13px;padding:14px}
  .city-more .ev-card > .cm{aspect-ratio:16/10;min-height:0;margin:-14px -14px 0}
  .city-more .ev-day{font-size:22px}
  .city-more .ev-title{font-size:16.5px}
}

/* Nota mínima: o select vira combobox (2026-09-25) e fica escondido, então a
   margem que era inline no select passa para a caixa que o substitui. */
.fg-rating{margin-top:8px}
.fg-rating + .bcb{margin-top:8px}

/* ============================ filtros combinados e contadores (2026-10-01) ==== */

/* O número de cada opção: discreto, à direita, em pílula verde-clara. É
   informação, não chamada; o amarelo não entra (amarelo é geometria). */
.fcount{flex:none;margin-left:auto;font-size:12px;font-weight:600;line-height:1;
  color:var(--petrol);background:var(--petrol-soft);padding:4px 8px;border-radius:999px;
  font-variant-numeric:tabular-nums}

/* Caixas: 44px de alvo a 390px; o número fica na ponta da linha. Desligada
   quando não sobraria ninguém: continua visível, mas apagada e sem clique. */
.filters .check{min-height:44px;padding:4px 0}
.filters .check-label{flex:1 1 auto;min-width:0}
.filters .check.is-off{color:var(--faint);cursor:not-allowed}
.filters .check.is-off .fcount{color:var(--faint);background:var(--bg-2)}

/* Profissão e cidade no painel: links, um por linha, com o número. */
.flinks ul{list-style:none;margin:0;padding:0}
.flinks a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;
  color:var(--ink);text-decoration:none;font-size:14px;border-radius:var(--r-sm)}
.flinks a:hover{background:var(--petrol-soft)}

/* Fechado como um select (dono, 01/10): mesma borda e altura do "Qualquer
   bairro". Aberto, a lista rola por dentro em vez de esticar o painel. */
.fdrop-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--radius-btn);
  background:#fff;font-size:15px;color:var(--muted);cursor:pointer;list-style:none}
.fdrop-btn::-webkit-details-marker{display:none}
.fdrop-btn svg{width:16px;height:16px;flex:none;color:var(--ink);transform:rotate(90deg);transition:transform .15s}
.fdrop[open] .fdrop-btn{border-color:var(--petrol)}
.fdrop[open] .fdrop-btn svg{transform:rotate(-90deg)}
.fdrop-btn:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.fdrop-panel{margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;box-shadow:var(--shadow-1)}
.fdrop-find{margin-bottom:6px}
.fdrop-panel ul{max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.fdrop-none{margin:8px 4px;font-size:13.5px;color:var(--muted)}

/* O botão "Filtros" no celular diz quantos estão ligados. */
.fopen-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--petrol);color:#fff;font-size:12px;font-weight:700;margin-left:2px}

/* Chips do que está ativo, logo abaixo da contagem. Cada um é um link que
   tira o próprio filtro; "Limpar tudo" tira todos. Rolam na horizontal no
   celular em vez de empurrar os resultados para baixo. */
.fchips{display:flex;align-items:center;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.fchips ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:13.5px;font-weight:500;text-decoration:none;max-width:100%}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.fchip svg{width:15px;height:15px;flex:none;color:var(--muted)}
.fchip:hover{border-color:var(--petrol);background:var(--petrol-soft)}
.fchip:hover svg{color:var(--petrol)}
.fchips-clear{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
  font-size:13.5px;font-weight:600;color:var(--petrol)}

/* Saídas do estado vazio: grupos de pílulas, cada uma com o número que a
   página de destino vai mostrar. */
.empty-exit{margin:0 0 18px}
.empty-exit h4{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}
.exit-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.exit-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:14px;text-decoration:none}
.exit-links a:hover{border-color:var(--petrol);background:var(--petrol-soft)}
.exit-links .fcount{margin-left:0}
.empty-suggest{margin:18px 0 0;font-size:14px;color:var(--muted)}
.empty-suggest a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:560px){
  .empty{padding:28px 16px}
  .fchip span{max-width:160px}
}