/* Mobile fixes for the public site.
 *
 * Loaded AFTER the compiled bundle stylesheet. The bundle is build output with
 * no source, so corrections live here rather than being patched into it — that
 * keeps them readable and reversible.
 *
 * Breakpoints match the bundle's own: it uses (width<=820px) and (width<=560px).
 */

/* ---------------------------------------------------------------------------
 * 1. /browse-staff overflowed to ~2000px on a phone.
 *
 * The bundle collapses .browse-layout to a single `1fr` track at <=820px.
 * `1fr` means minmax(auto, 1fr), and that `auto` floor is the item's
 * MIN-CONTENT width. Inside sits the results rail, whose min-content is six
 * cards at 84vw each — so the track grew to fit them and dragged the whole
 * page sideways. minmax(0, 1fr) lets the track shrink; min-width:0 does the
 * same for the grid item itself.
 * ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  .browse-layout > * { min-width: 0; }
}

/* ---------------------------------------------------------------------------
 * 2. Search results should scroll DOWN, not sideways.
 *
 * At <=560px the bundle turns every .profile-grid into a horizontal snap rail.
 * That is a reasonable carousel for the featured strip on the homepage, but on
 * the browse page it hides most results behind a sideways swipe with no cue.
 * Scoped to .results so the homepage carousel keeps its rail.
 * ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .results .profile-grid,
  .results .profile-grid.two,
  .results .profile-grid.three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-right: 0;
    padding-right: 0;
  }
  .results .profile-card {
    min-width: 0;
    width: auto;
    scroll-snap-align: none;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Long unbroken strings (emails, long area names) must not push a card wide.
 * ------------------------------------------------------------------------- */
.profile-card, .profile-card * { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
 * "Browse by role" chips — the blog's label style, moved onto the homepage.
 * Sits where the trust strip used to be, directly under the hero.
 * ------------------------------------------------------------------------- */
.role-chips { padding: 30px 0 6px; }
.role-chips-title {
  font-size: 15px; letter-spacing: .09em; text-transform: uppercase;
  color: #0B5D4B; margin: 0 0 14px; font-weight: 800;
}
.role-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.role-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f4f7f6; border: 1px solid #e2e8e5; border-radius: 9px;
  padding: 10px 14px; min-height: 44px;
  color: #14201c; text-decoration: none; font-size: 14.5px; font-weight: 600;
  line-height: 1.2;
}
.role-chip:hover { background: #fff; border-color: #0B5D4B; color: #0B5D4B; }
.role-chip .icon { width: 15px; height: 15px; color: #0B5D4B; flex: 0 0 auto; }

@media (max-width: 560px) {
  .role-chips { padding: 22px 0 4px; }
  .role-chip { font-size: 14px; padding: 9px 12px; }
}