/* Page styles for perfil, ported from _prototype/perfil.html. */
/* ---- header ---- */
  .cover{height:clamp(160px,26vw,260px);background:var(--petrol);position:relative;overflow:hidden}
  .cover img{width:100%;height:100%;object-fit:cover;opacity:.9}
  .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,38,28,.05),rgba(7,38,28,.35))}
  /*
   * The card is pulled up over the cover photo - but only when there IS one.
   *
   * The -46px was unconditional, and the cover only renders when the listing
   * has a featured image. Without one the card was pulled up into the sticky
   * header instead: measured with nothing scrolled, the header occupied y=0 to
   * 67 and the card started at y=21, so the professional's own name was behind
   * the menu the moment the page opened. Most listings have no photo yet, so
   * this was the normal case, not the edge one.
   */
  .p-head{margin-top:22px;position:relative;z-index:2}
  .cover + .p-head{margin-top:-46px}
  .p-head .card{padding:22px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
  .p-id h1{font-size:clamp(22px,3vw,30px);margin:0;display:inline}
  .p-badges{display:inline-flex;gap:7px;margin-left:10px;vertical-align:4px}
  .p-headline{margin:6px 0 10px;font-size:15.5px;color:var(--muted);max-width:64ch}
  .p-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13.5px;
    color:var(--muted);margin-bottom:10px}
  .p-meta .cat{font-weight:600;color:var(--petrol)}
  .p-meta svg{width:14px;height:14px;vertical-align:-2px}
  .p-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .p-reg{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
    background:var(--petrol-wash);border:1px solid var(--petrol-soft);color:var(--petrol-deep);
    border-radius:var(--r-sm);padding:8px 12px}
  .p-reg svg{width:16px;height:16px}
  .p-rate-link{text-decoration:none}
  /* Destaque on the profile itself (2026-10-02): the same edge and gold ring
     as the card in the list (app.css, .pro-card.is-featured), so the person
     who paid recognises the treatment on their own page. The ring sits
     outside the avatar's 4px white border, never on the picture. */
  .p-head .card.is-featured{border-color:transparent;box-shadow:var(--shadow-2);
    background:linear-gradient(var(--card),var(--card)) padding-box,var(--destaque-edge) border-box}
  .p-head .card.is-featured .av-xl{box-shadow:0 0 0 1.5px var(--gold),var(--shadow-1)}
  @media (max-width:640px){ .p-head .card{grid-template-columns:1fr}
    /* Same rule as above: the avatar only climbs when there is a cover for it
       to climb over. */
    .cover + .p-head .avatar{margin-top:-58px} }

  /* ---- layout ---- */
  .p-grid{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start;
    padding:26px 0 10px}
  @media (max-width:960px){ .p-grid{grid-template-columns:1fr} }
  .p-main>section{background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:24px;margin-bottom:18px}
  .p-main h2{font-size:19px;margin:0 0 14px;display:flex;align-items:center;gap:9px}
  .p-main h2 svg{width:18px;height:18px;color:var(--petrol)}

  /* services */
  .svc{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
    padding:13px 0;border-top:1px solid var(--line)}
  .svc:first-of-type{border-top:none;padding-top:0}
  .svc b{font-weight:600;font-size:15px}
  .svc small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
  .svc .price{font-weight:700;color:var(--petrol-deep);white-space:nowrap;font-size:15px}

  /* gallery */
  .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .gal .gal-item{display:block;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;
    aspect-ratio:4/3;background:var(--bg-2)}
  .gal img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease)}
  .gal .gal-item:hover img{transform:scale(1.05)}
  @media (max-width:640px){ .gal{grid-template-columns:repeat(2,1fr)} }
  /* The lightbox itself lives in lightbox.css, loaded only when there are photos. */

  /* reviews */
  .rv-sum{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
    padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .rv-avg{text-align:center}
  .rv-avg b{font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:44px;line-height:1;
    display:block;color:var(--ink)}
  .rv-avg small{color:var(--muted)}
  .rv-bars{display:grid;gap:5px}
  .rv-bar{display:grid;grid-template-columns:14px 1fr 26px;gap:10px;align-items:center;
    font-size:12.5px;color:var(--muted)}
  .rv-bar .track{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
  .rv-bar .fill{height:100%;background:var(--star);border-radius:99px}
  @media (max-width:560px){ .rv-sum{grid-template-columns:1fr;gap:14px} }

  /* The quick tags tally (2026-10-01): a full-width row under the bars. */
  .rv-tags{grid-column:1/-1}
  .rv-tags-h{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
  .rv-tags ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
  .rv-tags .chip{position:relative;cursor:default}
  .rv-tags .chip span[aria-hidden]{color:var(--faint)}
  .rv-tags .chip b{font-weight:700;color:var(--petrol)}

  /*
   * O convite para avaliar, no fim da lista de avaliações.
   *
   * Fica depois delas de propósito: quem leu até o fim é quem está pensando
   * em escrever uma. E não é um cartão amarelo - a regra da casa é que
   * amarelo é geometria, nunca superfície, e aqui nem geometria ele precisa
   * ser: o botão verde já carrega a ação.
   */
  .rv-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    margin-top:22px;padding:18px 20px;background:var(--petrol-wash);border-radius:var(--r-md)}
  .rv-cta b{display:block;font-weight:600}
  .rv-cta small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
  .rv-cta .btn{flex-shrink:0}
  @media (max-width:560px){ .rv-cta{flex-direction:column;align-items:stretch} .rv-cta .btn{text-align:center} }
  .review{padding:18px 0;border-top:1px solid var(--line)}
  .review:first-of-type{border-top:none}
  .rv-head{display:flex;align-items:center;gap:11px;margin-bottom:8px}
  .rv-head b{font-size:14.5px;display:block}
  .rv-head small{color:var(--faint);font-size:12.5px}
  .rv-head .stars{margin-left:auto}
  .review h3{font-size:15px;margin:0 0 4px}
  .review p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.65;max-width:70ch}
  .rv-reply{margin-top:12px;background:var(--petrol-wash);border-left:3px solid var(--petrol);
    border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 14px}
  .rv-reply b{font-size:13px;color:var(--petrol);display:block;margin-bottom:3px}
  .rv-reply p{font-size:13.5px;white-space:pre-line;overflow-wrap:anywhere}
  .rv-reply-at{font-weight:400;color:var(--faint);font-size:12px;margin-left:6px}
  .rv-cta{margin-top:16px;display:flex;justify-content:center}

  /* sidebar */
  /* z-index: sticky makes a stacking context, so without one the share panel
     inside (z-index 60) sat under the z-index:1 links of the "Outros" cards. */
  .p-side{position:sticky;top:82px;z-index:2;display:grid;gap:16px}
  @media (max-width:960px){ .p-side{position:static} }
  .contact-card{padding:20px;display:grid;gap:9px}
  .contact-card .hint{font-size:12.5px;color:var(--faint);text-align:center;margin-top:2px}
  .side-links{padding:14px 18px;display:grid}
  .side-links a,.side-links button,.side-links summary{display:flex;align-items:center;gap:10px;padding:11px 4px;
    font-size:14px;color:var(--muted);text-decoration:none;border:none;background:none;text-align:left}
  .side-links svg{width:16px;height:16px;flex:none}
  .side-links a:hover,.side-links button:hover,.side-links summary:hover{color:var(--ink)}
  .claim-card{padding:18px;background:var(--gold-soft);border-color:#EAD98F}
  .claim-card b{font-family:"Inter",system-ui,sans-serif;font-size:15px;display:block;margin-bottom:5px}
  .claim-card p{margin:0 0 12px;font-size:13.5px;color:#6b5a17}

  /* others */
  /* Top and bottom only: the shorthand was wiping .container's side gutter,
   * and the section sat flush against the phone's edge (owner, 2026-09-25). */
  .others{padding-top:10px;padding-bottom:30px}
  .others .grid{grid-template-columns:1fr 1fr}
  @media (max-width:820px){ .others .grid{grid-template-columns:1fr} }

  /* mobile fixed contact bar */
  .mob-bar{display:none}
  @media (max-width:960px){
    .mob-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:250;
      background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      box-shadow:0 -8px 30px rgba(18,81,59,.12)}
    .mob-bar .btn{flex:1}
    body{padding-bottom:76px}
  }

  /* Link to the combination page, in the profile header. Quiet: it is a way
     out of the page, not a call to action competing with the contact buttons. */
  .p-combo{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
    font-size:14px;font-weight:500;color:var(--petrol);text-decoration:none;
    border-bottom:1px solid transparent}
  .p-combo:hover{border-bottom-color:var(--petrol)}
  .p-combo svg{width:15px;height:15px}

  /* "Mostrar no mapa" (2026-10-02): the event map's box, mobile first. The
     height is declared so tiles fill in place instead of pushing the page;
     [hidden] wins over Leaflet's own display until perfil-mapa.js reveals it. */
  .p-map{height:180px;margin-top:12px;border:1px solid var(--line);
    border-radius:var(--r-md);overflow:hidden;background:var(--bg-2)}
  .p-map[hidden]{display:none}
  .p-map-credit{margin:6px 0 12px;font-size:12px;color:var(--muted)}
  .p-map-credit a{color:inherit}
  @media (min-width:561px){ .p-map{height:220px} }