/* =========================================================================
   GSS Listings — Finder (search + filter) + brand card grid
   Scoped to body.gss-listings (the Posts index #37 and Stories page #11).
   Dark Codex palette; tokens defined locally because gss-codex.css /
   gss-services.css are NOT enqueued on these pages.
   ========================================================================= */

body.gss-listings{
  --gsd-bg:#0A0D0B; --gsd-surface:#10140F; --gsd-surface-2:#161A14; --gsd-surface-3:#1C211A;
  --gsd-fg:#E8E5D9; --gsd-fg-soft:#B5B3A8; --gsd-fg-muted:#9A988C; --gsd-fg-faint:#85847A;
  --gsd-line:rgba(232,230,223,0.08); --gsd-line-strong:rgba(232,230,223,0.16); --gsd-line-faint:rgba(232,230,223,0.04);
  --gsd-green:#5DC97B; --gsd-green-wash:rgba(93,201,123,0.10); --gsd-green-wash-hi:rgba(93,201,123,0.18);
  --gsd-teal:#4FB0BD;
  --gsd-brand:#047122; --gsd-brand-hover:#059130;
  --gsd-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gsd-ease:cubic-bezier(0.22,0.61,0.36,1); --gsd-dur:200ms; --gsd-radius:2px;
  --gss-accent:var(--gsd-green); --gss-accent-wash:var(--gsd-green-wash);
}

/* ---- no-FOUC grid swap: hide the theme/plugin grid once JS confirms, show ours ---- */
.gss-finder-grid{ display:none; }
.gss-js body.gss-listings .archive-holder,
.gss-js body.gss-listings .wpnawfree-plugin{ display:none !important; }
.gss-js body.gss-listings .gss-finder-grid{ display:grid; }
/* the Posts-index pagination (.pagination-standard) lives OUTSIDE .archive-holder,
   so hide it too once our JS grid (with its own Load more) takes over. */
.gss-js body.gss-listings--posts .pagination-standard,
.gss-js body.gss-listings--posts .site-main > .pagination{ display:none !important; }
/* if JS errors it removes .gss-js (see gss-finder.js catch) -> server grid returns */

/* =========================================================================
   FINDER shell
   ========================================================================= */
.gss-finder{
  box-sizing:border-box;
  width:100%; max-width:none; margin:8px auto 0; padding:0 clamp(16px,3vw,40px);
  font-family:inherit; scroll-margin-top:120px;
}
/* Full width on both pages (owner preference). The news page sits inside a full-width
   Elementor section whose 50px side padding would otherwise make its grid ~100px
   narrower than the posts index; cancel that padding so both span the same width. */
.gss-listings--news .elementor-element.elementor-top-section{ padding-left:0 !important; padding-right:0 !important; }
/* News page lives inside a full-width Elementor section (50px side padding). Keep the
   SAME max-width as the posts index so both card grids are identical; the section's own
   padding only matters at narrow widths. (Previously max-width:none here, which let the
   stories grid stretch to ~1788px vs the posts grid's 1200px.) */
/* no-JS fallback only: the bar renders above the padded content wrapper, so give it
   room to clear the fixed header. With JS, the bar is relocated into the padded
   content (gss-finder.js) and this rule no longer applies. */
body.gss-listings--posts:not(.gss-js) .gss-finder{ margin-top:120px; }
.gss-finder *,.gss-finder *::before,.gss-finder *::after{ box-sizing:border-box; }

.gss-finder-eyebrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gsd-fg-faint); margin-bottom:12px;
}
.gss-finder-count{ color:var(--gss-accent); }

/* ---- search field ---- */
.gss-finder-search{
  display:flex; align-items:center; gap:10px;
  background:var(--gsd-surface); border:1px solid var(--gsd-line-strong);
  border-radius:var(--gsd-radius); padding:6px 6px 6px 16px;
  transition:border-color var(--gsd-dur) var(--gsd-ease), box-shadow var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-search:focus-within{ border-color:var(--gss-accent); box-shadow:0 0 0 3px var(--gss-accent-wash); }
.gss-finder-ico{ display:inline-flex; color:var(--gsd-fg-faint); flex:0 0 auto; }
.gss-finder-search:focus-within .gss-finder-ico{ color:var(--gss-accent); }
.gss-finder-input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0;
  color:var(--gsd-fg); font-size:15.5px; font-family:inherit; padding:11px 0; letter-spacing:0.01em;
}
.gss-finder-input::placeholder{ color:var(--gsd-fg-faint); }
.gss-finder-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.gss-finder-submit{
  flex:0 0 auto; cursor:pointer; border:0; border-radius:var(--gsd-radius);
  background:var(--gsd-brand); color:#fff; font-family:var(--gsd-mono); font-weight:600;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:11px 20px;
  transition:background var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-submit:hover{ background:var(--gsd-brand-hover); }
/* live-filter makes the submit redundant with JS; default visible for no-JS fallback.
   NB: gss-js lives on <html>, so the hide selector must be .gss-js (documentElement). */
.gss-js .gss-finder-submit{ display:none; }

/* ---- chips ---- */
.gss-finder-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.gss-fchip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; text-decoration:none;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gsd-fg-soft); background:transparent;
  border:1px solid var(--gsd-line); border-radius:var(--gsd-radius); padding:7px 13px;
  transition:background var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease);
}
.gss-fchip:hover{ border-color:var(--gsd-line-strong); color:var(--gsd-fg); }
.gss-fchip b{ font-weight:600; color:var(--gsd-teal); }
.gss-fchip.is-active{ background:var(--gss-accent-wash); border-color:var(--gss-accent); color:var(--gsd-fg); }
.gss-fchip.is-active b{ color:var(--gss-accent); }

