/* Spidee live-clients showcase — vanilla, no build step.
   Sister component to ../gallery/. Where the gallery shows the three *designs*
   we make, this shows real businesses we've taken *live*. Cards link straight
   out to the client's real domain (new tab). Reuses the marketing site's CSS
   variables (--accent, --surface, --edge, ...) and falls back to its own values
   when loaded standalone. Mounts into #spidee-clients. */
:root{
  --c-accent: var(--accent, #7c3aed);
  --c-heading: var(--heading, #09090b);
  --c-body: var(--body, #3f3f46);
  --c-muted: var(--muted, #71717a);
  --c-surface: var(--surface, #f9fafb);
  --c-edge: var(--edge, #e5e7eb);
  --c-bg: var(--bg, #ffffff);
}

/* ---- grid + cards ---- */
.cl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:24px; }
.cl-card{
  display:flex; flex-direction:column; width:100%; overflow:hidden; text-decoration:none;
  background:var(--c-bg); border:1px solid var(--c-edge); border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cl-card:hover{ transform:translateY(-4px); border-color:var(--c-accent); box-shadow:0 16px 40px rgba(0,0,0,0.12); }
.cl-card:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

.cl-thumb-wrap{ position:relative; aspect-ratio:1280/900; overflow:hidden; background:var(--c-surface); }
.cl-thumb{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.cl-live{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(255,255,255,0.94); color:var(--c-heading); padding:5px 10px; border-radius:9999px;
  box-shadow:0 2px 8px rgba(0,0,0,0.14);
}
.cl-live-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,0.6); animation:cl-pulse 2s ease-out infinite; }
@keyframes cl-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.55); } 70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.cl-flag{
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  background:rgba(20,20,24,0.78); color:#fff; padding:5px 10px; border-radius:9999px;
}

.cl-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cl-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cl-name{ font-size:17px; font-weight:700; color:var(--c-heading); line-height:1.3; }
.cl-meta{ display:block; font-size:12px; color:var(--c-muted); margin-top:3px; }
.cl-quote{ font-size:13.5px; color:var(--c-body); line-height:1.6; margin:0; }
.cl-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
.cl-domain{ font-size:12px; color:var(--c-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cl-cta{ font-size:12px; font-weight:700; color:var(--c-accent); white-space:nowrap; flex-shrink:0; }

@media(max-width:520px){
  .cl-body{ padding:16px 16px 18px; }
  .cl-name{ font-size:16px; }
}