/* =====================================================================
   Company directory. Shared header/footer/pill/avatar/ad live in
   mesteel.css; the rules here are the directory's own, scoped under
   .grid where they refine a shared component rather than replace it.
   Values lifted verbatim from design/company_directory.html.
   ===================================================================== */

/* ---------- Hero ---------- */
/* `var(--hero-img, …)` with the built-in picture as the FALLBACK: the page
   sets the property only when Admin has been given one, so a stylesheet
   that is served to a page which does not set it looks exactly as it did.
   See Modules\Web\Services\HeroImages. */
.hero{position:relative;height:320px;
  background:var(--hero-img,url(../img/hero-warehouse.jpg)) var(--hero-pos,center 65%)/cover}
.hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 45%,rgba(255,255,255,.2) 100%)}
.hero>*{position:relative;z-index:var(--z-content)}
.hero .head{position:absolute;left:0;right:0;bottom:-34px}
.kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.hero h1{font-size:44px;line-height:1;letter-spacing:-.03em;margin:10px 0 20px}

/* ---------- Filter bar ---------- */
/* Search, Product, Country, Activity. The Membership dropdown was removed;
   the tier filter still works through the query string and its chip. */
.search{background:#fff;border-radius:18px;padding:8px;box-shadow:0 20px 60px rgba(15,31,74,.16),0 0 0 1px rgba(15,31,74,.06);display:grid;grid-template-columns:1.4fr 1.2fr 1fr 1fr auto;gap:6px}
.field{background:var(--bg);border-radius:12px;padding:12px 16px}
.field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.field input,.field select{width:100%;border:0;background:none;font:inherit;font-size:15px;font-weight:700;margin-top:3px;color:var(--ink);outline:0;padding:0;appearance:none}
.field select.any{color:var(--faint)}
/* Themed chevron: appearance:none above strips the native arrow, which
   otherwise leaves Country and Activity looking like text inputs. */
.field select{background:var(--chevron) no-repeat right center/16px;padding-right:24px;cursor:pointer}
.search .btn{border-radius:12px;padding:0 26px}

.bar{padding:64px 0 20px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--mute)}
.bar .l{display:flex;gap:8px;align-items:center}
.bar b{color:var(--ink)}
.chip{background:var(--blue-10);color:var(--blue);padding:6px 12px;border-radius:999px;font-weight:700;cursor:pointer;border:0;font-family:inherit;font-size:inherit}
.chip.add{background:none;border:1px dashed #C7D4F3;color:var(--mute)}
/* Products carried in from /who-buys or /who-sells. A different colour from
   the single-value filter chips because they behave differently: one of these
   removes a product from a set, and "Change selection" beside them goes back
   to the picker. */
.chip.prod{background:#EEF2F9;color:#334155}
.chip.prod:hover{background:#E2E8F2}
.chip.quiet{background:none;color:var(--faint);cursor:default;font-weight:600}
a.chip.add{text-decoration:none;display:inline-flex;align-items:center}
a.chip.add:hover{border-color:var(--blue);color:var(--blue)}
.bar .r{display:flex;gap:14px;align-items:center}
.bar .r select{border:0;background:none;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.bar .r select{background:var(--chevron) no-repeat right center/14px;padding-right:18px;appearance:none}
.views{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.views button{padding:6px 12px;cursor:pointer;border:0;background:none;font:inherit;color:var(--ink)}
.views button.on{background:var(--blue);color:#fff}
.views button:hover{transform:none}

/* ---------- Result grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:20px 0 24px}
.grid .card{border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.grid .card.brief{background:#F8FAFC}
.grid .card .go{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--blue);display:grid;place-items:center;font-size:22px;line-height:1;font-weight:700;padding-bottom:2px;box-shadow:0 2px 8px rgba(15,31,74,.08);flex:none}
.grid .card:hover .go{border-color:var(--blue);background:var(--blue);color:#fff}
/* Logo top-left and membership pill top-right: flex-start rather than the
   reference's centre alignment, so both sit on the card's top line
   regardless of how many lines the company name wraps to. */
.grid .card .top{display:flex;gap:12px;align-items:flex-start}
.grid .card .top .txt{min-width:0}
.grid .card .top b{display:block;font-size:17px;line-height:1.2}
.grid .card .top small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.grid .pill{font-size:10.5px;padding:4px 9px}

/* Country flag. 4x3 SVGs in public/img/flags, keyed by countries.iso2. */
.flag{width:18px;height:13px;border-radius:2px;object-fit:cover;vertical-align:-2px;
      margin-right:6px;box-shadow:0 0 0 1px rgba(15,31,74,.12)}
.grid .card.brief .avatar{background:var(--line);color:var(--mute)}

.prods{font-size:13px;line-height:1.6}
.prods .s{color:var(--sell);font-weight:800}
.prods .b{color:var(--buy);font-weight:800}
.badges{display:flex;gap:6px;font-size:11px;font-weight:700;flex-wrap:wrap}
.badges span{background:#F1F5F9;color:var(--mute);padding:3px 8px;border-radius:999px}
.badges .ok{background:var(--green-10);color:var(--green)}
.grid .card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding-top:12px;border-top:1px solid #F1F5F9}
.grid .card .foot .lock{color:var(--faint)}
.grid .card .foot .contact{color:var(--green);font-weight:600}

.upsell{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.upsell b{font-size:19px;line-height:1.25;letter-spacing:-.01em}
.upsell small{font-size:13px;color:#B8C4E6}
.upsell .btn{background:#fff;color:var(--blue);align-self:flex-start;margin-top:4px;font-size:13.5px}
.upsell .btn:hover{background:var(--blue-10);color:var(--blue)}

/* ---------- Empty state ---------- */
.no-results{grid-column:1/-1;background:#fff;border:1px dashed var(--line);border-radius:20px;padding:44px 24px;text-align:center;color:var(--mute)}
.no-results b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}

/* ---------- Pager ---------- */
.pager-meta{text-align:center;font-size:12.5px;color:var(--mute);padding:4px 0 12px}
.pager{display:flex;justify-content:center;gap:6px;padding:0 0 48px;font-size:13px;font-weight:600;flex-wrap:wrap}
.pager button{padding:8px 12px;border-radius:8px;border:1px solid var(--line);cursor:pointer;background:#fff;font:inherit;font-weight:600;color:var(--ink)}
.pager button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pager button.dots{border:0;cursor:default;background:none}
.pager button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- List view ---------- */
/* ── A ROW DOES NOT RISE ──
   The list view is the same card in a different layout, so it wears
   `.lift` like the grid — and a row that lifts reads as a row that
   has come loose from the ones above and below it. The movement is
   suppressed and the shadow and ground stay, which is what says the
   pointer is on it.

   Suppressing ONE declaration rather than writing a second hover:
   a rule of its own would have its own shadow, and this project has
   just finished removing four of those. */
.grid.list .lift:hover,.grid.list .lift:focus-within{
  transform:none;background:var(--bg)}

.grid.list{grid-template-columns:1fr;gap:10px}
.grid.list .card{flex-direction:row;align-items:center;gap:18px;padding:14px 18px;border-radius:16px}
.grid.list .card .top{flex:1.2;min-width:0}
.grid.list .card .top b{font-size:15.5px}
.grid.list .prods{flex:1.6;line-height:1.5}
.grid.list .prods br{display:none}
.grid.list .prods .b{margin-left:10px}
.grid.list .badges{flex:none}
.grid.list .card .foot{margin:0;padding:0;border:0;flex:none;gap:14px}
.grid.list .upsell{flex-direction:row;align-items:center;flex-wrap:wrap;padding:18px 22px}
.grid.list .upsell b{font-size:16px;flex:1}
.grid.list .upsell .btn{margin:0}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .hero{height:auto;padding-bottom:28px}
  /* The header is position:absolute over this hero, so the head has to
     clear it itself. 28px did not: at 360 the kick line ran under the
     logo. The nav row is ~76px. */
  /* --z-raised, NOT --z-content: this block holds the search combos, and a
   dropdown can only ever paint as high as the block it is in. At 1 it
   lost to the company cards' metal bar at 2 — the Country list opened
   underneath the gold stripe. */
.hero .head{position:relative;bottom:auto;z-index:var(--z-raised);padding-top:96px}
  .search{grid-template-columns:1fr 1fr}
  .search .btn{grid-column:1/-1;padding:14px;min-height:52px}
  .bar{padding-top:24px;flex-wrap:wrap;gap:12px}
  .grid{grid-template-columns:1fr 1fr}
  .chip,.views button{min-height:40px;display:inline-flex;align-items:center}
  .grid.list .card{flex-wrap:wrap;gap:12px}
  .grid.list .card .top{flex:1 1 100%}
  .grid.list .prods{flex:1 1 100%}
  .grid.list .prods br{display:block}
  .grid.list .prods .b{margin-left:0}
  .grid.list .card .foot{flex:1 1 100%;justify-content:space-between}
}
@media (max-width:639px){
  .hero h1{font-size:32px;margin:8px 0 16px}
  .hero:before{background:rgba(255,255,255,.94)}
  .search{grid-template-columns:1fr}
  .bar .l{flex-wrap:wrap}
  /* Show, Sort and the view toggle are 371px of controls in a 345px
     column once a scrollbar is out — measured, and the view toggle was
     off the right edge with the page scrolling sideways to reach it.
     They wrap now, and the Sort combo gives up the width it was asking
     for so the common case stays on one line. */
  .bar .r{width:100%;justify-content:space-between;flex-wrap:wrap;row-gap:10px;gap:10px}
  .bar .r .combo-bare{min-width:0}
  .bar .r .combo-bare .combo-row{max-width:118px}
  .bar .r .combo-bare .combo-row input{overflow:hidden;text-overflow:ellipsis}
  .views{flex:none;margin-left:auto}
  .grid{grid-template-columns:1fr}
  .grid .card{padding:18px;border-radius:18px}
  /* The reference wraps .top on mobile, which drops the pill onto its own
     line below the card. Kept on one line so the logo stays top-left and
     the pill top-right; .txt has min-width:0 and shrinks instead. */
  .grid .card .top{flex-wrap:nowrap}
  .grid .card .foot{flex-wrap:wrap;gap:10px}
  /* The reference leaves these at 36-40px, under the 44px minimum
     design/README.md sets for mobile. Raised for the controls that are
     the only way to page and to clear a filter. The card's own › stays
     as drawn — the whole card is the tap target. */
  .chip,.views button{min-height:44px}
  .pager button{min-height:44px;padding:8px 14px}
}

/* ---------- Filter comboboxes ----------
   Country and Activity in the search bar, and Show / Sort in the results
   bar, are mesteel.combo(); the panel itself lives in mesteel.css. */
.field .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* .field is padded 16px, not the register wizard's 18px. */
.field.combo{--chev-inset:16px}
.field .combo-row{margin-top:3px}
.field .combo-row input{margin-top:0}
.field.combo.is-open{box-shadow:0 0 0 2px var(--blue),0 0 0 5px rgba(31,63,143,.12)}
.bar .r .combo-bare{font-size:13.5px;color:var(--mute)}

/* ---------- The product selection carried in from the picker ----------
   A COLLAPSIBLE panel, not a row of chips. A selection is routinely 75 or 118
   products; as chips that was a horizontal strip wider than the viewport on
   every screen size, and sideways page scroll is the one thing it must never
   cause. Everything here is width-bounded by `min-width:0` on the flex child
   and `flex-wrap` on the chip rows — never a fixed column count. */
/* 58px, not 26: .hero .head is absolutely positioned at bottom:-34px, so
   the search form overhangs the hero and this is the first thing under it.
   .bar carries 64px for the same reason, and gives most of it back when
   the panel is there to clear it instead. */
.sel-panel{margin-top:58px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.sel-panel[data-open="true"]{border-color:#C7D4F3}

.sp-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  font-size:13.5px;color:var(--mute)}
.sp-line b{min-width:0;color:var(--ink);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ic{flex:none;color:var(--blue);font-size:13px;line-height:1}
/* Pushes the three controls to the right on a wide row and collapses to
   nothing once the row wraps, so they sit under the label rather than
   stretching it. */
.sp-gap{flex:1 1 0;min-width:0}

.sp-b{font-size:12.5px;padding:7px 13px;min-height:36px;white-space:nowrap}
a.sp-b{text-decoration:none}
.sp-clr{color:var(--red)}
.sp-clr:hover{background:#FEF2F2;color:var(--red)}

.sp-body{padding:2px 16px 14px;border-top:1px solid var(--line)}
.sp-grp{padding:10px 0 2px}
/* The category heading is also the disambiguator: 46 of the 148 product names
   repeat across categories, and grouping is a cheaper way to say which than
   repeating the category inside every chip. */
.sp-grp h3{margin:0 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute)}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
/* One line, ellipsis, full name in the title — never the squashed multi-line
   circle a long name made of a round chip. */
.sp-chips .chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-size:12.5px;min-height:0;padding:5px 11px}
.sp-chips .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:26ch}
.sp-chips .chip i{font-style:normal;font-weight:800;opacity:.65;flex:none}
.sp-body .fine{margin:12px 0 0;font-size:12.5px;color:var(--faint)}

/* ---------- The Product field, with a selection in force ----------
   A link carrying the summary label, not a text box: "Carbon Steel" stands for
   75 ticks and nothing typed could express that. */
.prod-f .prod-pick{display:flex;align-items:center;gap:8px;margin-top:3px;
  font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;min-width:0}
.prod-f .prod-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-f .prod-pick i{font-style:normal;color:var(--blue);flex:none}
.prod-f .prod-pick:hover{color:var(--blue)}
.prod-f .prod-pick:focus-visible{outline:none;text-decoration:underline;color:var(--blue)}

.prod-f .prod-row{display:flex;align-items:baseline;gap:8px;min-width:0}
.prod-f .prod-row input{min-width:0}
.prod-f .prod-browse{flex:none;font-size:11.5px;font-weight:700;color:var(--blue);
  text-decoration:none;white-space:nowrap}
.prod-f .prod-browse:hover{text-decoration:underline}

@media (max-width:640px){
  /* 360px is the floor the brief names. The chip cap has to come down with the
     column or a 26ch name is wider than the card it sits in. */
  .sp-chips .chip span{max-width:17ch}
  .sp-line{gap:8px}
  .sp-line b{flex:1 1 100%}
  .sp-gap{display:none}
  .sp-b{flex:1 1 auto;min-height:40px}
}

/* The panel has already cleared the overhanging form; 64px more would leave
   a gap the width of a card between the two. */
.wrap:has(.sel-panel) + .wrap .bar{padding-top:22px}

/* The selection panel wears the side's colour: `data-kind` on .sel-panel sets
   --accent from the site-wide rule, so these read it rather than naming green
   or orange. The chips were .chip.prod, a neutral grey that said nothing about
   which side of the trade was being filtered on. */
.sp-ic{color:var(--accent)}
.sel-panel[data-open="true"]{border-color:var(--accent)}
.sp-chips .chip.prod{background:var(--accent-10);color:var(--accent-ink)}
.sp-chips .chip.prod:hover{filter:brightness(.96)}