/* Browse Professionals. Loaded only by templates/professionals/list.html.
   Depends on the tokens in jobertrust.css and reuses .pro-stars from it. */

/* ==========================================================================
   FILTER BAR
   Desktop: search row + one filter row, all inline.
   Mobile: search + two primary filters + a disclosure holding the rest.
   Every field stays in the DOM at all widths, so nothing is dropped on submit.
   ========================================================================== */

.bw-filters {
  padding: var(--jt-md);
  margin-bottom: var(--jt-lg);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow-sm);
}
@media (min-width: 768px) {
  .bw-filters { padding: var(--jt-lg); }
}

.bw-search {
  display: flex;
  gap: var(--jt-sm);
  margin-bottom: 12px;
  min-width: 0;
}
/* The icon must be positioned against the INPUT, not the whole row. It used to
   be absolute inside .bw-search, so `left: 12px` measured from the row's edge
   and only lined up while the input happened to start there. Wrapping the
   input gives the icon a containing block that is exactly the field. */
.bw-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.bw-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--jt-outline);
  pointer-events: none;
}
/* Two class selectors (0-2-0) on purpose. @tailwindcss/forms sets
   [type='text'] { padding-left: 0.75rem } at 0-1-0, and the Play CDN injects
   its stylesheet at runtime -- so at equal specificity the winner depends on
   injection order, which is not something to rely on. 0-2-0 wins either way,
   and is why the icon kept landing on top of the placeholder. */
.bw-search-field .bw-search-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding-block: 0;
  padding-left: 44px;
  padding-right: var(--jt-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  outline: none;
  transition: border-color var(--jt-transition), box-shadow var(--jt-transition);
}
.bw-search-field .bw-search-input::placeholder { color: var(--jt-outline); }
.bw-search-field .bw-search-input:focus {
  border-color: var(--jt-secondary);
  box-shadow: var(--jt-focus-ring);
}
.bw-search-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: var(--jt-md);
}
@media (min-width: 480px) { .bw-search-btn { padding-inline: var(--jt-lg); } }
@media (min-width: 768px) { .bw-search-btn { padding-inline: var(--jt-2xl); } }

.bw-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jt-sm);
  align-items: center;
  min-width: 0;
}
.bw-filter-row > .bw-select { flex: 1 1 140px; min-width: 0; }

.bw-filters .bw-select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 40px;
  padding: 0 34px 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2345464d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition: border-color var(--jt-transition), box-shadow var(--jt-transition);
}
.bw-select:hover { border-color: var(--jt-outline); }
.bw-select:focus {
  outline: none;
  border-color: var(--jt-secondary);
  box-shadow: var(--jt-focus-ring);
}

/* --- Secondary filters -------------------------------------------------
   A checkbox, not <details>. A closed <details> hides its own children as an
   intrinsic behaviour of the element, and `display: contents` cannot override
   that -- which is why the desktop filter row silently lost four controls.
   With a checkbox, visibility is plain CSS this file controls at every
   breakpoint. The input carries no `name`, so it is never submitted. */

.bw-more-check { position: absolute; opacity: 0; pointer-events: none; }

.bw-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 42px;
  padding-inline: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--jt-transition), background-color var(--jt-transition), color var(--jt-transition);
}
.bw-more-toggle:hover { border-color: var(--jt-outline); background-color: var(--jt-surface-container-low); }
.bw-more-toggle .material-symbols-outlined { font-size: 18px; }
.bw-more-check:focus-visible + .bw-more-toggle { outline: 2px solid var(--jt-secondary); outline-offset: 2px; }
.bw-more-check:checked + .bw-more-toggle {
  color: var(--jt-on-secondary-container);
  background-color: var(--jt-success-soft);
  border-color: var(--jt-success-line);
}

/* Hidden until toggled. flex-basis 100% puts it on its own row, so the grid
   has full width to wrap into and can never widen the filter row. */
.bw-more-panel {
  display: none;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--jt-sm);
  margin-top: var(--jt-xs);
}
.bw-more-check:checked ~ .bw-more-panel { display: grid; }
.bw-more-panel .bw-select { width: 100%; min-width: 0; }

/* From 1024px every filter sits inline and the toggle disappears. Safe now:
   nothing is hidden by an element's own semantics, only by rules above. */
@media (min-width: 1024px) {
  .bw-more-toggle,
  .bw-more-check { display: none; }
  .bw-more-panel { display: contents; }
  .bw-filter-row > .bw-select,
  .bw-more-panel > .bw-select { flex: 1 1 0; min-width: 118px; width: auto; }
}

/* --- Results bar -------------------------------------------------------- */

.bw-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-sm);
  margin-top: var(--jt-md);
  padding-top: var(--jt-md);
  border-top: 1px solid var(--jt-outline-variant);
}
.bw-count { margin: 0; font-size: 14px; color: var(--jt-on-surface-variant); }
.bw-count strong { color: var(--jt-on-surface); font-weight: 600; }

