/* Integration Card — ports prototype card look (integration-directory/prototype/src/head.html).
   Uses Automatic.css variables where they exist, prototype values as fallbacks. */

.bd-card{
  display:flex;flex-direction:column;gap:9px;padding:18px;
  border:1px solid var(--neutral-light, #E2E4E1);
  border-radius:var(--radius-m, 11px);
  background:var(--white, #fff);
  box-shadow:0 1px 2px rgba(34,64,53,.06);
  text-decoration:none;color:inherit;transition:.16s;
}
.bd-card:hover{
  box-shadow:0 8px 24px rgba(34,64,53,.10),0 2px 6px rgba(34,64,53,.06);
  transform:translateY(-2px);
  /* beat ACSS body a:where(...):hover orange underline (automatic-bricks.css) */
  text-decoration:none;color:inherit;
}
.bd-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.bd-card__ico{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:#fff;font-weight:600;font-size:15px;flex:0 0 auto;overflow:hidden;
}
.bd-card__ico img{width:100%;height:100%;object-fit:contain}
.bd-card__tag{
  font-size:10.5px;font-weight:500;letter-spacing:.03em;padding:3px 7px;border-radius:4px;
  background:var(--neutral-ultra-light, #EDEFEC);color:var(--neutral-dark, #5C6B62);white-space:nowrap;
}
.bd-card__name{font-size:15px;line-height:1.3;margin:0;font-weight:600}
.bd-card__vend{font-size:11px;color:var(--neutral-dark, #5C6B62);display:block;margin-bottom:1px}
.bd-card__cat{font-size:13px;color:var(--neutral-dark, #5C6B62);margin:0;line-height:1.45}
.bd-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.bd-card__tc{font-size:12.5px;font-weight:500;color:var(--base-dark, #2B3B32);font-variant-numeric:tabular-nums}
.bd-card__caps{display:flex;gap:3px}
.bd-cap{font-size:9.5px;font-weight:600;width:17px;height:17px;border-radius:3px;display:grid;place-items:center}
.bd-cap--r{background:#E9ECE9;color:#4E5D55}
.bd-cap--c{background:#DFF3E8;color:#1F5B41}
.bd-cap--u{background:#E6ECFA;color:#3E5C9A}
.bd-cap--d{background:#F7E4DE;color:#9A3A21}
.bd-card__host{font-size:11.5px;font-weight:500;padding:2px 7px;border-radius:4px;white-space:nowrap}
.bd-card__host--barndoor{background:#DFF3E8;color:#1F5B41}
.bd-card__host--official{background:var(--neutral-ultra-light, #EDEFEC);color:var(--neutral-dark, #5C6B62)}

/* ---- /integrations/ archive layout (template built programmatically) ---- */
.bd-archive-layout{display:flex;flex-direction:row;width:100%;gap:28px;align-items:flex-start}
.bd-archive-side{flex:0 0 240px;display:flex;flex-direction:column;gap:10px;position:sticky;top:90px}
.bd-archive-main{flex:1;min-width:0;width:100%}
.bd-archive-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bd-archive-count{font-size:13px;color:var(--neutral-dark, #5C6B62);font-variant-numeric:tabular-nums}
.bd-facet-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--neutral-dark, #5C6B62);margin-top:8px}
/* 210px min → 4-col at desktop widths like the prototype (240 gave 3-col at 1440) */
.brxe-div.bd-archive-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
/* prototype .wrap is 1280px; Bricks fixes .brxe-container at width:1100px (so max-width is
   ineffective) — that leaves the main col too narrow for 4 grid tracks */
.post-type-archive-integration .brxe-container:has(.bd-archive-layout){width:min(1280px,100%)}
.bd-archive-item{display:flex;min-width:0}
.bd-archive-item .bd-card{flex:1}
@media (max-width:900px){.bd-archive-layout{flex-direction:column}.bd-archive-side{position:static;flex-basis:auto;width:100%}}

/* ---- archive: prototype parity for Bricks filter elements (scoped to archive body class) ---- */
/* padding-top 0 so the full-bleed hero touches the header like the prototype */
.post-type-archive-integration #brx-content>.brxe-section{background:#F5F5F5;padding-top:0}
/* ---- hero band (prototype .hero) — full-bleed white on the gray ground ---- */
.bd-archive-hero{
  /* explicit 100vw + max-width:none: Bricks sets max-width:100%, which clamps the
     full-bleed band back to the container width */
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);padding:48px 32px 40px;text-align:center;
  background:var(--white,#fff);border-bottom:1px solid var(--neutral-light,#E2E4E1)}
.bd-hero-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--neutral-dark,#5C6B62);font-weight:600;margin:0}
.bd-archive-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.2;margin:14px auto 0;max-width:16ch}
.bd-hero-sub{color:var(--base-dark,#2B3B32);max-width:58ch;margin:16px auto 0;font-size:16px;line-height:1.6}
.bd-hero-search{max-width:560px;width:100%;margin:30px auto 0}
.bd-hero-search input{text-align:left}

/* ---- type pills (prototype .typebar/.pills) — Bricks filter-radio in button mode ---- */
.bd-type-pills{
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);padding:12px 32px;
  border-bottom:1px solid var(--neutral-light,#E2E4E1)}
/* the ul IS the button-mode wrapper and computes display:block — flex must be set here */
.bd-type-pills ul.brxe-filter-radio{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}
/* Bricks gives each option li full width, which wraps every pill onto its own row */
.bd-type-pills .brxe-filter-radio li{width:auto;flex:0 0 auto}
.bd-type-pills .brxe-filter-radio label{padding:0;margin:0;background:none}
.bd-type-pills .brxe-filter-radio label:hover{background:none}
.bd-type-pills .brx-option-text{
  flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 15px;border:1px solid var(--neutral-light,#CFD4CE);border-radius:5px;
  background:var(--white,#fff);color:var(--base-dark,#2B3B32);font-size:14px;
  cursor:pointer;transition:.15s}
.bd-type-pills .brx-option-text:hover{border-color:var(--base-dark,#2B3B32)}
.bd-type-pills input:checked+.brx-option-text{background:#224035;border-color:#224035;color:#fff;font-weight:500}
.bd-type-pills .brx-option-count{
  margin-left:0;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:var(--neutral-ultra-light,#EDEFEC);color:var(--neutral-dark,#5C6B62)}
.bd-type-pills input:checked+.brx-option-text .brx-option-count{background:rgba(255,255,255,.18);color:#fff}

/* facet show-more (prototype .facet .more) */
.post-type-archive-integration .brx-show-more-less-button{
  border:0;background:transparent;color:var(--action,#224035);font:inherit;font-size:13px;
  font-weight:500;cursor:pointer;padding:5px 8px;margin-left:-8px;border-radius:5px;
  text-decoration:underline;text-underline-offset:3px}
.post-type-archive-integration .brx-show-more-less-button:hover{background:var(--neutral-ultra-light,#EDEFEC)}

/* toolbar heading (prototype .toolbar h2) — h2 left, count+sort pushed right */
.bd-archive-h2{font-size:20px;line-height:1.2;font-weight:600;margin:0 auto 0 0}
.bd-archive-layout{margin-top:36px}

/* search field (prototype #q) */
.post-type-archive-integration .brxe-filter-search input{
  width:100%;padding:11px 14px;border:1px solid var(--neutral-light,#CFD4CE);
  border-radius:var(--radius-m,11px);background:var(--white,#fff);color:inherit;
  font:inherit;font-size:14px;box-shadow:0 1px 2px rgba(34,64,53,.06)}
.post-type-archive-integration .brxe-filter-search input::placeholder{color:var(--neutral-dark,#5C6B62)}
.post-type-archive-integration .brxe-filter-search input:focus{
  outline:none;border-color:#7BA983;box-shadow:0 0 0 3px rgba(123,169,131,.28)}

/* empty facet (e.g. vendor: taxonomy has no terms until the Notion vendor source lands):
   hide the bare ul and its preceding label; both reappear automatically once terms exist */
.bd-archive-side ul.brxe-filter-checkbox:empty,
.bd-archive-side .bd-facet-label:has(+ ul.brxe-filter-checkbox:empty){display:none}

/* facet lists (prototype .opt rows) — scoped to the sidebar: unscoped, the
   flex-direction:column here overrides the pills' row layout (same specificity, later) */
.bd-archive-side ul.brxe-filter-checkbox,
.bd-archive-side ul.brxe-filter-radio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.bd-archive-side .brxe-filter-checkbox label,
.bd-archive-side .brxe-filter-radio label{
  display:flex;align-items:center;gap:9px;padding:5px 8px;margin-left:-8px;border-radius:5px;
  font-size:14px;color:var(--base-dark,#2B3B32);cursor:pointer;transition:.12s}
.bd-archive-side .brxe-filter-checkbox label:hover,
.bd-archive-side .brxe-filter-radio label:hover{background:var(--neutral-ultra-light,#EDEFEC)}
/* zero-count options: hidden like the prototype (QA-3) — also hides options that
   zero out during filtering; real fix is hide-empty config / orphan-term cleanup */
.post-type-archive-integration label.brx-option-disabled{display:none}
.post-type-archive-integration .brx-input-indicator{
  flex:0 0 15px;width:15px;height:15px;border:1.5px solid var(--neutral-light,#CFD4CE);
  border-radius:3px;background:var(--white,#fff);position:relative;transition:.12s}
.post-type-archive-integration input:checked+.brx-input-indicator{background:#224035;border-color:#224035}
.post-type-archive-integration input:checked+.brx-input-indicator::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* scoped to the sidebar: unscoped these also hit the type pills and stretch them full-width */
.bd-archive-side .brx-option-text{
  flex:1;display:flex;align-items:baseline;gap:6px;min-width:0}
.bd-archive-side .brx-option-count{
  margin-left:auto;font-size:11px;color:var(--neutral-dark,#5C6B62);font-variant-numeric:tabular-nums}

/* sort select (prototype select#sort) — explicit longhands: something upstream tiles the
   Bricks select-arrow gradients when only the shorthand is set */
.post-type-archive-integration select.brxe-filter-select{
  -webkit-appearance:none;appearance:none;
  font:inherit;font-size:13px;padding:7px 28px 7px 10px;
  border:1px solid var(--neutral-light,#CFD4CE);border-radius:5px;color:inherit;cursor:pointer;
  width:auto;max-width:200px;flex:0 0 auto;
  background-color:var(--white,#fff);
  background-image:linear-gradient(45deg,transparent 50%,#5C6B62 0),linear-gradient(135deg,#5C6B62 50%,transparent 0);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-repeat:no-repeat;
  background-size:4px 4px}

/* active-filter chips (prototype .chip) */
.post-type-archive-integration ul.brxe-filter-active-filters{
  list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.post-type-archive-integration .brxe-filter-active-filters li{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:5px;font-size:13px;
  background:var(--neutral-ultra-light,#EDEFEC);color:var(--base-dark,#2B3B32);
  border:1px solid var(--neutral-light,#CFD4CE);cursor:pointer}

/* Single-template styles moved to css/integration-single.css
   (enqueued on is_singular('integration') in functions.php — this file only
   loads when the card element renders, which singles don't guarantee). */