/*
 * The professions index.
 *
 * Loaded only on /profissoes/, in the pattern the other page sheets follow.
 * Reuses card, kicker, h-sec, btn and empty from the design system; what is
 * here is the two-column list of professions and the quieter treatment for the
 * ones nobody has joined yet.
 *
 * The visual job of the page: forty-six names scanned in a few seconds, with
 * the ones that have people in them clearly ahead of the ones that do not,
 * without the empty ones looking like an error.
 */

.pf-page{padding:30px 0 48px}

.pf-family{margin-bottom:34px}
.pf-family:last-of-type{margin-bottom:0}
/* The heading and its count are siblings, not nested: the count inside the h2
   made the section announce itself as "Beleza 4 profissionais". */
.pf-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pf-family .h-sec{margin:0}

/* .vh moved to app.css: the combination links under the search results use it
   too, and this sheet does not load there, so the hidden word was about to be
   drawn on screen inside a badge. */

/* How many people are in this family, beside its name. Never printed when it
   is zero: "0 profissionais" reads as a fault rather than as a gap. */
.pf-count{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:500;
  color:var(--muted);letter-spacing:.01em}

.pf-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px}
@media (max-width:900px){ .pf-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pf-list{grid-template-columns:1fr} }

.pf-list li{margin:0}

/* A profession somebody is in: a real target, full width of its cell. */
.pf-list a,
.pf-list .pf-empty>span{
  display:flex;align-items:center;gap:10px;
  /* 12px, not 10: at 10 the row measured 40.9px against the 44px the design
     system calls the minimum comfortable tap target. */
  padding:12px;border-radius:var(--radius-btn);
  font-size:14.5px;line-height:1.35}
.pf-list a{color:var(--ink);text-decoration:none;
  transition:background .16s var(--ease)}
.pf-list a:hover{background:var(--petrol-soft)}
/* No focus override here: app.css already draws a 3px coral ring at offset 2,
   and this local rule was a weaker one that nearly touched the text on a 40px
   row. The design system wins. */
.pf-list svg{width:17px;height:17px;flex:none;color:var(--petrol)}
.pf-list a>span{flex:1 1 auto;min-width:0}

/* The count, at the end of the row, so the eye can run down the column. */
.pf-list a>b{
  flex:none;font-size:12.5px;font-weight:600;
  color:var(--petrol);background:var(--petrol-soft);
  padding:2px 9px;border-radius:999px}

/*
 * A profession with nobody in it yet.
 *
 * Deliberately not a link - see the note at the top of page-profissoes.php.
 * Muted rather than hidden, and the icon goes grey too: at a glance the row
 * reads as "we cover this, not yet", which is the truth, instead of reading as
 * something that failed to load.
 */
.pf-empty>span{color:var(--faint);cursor:default}
.pf-empty svg{color:var(--line-2)}
.pf-empty em{flex:none;font-style:normal;font-size:12px;color:var(--faint)}

/* The invitation at the foot, for somebody who scrolled the whole list and did
   not find their own trade with anybody in it. */
.pf-invite{
  margin-top:34px;padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pf-invite b{display:block;font-family:"Inter",system-ui,sans-serif;font-size:16px;margin-bottom:4px}
.pf-invite p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);max-width:56ch}
@media (max-width:640px){
  .pf-invite{flex-direction:column;align-items:stretch}
  .pf-invite .btn{width:100%;justify-content:center}
}