.bw-sort { display: flex; align-items: center; gap: 6px; }
.bw-sort-label { font-size: 14px; color: var(--jt-on-surface-variant); }
.bw-sort-select {
  height: 34px;
  padding: 0 28px 0 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--jt-on-surface);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23151c27' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 16px 16px;
}
.bw-sort-select:focus { outline: 2px solid var(--jt-secondary); outline-offset: 2px; border-radius: var(--jt-radius-sm); }

/* ==========================================================================
   CARD
   Mobile: stacked, with the trust block as a tinted footer strip.
   Desktop (>=768px): identity left, reputation right, divided by a rule.
   ========================================================================== */

.bw-list { display: flex; flex-direction: column; gap: var(--jt-md); }

.bw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--jt-transition), border-color var(--jt-transition);
}
.bw-card:hover { border-color: var(--jt-primary-fixed-dim); box-shadow: var(--jt-shadow); }
.bw-card:focus-within {
  outline: 2px solid var(--jt-secondary);
  outline-offset: 2px;
  border-color: var(--jt-secondary);
}
@media (min-width: 768px) {
  .bw-card { flex-direction: row; align-items: stretch; }
}

.bw-main { flex: 1 1 auto; min-width: 0; padding: var(--jt-md); }
@media (min-width: 768px) { .bw-main { padding: var(--jt-lg); } }

.bw-identity { display: flex; gap: 12px; min-width: 0; }

.bw-avatar {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--jt-radius-full);
}
@media (min-width: 768px) { .bw-avatar { width: 60px; height: 60px; } }
.bw-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
}
@media (min-width: 768px) { .bw-avatar-initial { font-size: 24px; } }

.bw-identity-body { flex: 1 1 auto; min-width: 0; }

/* Name and rating share a row on desktop; rating drops below on mobile. */
.bw-headline { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 768px) {
  .bw-headline {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--jt-md);
  }
}

.bw-name {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--jt-on-surface);
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .bw-name { font-size: 18px; } }

.bw-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.bw-rating-value { font-size: 14px; font-weight: 600; color: var(--jt-on-surface); font-variant-numeric: tabular-nums; }
.bw-rating-count { font-size: 13px; color: var(--jt-outline); }
.bw-rating-none  { font-size: 13px; color: var(--jt-outline); }
.bw-rating .pro-stars .material-symbols-outlined { font-size: 15px; }

.bw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  min-width: 0;
}
.bw-profession {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jt-on-secondary-container);
  background-color: var(--jt-success-soft);
  border-radius: var(--jt-radius-full);
}
.bw-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  color: var(--jt-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bw-loc .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; }

.bw-verify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--jt-radius);
  white-space: nowrap;
}
.bw-verify .material-symbols-outlined { font-size: 15px; }
.bw-verify-l1   { color: #1e40af;                          background-color: var(--jt-info-soft);    border-color: var(--jt-info-line); }
.bw-verify-l2   { color: #92400e;                          background-color: var(--jt-warning-soft); border-color: var(--jt-warning-line); }
.bw-verify-l3   { color: var(--jt-on-secondary-container);  background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }
.bw-verify-none { color: var(--jt-on-surface-variant);      background-color: var(--jt-surface-container-low); border-color: var(--jt-outline-variant); }

/* --- Specializations ---------------------------------------------------- */

.bw-specs { margin-top: var(--jt-md); }
.bw-specs-head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jt-on-surface-variant);
}
.bw-specs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-spec {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--jt-on-secondary-container);
  background-color: var(--jt-success-soft);
  border: 1px solid var(--jt-success-line);
  border-radius: var(--jt-radius-full);
}
.bw-spec-more {
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container-low);
  border-color: var(--jt-outline-variant);
}

/* --- Reputation column -------------------------------------------------- */

.bw-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-md);
  padding: 12px var(--jt-md);
  background-color: var(--jt-surface-container-low);
  border-top: 1px solid var(--jt-outline-variant);
}
@media (min-width: 768px) {
  .bw-trust {
    flex: 0 0 232px;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: var(--jt-lg);
    background-color: transparent;
    border-top: 0;
    border-left: 1px solid var(--jt-outline-variant);
  }
}

.bw-trust-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (min-width: 768px) { .bw-trust-top { display: block; } }

.bw-trust-label {
  display: none;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--jt-on-surface-variant);
}
.bw-trust-label .material-symbols-outlined { font-size: 16px; color: var(--jt-secondary); }
@media (min-width: 768px) { .bw-trust-label { display: flex; } }

.bw-trust-value {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: var(--jt-secondary);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .bw-trust-value { font-size: 36px; } }

/* Mobile: a compact TRUST chip, per the mobile screen. */
.bw-trust-top::before {
  content: "TRUST";
  order: -1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jt-secondary);
  align-self: center;
}
@media (min-width: 768px) { .bw-trust-top::before { content: none; } }

.bw-checked {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  color: var(--jt-on-surface-variant);
}
.bw-checked .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; }
.bw-checked-yes { color: var(--jt-on-secondary-container); font-weight: 600; }
@media (min-width: 768px) { .bw-checked { margin-top: var(--jt-md); font-size: 13px; } }

