/*
 * 08-directory.css — Pro Directory card system (Ocean Editorial)
 *
 * Replaces the legacy inline <style> that MCR_Pro_Directory::enqueue_assets() used to print
 * into wp_head — the "two palettes on one page" source (old Houzez navy button / gold hover /
 * gray borders + fills). Every value now references the locked
 * Ocean tokens defined in mu-plugins/mcr/design-system.php, so the search bar, listing cards,
 * summary, empty state, and pagination match the MCR-picks rail (Fraunces name, JetBrains-Mono
 * meta, teal label). Enqueued ONLY on directory pages (gated in enqueue_assets()) — no
 * site-wide bloat, but cached in one place instead of re-parsed inline every request.
 *
 * Dead legacy blocks intentionally NOT ported (0 emitted in PHP): .mcr-pro-grid,
 * .mcr-pro-card/.thumb/.body/.name/.count, .mcr-pro-page-header — the category grid is now the
 * inline Ocean .mcr-v2-cat cards in render_hub_sections().
 */

/* ── Listing (results / archive) cards — match the MCR-picks card ─────────── */
.mcr-pro-listing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px; margin:24px 0; }
.mcr-pro-listing-card {
  background:#fffefb;
  border:1px solid var(--mcr-border,#e7e2d8);
  border-radius:15px;
  padding:18px 18px 16px;
  color:var(--mcr-text,#13243b);
}
.mcr-pro-listing-card .lname {
  font-family:var(--mcr-font-display,'Fraunces',serif);
  font-weight:600; font-size:18px; line-height:1.2; letter-spacing:-.01em;
  margin:0 0 8px;
  overflow:hidden; text-overflow:ellipsis;
}
.mcr-pro-listing-card .lname a { color:inherit; }
.mcr-pro-listing-card .lmeta { color:var(--mcr-text-mute,#5f6b7a); font-size:13.5px; line-height:1.65; }
.mcr-pro-listing-card .lmeta .mcr-flabel {
  color:var(--mcr-text,#13243b); font-weight:700; font-size:inherit;
  background:none; padding:0; text-transform:none; display:inline; line-height:inherit;
}
.mcr-pro-listing-card .lmeta a { color:var(--mcr-teal,#0a7286); text-decoration:none; }
.mcr-pro-listing-card .lmeta a:hover { color:var(--mcr-teal-deep,#0a6f82); text-decoration:underline; }
.mcr-pro-listing-card .verified {
  display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  background:#e3f5ea; color:#157a47;
  font-family:var(--mcr-font-mono,'JetBrains Mono',monospace);
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:999px;
}

/* ── Search + filter bar — card-toned, teal primary (was legacy navy) ─────── */
.mcr-pro-search {
  margin:22px 0 26px; padding:16px;
  background:var(--mcr-bg-tint,#fbf8f3); border:1px solid var(--mcr-border,#e7e2d8);
  border-radius:14px;
}
.mcr-pro-search__row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mcr-pro-search__row--main { margin-bottom:12px; }
.mcr-pro-search__row--filters { font-size:14px; }
.mcr-pro-search__q {
  flex:1 1 360px; min-width:240px; height:46px; padding:0 14px; font-size:15px;
  font-family:var(--mcr-font-body,'Plus Jakarta Sans',sans-serif);
  border:1px solid var(--mcr-border,#e7e2d8); border-radius:11px; background:#fff;
  color:var(--mcr-text,#13243b);
}
.mcr-pro-search__q:focus { outline:2px solid var(--mcr-teal,#0a7286); outline-offset:1px; border-color:var(--mcr-teal,#0a7286); }
.mcr-pro-search__submit {
  height:46px; padding:0 24px; font-size:14px; font-weight:700;
  font-family:var(--mcr-font-body,'Plus Jakarta Sans',sans-serif);
  background:var(--mcr-teal,#0a7286); color:#fff; border:none; border-radius:11px; cursor:pointer;
  transition:background .18s ease;
}
.mcr-pro-search__submit:hover { background:var(--mcr-teal-deep,#0a6f82); }
.mcr-pro-search__field { display:flex; flex-direction:column; gap:4px; }
.mcr-pro-search__field > span { font-size:12px; color:var(--mcr-text-mute,#5f6b7a); font-weight:600; }
.mcr-pro-search__field select {
  height:38px; padding:0 10px; border:1px solid var(--mcr-border,#e7e2d8); border-radius:9px;
  background:#fff; font-size:14px; min-width:160px; color:var(--mcr-text,#13243b);
  font-family:var(--mcr-font-body,'Plus Jakarta Sans',sans-serif);
}
.mcr-pro-search__check { display:flex; align-items:center; gap:6px; color:var(--mcr-text,#13243b); padding-top:18px; font-size:14px; }
.mcr-pro-search__check input { accent-color:var(--mcr-teal,#0a7286); }
.mcr-pro-search__clear { margin-left:auto; padding-top:18px; color:var(--mcr-text-mute,#5f6b7a); font-size:13px; text-decoration:underline; }
.mcr-pro-search__clear:hover { color:var(--mcr-teal,#0a7286); }

/* ── Result summary + empty state ─────────────────────────────────────────── */
.mcr-pro-search-summary { color:var(--mcr-text-mute,#5f6b7a); margin:8px 0 14px; font-size:14px; }
.mcr-pro-search-empty {
  padding:40px 24px; background:#fffefb; border:1px dashed var(--mcr-border,#e7e2d8);
  border-radius:14px; text-align:center; color:var(--mcr-text-mute,#5f6b7a);
}
.mcr-pro-search-empty a { color:var(--mcr-teal,#0a7286); }

/* ── Pagination (was legacy navy current / gray borders) ──────────────────── */
.mcr-pro-pagination { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:26px 0; }
.mcr-pro-pagination a, .mcr-pro-pagination .current, .mcr-pro-pagination .dots {
  min-width:42px; text-align:center; padding:9px 14px; border:1px solid var(--mcr-border,#e7e2d8);
  border-radius:10px; color:var(--mcr-text,#13243b); text-decoration:none; background:#fff;
  font-size:14px; font-family:var(--mcr-font-mono,'JetBrains Mono',monospace);
}
.mcr-pro-pagination .current { background:var(--mcr-teal,#0a7286); color:#fff; border-color:var(--mcr-teal,#0a7286); }
.mcr-pro-pagination a:hover { background:var(--mcr-bg-tint,#fbf8f3); border-color:var(--mcr-teal,#0a7286); }
.mcr-pro-pagination .dots { border-color:transparent; background:transparent; color:var(--mcr-text-mute,#5f6b7a); }

/* ── Category grid cards (hub "Browse by category") — v4 mock parity ───────── */
.mcr-v2-cat{display:flex;align-items:center;gap:13px;padding:13px;background:#fffefb;border:1px solid var(--mcr-border,#e7e2d8);border-radius:14px;text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.mcr-v2-cat:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(19,36,59,.1);border-color:var(--mcr-teal,#0a7286)}
.mcr-v2-cat__tile{flex:0 0 auto;width:48px;height:48px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mcr-font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:15px;color:#fff;letter-spacing:.01em}
.mcr-v2-cat__tile--img{background-color:var(--mcr-bg-tint,#fbf8f3);background-size:cover;background-position:center;background-repeat:no-repeat}
.mcr-v2-cat__name{display:block;font-family:var(--mcr-font-body,'Plus Jakarta Sans',sans-serif);font-weight:700;font-size:14px;line-height:1.2;color:var(--mcr-text,#13243b)}
.mcr-v2-cat__meta{display:block;font-size:12px;color:var(--mcr-teal,#0a7286);margin-top:4px;font-weight:600;font-family:var(--mcr-font-mono,'JetBrains Mono',monospace)}
@media (prefers-reduced-motion:reduce){.mcr-v2-cat{transition:none}.mcr-v2-cat:hover{transform:none}}

/* ── Hero 2-column: content left, deal-team aside right (fills the wide hero) ──── */
.mcr-hero-flex{display:flex;gap:clamp(22px,4vw,48px);align-items:stretch}
.mcr-hero-main{flex:1 1 auto;min-width:0;max-width:760px}
.mcr-hero-aside{flex:0 0 320px;align-self:center}
@media (max-width:960px){ .mcr-hero-flex{flex-direction:column} .mcr-hero-main{max-width:none} .mcr-hero-aside{flex:1 1 auto;align-self:stretch;max-width:520px} }
/* On phones the stacked aside makes the hero too tall — hide it (deal-team stays in the header
   Team button). Keep it on tablet/desktop where it fills otherwise-wasted width. */
@media (max-width:640px){ .mcr-hero-aside{display:none} }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .mcr-pro-search__row--main, .mcr-pro-search__row--filters { flex-direction:column; align-items:stretch; }
  .mcr-pro-search__submit, .mcr-pro-search__q { width:100%; }
  .mcr-pro-search__field, .mcr-pro-search__field select { width:100%; }
  .mcr-pro-search__check, .mcr-pro-search__clear { padding-top:4px; margin-left:0; }
}