/* Spidee marketing variant gallery — vanilla, no build step.
   Reuses the marketing site's CSS variables (--surface, --edge, --accent, ...)
   and browser-frame chrome (.frame, .frame-bar, ...) so it drops into index.html.
   Falls back to its own values when loaded standalone (preview.html). */
:root{
  --g-accent: var(--accent, #7c3aed);
  --g-heading: var(--heading, #09090b);
  --g-body: var(--body, #3f3f46);
  --g-muted: var(--muted, #71717a);
  --g-surface: var(--surface, #f9fafb);
  --g-edge: var(--edge, #e5e7eb);
  --g-edge2: var(--edge2, #d4d4d8);
  --g-bg: var(--bg, #ffffff);
}

/* ---- filter rows (market + industry) ---- */
.gal-filterbar{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto 32px; }
.gal-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.gal-filter-label{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--g-muted); margin-right:4px; }
.gal-chip{
  font-size:13px; font-weight:600; padding:7px 15px; border-radius:9999px; cursor:pointer;
  background:var(--g-bg); border:1px solid var(--g-edge); color:var(--g-body);
  transition:border-color .15s, color .15s, background .15s;
}
.gal-chip:hover{ border-color:var(--g-heading); color:var(--g-heading); }
.gal-chip[aria-pressed="true"]{ background:var(--g-heading); border-color:var(--g-heading); color:#fff; }

/* ---- grid + cards ---- */
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:24px; }
.gal-card{
  text-align:left; padding:0; cursor:pointer; overflow:hidden;
  background:var(--g-bg); border:1px solid var(--g-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;
  display:flex; flex-direction:column; width:100%; font-family:inherit;
}
.gal-card:hover{ transform:translateY(-4px); border-color:var(--g-accent); box-shadow:0 16px 40px rgba(124,58,237,0.12); }
.gal-card:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }
.gal-thumb-wrap{ position:relative; aspect-ratio:760/475; overflow:hidden; background:var(--g-surface); }
.gal-thumb{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.gal-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(255,255,255,0.94); color:var(--g-heading); padding:4px 9px; border-radius:9999px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.gal-flag{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  background:rgba(20,20,24,0.78); color:#fff; padding:4px 9px; border-radius:9999px;
}
.gal-foot{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gal-name{ font-size:15px; font-weight:700; color:var(--g-heading); line-height:1.3; }
.gal-meta{ display:block; font-size:12px; color:var(--g-muted); margin-top:2px; }
.gal-cta{ font-size:11px; font-weight:700; color:var(--g-accent); white-space:nowrap; }

/* ---- modal ---- */
.gal-modal[hidden]{ display:none; }
.gal-modal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,15,20,0.62); backdrop-filter:blur(3px);
}
.gal-dialog{
  width:100%; max-width:1100px; height:92vh; display:flex; flex-direction:column;
  background:#1e1e22; border-radius:14px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,0.5);
}
.gal-bar{ padding:9px 14px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #2a2a2e; }
.gal-dots{ display:flex; gap:5px; flex-shrink:0; }
.gal-dots span{ width:10px; height:10px; border-radius:50%; }
.gal-dots span:nth-child(1){ background:#ff5f57; } .gal-dots span:nth-child(2){ background:#febc2e; } .gal-dots span:nth-child(3){ background:#28c840; }
.gal-url{ font-size:11px; color:#9a9aa2; background:#2a2a2e; padding:4px 11px; border-radius:5px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; border:0; text-align:left; cursor:pointer; transition:background .15s, color .15s; }
.gal-url:hover{ background:#33333a; color:#cfcfd6; }
.gal-close{ flex-shrink:0; width:30px; height:30px; border:none; border-radius:7px; background:#2a2a2e; color:#bcbcc4; font-size:18px; line-height:1; cursor:pointer; transition:background .15s, color .15s; }
.gal-expand{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:none; border-radius:7px; background:#2a2a2e; color:#bcbcc4; font-size:12px; font-weight:700; font-family:inherit; line-height:1; cursor:pointer; transition:background .15s, color .15s; }
.gal-expand-ico{ width:14px; height:14px; }
.gal-expand:hover,
.gal-close:hover{ background:#3a3a40; color:#fff; }

/* design-variant selector: a clearly labelled strip under the browser bar */
.gal-selector{ display:flex; align-items:center; gap:12px; padding:11px 16px; background:#26262b; border-bottom:1px solid #34343a; }
.gal-selector-cap{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#85858f; flex-shrink:0; }
.gal-switch{ display:flex; gap:8px; flex-wrap:wrap; }
.gal-vbtn{ font-size:13px; font-weight:700; color:#d4d4db; background:#1e1e22; border:1px solid #3c3c44; cursor:pointer; padding:8px 16px; border-radius:9px; font-family:inherit; transition:border-color .15s, color .15s, background .15s; }
.gal-vbtn:hover{ border-color:#62626c; color:#fff; }
.gal-vbtn[aria-pressed="true"]{ background:#fff; color:#1e1e22; border-color:#fff; }
.gal-vbtn .star{ color:#f0a500; margin-left:5px; }
.gal-vbtn[aria-pressed="true"] .star{ color:#d98c00; }
.gal-vname{ font-size:13px; font-style:italic; color:#9a9aa2; margin-left:auto; flex-shrink:0; }
.gal-stage{ position:relative; flex:1; background:#fff; min-height:0; }
.gal-frame{ width:100%; height:100%; border:0; display:block; }
.gal-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9a9aa2; font-size:13px; background:#fff; }
.gal-loading[hidden]{ display:none; }

@media(max-width:640px){
  .gal-modal{ padding:0; }
  .gal-dialog{ max-width:100%; max-height:100%; height:100%; border-radius:0; }
  .gal-url{ display:none; }
  .gal-vname{ display:none; }
}
/* Very narrow phones: keep the icon, drop the label to save the bar's width. */
@media(max-width:380px){
  .gal-expand{ padding:0; width:30px; justify-content:center; }
  .gal-expand-label{ display:none; }
}