/* ---- status line ---- */
.gss-finder-status{
  margin-top:18px; min-height:1em; font-family:var(--gsd-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--gsd-fg-faint);
}
.gss-finder-status mark{ background:none; color:var(--gss-accent); }

/* =========================================================================
   RESULTS grid + cards  (mirrors .gss-story-card)
   ========================================================================= */
.gss-finder-grid{
  grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px;
}
.gss-fcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--gsd-surface); border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius); overflow:hidden;
  transition:border-color var(--gsd-dur) var(--gsd-ease), transform var(--gsd-dur) var(--gsd-ease);
}
.gss-fcard:hover{ border-color:var(--gss-accent); transform:translateY(-2px); text-decoration:none; }
.gss-fc-img{ position:relative; display:block; aspect-ratio:8/5; overflow:hidden; background:var(--gsd-surface-2); }
.gss-fc-img img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92); transition:transform 420ms var(--gsd-ease); }
.gss-fcard:hover .gss-fc-img img{ transform:scale(1.04); }
.gss-fc-img--empty{ display:grid; place-items:center; }
.gss-fc-img--empty::after{ content:""; width:40px; height:40px; border:1px solid var(--gsd-line-strong); border-radius:50%; opacity:0.5; }
.gss-fc-cat{
  position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px);
  font-family:var(--gsd-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gsd-fg); background:rgba(10,13,11,0.84); padding:4px 9px; border-radius:var(--gsd-radius);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gss-fc-body{ display:flex; flex-direction:column; gap:9px; padding:17px 19px 19px; flex:1; }
.gss-fc-meta{ font-family:var(--gsd-mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gsd-fg-faint); }
.gss-fc-meta .dot{ margin:0 6px; opacity:0.6; }
.gss-fc-title{ font-size:16.5px; line-height:1.32; font-weight:700; color:var(--gsd-fg); margin:0; letter-spacing:-0.01em; }
.gss-fc-ex{
  font-size:13px; line-height:1.6; color:var(--gsd-fg-muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.gss-fc-arr{
  margin-top:auto; padding-top:4px; font-family:var(--gsd-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--gss-accent);
  display:inline-flex; align-items:center; gap:7px;
}
.gss-fc-arr .x{ transition:transform var(--gsd-dur) var(--gsd-ease); }
.gss-fcard:hover .gss-fc-arr .x{ transform:translateX(4px); }

/* highlight matched query text */
.gss-fc-title mark,.gss-fc-ex mark{ background:var(--gss-accent-wash); color:var(--gsd-fg); padding:0 2px; border-radius:2px; }

/* ---- empty state ---- */
.gss-finder-empty{
  grid-column:1 / -1; text-align:center; padding:56px 20px;
  border:1px dashed var(--gsd-line-strong); border-radius:var(--gsd-radius); background:var(--gsd-surface);
}
.gss-finder-empty h3{ margin:0 0 8px; font-size:18px; color:var(--gsd-fg); }
.gss-finder-empty p{ margin:0 0 18px; color:var(--gsd-fg-muted); font-size:14px; }
.gss-finder-empty button{
  cursor:pointer; background:transparent; color:var(--gss-accent);
  border:1px solid var(--gss-accent); border-radius:var(--gsd-radius);
  font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:10px 18px;
  transition:background var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-empty button:hover{ background:var(--gss-accent-wash); }

/* ---- load more ---- */
.gss-finder-more{
  display:block; margin:26px auto 0; cursor:pointer; background:transparent; color:var(--gsd-fg);
  border:1px solid var(--gsd-line-strong); border-radius:var(--gsd-radius);
  font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:12px 26px;
  transition:border-color var(--gsd-dur) var(--gsd-ease), color var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-more:hover{ border-color:var(--gss-accent); color:var(--gss-accent); }
.gss-finder-more[hidden]{ display:none; }

/* ---- focus-visible (keyboard) ---- */
.gss-finder a:focus-visible,
.gss-finder button:focus-visible,
.gss-finder-input:focus-visible{
  outline:2px solid var(--gss-accent); outline-offset:3px; border-radius:var(--gsd-radius);
}

/* =========================================================================
   NO-JS fallback: the submit button keeps its natural display (button defaults),
   so no override needed — the .gss-js rule above hides it only when JS is active.
   ========================================================================= */
.gss-finder-grid:empty{ margin-top:0; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .gss-finder-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .gss-finder{ margin-top:4px; }
  .gss-finder-grid{ grid-template-columns:1fr; gap:14px; }
  .gss-finder-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:6px; margin-right:-16px; padding-right:16px; }
  .gss-fchip{ flex:0 0 auto; scroll-snap-align:start; }
  .gss-finder-search{ padding-left:14px; }
  /* >=16px avoids iOS zoom-on-focus. Needs [type=search] to outrank the theme's
     input[type=search] rule (which otherwise forces ~15.4px). */
  .gss-finder-input[type="search"]{ font-size:16px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .gss-fcard,.gss-fc-img img,.gss-fc-arr .x,.gss-fchip,.gss-finder-search{ transition:none; }
  .gss-fcard:hover{ transform:none; }
  .gss-fcard:hover .gss-fc-img img{ transform:none; }
}