/* Stretched link: whole card clickable, one tab stop, valid HTML. */
.bw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-full);
  text-decoration: none;
  transition: background-color var(--jt-transition), color var(--jt-transition), border-color var(--jt-transition);
}
.bw-cta span:first-child { display: none; }
.bw-cta::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 768px) {
  .bw-cta {
    width: 100%;
    height: auto;
    justify-content: space-between;
    gap: var(--jt-sm);
    margin-top: var(--jt-md);
    padding: 10px var(--jt-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--jt-on-surface);
    border-radius: var(--jt-radius);
  }
  .bw-cta span:first-child { display: inline; }
}
.bw-card:hover .bw-cta,
.bw-cta:hover {
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-color: var(--jt-primary);
}
.bw-cta:active { transform: translateY(1px); }
.bw-cta:focus-visible {
  outline: none;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-color: var(--jt-primary);
}

/* ==========================================================================
   PAGINATION + EMPTY STATE
   ========================================================================== */

.bw-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--jt-2xl);
}
.bw-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  text-decoration: none;
  transition: background-color var(--jt-transition), border-color var(--jt-transition), color var(--jt-transition);
}
.bw-page:hover { background-color: var(--jt-surface-container); border-color: var(--jt-outline); }
.bw-page .material-symbols-outlined { font-size: 18px; }
.bw-page-on {
  color: var(--jt-on-secondary);
  background-color: var(--jt-secondary);
  border-color: var(--jt-secondary);
}
.bw-page-off { opacity: 0.4; cursor: not-allowed; }

.bw-empty {
  padding-block: var(--jt-3xl);
  text-align: center;
  color: var(--jt-on-surface-variant);
}
.bw-empty-title { margin: var(--jt-md) 0 6px; font-size: 20px; font-weight: 700; color: var(--jt-on-surface); }
.bw-empty-text { margin: 0 0 var(--jt-lg); font-size: 14px; }


/* ==========================================================================
   OVERFLOW GUARDS
   Every nested flex/grid track that can hold long text needs min-width:0,
   otherwise its automatic minimum size is its content and it refuses to
   shrink. These are the tracks that can receive long names, locations and
   specialization labels.
   ========================================================================== */

.bw-card,
.bw-main,
.bw-identity,
.bw-identity-body,
.bw-headline,
.bw-meta,
.bw-specs,
.bw-specs-list,
.bw-trust,
.bw-trust-top,
.bw-results-bar { min-width: 0; }

.bw-spec,
.bw-profession { max-width: 100%; overflow-wrap: anywhere; }

.bw-name { min-width: 0; }

/* The rating block must never be the thing that widens a card. */
.bw-rating { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Pagination wraps rather than scrolling when there are many pages. */
.bw-pagination { max-width: 100%; }


/* ==========================================================================
   MOBILE CARD POLISH
   ========================================================================== */

@media (max-width: 767px) {
  .bw-main { padding: 14px; }
  .bw-identity { gap: 10px; }
  .bw-headline { gap: 2px; }
  .bw-rating { justify-content: flex-start; }
  .bw-meta { margin-top: 5px; row-gap: 4px; }
  .bw-verify { margin-top: 7px; }
  .bw-specs { margin-top: 12px; }

  .bw-trust { padding: 10px 14px; }
  .bw-trust-top { gap: 0; align-items: stretch; }

  .bw-trust-top::before {
    display: flex;
    align-items: center;
    padding: 4px 7px;
    background-color: var(--jt-surface-container-lowest);
    border: 1px solid var(--jt-outline-variant);
    border-right: 0;
    border-radius: var(--jt-radius-sm) 0 0 var(--jt-radius-sm);
  }
  .bw-trust-value {
    display: flex;
    align-items: center;
    padding: 4px 9px;
    font-size: 19px;
    background-color: var(--jt-surface-container-lowest);
    border: 1px solid var(--jt-outline-variant);
    border-left: 0;
    border-radius: 0 var(--jt-radius-sm) var(--jt-radius-sm) 0;
  }
  .bw-checked { margin-left: 10px; font-size: 11.5px; }
}

@media (min-width: 768px) {
  .bw-trust { justify-content: center; gap: var(--jt-md); }
}


/* ==========================================================================
   MOBILE CARD ALIGNMENT

   On mobile the category, location and verification badge must sit on the
   card's left edge, level with the avatar -- not indented under the name.

   .bw-identity becomes a 2-column grid and .bw-identity-body is set to
   display:contents, so its children become grid items directly. The headline
   stays in column 2 beside the avatar; meta and verification span both
   columns on their own rows. No negative margins, no transforms, and the
   markup is unchanged.
   ========================================================================== */

@media (max-width: 767px) {
  .bw-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
  }

  .bw-avatar { grid-column: 1; grid-row: 1; }

  .bw-identity-body { display: contents; }

  .bw-headline { grid-column: 2; grid-row: 1; min-width: 0; }

  .bw-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 10px;
  }

  .bw-verify {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 8px;
  }
}