/* =====================================================================
   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 ---------- */
.hero{position:relative;height:320px;background:url(../img/hero-warehouse.jpg) 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:1}
.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)}
.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(--green);font-weight:800}
.prods .b{color:var(--blue);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 ---------- */
.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}
  .hero .head{position:relative;bottom:auto;z-index:1;padding-top:28px}
  .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}
  .bar .r{width:100%;justify-content:space-between}
  .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)}